[Picfinity-commit] SF.net SVN: picfinity: [37] trunk/.themes/ajax/ajax.js

[<esp...@us...>]

Revision: 37
          http://picfinity.svn.sourceforge.net/picfinity/?rev=37&view=rev
Author:   espadav8
Date:     2007-08-14 09:10:39 -0700 (Tue, 14 Aug 2007)

Log Message:
-----------
Convert all element.setAttribute("class", ...) to element.className = ... for IE
Add a different way to load the XML (windows.XMLHttpRequest) This enables Safari to work
Change the way selectLayoutNodeFromPath so it works without the need for a treewalker

With these changes the ajax theme now works in Safari and almost completely in IE. IE7 works, but the dropdowns are mis-aligned, IE6 doesn't like 
the dropdowns at all.

Modified Paths:
--------------
    trunk/.themes/ajax/ajax.js

Modified: trunk/.themes/ajax/ajax.js
===================================================================
--- trunk/.themes/ajax/ajax.js	2007-08-14 00:52:28 UTC (rev 36)
+++ trunk/.themes/ajax/ajax.js	2007-08-14 16:10:39 UTC (rev 37)
@@ -4,8 +4,20 @@
 
 function importLayout()
 {
-	if (document.implementation && document.implementation.createDocument)
+	if (window.XMLHttpRequest)
 	{
+		var xmlHttp = new XMLHttpRequest();
+		xmlHttp.onreadystatechange = function() {
+			if (xmlHttp.readyState == 4)
+			{
+				xmlDoc = xmlHttp.responseXML;
+			}
+		}
+		xmlHttp.open("GET", "gallery.xml", true);
+		xmlHttp.send(null)
+	}
+	else if (document.implementation && document.implementation.createDocument)
+	{
 		xmlDoc = document.implementation.createDocument("", "layout", null);
 		xmlDoc.load("gallery.xml");
 	}
@@ -133,8 +145,6 @@
 
 	for(var i = 0; i < element.childNodes.length; i++)
 	{
-		// if (tagName == "image") alert(element.childNodes[i].nodeName + '\n' + tagName);
-		
 		// this hack is for Konqueror (and possibly Safari)
 		// for some reason the <image> tags are replaced
 		// with <img> tags
@@ -235,7 +245,7 @@
 	var classes = (optClass == undefined) ? "thumbnail" : "thumbnail " + optClass;
 	
 	var albumImageDiv = document.createElement("div");
-	albumImageDiv.setAttribute("class", classes);
+	albumImageDiv.className = classes;
 	albumImageDiv.setAttribute("id", imageNodeID);
 	
 	var imageAnchor = document.createElement("a");
@@ -243,7 +253,7 @@
 	imageAnchor.onclick = function() { showImage(imageNodeID); return false; };
 	
 	var imageSpan = document.createElement("span");
-	imageSpan.setAttribute("class", "image");
+	imageSpan.className =  "image";
 	
 	var albumImage = document.createElement("img");
 	var imageThumbPath = '.thumbs/' + nodePath  + '/' + imageNode.getAttribute("file");
@@ -251,7 +261,7 @@
 	imageAnchor.appendChild(albumImage);
 	
 	var imageNameSpan = document.createElement("span");
-	imageNameSpan.setAttribute("class", "name");
+	imageNameSpan.className = "name";
 	imageNameSpan.appendChild(document.createTextNode(imageNode.getAttribute("file")));
 	
 	imageSpan.appendChild(imageAnchor)
@@ -268,7 +278,7 @@
 	
 	// create the main folder div
 	var subFolder = document.createElement("div");
-	subFolder.setAttribute("class", "folder");
+	subFolder.className = "folder";
 	subFolder.setAttribute("id", folderID);
 	
 	var folderAnchor = document.createElement("a");
@@ -280,7 +290,7 @@
 	
 	// create a span for the image
 	var folderImageSpan = document.createElement("span");
-	folderImageSpan.setAttribute("class", "image");
+	folderImageSpan.className = "image";
 	
 	// create the image
 	var folderImage = document.createElement("img");
@@ -291,7 +301,7 @@
 	
 	// create a span for the folder icon
 	var iconSpan = document.createElement("span");
-	iconSpan.setAttribute("class", "icon");
+	iconSpan.className = "icon";
 	
 	// create the icon image
 	var iconImage = document.createElement("img");					
@@ -300,7 +310,7 @@
 	
 	// create a span for the text
 	var textSpan = document.createElement("span");
-	textSpan.setAttribute("class", "name");
+	textSpan.className = "name";
 	
 	// create the text
 	var textContents = folderNode.getAttribute("name");
@@ -362,7 +372,7 @@
 	imageSpan.appendChild(imageAnchor);
 	
 	var imageNameSpan = document.createElement("span");
-	imageNameSpan.setAttribute("class", "name");
+	imageNameSpan.className = "name";
 	imageNameSpan.appendChild(document.createTextNode(imageNode.getAttribute("file")));
 	
 	var expandedImage = new Image();
@@ -418,10 +428,10 @@
 function createBreadcrumbMenu(path, currentFolder)
 {
 	var breadcrumbEntry = document.createElement("ul");
-	breadcrumbEntry.setAttribute("class", "trailentry");
+	breadcrumbEntry.className = "trailentry";
 	
 	var menuLi = document.createElement("li");
-	menuLi.setAttribute("class", "currentfolder");
+	menuLi.className = "currentfolder";
 	
 	var dropMenu = document.createElement("ul");
 	menuLi.appendChild(dropMenu);
@@ -443,12 +453,12 @@
 		if ((node.nodeName == "folder") && (node.getAttribute("name") == currentFolder))
 		{
 			var nameSpan = document.createElement("span");
-			nameSpan.setAttribute("class", "name");
+			nameSpan.className = "name";
 			nameSpan.appendChild(document.createTextNode(node.getAttribute("name")));
 			
 			// create a span for the folder icon
 			var iconSpan = document.createElement("span");
-			iconSpan.setAttribute("class", "icon");
+			iconSpan.className = "icon";
 			
 			// create the icon image
 			var iconImage = document.createElement("img");					
@@ -476,7 +486,7 @@
 		
 		// create a span for the folder icon
 		var iconSpan = document.createElement("span");
-		iconSpan.setAttribute("class", "icon");
+		iconSpan.className = "icon";
 		
 		// create the icon image
 		var iconImage = document.createElement("img");					
@@ -490,7 +500,7 @@
 		
 		// create a span for the folder icon
 		var iconSpan = document.createElement("span");
-		iconSpan.setAttribute("class", "icon");
+		iconSpan.className = "icon";
 		
 		// create the icon image
 		var iconImage = document.createElement("img");					
@@ -502,15 +512,15 @@
 	// we do this so we can show the user the currently selected folder in the drop down
 	if (node.getAttribute("name") == currentFolder)
 	{
-		dropMenuItem.setAttribute("class", "menuentry selected");
+		dropMenuItem.className = "menuentry selected";
 	}
 	else
 	{
-		dropMenuItem.setAttribute("class", "menuentry");
+		dropMenuItem.className = "menuentry";
 	}
 	
 	var nameSpan = document.createElement("span");
-	nameSpan.setAttribute("class", "name");
+	nameSpan.className = "name";
 	nameSpan.appendChild(document.createTextNode(node.getAttribute("name")));
 	dropMenuItem.appendChild(nameSpan);
 	
@@ -528,25 +538,19 @@
 	else if (path != '')
 	{
 		path = (path.indexOf("./") == 0) ? path.substring(2) : path;
-		
 		var currentPath = path.split('/')[0];
+		var nodes = getChildNodesByTagName(node, "folder");
 		
-		// FIXME: doesn't work with IE or Safari
-		if (document.createTreeWalker)
+		for (var i = 0; i < nodes.length; i++)
 		{
-			var nodes = document.createTreeWalker(node, NodeFilter.SHOW_ELEMENT, null, false);
-			
-			while ((selectedNode = nodes.nextNode()) != null)
+			if ((nodes[i].getAttribute("name") == currentPath))
 			{
-				if ((selectedNode.nodeName == "folder") && (selectedNode.getAttribute("name") == currentPath))
-				{
-					return selectLayoutNodeFromPath(path.replace(currentPath + '/', ''), selectedNode);
-				}
-				else
-				{
-					continue;
-				}
+				return selectLayoutNodeFromPath(path.replace(currentPath + '/', ''), nodes[i]);
 			}
+			else
+			{
+				continue;
+			}
 		}
 	}
 	else


This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site.