picfinity-commit

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

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

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

Log Message:
-----------
Add a folder icon to the breadcrumb trail

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

Modified: .themes/ajax/ajax.css
===================================================================
--- .themes/ajax/ajax.css	2007-07-18 12:02:03 UTC (rev 4)
+++ .themes/ajax/ajax.css	2007-07-18 12:31:15 UTC (rev 5)
@@ -165,35 +165,16 @@
 	background: #ffd0d0;
 }
 
-div.stack .folder span.name:hover
-{
-	color: #fff;
-}
-
-#breadcrumbtrail ul li:hover,
 div.stack .folder:hover,
 .folder span.image:hover,
-.thumbnail span.image:hover
+.thumbnail span.image:hover,
+#breadcrumbtrail ul li:hover
 {
 	background: #606060;
 	cursor: pointer;
 }
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 /* --- breadcrumb --- */
 
 #breadcrumbtrail
@@ -218,19 +199,34 @@
 
 #breadcrumbtrail ul li
 {
-	height: 14px;
-	padding: 3px 0 3px 10px;
-	width: 140px;
+	height: 18px;
+	padding: 3px 0 3px 5px;
+	width: 145px;
 }
 
 #breadcrumbtrail ul li ul
 {
 	display: none;
-	margin: 2px 0 -1px -11px;
+	margin: 21px 0 -1px -6px;
 	position: fixed;
 	z-index: 10;
 }
 
+#breadcrumbtrail ul li .name
+{
+	float: left;
+	border: none;
+	text-align: left;
+	padding: 3px 0 3px 5px;
+}
+
+#breadcrumbtrail ul li .icon
+{
+	position: static;
+	float: left;
+	margin: -3px 0 0 0;
+}
+
 #breadcrumbtrail ul li ul li:hover
 {
 	background: #303030;

Modified: .themes/ajax/ajax.js
===================================================================
--- .themes/ajax/ajax.js	2007-07-18 12:02:03 UTC (rev 4)
+++ .themes/ajax/ajax.js	2007-07-18 12:31:15 UTC (rev 5)
@@ -481,9 +481,38 @@
 		// these will all be hidden until the :hover
 		if (node.nodeName == "folder")
 		{
+		
 			var dropMenuLi = document.createElement("li");
 			dropMenuLi.setAttribute("id", node.getAttribute("id"));
-			dropMenuLi.setAttribute("onclick", "openFolder(this)");
+
+			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)
@@ -494,7 +523,10 @@
 			{
 				dropMenuLi.setAttribute("class", "menuentry");
 			}
-			dropMenuLi.appendChild(document.createTextNode(node.getAttribute("name")));
+			var nameSpan = document.createElement("span");
+			nameSpan.setAttribute("class", "name");
+			nameSpan.appendChild(document.createTextNode(node.getAttribute("name")));
+			dropMenuLi.appendChild(nameSpan);
 			
 			dropMenu.appendChild(dropMenuLi);
 		}
@@ -502,8 +534,23 @@
 		// this is for the current folder
 		if ((node.nodeName == "folder") && (node.getAttribute("name") == currentFolder))
 		{
-			menuLi.insertBefore(document.createTextNode(node.getAttribute("name")), menuLi.firstChild);
+			var nameSpan = document.createElement("span");
+			nameSpan.setAttribute("class", "name");
+			nameSpan.appendChild(document.createTextNode(node.getAttribute("name")));
 			
+			// 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);
+
+			menuLi.insertBefore(nameSpan, menuLi.firstChild);
+			menuLi.insertBefore(iconSpan, menuLi.firstChild);
+			
 			breadcrumbEntry.appendChild(menuLi);
 		}
 	}


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

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

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

Revision: 6
          http://picfinity.svn.sourceforge.net/picfinity/?rev=6&view=rev
Author:   espadav8
Date:     2007-07-18 10:12:03 -0700 (Wed, 18 Jul 2007)

Log Message:
-----------
Remove unneeded functions from the javascript
Remove the init function and instead add the onclick into the xsl template
Remove all the code for creating the old 'stack' trail

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

Modified: .themes/ajax/ajax.js
===================================================================
--- .themes/ajax/ajax.js	2007-07-18 12:31:15 UTC (rev 5)
+++ .themes/ajax/ajax.js	2007-07-18 17:12:03 UTC (rev 6)
@@ -1,4 +1,3 @@
-addEvent(window, 'load', init, false);
 addEvent(window, 'load', importLayout, false);
 
 var xmlDoc;
@@ -21,24 +20,6 @@
 	xmlDoc.load("gallery.xml");
 }
 
-function getElementsByClassName(className, tag)
-{
-	var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)");
-	var tag = tag || "*";
-	var elm = document;
-	var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
-	var returnElements = [];
-	var current;
-	var length = elements.length;
-	for(var i=0; i<length; i++){
-		current = elements[i];
-		if(testClass.test(current.className)){
-			returnElements.push(current);
-		}
-	}
-	return returnElements;
-}
-
 function addEvent(elm, evType, fn, useCapture)
 {
 	if (elm.addEventListener) {
@@ -77,13 +58,6 @@
     return result;
 }
 
-function getSiblingNodes(element)
-{
-	var parentNode = getLayoutNode(element).parentNode;
-	
-	return parentNode.childNodes;
-}
-
 function getNodePath(element, nodePath)
 {
 	nodePath = (nodePath == undefined) ? '' : nodePath;
@@ -120,22 +94,6 @@
 	return null;
 }
 
-function init()
-{
-	var folders = getElementsByClassName("folder", "div");
-	
-	for (var i = 0; i < folders.length; i++)
-	{
-		if (folders[i].getAttribute("class").toString().match("empty"))
-		{
-		}
-		else
-		{
-			folders[i].setAttribute("onclick", "openFolder(this)");
-		}
-	}
-}
-
 function openFolder(element)
 {
 	var nodePath = getNodePath(getLayoutNode(element), '');
@@ -148,9 +106,6 @@
 	var backButton = document.createElement("div")
 	backButton.setAttribute("id", "backbutton");
 	
-	var stackDiv = document.createElement("div");
-	stackDiv.setAttribute("class", "stack");
-	
 	var selectedDiv = document.createElement("div");
 	selectedDiv.setAttribute("id", "selectedalbum");
 	
@@ -162,15 +117,8 @@
 		if (mainFolders[i].nodeName == "folder")
 		{
 			// if it's not the folder we're acting on
-			if(mainFolders[i].getAttribute("id") != element.id)
+			if(mainFolders[i].getAttribute("id") == element.getAttribute("id"))
 			{
-				// var stackFolder = createStackFolderContainer(mainFolders[i]);
-				// stackDiv.appendChild(stackFolder);
-			}
-			
-			// it is the folder we're acting on
-			else
-			{
 				breadcrumbDiv = createBreadcrumbTrail(mainFolders[i]);
 				
 				var selectedAlbumFolders = getChildNodesByTagName(mainFolders[i], "folder");
@@ -198,28 +146,7 @@
 	}
 	
 	newAlbumsDiv.appendChild(selectedDiv);
-	newAlbumsDiv.appendChild(stackDiv);
 	
-	// if we're not in the root node then create another stack with the main folders
-	if (nodePath != "./")
-	{
-		var rootStackDiv = document.createElement("div");
-		rootStackDiv.setAttribute("class", "stack");
-	
-		var rootNodeFolders = xmlDoc.documentElement.childNodes;
-		
-		for (var i = 0; i < rootNodeFolders.length; i++)
-		{
-			if (rootNodeFolders[i].nodeName == "folder")
-			{
-				var stackFolder = createStackFolderContainer(rootNodeFolders[i]);
-				rootStackDiv.appendChild(stackFolder);
-			}
-		}
-		
-		// newAlbumsDiv.appendChild(rootStackDiv);
-	}
-	
 	document.getElementById("albums").parentNode.replaceChild(newAlbumsDiv, document.getElementById("albums"));
 }
 
@@ -250,61 +177,6 @@
 	}
 }
 
