[Picfinity-commit] SF.net SVN: picfinity: [18] .themes/ajax
Status: Beta
Brought to you by:
espadav8
From: <esp...@us...> - 2007-08-08 14:46:20
|
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. |