[Picfinity-commit] SF.net SVN: picfinity: [7] .themes/ajax

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

Revision: 7
          http://picfinity.svn.sourceforge.net/picfinity/?rev=7&view=rev
Author:   espadav8
Date:     2007-07-18 11:15:33 -0700 (Wed, 18 Jul 2007)

Log Message:
-----------
Initial support for Konqueror, and hopefully Safari with this commit now, as well as some changes towards IE support

 - Update some functions
 - Add a few hacks for Konqueror (and possibly Safari) (seems to replace <image> tags from the XML with <img> tags)
 - Change the element.setAttribute("onclick", ...) to element.onclick = function() { ... } should be a bit nicer for IE
 - Add alt tags to the images from the XSLT file (still needs to be done from the JS)

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

Modified: .themes/ajax/ajax.js
===================================================================
--- .themes/ajax/ajax.js	2007-07-18 17:12:03 UTC (rev 6)
+++ .themes/ajax/ajax.js	2007-07-18 18:15:33 UTC (rev 7)
@@ -37,25 +37,26 @@
 
 function getChildNodesByTagName(element, tagName)
 {
-    var result = Array();
-    
-    if(!element.hasChildNodes()) {
-        return result;
-    }
-    
-    var i;
-    var lowerTagName = tagName.toLowerCase();
-    
-    for(i = 0; i < element.childNodes.length; i++)
-    {
-        if (element.childNodes[i].nodeName.toLowerCase() != lowerTagName) {
-            continue;
-        }
-        
-        result.push(element.childNodes[i]);
-    }
-    
-    return result;
+	var result = Array();
+
+	if(!element.hasChildNodes()) {
+		return result;
+	}
+
+	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
+		if ((element.childNodes[i].nodeName == tagName) ||
+			(tagName == "image" && element.childNodes[i].nodeName == "img"))
+		{
+			result.push(element.childNodes[i]);
+		}
+	}
+	return result;
 }
 
 function getNodePath(element, nodePath)
@@ -181,12 +182,12 @@
 {
 	var nodePath = getNodePath(getLayoutNode(imageNode), '');
 	
-	var classes = (optClass == null) ? "thumbnail" : "thumbnail " + optClass;
+	var classes = (optClass == undefined) ? "thumbnail" : "thumbnail " + optClass;
 	
 	var albumImageDiv = document.createElement("div");
 	albumImageDiv.setAttribute("class", classes);
 	albumImageDiv.setAttribute("id", imageNode.getAttribute("id"));
-	albumImageDiv.setAttribute("onclick", "showImage(this)");
+	albumImageDiv.onclick = function() { showImage(albumImageDiv) };
 	
 	var imageSpan = document.createElement("span");
 	imageSpan.setAttribute("class", "image");
@@ -215,8 +216,11 @@
 	var subFolder = document.createElement("div");
 	subFolder.setAttribute("class", "folder");
 	subFolder.setAttribute("id", folderNode.getAttribute("id"));
-	subFolder.setAttribute("onclick", "openFolder(this)");
 	
+	// this should allow it to work in IE but makes it harder to follow
+	// in things like FireBug since you can't see the onclick for the divs
+	subFolder.onclick = function() { openFolder(subFolder) };
+	
 	// create a span for the image
 	var folderImageSpan = document.createElement("span");
 	folderImageSpan.setAttribute("class", "image");
@@ -259,7 +263,10 @@
 	
 	var expandedImageDiv = document.createElement("div");
 	expandedImageDiv.setAttribute("id", "expandedimage");
-	expandedImageDiv.setAttribute("onclick", "closeImage(this, '" + imageNode.getAttribute("id") + "')");
+	
+	// this should allow it to work in IE but makes it harder to follow
+	// in things like FireBug since you can't see the onclick for the divs
+	expandedImageDiv.onclick = function() { closeImage(expandedImageDiv, imageNode.getAttribute("id")) };
 	expandedImageDiv.style.width = "200px";
 	expandedImageDiv.style.height = "43px";
 	
@@ -352,54 +359,8 @@
 		// these will all be hidden until the :hover
 		if (node.nodeName == "folder")
 		{
-		
-			var dropMenuLi = document.createElement("li");
-			dropMenuLi.setAttribute("id", node.getAttribute("id"));
-
-			if (node.hasChildNodes())
-			{
-				dropMenuLi.setAttribute("onclick", "openFolder(this)");
-				
-				// create a span for the folder icon
-				var iconSpan = document.createElement("span");
-				iconSpan.setAttribute("class", "icon");
-				
-				// create the icon image
-				var iconImage = document.createElement("img");					
-				iconImage.setAttribute("src", ".themes/ajax/foldericon.png");
-				iconSpan.appendChild(iconImage);
-				dropMenuLi.appendChild(iconSpan);
-			}
-			else
-			{
-				dropMenuLi.setAttribute("class", "folder empty");
-				
-				// create a span for the folder icon
-				var iconSpan = document.createElement("span");
-				iconSpan.setAttribute("class", "icon");
-				
-				// create the icon image
-				var iconImage = document.createElement("img");					
-				iconImage.setAttribute("src", ".themes/ajax/emptyicon.png");
-				iconSpan.appendChild(iconImage);
-				dropMenuLi.appendChild(iconSpan);
-			}
-			
-			// we do this so we can show the user the currently selected folder in the drop down
-			if (node.getAttribute("name") == currentFolder)
-			{
-				dropMenuLi.setAttribute("class", "menuentry selected");
-			}
-			else
-			{
-				dropMenuLi.setAttribute("class", "menuentry");
-			}
-			var nameSpan = document.createElement("span");
-			nameSpan.setAttribute("class", "name");
-			nameSpan.appendChild(document.createTextNode(node.getAttribute("name")));
-			dropMenuLi.appendChild(nameSpan);
-			
-			dropMenu.appendChild(dropMenuLi);
+			var dropMenuItem = createBreadcrumbItem(node, currentFolder);
+			dropMenu.appendChild(dropMenuItem);
 		}
 		
 		// this is for the current folder
@@ -417,7 +378,6 @@
 			var iconImage = document.createElement("img");					
 			iconImage.setAttribute("src", ".themes/ajax/foldericon.png");
 			iconSpan.appendChild(iconImage);
-			dropMenuLi.appendChild(iconSpan);
 
 			menuLi.insertBefore(nameSpan, menuLi.firstChild);
 			menuLi.insertBefore(iconSpan, menuLi.firstChild);
@@ -429,6 +389,58 @@
 	return breadcrumbEntry;
 }
 