-function createStackFolderContainer(folderNode)
-{
-	var stackFolder = document.createElement("div");
-	stackFolder.setAttribute("id", folderNode.getAttribute("id"));
-	
-	// var imageSpan = document.createElement("span")
-	// imageSpan.setAttribute("class", "image");
-	
-	// var folderImage = document.createElement("img");
-	// folderImage.setAttribute("src", checkFolderContents(folderNode, getNodePath(folderNode, '')));
-	// imageSpan.appendChild(folderImage);
-	
-	var textSpan = document.createElement("span");
-	textSpan.setAttribute("class", "name");
-	textSpan.appendChild(document.createTextNode(folderNode.getAttribute("name")));
-	
-	
-	// stackFolder.appendChild(imageSpan);
-	
-	// this has to be done here otherwise the nodes would be added in the wrong order
-	if (folderNode.hasChildNodes())
-	{
-		stackFolder.setAttribute("class", "folder");
-		stackFolder.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);
-		stackFolder.appendChild(iconSpan);
-	}
-	else
-	{
-		stackFolder.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);
-		stackFolder.appendChild(iconSpan);
-	}
-	
-	stackFolder.appendChild(textSpan);
-	
-	return stackFolder;
-}
-
 function createImageThumbnailContainer(imageNode, optClass)
 {
 	var nodePath = getNodePath(getLayoutNode(imageNode), '');
@@ -458,7 +330,6 @@
 	{
 		document.getElementById("albums").parentNode.insertBefore(breadcrumbTrailDiv, document.getElementById("albums"));
 	}
-	
 }
 
 function createBreadcrumbMenu(path, currentFolder)