+function createBreadcrumbItem(node, currentFolder)
+{
+	var dropMenuItem = document.createElement("li");
+	dropMenuItem.setAttribute("id", node.getAttribute("id"));
+	
+	if (node.hasChildNodes())
+	{
+		dropMenuItem.onclick = function() { openFolder(dropMenuItem) };
+		
+		// create a span for the folder icon
+		var iconSpan = document.createElement("span");
+		iconSpan.setAttribute("class", "icon");
+		
+		// create the icon image
+		var iconImage = document.createElement("img");					
+		iconImage.setAttribute("src", ".themes/ajax/foldericon.png");
+		iconSpan.appendChild(iconImage);
+		dropMenuItem.appendChild(iconSpan);
+	}
+	else
+	{
+		dropMenuItem.setAttribute("class", "folder empty");
+		
+		// create a span for the folder icon
+		var iconSpan = document.createElement("span");
+		iconSpan.setAttribute("class", "icon");
+		
+		// create the icon image
+		var iconImage = document.createElement("img");					
+		iconImage.setAttribute("src", ".themes/ajax/emptyicon.png");
+		iconSpan.appendChild(iconImage);
+		dropMenuItem.appendChild(iconSpan);
+	}
+	
+	// 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");
+	}
+	else
+	{
+		dropMenuItem.setAttribute("class", "menuentry");
+	}
+	
+	var nameSpan = document.createElement("span");
+	nameSpan.setAttribute("class", "name");
+	nameSpan.appendChild(document.createTextNode(node.getAttribute("name")));
+	dropMenuItem.appendChild(nameSpan);
+	
+	return dropMenuItem;
+}
+
 function selectLayoutNodeFromPath(path, node)
 {
 	node = (node == undefined) ? xmlDoc.documentElement : node;
@@ -436,18 +448,15 @@
 	
 	if(path == "./")
 	{
-		// alert("returning documentElement");
 		return xmlDoc.documentElement;
 	}
 	else if (path != '')
 	{
-		// alert(path);
 		path = (path.indexOf("./") == 0) ? path.substring(2) : path;
 		
 		var currentPath = path.split('/')[0];
 		
 		if (document.createTreeWalker) {
-			// alert("01\n" + node.nodeName);
 			var nodes = document.createTreeWalker(node, NodeFilter.SHOW_ELEMENT, null, false);
 			
 			while ((selectedNode = nodes.nextNode()) != null)
@@ -479,7 +488,8 @@
 	
 	for (var i = 0; i < siblingNodes.length; i++)
 	{
-		if (siblingNodes[i].nodeName == "image")
+		if ((siblingNodes[i].nodeName == "image") ||
+			(siblingNodes[i].nodeName == "img"))
 		{
 			if (siblingNodes[i].getAttribute("id") == element.getAttribute("id"))
 			{

Modified: .themes/ajax/ajax.xsl
===================================================================
--- .themes/ajax/ajax.xsl	2007-07-18 17:12:03 UTC (rev 6)
+++ .themes/ajax/ajax.xsl	2007-07-18 18:15:33 UTC (rev 7)
@@ -61,19 +61,20 @@
 				<xsl:choose>
 					<xsl:when test="count(image) > 0">
 						<img>
-							<xsl:attribute name="src">
-								<xsl:value-of select="concat('.thumbs/' , @name, '/', image[1]/@file)" />
-							</xsl:attribute>
+							<xsl:attribute name="src"><xsl:value-of select="concat('.thumbs/' , @name, '/', image[1]/@file)" /></xsl:attribute>
+							<xsl:attribute name="alt"><xsl:value-of select="@file" /></xsl:attribute>
 						</img>
 					</xsl:when>
 					<xsl:when test="count(folder) > 0">
 						<img>
 							<xsl:attribute name="src"><xsl:value-of select="concat('.themes/', $themename, '/folder.png')" /></xsl:attribute>
+							<xsl:attribute name="alt">Image Folder</xsl:attribute>
 						</img>
 					</xsl:when>
 					<xsl:otherwise>
 						<img>
 							<xsl:attribute name="src"><xsl:value-of select="concat('.themes/', $themename, '/empty.png')" /></xsl:attribute>
+							<xsl:attribute name="alt">Empty Folder</xsl:attribute>
 						</img>
 					</xsl:otherwise>
 				</xsl:choose>
@@ -81,9 +82,8 @@
 			<xsl:if test="count(image) > 0">
 				<span class="icon">
 					<img>
-						<xsl:attribute name="src">
-							<xsl:value-of select="concat('.themes/', $themename, '/foldericon.png')" />
-						</xsl:attribute>
+						<xsl:attribute name="src"><xsl:value-of select="concat('.themes/', $themename, '/foldericon.png')" /></xsl:attribute>
+						<xsl:attribute name="alt">Folder Icon</xsl:attribute>
 					</img>
 				</span>
 			</xsl:if>


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