@@ -600,24 +471,19 @@
 
 function showImage(element)
 {
-	var siblingNodes = getSiblingNodes(element);
+	var siblingNodes = getLayoutNode(element).parentNode.childNodes;
 	var nodePath = getNodePath(getLayoutNode(element), '');
 	
 	var selectedDiv = document.createElement("div");
 	selectedDiv.setAttribute("id", "selectedalbum");
 	
-	// var selectedImage = document.createElement("div");
-	// selectedImage.setAttribute("id", "selectimage");
-	// selectedDiv.appendChild(selectedImage);
-	
 	for (var i = 0; i < siblingNodes.length; i++)
 	{
 		if (siblingNodes[i].nodeName == "image")
 		{
-			if (siblingNodes[i].getAttribute("id") == element.id)
+			if (siblingNodes[i].getAttribute("id") == element.getAttribute("id"))
 			{
 				var expandedImage = createExpandedImage(siblingNodes[i]);
-				//selectedImage.appendChild(expandedImage);
 				
 				if (document.getElementById("expandedimage"))
 				{

Modified: .themes/ajax/ajax.xsl
===================================================================
--- .themes/ajax/ajax.xsl	2007-07-18 12:31:15 UTC (rev 5)
+++ .themes/ajax/ajax.xsl	2007-07-18 17:12:03 UTC (rev 6)
@@ -54,6 +54,7 @@
 				</xsl:when>
 				<xsl:otherwise>
 					<xsl:attribute name="class">folder</xsl:attribute>
+					<xsl:attribute name="onclick">openFolder(this)</xsl:attribute>
 				</xsl:otherwise>
 			</xsl:choose>
 			<span class="image">


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

[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.

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

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

Revision: 18
          http://picfinity.svn.sourceforge.net/picfinity/?rev=18&view=rev
Author:   espadav8
Date:     2007-08-08 07:46:22 -0700 (Wed, 08 Aug 2007)

Log Message:
-----------
Large update to the 'ajax' theme
	- Add a theme dropdown menu if they're present
	- change the containers to have <a> so it should work better in IE
	- Update CSS for the new layout
	- Remove traces of the old 'stack' layout
	- Update a lot of the JS
		- openFolder() now takes the ID of the folder to open
		- getLayoutNode() now takes the node ID
		- showImage() now takes the image ID
		- Added getElementsByClassName() function
		- Update the functions to produce the new layout (<a>'s)
		- onclick functions now return false so the <a> doesn't send
		- closeImage() doesn't need any params now
		- Added cookie functions (for changing the themes)

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

Modified: .themes/ajax/ajax.css
===================================================================
--- .themes/ajax/ajax.css	2007-08-08 14:35:50 UTC (rev 17)
+++ .themes/ajax/ajax.css	2007-08-08 14:46:22 UTC (rev 18)
@@ -2,6 +2,7 @@
 {
 	padding: 0;
 	margin: 0;
+	border: 0;
 }
 
 img
@@ -25,6 +26,13 @@
 
 /* --- ids --- */
 
+div#themes
+{
+	position: absolute;
+	top: 20px;
+	right: 20px;
+}
+
 div#selectedalbum
 {
 	clear: both;
@@ -59,6 +67,13 @@
 	background: #484848;
 }
 
+.image a
+{
+	height: 128px;
+	width: 150px;
+	display: block;
+}
+
 .folder,
 .thumbnail
 {
@@ -71,15 +86,7 @@
 	position: relative;
 }
 
-div.stack .folder
-{
-	height: 25px;
-	clear: left;
-	margin: -1px 0 0 0;
-	border: none;
-}
 
-
 /* --- icons --- */
 
 .icon
@@ -89,40 +96,21 @@
 	left: 15px;
 }
 
-div.stack .folder span.icon
-{
-	top: 1px;
-	left: 5px;
-}
 
-
 /* --- images --- */
 
-.selected span.image
+.selected a
 {
 	background: #303030;
 }
 
-.folder span.image,
-.thumbnail span.image
+.folder span.image img,
+.thumbnail span.image img
 {
-	display: block;
 	padding: 14px 25px;
-	height: 100px;
-	width: 100px;
 }
 
 
-
-div.stack
-{
-	margin-top: 25px;
-	padding: 0;
-	float: left;
-	clear: left;
-}
-
-
 /* --- image names --- */
 
 .name
@@ -135,37 +123,30 @@
 	display: block;
 }
 
-div.stack .folder span.name
-{
-/* width = 150px; height = 25px */
-	text-align: left;
-	height: 18px;
-	width: 120px;
-	border: 1px solid #ccc;
-	padding: 5px 0 0 28px;
-	bottom: 0;
-	position: absolute;
-}
-
 div#expandedimage span.name
 {
 	margin: 5px -5px 0 -5px;
 }
 
+/* --- image link --- */
 
-/* --- hover actions --- */
-
-div#expandedimage:hover
+#linktospan a
 {
-	cursor: pointer;
+	color: #f0f0f0;
+	font-weight: bold;
+	border-bottom: 1px solid #ccc;
+	padding: 3px 0 3px 0;
+	text-align: center;
+	display: block;
+	text-decoration: none;
+	margin: -5px -5px 5px -5px;
 }
 
-.empty span.image:hover
-{
-	background: #ffd0d0;
-}
+/* --- hover actions --- */
 
-div.stack .folder:hover,
+
+.image a:hover,
+#linktospan a:hover,
 .folder span.image:hover,
 .thumbnail span.image:hover,
 #breadcrumbtrail ul li:hover

Modified: .themes/ajax/ajax.js
===================================================================
--- .themes/ajax/ajax.js	2007-08-08 14:35:50 UTC (rev 17)
+++ .themes/ajax/ajax.js	2007-08-08 14:46:22 UTC (rev 18)
@@ -21,13 +21,12 @@
 	xmlDoc.load("gallery.xml");
 }
 
-function getLayoutNode(element)
+function getLayoutNode(elementID)
 {
-	
 	// this is the best way, but nothing supports this (yet)
-	if ((xmlDoc.getElementById) && (xmlDoc.getElementById(element.getAttribute("id")) != null))
+	if ((xmlDoc.getElementById) && (xmlDoc.getElementById(elementID) != null))
 	{
-		return xmlDoc.getElementById(element.getAttribute("id"));
+		return xmlDoc.getElementById(elementID);
 	}
 	
 	// this is the next best way, but only Firefox and Opera support this at the moment
@@ -37,7 +36,7 @@
 		
 		while ((node = nodes.nextNode()) != null)
 		{
-			if (node.getAttribute("id") == element.getAttribute("id"))
+			if (node.getAttribute("id") == elementID)
 			{
 				return node;
 			}
@@ -51,7 +50,7 @@
 	// this is possibly the worse way, and it's still not supported by Safari
 	else
 	{
-		if (xmlDoc.documentElement.getAttribute("id") == element.getAttribute("id"))
+		if (xmlDoc.documentElement.getAttribute("id") == elementID)
 		{
 			return xmlDoc.documentElement;
 		}
@@ -63,7 +62,7 @@
 			
 			for (var i = 0; i < xmlDocFolders.length; i++)
 			{
-				if (xmlDocFolders[i].getAttribute("id") == element.getAttribute("id"))
+				if (xmlDocFolders[i].getAttribute("id") == elementID)
 				{
 					return xmlDocFolders[i];
 				}
@@ -73,7 +72,7 @@
 			
 			for (var i = 0; i < xmlDocImages.length; i++)
 			{
-				if (xmlDocImages[i].getAttribute("id") == element.getAttribute("id"))
+				if (xmlDocImages[i].getAttribute("id") == elementID)
 				{
 					return xmlDocImages[i];
 				}
@@ -98,6 +97,27 @@
 	}
 }
 
+function getElementsByClassName(className, tag, elm)
+{
+	var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)");
+	var tag = tag || "*";
+	var elm = elm || document;
+	var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
+	var returnElements = [];
+	var current;
+	var length = elements.length;
+	for(var i=0; i<length; i++){
+		current = elements[i];
+		if(testClass.test(current.className)){
+			returnElements.push(current);
+		}
+	}
+	if (returnElements.length > 0)
+		return returnElements;
+	else
+		return null;
+}
+
 function getChildNodesByTagName(element, tagName)
 {
 	var result = Array();
@@ -137,9 +157,9 @@
 	}
 }
 
-function openFolder(element)
+function openFolder(elementID)
 {	
-	var nodePath = getNodePath(getLayoutNode(element), '');
+	var nodePath = getNodePath(getLayoutNode(elementID));
 	
 	var breadcrumbDiv;
 	
@@ -152,7 +172,7 @@
 	var selectedDiv = document.createElement("div");
 	selectedDiv.setAttribute("id", "selectedalbum");
 	
-	var mainFolders = getLayoutNode(element).parentNode.childNodes;
+	var mainFolders = getLayoutNode(elementID).parentNode.childNodes;
 	
 	for (var i = 0; i < mainFolders.length; i++)
 	{
@@ -160,7 +180,7 @@
 		if (mainFolders[i].nodeName == "folder")
 		{
 			// if it's not the folder we're acting on
-			if(mainFolders[i].getAttribute("id") == element.getAttribute("id"))
+			if(mainFolders[i].getAttribute("id") == elementID)
 			{
 				breadcrumbDiv = createBreadcrumbTrail(mainFolders[i]);
 				
@@ -191,6 +211,8 @@
 	newAlbumsDiv.appendChild(selectedDiv);
 	
 	document.getElementById("albums").parentNode.replaceChild(newAlbumsDiv, document.getElementById("albums"));
+	
+	return false;
 }
 
 function checkFolderContents(element)
@@ -201,7 +223,7 @@
 	}
 	else
 	{
-		var nodePath = getNodePath(getLayoutNode(element), '');
+		var nodePath = getNodePath(getLayoutNode(element.getAttribute("id")));
 		var imageChildNodes = getChildNodesByTagName(element, "image");
 		
 		if (imageChildNodes.length > 0)
@@ -222,28 +244,32 @@
 
 function createImageThumbnailContainer(imageNode, optClass)
 {
-	var nodePath = getNodePath(getLayoutNode(imageNode), '');
+	var imageNodeID = imageNode.getAttribute("id");
+	var nodePath = getNodePath(getLayoutNode(imageNodeID));
 	
 	var classes = (optClass == undefined) ? "thumbnail" : "thumbnail " + optClass;
 	
 	var albumImageDiv = document.createElement("div");
 	albumImageDiv.setAttribute("class", classes);
-	albumImageDiv.setAttribute("id", imageNode.getAttribute("id"));
-	albumImageDiv.onclick = function() { showImage(albumImageDiv) };
+	albumImageDiv.setAttribute("id", imageNodeID);
 	
+	var imageAnchor = document.createElement("a");
+	imageAnchor.setAttribute("href", "index.php?id=" + imageNodeID);
+	imageAnchor.onclick = function() { showImage(imageNodeID); return false; };
+	
 	var imageSpan = document.createElement("span");
 	imageSpan.setAttribute("class", "image");
 	
 	var albumImage = document.createElement("img");
 	var imageThumbPath = '.thumbs/' + nodePath  + '/' + imageNode.getAttribute("file");
 	albumImage.setAttribute("src", imageThumbPath);
-	imageSpan.appendChild(albumImage);
+	imageAnchor.appendChild(albumImage);
 	
 	var imageNameSpan = document.createElement("span");
 	imageNameSpan.setAttribute("class", "name");
 	imageNameSpan.appendChild(document.createTextNode(imageNode.getAttribute("file")));
 	
-	
+	imageSpan.appendChild(imageAnchor)
 	albumImageDiv.appendChild(imageSpan);
 	albumImageDiv.appendChild(imageNameSpan);
 	
@@ -252,16 +278,20 @@
 
 function createSubFolderContainer(folderNode)
 {
-	var nodePath = getNodePath(getLayoutNode(folderNode), '');
+	var folderID = folderNode.getAttribute("id");
+	var nodePath = getNodePath(getLayoutNode(folderID));
 	
 	// create the main folder div
 	var subFolder = document.createElement("div");
 	subFolder.setAttribute("class", "folder");
-	subFolder.setAttribute("id", folderNode.getAttribute("id"));
+	subFolder.setAttribute("id", folderID);
 	
+	var folderAnchor = document.createElement("a");
+	folderAnchor.setAttribute("href", "index.php?id=" + folderID);
+	
 	// 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) };
+	folderAnchor.onclick = function() { openFolder(folderID); return false; };
 	
 	// create a span for the image
 	var folderImageSpan = document.createElement("span");
@@ -271,7 +301,8 @@
 	var folderImage = document.createElement("img");
 	var imagePath = checkFolderContents(folderNode);					
 	folderImage.setAttribute("src", imagePath);
-	folderImageSpan.appendChild(folderImage);
+	folderAnchor.appendChild(folderImage);
+	folderImageSpan.appendChild(folderAnchor);
 	
 	// create a span for the folder icon
 	var iconSpan = document.createElement("span");
@@ -301,31 +332,44 @@
 
 function createExpandedImage(imageNode)
 {
-	var nodePath = getNodePath(getLayoutNode(imageNode), '');
+	var nodePath = getNodePath(getLayoutNode(imageNode.getAttribute("id")));
 	
 	var expandedImageDiv = document.createElement("div");
 	expandedImageDiv.setAttribute("id", "expandedimage");
 	
 	// 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";
 	
+	var linkToSpan = document.createElement("span");
+	linkToSpan.setAttribute("id", "linktospan");
+	linkToSpan.style.display = "none";
+	
+	var linkToAnchor = document.createElement("a");
+	linkToAnchor.setAttribute("href", "index.php?id=" + imageNode.getAttribute("id"))
+	linkToAnchor.appendChild(document.createTextNode("Link to this image"));
+	linkToSpan.appendChild(linkToAnchor);
+	
 	var loadingSpan = document.createElement("span");
 	loadingSpan.setAttribute("id", "loadingspan");
 	loadingSpan.style.display = "block";
 	loadingSpan.appendChild(document.createTextNode("Loading image"));
 	
+	var imageAnchor = document.createElement("a");
+	imageAnchor.onclick = function() { closeImage(); return false };
+	imageAnchor.href = "#";
+	
 	var imageSpan = document.createElement("span");
 	imageSpan.setAttribute("id", "expandedimagespan");
-	imageSpan.setAttribute("class", "image");
+	// imageSpan.setAttribute("class", "image");
 	imageSpan.style.display = "none";
 	
 	var albumImage = document.createElement("img");
 	var imageThumbPath = nodePath  + '/' + imageNode.getAttribute("file");
 	albumImage.setAttribute("src", imageThumbPath);
-	imageSpan.appendChild(albumImage);
+	imageAnchor.appendChild(albumImage);
+	imageSpan.appendChild(imageAnchor);
 	
 	var imageNameSpan = document.createElement("span");
 	imageNameSpan.setAttribute("class", "name");
@@ -337,15 +381,19 @@
 							{
 								var expandedImageDiv = document.getElementById("expandedimage");
 								expandedImageDiv.style.width = expandedImage.width + "px";
-								expandedImageDiv.style.height = (expandedImage.height + 27) + "px";
+								expandedImageDiv.style.height = (expandedImage.height + 49) + "px";
 								
+								var loadingSpan = document.getElementById("loadingspan");
+								loadingSpan.style.display = "none";
+								
 								var imageSpan = document.getElementById("expandedimagespan");
 								imageSpan.style.display = "block";
 								
-								var loadingSpan = document.getElementById("loadingspan");
-								loadingSpan.style.display = "none";
+								var linkToSpan = document.getElementById("linktospan");
+								linkToSpan.style.display = "block";
 							}
 	
+	expandedImageDiv.appendChild(linkToSpan);
 	expandedImageDiv.appendChild(loadingSpan);
 	expandedImageDiv.appendChild(imageSpan);
 	expandedImageDiv.appendChild(imageNameSpan);
@@ -358,7 +406,7 @@
 	var breadcrumbTrailDiv = document.createElement("div");
 	breadcrumbTrailDiv.setAttribute("id", "breadcrumbtrail");
 	
-	var nodePath = getNodePath(getLayoutNode(element), '') + element.getAttribute("name");
+	var nodePath = getNodePath(getLayoutNode(element.getAttribute("id"))) + element.getAttribute("name");
 	
 	var paths = nodePath.split('/');
 	var currentPath = '';
@@ -438,7 +486,7 @@
 	
 	if (node.hasChildNodes())
 	{
-		dropMenuItem.onclick = function() { openFolder(dropMenuItem) };
+		dropMenuItem.onclick = function() { openFolder(dropMenuItem.getAttribute("id")); return false; };
 		
 		// create a span for the folder icon
 		var iconSpan = document.createElement("span");
@@ -521,54 +569,90 @@
 	}
 }
 
-function showImage(element)
+function showImage(imageID)
 {
-	var siblingNodes = getLayoutNode(element).parentNode.childNodes;
-	var nodePath = getNodePath(getLayoutNode(element), '');
+	var siblingNodes = getChildNodesByTagName(getLayoutNode(imageID).parentNode, "image");
 	
-	var selectedDiv = document.createElement("div");
-	selectedDiv.setAttribute("id", "selectedalbum");
-	
 	for (var i = 0; i < siblingNodes.length; i++)
 	{
-		if ((siblingNodes[i].nodeName == "image") ||
-			(siblingNodes[i].nodeName == "img"))
+		if (siblingNodes[i].getAttribute("id") == imageID)
 		{
-			if (siblingNodes[i].getAttribute("id") == element.getAttribute("id"))
+			var expandedImage = createExpandedImage(siblingNodes[i]);
+			
+			if (document.getElementById("expandedimage"))
 			{
-				var expandedImage = createExpandedImage(siblingNodes[i]);
-				
-				if (document.getElementById("expandedimage"))
-				{
-					document.getElementById("expandedimage").parentNode.replaceChild(expandedImage, document.getElementById("expandedimage"));
-				}
-				else
-				{
-					document.getElementById("selectedalbum").parentNode.insertBefore(expandedImage, document.getElementById("selectedalbum"));
-				}
-				
-				var thumbnailContainer = createImageThumbnailContainer(siblingNodes[i], "selected");
-				selectedDiv.appendChild(thumbnailContainer);
+				document.getElementById("expandedimage").parentNode.replaceChild(expandedImage, document.getElementById("expandedimage"));
 			}
 			else
 			{
-				var thumbnailContainer = createImageThumbnailContainer(siblingNodes[i]);
-				selectedDiv.appendChild(thumbnailContainer);
+				document.getElementById("selectedalbum").parentNode.insertBefore(expandedImage, document.getElementById("selectedalbum"));
 			}
 		}
-		else if (siblingNodes[i].nodeName == "folder")
-		{
-			var subFolderContainer = createSubFolderContainer(siblingNodes[i]);
-			selectedDiv.appendChild(subFolderContainer);
-		}
 	}
 	
-	document.getElementById("selectedalbum").parentNode.replaceChild(selectedDiv, document.getElementById("selectedalbum"));
+	var lastSelectedImage = getElementsByClassName("selected", "div", document);
+	
+	if (lastSelectedImage)
+	{
+		lastSelectedImage[0].className = "thumbnail";
+	}
+	
+	document.getElementById(imageID).className += " selected";
 }
 
-function closeImage(element, id)
+function closeImage()
 {
 	document.getElementById("expandedimage").parentNode.removeChild(document.getElementById("expandedimage"));
 	
-	document.getElementById(id).className = "thumbnail";
+	var lastSelectedImage = getElementsByClassName("selected", "div", document);
+	
+	if (lastSelectedImage)
+		lastSelectedImage[0].className = "thumbnail";
+}
+
+
+
+
+
+function getCookie(name) {
+	var start = document.cookie.indexOf( name + "=" );
+	var len = start + name.length + 1;
+	
+	if ((!start) && (name != document.cookie.substring(0, name.length)))
+	{
+		return null;
+	}
+	
+	if (start == -1) return null;
+	
+	var end = document.cookie.indexOf(';', len);
+	
+	if (end == -1) end = document.cookie.length;
+	
+	return unescape(document.cookie.substring(len, end));
+}
+
+function setCookie(name, value, expires, path, domain, secure) {
+	var today = new Date();
+	today.setTime(today.getTime());
+	
+	if (expires) {
+		expires = expires * 1000 * 60 * 60 * 24;
+	}
+	
+	var expires_date = new Date(today.getTime() + (expires));
+	
+	document.cookie = name + '=' + escape(value) +
+		((expires) ? ';expires='+expires_date.toGMTString() : '') + //expires.toGMTString()
+		((path) ? ';path=' + path : '') +
+		((domain) ? ';domain=' + domain : '') +
+		((secure) ? ';secure' : '');
+}
+
+function deleteCookie(name, path, domain) {
+	if (getCookie(name))
+		document.cookie = name + '=' +
+			((path) ? ';path=' + path : '') +
+			((domain) ? ';domain=' + domain : '') +
+			';expires=Thu, 01-Jan-1970 00:00:01 GMT';
 }
\ No newline at end of file

Modified: .themes/ajax/ajax.xsl
===================================================================
--- .themes/ajax/ajax.xsl	2007-08-08 14:35:50 UTC (rev 17)
+++ .themes/ajax/ajax.xsl	2007-08-08 14:46:22 UTC (rev 18)
@@ -9,6 +9,7 @@
 	/>
 
 	<xsl:param name="title" />
+	<xsl:param name="post_id" />
 	<xsl:param name="themename">ajax</xsl:param>
 
 	<xsl:template match="/">
@@ -22,7 +23,6 @@
 				<script type="text/javascript">
 					<xsl:attribute name="src"><xsl:value-of select="concat('.themes/', $themename, '/', $themename, '.js')" /></xsl:attribute>
 				</script>
-				
 			</head>
 			
 			<body>
@@ -34,6 +34,10 @@
 	</xsl:template>
 
 	<xsl:template match="layout">
+		<xsl:apply-templates select="themes">
+			<xsl:with-param name="location" select="@name" />
+		</xsl:apply-templates>
+		
 		<div id="albums">
 			
 			<xsl:apply-templates select="folder">
@@ -42,42 +46,71 @@
 			
 		</div>
 	</xsl:template>
+	
+	<xsl:template match="themes">
+		<xsl:param name="location" />
+		
+		<div id="themes">
+			<form id="themeform" action="index.php" method="post">
+				<select name="theme" onchange="submit();">
+					<option value="">Please choose a theme</option>
+					<xsl:apply-templates select="theme" />
+				</select>
+				<button type="submit">Go</button>
+			</form>
+		</div>
+	</xsl:template>
+	
+	<xsl:template match="theme">
+		<option>
+			<xsl:if test="@name = $themename">
+				<xsl:attribute name="selected">selected</xsl:attribute>
+			</xsl:if>
+			<xsl:attribute name="value"><xsl:value-of select="@name" /></xsl:attribute>
+			<xsl:value-of select="@name" />
+		</option>
+	</xsl:template>
 
 	<xsl:template match="folder">
 		<xsl:param name="location" />
 		
 		<div>
-			<xsl:attribute name="id"><xsl:value-of select="@id" /></xsl:attribute>
 			<xsl:choose>
 				<xsl:when test="count(folder) = 0 and count(image) = 0">
 					<xsl:attribute name="class">folder empty</xsl:attribute>
 				</xsl:when>
 				<xsl:otherwise>
 					<xsl:attribute name="class">folder</xsl:attribute>
-					<xsl:attribute name="onclick">openFolder(this)</xsl:attribute>
 				</xsl:otherwise>
 			</xsl:choose>
 			<span class="image">
-				<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="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>
+				<a>
+					<xsl:if test="count(folder) > 0 or count(image) > 0">
+						<xsl:attribute name="href">index.php?id=<xsl:value-of select="@id" /></xsl:attribute>
+						<xsl:attribute name="onclick">openFolder('<xsl:value-of select="@id" />'); return false;</xsl:attribute>
+					</xsl:if>
+					
+					<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="alt"><xsl:value-of select="image[1]/@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>
+				</a>
 			</span>
 			<xsl:if test="count(image) > 0">
 				<span class="icon">
@@ -106,7 +139,7 @@
 
 	<xsl:template match="image">
 		<xsl:param name="location" />
-		<xsl:variable name="id"><xsl:value-of select="generate-id()" /></xsl:variable>
+		<xsl:variable name="id"><xsl:value-of select="@id" /></xsl:variable>
 	</xsl:template>
 
 </xsl:stylesheet>


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

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

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

Revision: 26
          http://picfinity.svn.sourceforge.net/picfinity/?rev=26&view=rev
Author:   espadav8
Date:     2007-08-10 07:17:49 -0700 (Fri, 10 Aug 2007)

Log Message:
-----------
Omit the XML declaration since IE6 will render in quirks mode otherwise (and it's optional to include it)
Alter the CSS slightly to render the images correctly in IE

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

Modified: .themes/ajax/ajax.css
===================================================================
--- .themes/ajax/ajax.css	2007-08-09 18:26:05 UTC (rev 25)
+++ .themes/ajax/ajax.css	2007-08-10 14:17:49 UTC (rev 26)
@@ -70,9 +70,10 @@
 
 .image a
 {
-	height: 128px;
-	width: 150px;
+	height: 100px;
+	width: 100px;
 	display: block;
+	padding: 14px 25px;
 }
 
 .folder,
@@ -105,13 +106,6 @@
 	background: #303030;
 }
 
-.folder span.image img,
-.thumbnail span.image img
-{
-	padding: 14px 25px;
-}
-
-
 /* --- image names --- */
 
 .name
@@ -122,6 +116,7 @@
 	padding: 3px 0;
 	text-align: center;
 	display: block;
+	height: 16px;
 }
 
 #expandedimage span.name

Modified: .themes/ajax/ajax.xsl
===================================================================
--- .themes/ajax/ajax.xsl	2007-08-09 18:26:05 UTC (rev 25)
+++ .themes/ajax/ajax.xsl	2007-08-10 14:17:49 UTC (rev 26)
@@ -2,7 +2,7 @@
 <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
 	<xsl:output
 		method="xml"
-		omit-xml-declaration="no"
+		omit-xml-declaration="yes"
 		indent="yes"
 		doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
 		doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"


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

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

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

Revision: 19
          http://picfinity.svn.sourceforge.net/picfinity/?rev=19&view=rev
Author:   espadav8
Date:     2007-08-08 16:54:15 -0700 (Wed, 08 Aug 2007)

Log Message:
-----------
Add a link to the heading to show the default view - XSL
Add an empty trail to the initial view - XSL
A folder with only folders inside it now gets a mini-folder icon - XSL

Slight position change for the mini-icons - CSS
Set colour/pointer for the heading link - CSS

Add reloadPage() function for the heading - JS
Remove some (very) unneeded code from openFolder() - JS
Set the correct text for folders with images and/or folders - JS

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

Modified: .themes/ajax/ajax.css
===================================================================
--- .themes/ajax/ajax.css	2007-08-08 14:46:22 UTC (rev 18)
+++ .themes/ajax/ajax.css	2007-08-08 23:54:15 UTC (rev 19)
@@ -16,7 +16,8 @@
 	background: #1a1a1a url('background.gif') repeat-x;
 }
 
-h1
+h1,
+h1 a
 {
 	text-align: center;
 	color: #d0d0d0;
@@ -92,7 +93,7 @@
 .icon
 {
 	position: absolute;
-	top: 3px;
+	top: 4px;
 	left: 15px;
 }
 
@@ -144,11 +145,12 @@
 
 /* --- hover actions --- */
 
-
+a:hover
+{
+	cursor: pointer;
+}
 .image a:hover,
 #linktospan a:hover,
-.folder span.image:hover,
-.thumbnail span.image:hover,
 #breadcrumbtrail ul li:hover
 {
 	background: #606060;

Modified: .themes/ajax/ajax.js
===================================================================
--- .themes/ajax/ajax.js	2007-08-08 14:46:22 UTC (rev 18)
+++ .themes/ajax/ajax.js	2007-08-08 23:54:15 UTC (rev 19)
@@ -21,10 +21,20 @@
 	xmlDoc.load("gallery.xml");
 }
 
+function reloadPage()
+{
+	openFolder(xmlDoc.documentElement.getAttribute("id"));
+}
+
 function getLayoutNode(elementID)
 {
+	// check for the documentElement first
+	if (xmlDoc.documentElement.getAttribute("id") == elementID)
+	{
+		return xmlDoc.documentElement;
+	}
 	// this is the best way, but nothing supports this (yet)
-	if ((xmlDoc.getElementById) && (xmlDoc.getElementById(elementID) != null))
+	else if ((xmlDoc.getElementById) && (xmlDoc.getElementById(elementID) != null))
 	{
 		return xmlDoc.getElementById(elementID);
 	}
@@ -50,33 +60,26 @@
 	// this is possibly the worse way, and it's still not supported by Safari
 	else
 	{
-		if (xmlDoc.documentElement.getAttribute("id") == elementID)
+		// this causes a problem with Safari
+		// xmlDocFolders.length == 0
+		var xmlDocFolders = xmlDoc.getElementsByTagName("folder");
+		
+		for (var i = 0; i < xmlDocFolders.length; i++)
 		{
-			return xmlDoc.documentElement;
+			if (xmlDocFolders[i].getAttribute("id") == elementID)
+			{
+				return xmlDocFolders[i];
+			}
 		}
-		else
+		
+		var xmlDocImages = xmlDoc.getElementsByTagName("image");
+		
+		for (var i = 0; i < xmlDocImages.length; i++)
 		{
-			// this causes a problem with Safari
-			// xmlDocFolders.length == 0
-			var xmlDocFolders = xmlDoc.getElementsByTagName("folder");
-			
-			for (var i = 0; i < xmlDocFolders.length; i++)
+			if (xmlDocImages[i].getAttribute("id") == elementID)
 			{
-				if (xmlDocFolders[i].getAttribute("id") == elementID)
-				{
-					return xmlDocFolders[i];
-				}
+				return xmlDocImages[i];
 			}
-			
-			var xmlDocImages = xmlDoc.getElementsByTagName("image");
-			
-			for (var i = 0; i < xmlDocImages.length; i++)
-			{
-				if (xmlDocImages[i].getAttribute("id") == elementID)
-				{
-					return xmlDocImages[i];
-				}
-			}
 		}
 	}
 	return null;
@@ -158,10 +161,11 @@
 }
 
 function openFolder(elementID)
-{	
-	var nodePath = getNodePath(getLayoutNode(elementID));
+{
+	var layoutNode = getLayoutNode(elementID);
+	var nodePath = getNodePath(layoutNode);
 	
-	var breadcrumbDiv;
+	var breadcrumbDiv = createBreadcrumbTrail(layoutNode);;
 	
 	var newAlbumsDiv = document.createElement("div");
 	newAlbumsDiv.setAttribute("id", "albums");
@@ -172,42 +176,21 @@
 	var selectedDiv = document.createElement("div");
 	selectedDiv.setAttribute("id", "selectedalbum");
 	
-	var mainFolders = getLayoutNode(elementID).parentNode.childNodes;
+	var selectedAlbumFolders = getChildNodesByTagName(layoutNode, "folder");
+	var selectedAlbumImages = getChildNodesByTagName(layoutNode, "image");
 	
-	for (var i = 0; i < mainFolders.length; i++)
+	for (var j = 0; j < selectedAlbumFolders.length; j++)
 	{
-		// if it's a folder we've come across
-		if (mainFolders[i].nodeName == "folder")
-		{
-			// if it's not the folder we're acting on
-			if(mainFolders[i].getAttribute("id") == elementID)
-			{
-				breadcrumbDiv = createBreadcrumbTrail(mainFolders[i]);
-				
-				var selectedAlbumFolders = getChildNodesByTagName(mainFolders[i], "folder");
-				var selectedAlbumImages = getChildNodesByTagName(mainFolders[i], "image");
-				
-				for (var j = 0; j < selectedAlbumFolders.length; j++)
-				{
-					var subFolderContainer = createSubFolderContainer(selectedAlbumFolders[j]);
-					selectedDiv.appendChild(subFolderContainer);
-				}
-				
-				for (var j = 0; j < selectedAlbumImages.length; j++)
-				{
-					var thumbnailContainer = createImageThumbnailContainer(selectedAlbumImages[j]);
-					selectedDiv.appendChild(thumbnailContainer);
-				}
-			}
-		}
-		
-		// we've come across an image node
-		else if (mainFolders[i].nodeName == "image")
-		{
-			continue;
-		}
+		var subFolderContainer = createSubFolderContainer(selectedAlbumFolders[j]);
+		selectedDiv.appendChild(subFolderContainer);
 	}
 	
+	for (var j = 0; j < selectedAlbumImages.length; j++)
+	{
+		var thumbnailContainer = createImageThumbnailContainer(selectedAlbumImages[j]);
+		selectedDiv.appendChild(thumbnailContainer);
+	}
+
 	newAlbumsDiv.appendChild(selectedDiv);
 	
 	document.getElementById("albums").parentNode.replaceChild(newAlbumsDiv, document.getElementById("albums"));
@@ -318,8 +301,19 @@
 	textSpan.setAttribute("class", "name");
 	
 	// create the text
-	var textNode = document.createTextNode(folderNode.getAttribute("name")
-					+ '(' + getChildNodesByTagName(folderNode, "image").length + ')');
+	var textContents = folderNode.getAttribute("name");
+	var noImages = getChildNodesByTagName(folderNode, "image").length;
+	var noFolders = getChildNodesByTagName(folderNode, "folder").length;
+	
+	if ((noImages || noFolders) > 0)
+	{
+		textContents += " (";
+		if (noImages > 0) textContents += noImages;
+		if (noFolders > 0) textContents += "+" + noFolders;
+		textContents += ")";
+	}
+
+	var textNode = document.createTextNode(textContents);
 	textSpan.appendChild(textNode);
 	
 	// appened them all in order
@@ -406,7 +400,7 @@
 	var breadcrumbTrailDiv = document.createElement("div");
 	breadcrumbTrailDiv.setAttribute("id", "breadcrumbtrail");
 	
-	var nodePath = getNodePath(getLayoutNode(element.getAttribute("id"))) + element.getAttribute("name");
+	var nodePath = getNodePath(element) + element.getAttribute("name");
 	
 	var paths = nodePath.split('/');
 	var currentPath = '';

Modified: .themes/ajax/ajax.xsl
===================================================================
--- .themes/ajax/ajax.xsl	2007-08-08 14:46:22 UTC (rev 18)
+++ .themes/ajax/ajax.xsl	2007-08-08 23:54:15 UTC (rev 19)
@@ -26,7 +26,11 @@
 			</head>
 			
 			<body>
-				<h1><xsl:value-of select="$title" /></h1>
+				<h1>
+					<a href="#" onclick="reloadPage();return false;">
+						<xsl:value-of select="$title" />
+					</a>
+				</h1>
 				
 				<xsl:apply-templates select="layout" />
 			</body>
@@ -38,12 +42,12 @@
 			<xsl:with-param name="location" select="@name" />
 		</xsl:apply-templates>
 		
+		<div id="breadcrumbtrail"></div>
+		
 		<div id="albums">
-			
 			<xsl:apply-templates select="folder">
 				<xsl:with-param name="location" select="@name" />
 			</xsl:apply-templates>
-			
 		</div>
 	</xsl:template>
 	
@@ -112,7 +116,7 @@
 					</xsl:choose>
 				</a>
 			</span>
-			<xsl:if test="count(image) > 0">
+			<xsl:if test="count(folder) > 0 or count(image) > 0">
 				<span class="icon">
 					<img>
 						<xsl:attribute name="src"><xsl:value-of select="concat('.themes/', $themename, '/foldericon.png')" /></xsl:attribute>
@@ -124,7 +128,7 @@
 				<xsl:value-of select="@name" />
 				<xsl:choose>
 					<xsl:when test="(count(folder) > 0) and (count(image) > 0)">
-						<xsl:text disable-output-escaping="yes">&amp;nbsp;</xsl:text>(<xsl:value-of select="count(image)" /> +<xsl:value-of select="count(folder)" />)
+						<xsl:text disable-output-escaping="yes">&amp;nbsp;</xsl:text>(<xsl:value-of select="count(image)" />+<xsl:value-of select="count(folder)" />)
 					</xsl:when>
 					<xsl:when test="count(folder) > 0">
 						<xsl:text disable-output-escaping="yes">&amp;nbsp;</xsl:text>(+<xsl:value-of select="count(folder)" />)


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

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

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

Revision: 22
          http://picfinity.svn.sourceforge.net/picfinity/?rev=22&view=rev
Author:   espadav8
Date:     2007-08-09 04:18:11 -0700 (Thu, 09 Aug 2007)

Log Message:
-----------
Implement the 'link to image' feature
Change the selectedImage div into a span
	- this means that the size doesn't need to be set/reset
Remove some unneeded JS due to switching to a span

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

Modified: .themes/ajax/ajax.js
===================================================================
--- .themes/ajax/ajax.js	2007-08-09 11:15:45 UTC (rev 21)
+++ .themes/ajax/ajax.js	2007-08-09 11:18:11 UTC (rev 22)
@@ -328,14 +328,9 @@
 {
 	var nodePath = getNodePath(getLayoutNode(imageNode.getAttribute("id")));
 	
-	var expandedImageDiv = document.createElement("div");
-	expandedImageDiv.setAttribute("id", "expandedimage");
+	var expandedImageSpan = document.createElement("span");
+	expandedImageSpan.setAttribute("id", "expandedimage");
 	
-	// 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.style.width = "200px";
-	expandedImageDiv.style.height = "43px";
-	
 	var linkToSpan = document.createElement("span");
 	linkToSpan.setAttribute("id", "linktospan");
 	linkToSpan.style.display = "none";
@@ -356,7 +351,6 @@
 	
 	var imageSpan = document.createElement("span");
 	imageSpan.setAttribute("id", "expandedimagespan");
-	// imageSpan.setAttribute("class", "image");
 	imageSpan.style.display = "none";
 	
 	var albumImage = document.createElement("img");
@@ -373,10 +367,6 @@
 	expandedImage.src = imageThumbPath;
 	expandedImage.onload = function()
 							{
-								var expandedImageDiv = document.getElementById("expandedimage");
-								expandedImageDiv.style.width = expandedImage.width + "px";
-								expandedImageDiv.style.height = (expandedImage.height + 49) + "px";
-								
 								var loadingSpan = document.getElementById("loadingspan");
 								loadingSpan.style.display = "none";
 								
@@ -387,12 +377,12 @@
 								linkToSpan.style.display = "block";
 							}
 	
-	expandedImageDiv.appendChild(linkToSpan);
-	expandedImageDiv.appendChild(loadingSpan);
-	expandedImageDiv.appendChild(imageSpan);
-	expandedImageDiv.appendChild(imageNameSpan);
+	expandedImageSpan.appendChild(linkToSpan);
+	expandedImageSpan.appendChild(loadingSpan);
+	expandedImageSpan.appendChild(imageSpan);
+	expandedImageSpan.appendChild(imageNameSpan);
 	
-	return expandedImageDiv;
+	return expandedImageSpan;
 }
 
 function createBreadcrumbTrail(element)

Modified: .themes/ajax/ajax.xsl
===================================================================
--- .themes/ajax/ajax.xsl	2007-08-09 11:15:45 UTC (rev 21)
+++ .themes/ajax/ajax.xsl	2007-08-09 11:18:11 UTC (rev 22)
@@ -32,28 +32,30 @@
 					</a>
 				</h1>
 				
-				<xsl:apply-templates select="layout" />
+				<xsl:choose>
+					<xsl:when test="$post_id = 0">
+						<xsl:apply-templates select="layout" />
+					</xsl:when>
+					<xsl:otherwise>
+						<xsl:apply-templates select="layout" mode="post"/>
+					</xsl:otherwise>
+				</xsl:choose>
 			</body>
 		</html>
 	</xsl:template>
 
 	<xsl:template match="layout">
-		<xsl:apply-templates select="themes">
-			<xsl:with-param name="location" select="@name" />
-		</xsl:apply-templates>
+		<xsl:apply-templates select="themes" />
 		
 		<div id="breadcrumbtrail"></div>
 		
 		<div id="albums">
-			<xsl:apply-templates select="folder">
-				<xsl:with-param name="location" select="@name" />
-			</xsl:apply-templates>
+			<xsl:apply-templates select="folder" />
+			<xsl:apply-templates select="image" />
 		</div>
 	</xsl:template>
 	
 	<xsl:template match="themes">
-		<xsl:param name="location" />
-		
 		<div id="themes">
 			<form id="themeform" action="index.php" method="post">
 				<select name="theme" onchange="submit();">
@@ -76,8 +78,6 @@
 	</xsl:template>
 
 	<xsl:template match="folder">
-		<xsl:param name="location" />
-		
 		<div>
 			<xsl:choose>
 				<xsl:when test="count(folder) = 0 and count(image) = 0">
@@ -142,8 +142,114 @@
 	</xsl:template>
 
 	<xsl:template match="image">
-		<xsl:param name="location" />
-		<xsl:variable name="id"><xsl:value-of select="@id" /></xsl:variable>
+		<xsl:param name="selectedID">0</xsl:param>
+		<xsl:variable name="path">
+			<xsl:apply-templates select="ancestor::folder" mode="getpath" />
+		</xsl:variable>
+		
+		<div class="thumbnail">
+			<xsl:attribute name="id"><xsl:value-of select="@id" /></xsl:attribute>
+			<xsl:if test="@id = $selectedID">
+				<xsl:attribute name="class">thumbnail selected</xsl:attribute>
+			</xsl:if>
+			<span class="image">
+				<a>
+					<xsl:attribute name="onclick">showImage('<xsl:value-of select="@id" />'); return false;</xsl:attribute>
+					<xsl:attribute name="href">index.php?id=<xsl:value-of select="@id" /></xsl:attribute>
+					<img>
+						<xsl:attribute name="alt"><xsl:value-of select="@file" /></xsl:attribute>
+						<xsl:attribute name="src"><xsl:value-of select="concat('./.thumbs/', $path, @file)" /></xsl:attribute>
+					</img>
+				</a>
+			</span>
+			<span class="name"><xsl:value-of select="@file" /></span>
+		</div>
 	</xsl:template>
+	
+	
+	<xsl:template match="layout" mode="post">
+		<xsl:variable name="folder">
+			<xsl:choose>
+				<xsl:when test="count(//folder[@id = $post_id]) = 1">1</xsl:when>
+				<xsl:when test="@id = $post_id">2</xsl:when>
+				<xsl:otherwise>0</xsl:otherwise>
+			</xsl:choose>
+		</xsl:variable>
+		
+		
+		<xsl:apply-templates select="themes" />
+		
+		
+		<!-- the passed in ID is an image -->
+		<xsl:if test="$folder = 0">
+			<xsl:apply-templates select="//image[@id = $post_id]" mode="post" />
+		</xsl:if>
+	</xsl:template>
+	
+	<xsl:template match="folder" mode="breadcrumbtrail">
+		<xsl:if test="parent::folder">
+			<xsl:apply-templates select="parent::folder" mode="breadcrumbtrail" />
+		</xsl:if>
+		
+		<ul class="trailentry">
+			<li class="currentfolder">
+				<span class="icon">
+					<img src=".themes/ajax/foldericon.png" />
+				</span>
+				<span class="name"><xsl:value-of select="@name" /></span>
+				<ul>
+					<xsl:for-each select="parent::*/folder">
+						<li class="menuentry">
+							<xsl:attribute name="onclick">openFolder('<xsl:value-of select="@id" />'); return false;</xsl:attribute>
+							<span class="icon">
+								<img src=".themes/ajax/foldericon.png" />
+							</span>
+							<span class="name"><xsl:value-of select="@name" /></span>
+						</li>
+					</xsl:for-each>
+				</ul>
+			</li>
+		</ul>
+	</xsl:template>
+	
+	<xsl:template match="image" mode="post">
+		<xsl:variable name="path">
+			<xsl:apply-templates select="ancestor::folder" mode="getpath" />
+		</xsl:variable>
+		
+		<div id="breadcrumbtrail">
+			<xsl:apply-templates select="parent::folder" mode="breadcrumbtrail" />
+		</div>
+		
+		<div id="albums">
+			<span id="expandedimage">
+				<span style="display: block;" id="linktospan">
+					<a>
+						<xsl:attribute name="href">index.php?id=<xsl:value-of select="@id" /></xsl:attribute>
+						Link to this image</a>
+				</span>
+				<span style="display: block;" id="expandedimagespan">
+					<a href="#" onclick="closeImage(); return false;">
+						<img>
+							<xsl:attribute name="src"><xsl:value-of select="concat('./', $path, @file)" /></xsl:attribute>
+						</img>
+					</a>
+				</span>
+				<span class="name"><xsl:value-of select="@file" /></span>
+			</span>
+			
+			<div id="selectedalbum">
+				<xsl:apply-templates select="parent::*/folder" />
+				<xsl:apply-templates select="parent::*/image">
+					<xsl:with-param name="selectedID" select="@id" />
+				</xsl:apply-templates>
+			</div>
+		
+		</div>
+	</xsl:template>
+	
+	<xsl:template match="folder" mode="getpath">
+		<xsl:value-of select="concat(@name, '/')" />
+	</xsl:template>
 
 </xsl:stylesheet>


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