Thread: [Picfinity-commit] SF.net SVN: picfinity: [49] trunk/.themes/db
Status: Beta
Brought to you by:
espadav8
From: <esp...@us...> - 2007-08-18 20:37:16
|
Revision: 49 http://picfinity.svn.sourceforge.net/picfinity/?rev=49&view=rev Author: espadav8 Date: 2007-08-18 13:36:55 -0700 (Sat, 18 Aug 2007) Log Message: ----------- Always one you forget Added Paths: ----------- trunk/.themes/db/db.css Removed Paths: ------------- trunk/.themes/db/ajax.css Deleted: trunk/.themes/db/ajax.css =================================================================== --- trunk/.themes/db/ajax.css 2007-08-18 20:35:54 UTC (rev 48) +++ trunk/.themes/db/ajax.css 2007-08-18 20:36:55 UTC (rev 49) @@ -1,221 +0,0 @@ -* -{ - padding: 0; - margin: 0; - border: 0; -} - -a -{ - text-decoration: none; -} - -img -{ - display: block; -} - -html -{ - padding: 10px; -} - -h1, -h1 a -{ - font-size: 1.2em; - text-align: center; - color: #d0d0d0; -} - - - -/* --- ids --- */ - -#themes -{ - position: absolute; - top: 10px; - right: 10px; -} - -#selectedalbum -{ - margin-top: 5px; - clear: both; - float: left; -} - -/* --- folders --- */ - -.image a -{ - height: 100px; - width: 100px; - display: block; - padding: 14px 25px; - border-bottom: 1px solid #ccc; -} - -.folder, -.thumbnail -{ - height: 150px; - width: 150px; - display: block; - float: left; - margin: 0 5px 5px 0; - border: 1px solid #ccc; - position: relative; -} - - -/* --- icons --- */ - -.icon -{ - position: absolute; - top: 4px; - left: 15px; -} - - -/* --- image names --- */ - -.name, -#loadingspan, -#linktospan a -{ - color: #f0f0f0; - font-weight: bold; - padding: 3px 0; - text-align: center; - display: block; - overflow: hidden; - font-size: 0.7em; -} - -/* --- expanded image --- */ - -#linktospan a -{ - padding: 4px 0; -} - -#linktospan a img -{ - position: absolute; - top: 2px; - left: 3px; -} - - -#expandedimage -{ - border: 1px solid #ccc; - float: left; - clear: both; - margin-top: 5px; -} - -#expandedimagespan -{ - border-top: 1px solid #ccc; - border-bottom: 1px solid #ccc; - padding: 5px; -} - -#loadingspan -{ - padding: 3px 5px; - border-bottom: 1px solid #ccc; -} - -/* --- hover actions --- */ - -a:hover, -#breadcrumbtrail ul li a:hover -{ - cursor: pointer; -} - - -/*** BACKGROUND ***/ - -html, -.selected a, -#linktospan a:hover, -#breadcrumbtrail ul li a:hover, -#breadcrumbtrail ul li ul li.selected -{ - background-color: #303030; -} - -.folder, -.thumbnail, -#expandedimage, -#breadcrumbtrail ul li -{ - background-color: #505050; -} - -#linktospan a, -.image a:hover, -#breadcrumbtrail ul li ul li a:hover -{ - background-color: #707070; -} - - -#loadingspan -{ - background-color: #cc0022; -} - - -/*** BREADCRUMB TRAIL ***/ - -#breadcrumbtrail ul -{ - list-style: none; -} - -#breadcrumbtrail a -{ - display: block; - width: 150px; -} - -#breadcrumbtrail img -{ - display: none; -} - -#breadcrumbtrail ul li -{ - margin-right: 5px; - float: left; - width: 150px; - border: 1px solid #ccc; -} -#breadcrumbtrail ul li ul -{ - border: 1px solid #ccc; - left: -999em; - position: absolute; - width: 150px; - z-index: 10; -} - - -#breadcrumbtrail ul li ul li -{ - border: none; -} - -#breadcrumbtrail ul li.over ul, -#breadcrumbtrail ul li:hover ul -{ - left: auto; - margin-left: -1px; -} \ No newline at end of file Copied: trunk/.themes/db/db.css (from rev 45, trunk/.themes/db/ajax.css) =================================================================== --- trunk/.themes/db/db.css (rev 0) +++ trunk/.themes/db/db.css 2007-08-18 20:36:55 UTC (rev 49) @@ -0,0 +1,221 @@ +* +{ + padding: 0; + margin: 0; + border: 0; +} + +a +{ + text-decoration: none; +} + +img +{ + display: block; +} + +html +{ + padding: 10px; +} + +h1, +h1 a +{ + font-size: 1.2em; + text-align: center; + color: #d0d0d0; +} + + + +/* --- ids --- */ + +#themes +{ + position: absolute; + top: 10px; + right: 10px; +} + +#selectedalbum +{ + margin-top: 5px; + clear: both; + float: left; +} + +/* --- folders --- */ + +.image a +{ + height: 100px; + width: 100px; + display: block; + padding: 14px 25px; + border-bottom: 1px solid #ccc; +} + +.folder, +.thumbnail +{ + height: 150px; + width: 150px; + display: block; + float: left; + margin: 0 5px 5px 0; + border: 1px solid #ccc; + position: relative; +} + + +/* --- icons --- */ + +.icon +{ + position: absolute; + top: 4px; + left: 15px; +} + + +/* --- image names --- */ + +.name, +#loadingspan, +#linktospan a +{ + color: #f0f0f0; + font-weight: bold; + padding: 3px 0; + text-align: center; + display: block; + overflow: hidden; + font-size: 0.7em; +} + +/* --- expanded image --- */ + +#linktospan a +{ + padding: 4px 0; +} + +#linktospan a img +{ + position: absolute; + top: 2px; + left: 3px; +} + + +#expandedimage +{ + border: 1px solid #ccc; + float: left; + clear: both; + margin-top: 5px; +} + +#expandedimagespan +{ + border-top: 1px solid #ccc; + border-bottom: 1px solid #ccc; + padding: 5px; +} + +#loadingspan +{ + padding: 3px 5px; + border-bottom: 1px solid #ccc; +} + +/* --- hover actions --- */ + +a:hover, +#breadcrumbtrail ul li a:hover +{ + cursor: pointer; +} + + +/*** BACKGROUND ***/ + +html, +.selected a, +#linktospan a:hover, +#breadcrumbtrail ul li a:hover, +#breadcrumbtrail ul li ul li.selected +{ + background-color: #303030; +} + +.folder, +.thumbnail, +#expandedimage, +#breadcrumbtrail ul li +{ + background-color: #505050; +} + +#linktospan a, +.image a:hover, +#breadcrumbtrail ul li ul li a:hover +{ + background-color: #707070; +} + + +#loadingspan +{ + background-color: #cc0022; +} + + +/*** BREADCRUMB TRAIL ***/ + +#breadcrumbtrail ul +{ + list-style: none; +} + +#breadcrumbtrail a +{ + display: block; + width: 150px; +} + +#breadcrumbtrail img +{ + display: none; +} + +#breadcrumbtrail ul li +{ + margin-right: 5px; + float: left; + width: 150px; + border: 1px solid #ccc; +} +#breadcrumbtrail ul li ul +{ + border: 1px solid #ccc; + left: -999em; + position: absolute; + width: 150px; + z-index: 10; +} + + +#breadcrumbtrail ul li ul li +{ + border: none; +} + +#breadcrumbtrail ul li.over ul, +#breadcrumbtrail ul li:hover ul +{ + left: auto; + margin-left: -1px; +} \ No newline at end of file This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site. |
From: <esp...@us...> - 2007-08-18 20:34:16
|
Revision: 47 http://picfinity.svn.sourceforge.net/picfinity/?rev=47&view=rev Author: espadav8 Date: 2007-08-18 13:34:19 -0700 (Sat, 18 Aug 2007) Log Message: ----------- Move the files around for the new theme Added Paths: ----------- trunk/.themes/db/db.js trunk/.themes/db/db.xsl trunk/.themes/db/getcomments.php Removed Paths: ------------- trunk/.themes/db/ajax.css.bak trunk/.themes/db/ajax.js trunk/.themes/db/ajax.xsl Deleted: trunk/.themes/db/ajax.css.bak =================================================================== --- trunk/.themes/db/ajax.css.bak 2007-08-18 20:31:22 UTC (rev 46) +++ trunk/.themes/db/ajax.css.bak 2007-08-18 20:34:19 UTC (rev 47) @@ -1,117 +0,0 @@ -* -{ - padding: 0; - margin: 0; -} - -html -{ - background: #1a1a1a url('background.gif') repeat-x; -} - -h1 -{ - margin: 10px 0; - text-align: center; - color: #d0d0d0; -} - -#albums -{ - position: relative; - margin: 0 20px; -} - -.name -{ - color: #f0f0f0; - font-weight: bold; -} - - -.folder, -.thumbnail -{ - width: 150px; - height: 150px; - display: block; - float: left; - margin: 5px; - border: 1px solid #ccc; - position: relative; - background: #484848; -} - -.icon -{ - position:relative; - bottom: 125px; - left: 15px; -} - -.folder span.image:hover, -.thumbnail span.image:hover -{ - background: #d0ffd0; -} - -.empty span.image:hover -{ - background: #ffd0d0; -} - -.folder span.name, -.thumbnail span.name -{ - display: block; - text-align: center; - border-top: 1px solid #ccc; - padding: 3px 0; - position: absolute; - bottom: 0; - height: 15px; - overflow: hidden; - width: 150px; -} - -.folder span.image, -.thumbnail span.image -{ - display: block; - text-align: center; - vertical-align: middle; - padding: 14px 25px; - height: 100px; - width: 100px; -} - -div.stack -{ - margin-top: 25px; - padding: 5px; - float: left; - clear: left; -} - -div.stack .folder -{ - background: #484848; - width: 35px; - margin: 0 -1px 0 0; - overflow: hidden; -} - - -div.stack .folder:hover, -div.stack .folder image:hover -{ - width: 150px; - color: #000; -} - -div#selectedalbum -{ - clear: both; - display: block; - float: left; -} \ No newline at end of file Deleted: trunk/.themes/db/ajax.js =================================================================== --- trunk/.themes/db/ajax.js 2007-08-18 20:31:22 UTC (rev 46) +++ trunk/.themes/db/ajax.js 2007-08-18 20:34:19 UTC (rev 47) @@ -1,673 +0,0 @@ -addEvent(window, 'load', importLayout, false); -addEvent(window, 'load', IE6navhover, false); - -var xmlDoc; - -function IE6navhover() -{ - if ((window.attachEvent) && (document.getElementById("breadcrumbtrail") != null)) - { - var sfEls = document.getElementById("breadcrumbtrail").getElementsByTagName("LI"); - for (var i=0; i<sfEls.length; i++) - { - sfEls[i].onmouseover = function() - { - this.className += " over"; - } - sfEls[i].onmouseout = function() - { - this.className = this.className.replace(new RegExp(" over\\b"), ""); - } - } - } -} - -function importLayout() -{ - if (window.XMLHttpRequest) - { - var xmlHttp = new XMLHttpRequest(); - xmlHttp.onreadystatechange = function() { - if (xmlHttp.readyState == 4) - { - xmlDoc = xmlHttp.responseXML; - } - } - xmlHttp.open("GET", "gallery.xml", true); - xmlHttp.send(null) - } - else if (document.implementation && document.implementation.createDocument) - { - xmlDoc = document.implementation.createDocument("", "layout", null); - xmlDoc.load("gallery.xml"); - } - else if (window.ActiveXObject) - { - xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); - xmlDoc.validateOnParse = false; - xmlDoc.resolveExternals = false; - xmlDoc.load("gallery.xml"); - } - else - { - alert('Your browser can\'t handle this script'); - return; - } -} - -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) - else if ((xmlDoc.getElementById) && (xmlDoc.getElementById(elementID) != null)) - { - return xmlDoc.getElementById(elementID); - } - - // this is the next best way, but only Firefox and Opera support this at the moment - else if (document.createTreeWalker) - { - var nodes = document.createTreeWalker(xmlDoc.documentElement, NodeFilter.SHOW_ELEMENT, null, false); - - while ((node = nodes.nextNode()) != null) - { - if (node.getAttribute("id") == elementID) - { - return node; - } - else - { - continue; - } - } - } - - // this is possibly the worse way, and it's still not supported by Safari - else - { - // this causes a problem with Safari - // xmlDocFolders.length == 0 - var xmlDocFolders = xmlDoc.getElementsByTagName("folder"); - - for (var i = 0; i < xmlDocFolders.length; i++) - { - if (xmlDocFolders[i].getAttribute("id") == elementID) - { - return xmlDocFolders[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; -} - -function addEvent(elm, evType, fn, useCapture) -{ - if (elm.addEventListener) { - elm.addEventListener(evType, fn, useCapture); - return true; - } - else if (elm.attachEvent) { - var r = elm.attachEvent('on' + evType, fn); - return r; - } - else { - elm['on' + evType] = fn; - } -} - -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(); - - if(!element.hasChildNodes()) { - return result; - } - - for(var i = 0; i < element.childNodes.length; i++) - { - // 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) -{ - nodePath = (nodePath == undefined) ? '' : nodePath; - - if (element == xmlDoc.documentElement) - { - return '.' + nodePath; - } - else - { - nodePath = element.parentNode.getAttribute("name") + '/' + nodePath; - return getNodePath(element.parentNode, nodePath); - } -} - -function openFolder(elementID) -{ - var layoutNode = getLayoutNode(elementID); - var nodePath = getNodePath(layoutNode); - - var breadcrumbDiv = createBreadcrumbTrail(layoutNode); - - var newAlbumsDiv = document.createElement("div"); - newAlbumsDiv.setAttribute("id", "albums"); - - var backButton = document.createElement("div") - backButton.setAttribute("id", "backbutton"); - - var selectedDiv = document.createElement("div"); - selectedDiv.setAttribute("id", "selectedalbum"); - - var selectedAlbumFolders = getChildNodesByTagName(layoutNode, "folder"); - var selectedAlbumImages = getChildNodesByTagName(layoutNode, "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); - } - - newAlbumsDiv.appendChild(selectedDiv); - - document.getElementById("albums").parentNode.replaceChild(newAlbumsDiv, document.getElementById("albums")); - - IE6navhover() - return false; -} - -function checkFolderContents(element) -{ - if (element.hasChildNodes() == false) - { - return ".themes/ajax/empty.png"; - } - else - { - var nodePath = getNodePath(getLayoutNode(element.getAttribute("id"))); - var imageChildNodes = getChildNodesByTagName(element, "image"); - - if (imageChildNodes.length > 0) - { - var imagePath = '.thumbs/' - + nodePath - + element.getAttribute("name") - + '/' - + imageChildNodes[0].getAttribute("file"); - return imagePath; - } - else - { - return ".themes/ajax/folder.png"; - } - } -} - -function createImageThumbnailContainer(imageNode, optClass) -{ - var imageNodeID = imageNode.getAttribute("id"); - var nodePath = getNodePath(getLayoutNode(imageNodeID)); - - var classes = (optClass == undefined) ? "thumbnail" : "thumbnail " + optClass; - - var albumImageDiv = document.createElement("div"); - albumImageDiv.className = classes; - 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.className = "image"; - - var albumImage = document.createElement("img"); - var imageThumbPath = '.thumbs/' + nodePath + '/' + imageNode.getAttribute("file"); - albumImage.setAttribute("src", imageThumbPath); - imageAnchor.appendChild(albumImage); - - var imageNameSpan = document.createElement("span"); - imageNameSpan.className = "name"; - imageNameSpan.appendChild(document.createTextNode(imageNode.getAttribute("file"))); - - imageSpan.appendChild(imageAnchor) - albumImageDiv.appendChild(imageSpan); - albumImageDiv.appendChild(imageNameSpan); - - return albumImageDiv; -} - -function createSubFolderContainer(folderNode) -{ - var folderID = folderNode.getAttribute("id"); - var nodePath = getNodePath(getLayoutNode(folderID)); - - // create the main folder div - var subFolder = document.createElement("div"); - subFolder.className = "folder"; - 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 - folderAnchor.onclick = function() { openFolder(folderID); return false; }; - - // create a span for the image - var folderImageSpan = document.createElement("span"); - folderImageSpan.className = "image"; - - // create the image - var folderImage = document.createElement("img"); - var imagePath = checkFolderContents(folderNode); - folderImage.setAttribute("src", imagePath); - folderAnchor.appendChild(folderImage); - folderImageSpan.appendChild(folderAnchor); - - // create a span for the folder icon - var iconSpan = document.createElement("span"); - iconSpan.className = "icon"; - - // create the icon image - var iconImage = document.createElement("img"); - iconImage.setAttribute("src", ".themes/ajax/foldericon.png"); - iconSpan.appendChild(iconImage); - - // create a span for the text - var textSpan = document.createElement("span"); - textSpan.className = "name"; - - // create the text - 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 - subFolder.appendChild(folderImageSpan); - subFolder.appendChild(iconSpan); - subFolder.appendChild(textSpan); - - return subFolder; -} - -function createExpandedImage(imageNode) -{ - var nodePath = getNodePath(getLayoutNode(imageNode.getAttribute("id"))); - - var expandedImageDiv = document.createElement("div"); - expandedImageDiv.setAttribute("id", "expandedimage"); - - var linkToDiv = document.createElement("div"); - linkToDiv.setAttribute("id", "linktospan"); - linkToDiv.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")); - linkToDiv.appendChild(linkToAnchor); - - var loadingDiv = document.createElement("div"); - loadingDiv.setAttribute("id", "loadingspan"); - loadingDiv.style.display = "block"; - loadingDiv.appendChild(document.createTextNode("Loading image")); - - var imageAnchor = document.createElement("a"); - imageAnchor.onclick = function() { closeImage(); return false }; - imageAnchor.href = "#"; - - var imageDiv = document.createElement("div"); - imageDiv.setAttribute("id", "expandedimagespan"); - imageDiv.style.display = "none"; - - var albumImage = document.createElement("img"); - var imageThumbPath = nodePath + '/' + imageNode.getAttribute("file"); - albumImage.setAttribute("src", imageThumbPath); - imageAnchor.appendChild(albumImage); - imageDiv.appendChild(imageAnchor); - - var imageNameDiv = document.createElement("div"); - imageNameDiv.className = "name"; - imageNameDiv.appendChild(document.createTextNode(imageNode.getAttribute("file"))); - - expandedImageDiv.appendChild(linkToDiv); - expandedImageDiv.appendChild(loadingDiv); - expandedImageDiv.appendChild(imageDiv); - expandedImageDiv.appendChild(imageNameDiv); - - var expandedImage = new Image(); - expandedImage.onload = function() - { - loadingDiv.style.display = "none"; - imageDiv.style.display = ""; - linkToDiv.style.display = ""; - }; - expandedImage.src = imageThumbPath; - - return expandedImageDiv; -} - -function createBreadcrumbTrail(element) -{ - var breadcrumbTrailDiv = document.createElement("div"); - breadcrumbTrailDiv.setAttribute("id", "breadcrumbtrail"); - - var nodePath = getNodePath(element) + element.getAttribute("name"); - - var paths = nodePath.split('/'); - var currentPath = ''; - - for (var i = 0; i < paths.length - 1; i++) - { - currentPath += paths[i] + '/'; - - var breadcrumbMenu = createBreadcrumbMenu(currentPath, paths[i + 1]); - breadcrumbTrailDiv.appendChild(breadcrumbMenu); - } - - if (document.getElementById("breadcrumbtrail")) - { - document.getElementById("albums").parentNode.replaceChild(breadcrumbTrailDiv, document.getElementById("breadcrumbtrail")); - } - else - { - document.getElementById("albums").parentNode.insertBefore(breadcrumbTrailDiv, document.getElementById("albums")); - } -} - -function createBreadcrumbMenu(path, currentFolder) -{ - var breadcrumbEntry = document.createElement("ul"); - breadcrumbEntry.className = "trailentry"; - - var menuLi = document.createElement("li"); - menuLi.className = "currentfolder"; - - var dropMenu = document.createElement("ul"); - menuLi.appendChild(dropMenu); - - var layoutNode = selectLayoutNodeFromPath(path); - - for (var i = 0; i < layoutNode.childNodes.length; i++) - { - var node = layoutNode.childNodes[i]; - - // these will all be hidden until the :hover - if (node.nodeName == "folder") - { - var dropMenuItem = createBreadcrumbItem(node, currentFolder); - dropMenu.appendChild(dropMenuItem); - } - - // this is for the current folder - if ((node.nodeName == "folder") && (node.getAttribute("name") == currentFolder)) - { - var dropMenuAnchor = document.createElement("a"); - dropMenuAnchor.href = "index.php?id=" + dropMenuItem.getAttribute("id"); - - var nameSpan = document.createElement("span"); - nameSpan.className = "name"; - nameSpan.appendChild(document.createTextNode(node.getAttribute("name"))); - - // create a span for the folder icon - var iconSpan = document.createElement("span"); - iconSpan.className = "icon"; - - // create the icon image - var iconImage = document.createElement("img"); - iconImage.setAttribute("src", ".themes/ajax/foldericon.png"); - iconSpan.appendChild(iconImage); - - dropMenuAnchor.appendChild(nameSpan); - dropMenuAnchor.appendChild(nameSpan); - - menuLi.insertBefore(dropMenuAnchor, menuLi.firstChild); - - breadcrumbEntry.appendChild(menuLi); - } - } - - return breadcrumbEntry; -} - -function createBreadcrumbItem(node, currentFolder) -{ - var dropMenuItem = document.createElement("li"); - dropMenuItem.setAttribute("id", node.getAttribute("id")); - - var dropMenuAnchor = document.createElement("a"); - dropMenuAnchor.href = "index.php?id=" + dropMenuItem.getAttribute("id"); - dropMenuAnchor.onclick = function() { openFolder(dropMenuItem.getAttribute("id")); return false; }; - - if (node.hasChildNodes()) - { - // create a span for the folder icon - var iconSpan = document.createElement("span"); - iconSpan.className = "icon"; - - // create the icon image - var iconImage = document.createElement("img"); - iconImage.setAttribute("src", ".themes/ajax/foldericon.png"); - iconSpan.appendChild(iconImage); - - dropMenuAnchor.appendChild(iconSpan); - } - else - { - dropMenuItem.setAttribute("class", "empty"); - - // create a span for the folder icon - var iconSpan = document.createElement("span"); - iconSpan.className = "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.className = "menuentry selected"; - } - else - { - dropMenuItem.className = "menuentry"; - } - - var nameSpan = document.createElement("span"); - nameSpan.className = "name"; - nameSpan.appendChild(document.createTextNode(node.getAttribute("name"))); - dropMenuAnchor.appendChild(nameSpan); - - dropMenuItem.appendChild(dropMenuAnchor); - return dropMenuItem; -} - -function selectLayoutNodeFromPath(path, node) -{ - node = (node == undefined) ? xmlDoc.documentElement : node; - - if(path == "./") - { - return xmlDoc.documentElement; - } - else if (path != '') - { - path = (path.indexOf("./") == 0) ? path.substring(2) : path; - var currentPath = path.split('/')[0]; - var nodes = getChildNodesByTagName(node, "folder"); - - for (var i = 0; i < nodes.length; i++) - { - if ((nodes[i].getAttribute("name") == currentPath)) - { - return selectLayoutNodeFromPath(path.replace(currentPath + '/', ''), nodes[i]); - } - else - { - continue; - } - } - } - else - { - return node; - } -} - -function showImage(imageID) -{ - var siblingNodes = getChildNodesByTagName(getLayoutNode(imageID).parentNode, "image"); - - for (var i = 0; i < siblingNodes.length; i++) - { - if (siblingNodes[i].getAttribute("id") == imageID) - { - 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 lastSelectedImage = getElementsByClassName("selected", "div", document); - - if (lastSelectedImage) - { - lastSelectedImage[0].className = "thumbnail"; - } - - document.getElementById(imageID).className += " selected"; -} - -function closeImage() -{ - document.getElementById("expandedimage").parentNode.removeChild(document.getElementById("expandedimage")); - - 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 Deleted: trunk/.themes/db/ajax.xsl =================================================================== --- trunk/.themes/db/ajax.xsl 2007-08-18 20:31:22 UTC (rev 46) +++ trunk/.themes/db/ajax.xsl 2007-08-18 20:34:19 UTC (rev 47) @@ -1,338 +0,0 @@ -<?xml version="1.0" encoding="ISO-8859-1"?> -<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> - <xsl:output - method="xml" - 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" - /> - - <xsl:param name="title" /> - <xsl:param name="post_id" /> - <xsl:param name="themename">ajax</xsl:param> - - <xsl:template match="/"> - <html> - <head> - <title><xsl:value-of select="$title" /></title> - - <link href=".themes/ajax/ajax.css" rel="stylesheet" type="text/css"> - <xsl:attribute name="href"><xsl:value-of select="concat('.themes/', $themename, '/', $themename, '.css')" /></xsl:attribute> - </link> - <script type="text/javascript"> - <xsl:attribute name="src"><xsl:value-of select="concat('.themes/', $themename, '/', $themename, '.js')" /></xsl:attribute> - </script> - </head> - - <body> - <h1> - <a href="index.php" onclick="reloadPage();return false;"> - <xsl:value-of select="$title" /> - </a> - </h1> - - <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" /> - - <div id="breadcrumbtrail"></div> - - <div id="albums"> - <xsl:apply-templates select="folder" /> - <xsl:apply-templates select="image" /> - </div> - </xsl:template> - - <xsl:template match="themes"> - <div id="themes"> - <form id="themeform" action="index.php" method="post"> - <fieldset> - <select name="theme" onchange="submit();"> - <option value="">Please choose a theme</option> - <xsl:apply-templates select="theme" /> - </select> - <button type="submit">Go</button> - </fieldset> - </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"> - <div> - <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:otherwise> - </xsl:choose> - <span class="image"> - <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"> - <xsl:variable name="path"> - <xsl:call-template name="replaceCharsInString"> - <xsl:with-param name="stringIn"> - <xsl:text>.thumbs/</xsl:text><xsl:apply-templates select="ancestor::folder" mode="getpath" /><xsl:value-of select="concat(@name, '/', image[1]/@file)" /> - </xsl:with-param> - <xsl:with-param name="charsIn" select="' '"/> - <xsl:with-param name="charsOut" select="'%20'"/> - </xsl:call-template> - </xsl:variable> - <img alt="Sample Image"> - <xsl:attribute name="src"><xsl:value-of select="$path" /></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 alt="Image Folder"> - <xsl:attribute name="src"><xsl:value-of select="concat('.themes/', $themename, '/folder.png')" /></xsl:attribute> - </img> - </xsl:when> - <xsl:otherwise> - <img alt="Empty Folder"> - <xsl:attribute name="src"><xsl:value-of select="concat('.themes/', $themename, '/empty.png')" /></xsl:attribute> - </img> - </xsl:otherwise> - </xsl:choose> - </a> - </span> - <xsl:if test="count(folder) > 0 or count(image) > 0"> - <span class="icon"> - <img alt="Folder Icon"> - <xsl:attribute name="src"><xsl:value-of select="concat('.themes/', $themename, '/foldericon.png')" /></xsl:attribute> - </img> - </span> - </xsl:if> - <span class="name"> - <xsl:value-of select="@name" /> - <xsl:choose> - <xsl:when test="(count(folder) > 0) and (count(image) > 0)"> - <xsl:text disable-output-escaping="yes">&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">&nbsp;</xsl:text>(+<xsl:value-of select="count(folder)" />) - </xsl:when> - <xsl:when test="count(image) > 0"> - <xsl:text disable-output-escaping="yes">&nbsp;</xsl:text>(<xsl:value-of select="count(image)" />) - </xsl:when> - </xsl:choose> - </span> - </div> - </xsl:template> - - <xsl:template match="image"> - <xsl:param name="selectedID">0</xsl:param> - <xsl:variable name="path"> - <xsl:call-template name="replaceCharsInString"> - <xsl:with-param name="stringIn"> - <xsl:text>.thumbs/</xsl:text><xsl:apply-templates select="ancestor::folder" mode="getpath" /><xsl:value-of select="@file" /> - </xsl:with-param> - <xsl:with-param name="charsIn" select="' '"/> - <xsl:with-param name="charsOut" select="'%20'"/> - </xsl:call-template> - </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="$path" /></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" /> - - <xsl:choose> - <!-- the passed in ID is an image --> - <xsl:when test="$folder = 0"> - <xsl:apply-templates select="//image[@id = $post_id]" mode="post" /> - </xsl:when> - - <!-- the passed in ID is an folder --> - <xsl:when test="$folder = 1"> - <xsl:apply-templates select="//folder[@id = $post_id]" mode="post" /> - </xsl:when> - </xsl:choose> - </xsl:template> - - <xsl:template match="folder" mode="post"> - <div id="breadcrumbtrail"> - <xsl:apply-templates select="self::*" mode="breadcrumbtrail" /> - </div> - <div id="albums"> - <div id="selectedalbum"> - <xsl:apply-templates select="folder"/> - <xsl:apply-templates select="image"/> - </div> - </div> - </xsl:template> - - <xsl:template match="folder" mode="breadcrumbtrail"> - <xsl:if test="parent::folder"> - <xsl:apply-templates select="parent::folder" mode="breadcrumbtrail" /> - </xsl:if> - - <xsl:variable name="currentName"><xsl:value-of select="@name" /></xsl:variable> - - <ul class="trailentry"> - <li class="currentfolder"> - <a> - <xsl:attribute name="onclick">openFolder('<xsl:value-of select="@id" />'); return false;</xsl:attribute> - <xsl:attribute name="href">index.php?id=<xsl:value-of select="@id" /></xsl:attribute> - <span class="icon"> - <img alt="Folder Icon"> - <xsl:attribute name="src"><xsl:value-of select="concat('.themes/', $themename, '/foldericon.png')" /></xsl:attribute> - </img> - </span> - <span class="name"><xsl:value-of select="@name" /></span> - </a> - <ul> - <xsl:for-each select="parent::*/folder"> - <li> - <xsl:choose> - <xsl:when test="$currentName = @name"> - <xsl:attribute name="class">menuentry selected</xsl:attribute> - </xsl:when> - <xsl:otherwise> - <xsl:attribute name="class">menuentry</xsl:attribute> - </xsl:otherwise> - </xsl:choose> - <a> - <xsl:attribute name="onclick">openFolder('<xsl:value-of select="@id" />'); return false;</xsl:attribute> - <xsl:attribute name="href">index.php?id=<xsl:value-of select="@id" /></xsl:attribute> - <span class="icon"> - <img src=".themes/ajax/foldericon.png" alt="Folder Icon" /> - </span> - <span class="name"><xsl:value-of select="@name" /></span> - </a> - </li> - </xsl:for-each> - </ul> - </li> - </ul> - </xsl:template> - - <xsl:template match="image" mode="post"> - <xsl:variable name="path"> - <xsl:call-template name="replaceCharsInString"> - <xsl:with-param name="stringIn"> - <xsl:text>./</xsl:text><xsl:apply-templates select="ancestor::folder" mode="getpath" /><xsl:value-of select="@file" /> - </xsl:with-param> - <xsl:with-param name="charsIn" select="' '"/> - <xsl:with-param name="charsOut" select="'%20'"/> - </xsl:call-template> - </xsl:variable> - - <div id="breadcrumbtrail"> - <xsl:apply-templates select="parent::folder" mode="breadcrumbtrail" /> - </div> - - <div id="albums"> - <div id="expandedimage"> - <div id="linktospan"> - <a> - <xsl:attribute name="href">index.php?id=<xsl:value-of select="@id" /></xsl:attribute> - <xsl:text>Link to this image</xsl:text> -<!-- - <img alt="Link to this image"> - <xsl:attribute name="src"><xsl:value-of select="concat('.themes/', $themename, '/link.png')" /></xsl:attribute> - </img> ---> - </a> - </div> - <div id="expandedimagespan"> - <a href="#" onclick="closeImage(); return false;"> - <img> - <xsl:attribute name="src"><xsl:value-of select="$path" /></xsl:attribute> - <xsl:attribute name="alt"><xsl:value-of select="@file" /></xsl:attribute> - </img> - </a> - </div> - <div class="name"><xsl:value-of select="@file" /></div> - </div> - - <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:template name="replaceCharsInString"> - <xsl:param name="stringIn"/> - <xsl:param name="charsIn"/> - <xsl:param name="charsOut"/> - <xsl:choose> - <xsl:when test="contains($stringIn,$charsIn)"> - <xsl:value-of select="concat(substring-before($stringIn,$charsIn),$charsOut)"/> - <xsl:call-template name="replaceCharsInString"> - <xsl:with-param name="stringIn" select="substring-after($stringIn,$charsIn)"/> - <xsl:with-param name="charsIn" select="$charsIn"/> - <xsl:with-param name="charsOut" select="$charsOut"/> - </xsl:call-template> - </xsl:when> - <xsl:otherwise> - <xsl:value-of select="$stringIn"/> - </xsl:otherwise> - </xsl:choose> - </xsl:template> - -</xsl:stylesheet> Copied: trunk/.themes/db/db.js (from rev 45, trunk/.themes/db/ajax.js) =================================================================== --- trunk/.themes/db/db.js (rev 0) +++ trunk/.themes/db/db.js 2007-08-18 20:34:19 UTC (rev 47) @@ -0,0 +1,669 @@ +addEvent(window, 'load', importLayout, false); +addEvent(window, 'load', IE6navhover, false); + +var xmlDoc; + +function IE6navhover() +{ + if ((window.attachEvent) && (document.getElementById("breadcrumbtrail") != null)) + { + var sfEls = document.getElementById("breadcrumbtrail").getElementsByTagName("LI"); + for (var i=0; i<sfEls.length; i++) + { + sfEls[i].onmouseover = function() + { + this.className += " over"; + } + sfEls[i].onmouseout = function() + { + this.className = this.className.replace(new RegExp(" over\\b"), ""); + } + } + } +} + +function importLayout() +{ + if (window.XMLHttpRequest) + { + var xmlHttp = new XMLHttpRequest(); + xmlHttp.onreadystatechange = function() { + if (xmlHttp.readyState == 4) + { + xmlDoc = xmlHttp.responseXML; + } + } + xmlHttp.open("GET", "gallery.xml", true); + xmlHttp.send(null) + } + else if (document.implementation && document.implementation.createDocument) + { + xmlDoc = document.implementation.createDocument("", "layout", null); + xmlDoc.load("gallery.xml"); + } + else if (window.ActiveXObject) + { + xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); + xmlDoc.validateOnParse = false; + xmlDoc.resolveExternals = false; + xmlDoc.load("gallery.xml"); + } + else + { + alert('Your browser can\'t handle this script'); + return; + } +} + +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) + else if ((xmlDoc.getElementById) && (xmlDoc.getElementById(elementID) != null)) + { + return xmlDoc.getElementById(elementID); + } + + // this is the next best way, but only Firefox and Opera support this at the moment + else if (document.createTreeWalker) + { + var nodes = document.createTreeWalker(xmlDoc.documentElement, NodeFilter.SHOW_ELEMENT, null, false); + + while ((node = nodes.nextNode()) != null) + { + if (node.getAttribute("id") == elementID) + { + return node; + } + else + { + continue; + } + } + } + + // this is possibly the worse way, and it's still not supported by Safari + else + { + // this causes a problem with Safari + // xmlDocFolders.length == 0 + var xmlDocFolders = xmlDoc.getElementsByTagName("folder"); + + for (var i = 0; i < xmlDocFolders.length; i++) + { + if (xmlDocFolders[i].getAttribute("id") == elementID) + { + return xmlDocFolders[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; +} + +function addEvent(elm, evType, fn, useCapture) +{ + if (elm.addEventListener) { + elm.addEventListener(evType, fn, useCapture); + return true; + } + else if (elm.attachEvent) { + var r = elm.attachEvent('on' + evType, fn); + return r; + } + else { + elm['on' + evType] = fn; + } +} + +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(); + + if(!element.hasChildNodes()) { + return result; + } + + for(var i = 0; i < element.childNodes.length; i++) + { + // 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) +{ + nodePath = (nodePath == undefined) ? '' : nodePath; + + if (element == xmlDoc.documentElement) + { + return '.' + nodePath; + } + else + { + nodePath = element.parentNode.getAttribute("name") + '/' + nodePath; + return getNodePath(element.parentNode, nodePath); + } +} + +function openFolder(elementID) +{ + var layoutNode = getLayoutNode(elementID); + var nodePath = getNodePath(layoutNode); + + var breadcrumbDiv = createBreadcrumbTrail(layoutNode); + + var newAlbumsDiv = document.createElement("div"); + newAlbumsDiv.setAttribute("id", "albums"); + + var backButton = document.createElement("div") + backButton.setAttribute("id", "backbutton"); + + var selectedDiv = document.createElement("div"); + selectedDiv.setAttribute("id", "selectedalbum"); + + var selectedAlbumFolders = getChildNodesByTagName(layoutNode, "folder"); + var selectedAlbumImages = getChildNodesByTagName(layoutNode, "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); + } + + newAlbumsDiv.appendChild(selectedDiv); + + document.getElementById("albums").parentNode.replaceChild(newAlbumsDiv, document.getElementById("albums")); + + IE6navhover() + return false; +} + +function checkFolderContents(element) +{ + if (element.hasChildNodes() == false) + { + return ".themes/ajax/empty.png"; + } + else + { + var nodePath = getNodePath(getLayoutNode(element.getAttribute("id"))); + var imageChildNodes = getChildNodesByTagName(element, "image"); + + if (imageChildNodes.length > 0) + { + var imagePath = '.thumbs/' + + nodePath + + element.getAttribute("name") + + '/' + + imageChildNodes[0].getAttribute("file"); + return imagePath; + } + else + { + return ".themes/ajax/folder.png"; + } + } +} + +function createImageThumbnailContainer(imageNode, optClass) +{ + var imageNodeID = imageNode.getAttribute("id"); + var nodePath = getNodePath(getLayoutNode(imageNodeID)); + + var classes = (optClass == undefined) ? "thumbnail" : "thumbnail " + optClass; + + var albumImageDiv = document.createElement("div"); + albumImageDiv.className = classes; + 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.className = "image"; + + var albumImage = document.createElement("img"); + var imageThumbPath = '.thumbs/' + nodePath + '/' + imageNode.getAttribute("file"); + albumImage.setAttribute("src", imageThumbPath); + imageAnchor.appendChild(albumImage); + + var imageNameSpan = document.createElement("span"); + imageNameSpan.className = "name"; + imageNameSpan.appendChild(document.createTextNode(imageNode.getAttribute("file"))); + + imageSpan.appendChild(imageAnchor) + albumImageDiv.appendChild(imageSpan); + albumImageDiv.appendChild(imageNameSpan); + + return albumImageDiv; +} + +function createSubFolderContainer(folderNode) +{ + var folderID = folderNode.getAttribute("id"); + var nodePath = getNodePath(getLayoutNode(folderID)); + + // create the main folder div + var subFolder = document.createElement("div"); + subFolder.className = "folder"; + 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 + folderAnchor.onclick = function() { openFolder(folderID); return false; }; + + // create a span for the image + var folderImageSpan = document.createElement("span"); + folderImageSpan.className = "image"; + + // create the image + var folderImage = document.createElement("img"); + var imagePath = checkFolderContents(folderNode); + folderImage.setAttribute("src", imagePath); + folderAnchor.appendChild(folderImage); + folderImageSpan.appendChild(folderAnchor); + + // create a span for the folder icon + var iconSpan = document.createElement("span"); + iconSpan.className = "icon"; + + // create the icon image + var iconImage = document.createElement("img"); + iconImage.setAttribute("src", ".themes/ajax/foldericon.png"); + iconSpan.appendChild(iconImage); + + // create a span for the text + var textSpan = document.createElement("span"); + textSpan.className = "name"; + + // create the text + 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 + subFolder.appendChild(folderImageSpan); + subFolder.appendChild(iconSpan); + subFolder.appendChild(textSpan); + + return subFolder; +} + +function createExpandedImage(imageNode) +{ + var nodePath = getNodePath(getLayoutNode(imageNode.getAttribute("id"))); + + var expandedImageDiv = document.createElement("div"); + expandedImageDiv.setAttribute("id", "expandedimage"); + + var linkToDiv = document.createElement("div"); + linkToDiv.setAttribute("id", "linktospan"); + linkToDiv.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")); + linkToDiv.appendChild(linkToAnchor); + + var loadingDiv = document.createElement("div"); + loadingDiv.setAttribute("id", "loadingspan"); + loadingDiv.style.display = "block"; + loadingDiv.appendChild(document.createTextNode("Loading image")); + + var imageAnchor = document.createElement("a"); + imageAnchor.onclick = function() { closeImage(); return false }; + imageAnchor.href = "#"; + + var imageDiv = document.createElement("div"); + imageDiv.setAttribute("id", "expandedimagespan"); + imageDiv.style.display = "none"; + + var albumImage = document.createElement("img"); + var imageThumbPath = nodePath + '/' + imageNode.getAttribute("file"); + albumImage.setAttribute("src", imageThumbPath); + imageAnchor.appendChild(albumImage); + imageDiv.appendChild(imageAnchor); + + var imageNameDiv = document.createElement("div"); + imageNameDiv.className = "name"; + imageNameDiv.appendChild(document.createTextNode(imageNode.getAttribute("file"))); + + expandedImageDiv.appendChild(linkToDiv); + expandedImageDiv.appendChild(loadingDiv); + expandedImageDiv.appendChild(imageDiv); + expandedImageDiv.appendChild(imageNameDiv); + + var expandedImage = new Image(); + expandedImage.onload = function() + { + loadingDiv.style.display = "none"; + imageDiv.style.display = ""; + linkToDiv.style.display = ""; + }; + expandedImage.src = imageThumbPath; + + return expandedImageDiv; +} + +function createBreadcrumbTrail(element) +{ + var breadcrumbTrailDiv = document.createElement("div"); + breadcrumbTrailDiv.setAttribute("id", "breadcrumbtrail"); + + var nodePath = getNodePath(element) + element.getAttribute("name"); + + var paths = nodePath.split('/'); + var currentPath = ''; + + for (var i = 0; i < paths.length - 1; i++) + { + currentPath += paths[i] + '/'; + + var breadcrumbMenu = createBreadcrumbMenu(currentPath, paths[i + 1]); + breadcrumbTrailDiv.appendChild(breadcrumbMenu); + } + + if (document.getElementById("breadcrumbtrail")) + { + document.getElementById("albums").parentNode.replaceChild(breadcrumbTrailDiv, document.getElementById("breadcrumbtrail")); + } + else + { + document.getElementById("albums").parentNode.insertBefore(breadcrumbTrailDiv, document.getElementById("albums")); + } +} + +function createBreadcrumbMenu(path, currentFolder) +{ + var breadcrumbEntry = document.createElement("ul"); + breadcrumbEntry.className = "trailentry"; + + var menuLi = document.createElement("li"); + menuLi.className = "currentfolder"; + + var dropMenu = document.createElement("ul"); + menuLi.appendChild(dropMenu); + + var layoutNode = selectLayoutNodeFromPath(path); + + for (var i = 0; i < layoutNode.childNodes.length; i++) + { + var node = layoutNode.childNodes[i]; + + // these will all be hidden until the :hover + if (node.nodeName == "folder") + { + var dropMenuItem = createBreadcrumbItem(node, currentFolder); + dropMenu.appendChild(dropMenuItem); + } + + // this is for the current folder + if ((node.nodeName == "folder") && (node.getAttribute("name") == currentFolder)) + { + var dropMenuAnchor = document.createElement("a"); + dropMenuAnchor.href = "index.php?id=" + dropMenuItem.getAttribute("id"); + + var nameSpan = document.createElement("span"); + nameSpan.className = "name"; + nameSpan.appendChild(document.createTextNode(node.getAttribute("name"))); + + // create a span for the folder icon + var iconSpan = document.createElement("span"); + iconSpan.className = "icon"; + + // create the icon image + var iconImage = document.createElement("img"); + iconImage.setAttribute("src", ".themes/ajax/foldericon.png"); + iconSpan.appendChild(iconImage); + + dropMenuAnchor.appendChild(nameSpan); + dropMenuAnchor.appendChild(nameSpan); + + menuLi.insertBefore(dropMenuAnchor, menuLi.firstChild); + + breadcrumbEntry.appendChild(menuLi); + } + } + + return breadcrumbEntry; +} + +function createBreadcrumbItem(node, currentFolder) +{ + var dropMenuItem = document.createElement("li"); + dropMenuItem.setAttribute("id", node.getAttribute("id")); + + var dropMenuAnchor = document.createElement("a"); + dropMenuAnchor.href = "index.php?id=" + dropMenuItem.getAttribute("id"); + dropMenuAnchor.onclick = function() { openFolder(dropMenuItem.getAttribute("id")); return false; }; + + if (node.hasChildNodes()) + { + // create a span for the folder icon + var iconSpan = document.createElement("span"); + iconSpan.className = "icon"; + + // create the icon image + var iconImage = document.createElement("img"); + iconImage.setAttribute("src", ".themes/ajax/foldericon.png"); + iconSpan.appendChild(iconImage); + + dropMenuAnchor.appendChild(iconSpan); + } + else + { + dropMenuItem.setAttribute("class", "empty"); + + // create a span for the folder icon + var iconSpan = document.createElement("span"); + iconSpan.className = "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.className = "menuentry selected"; + } + else + { + dropMenuItem.className = "menuentry"; + } + + var nameSpan = document.createElement("span"); + nameSpan.className = "name"; + nameSpan.appendChild(document.createTextNode(node.getAttribute("name"))); + dropMenuAnchor.appendChild(nameSpan); + + dropMenuItem.appendChild(dropMenuAnchor); + return dropMenuItem; +} + +function selectLayoutNodeFromPath(path, node) +{ + node = (node == undefined) ? xmlDoc.documentElement : node; + + if(path == "./") + { + return xmlDoc.documentElement; + } + else if (path != '') + { + path = (path.indexOf("./") == 0) ? path.substring(2) : path; + var currentPath = path.split('/')[0]; + var nodes = getChildNodesByTagName(node, "folder"); + + for (var i = 0; i < nodes.length; i++) + { + if ((nodes[i].getAttribute("name") == currentPath)) + { + return selectLayoutNodeFromPath(path.replace(currentPath + '/', ''), nodes[i]); + } + else + { + continue; + } + } + } + else + { + return node; + } +} + +function showImage(imageID) +{ + var siblingNodes = getChildNodesByTagName(getLayoutNode(imageID).parentNode, "image"); + + var expandedImage = createExpandedImage(getLayoutNode(imageID)); + + // var imageComments = createComments(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 lastSelectedImage = getElementsByClassName("selected", "div", document); + + if (lastSelectedImage) + { + lastSelectedImage[0].className = "thumbnail"; + } + + document.getElementById(imageID).className += " selected"; +} + +function closeImage() +{ + document.getElementById("expandedimage").parentNode.removeChild(document.getElementById("expandedimage")); + + 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 Copied: trunk/.themes/db/db.xsl (from rev 45, trunk/.themes/db/ajax.xsl) =================================================================== --- trunk/.themes/db/db.xsl (rev 0) +++ trunk/.themes/db/db.xsl 2007-08-18 20:34:19 UTC (rev 47) @@ -0,0 +1,338 @@ +<?xml version="1.0" encoding="ISO-8859-1"?> +<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> + <xsl:output + method="xml" + 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" + /> + + <xsl:param name="title" /> + <xsl:param name="post_id" /> + <xsl:param name="themename">db</xsl:param> + + <xsl:template match="/"> + <html> + <head> + <title><xsl:value-of select="$title" /></title> + + <link rel="stylesheet" type="text/css"> + <xsl:attribute name="href"><xsl:value-of select="concat('.themes/', $themename, '/', $themename, '.css')" /></xsl:attribute> + </link> + <script type="text/javascript"> + <xsl:attribute name="src"><xsl:value-of select="concat('.themes/', $themename, '/', $themename, '.js')" /></xsl:attribute> + </script> + </head> + + <body> + <h1> + <a href="index.php" onclick="reloadPage();return false;"> + <xsl:value-of select="$title" /> + </a> + </h1> + + <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" /> + + <div id="breadcrumbtrail"></div> + + <div id="albums"> + <xsl:apply-templates select="folder" /> + <xsl:apply-templates select="image" /> + </div> + </xsl:template> + + <xsl:template match="themes"> + <div id="themes"> + <form id="themeform" action="index.php" method="post"> + <fieldset> + <select name="theme" onchange="submit();"> + <option value="">Please choose a theme</option> + <xsl:apply-templates select="theme" /> + </select> + <button type="submit">Go</button> + </fieldset> + </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"> + <div> + <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:otherwise> + </xsl:choose> + <span class="image"> + <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"> + <xsl:variable name="path"> + <xsl:call-template name="replaceCharsInString"> + <xsl:with-param name="stringIn"> + <xsl:text>.thumbs/</xsl:text><xsl:apply-templates select="ancestor::folder" mode="getpath" /><xsl:value-of select="concat(@name, '/', image[1]/@file)" /> + </xsl:with-param> + <xsl:with-param name="charsIn" select="' '"/> + <xsl:with-param name="charsOut" select="'%20'"/> + </xsl:call-template> + </xsl:variable> + <img alt="Sample Image"> + <xsl:attribute name="src"><xsl:value-of select="$path" /></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 alt="Image Folder"> + <xsl:attribute name="src"><xsl:value-of select="concat('.themes/', $themename, '/folder.png')" /></xsl:attribute> + </img> + </xsl:when> + <xsl:otherwise> + <img alt="Empty Folder"> + <xsl:attribute name="src"><xsl:value-of select="concat('.themes/', $themename, '/empty.png')" /></xsl:attribute> + </img> + </xsl:otherwise> + </xsl:choose> + </a> + </span> + <xsl:if test="count(folder) > 0 or count(image) > 0"> + <span class="icon"> + <img alt="Folder Icon"> + <xsl:attribute name="src"><xsl:value-of select="concat('.themes/', $themename, '/foldericon.png')" /></xsl:attribute> + </img> + </span> + </xsl:if> + <span class="name"> + <xsl:value-of select="@name" /> + <xsl:choose> + <xsl:when test="(count(folder) > 0) and (count(image) > 0)"> + <xsl:text disable-output-escaping="yes">&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">&nbsp;</xsl:text>(+<xsl:value-of select="count(folder)" />) + </xsl:when> + <xsl:when test="count(image) > 0"> + <xsl:text disable-output-escaping="yes">&nbsp;</xsl:text>(<xsl:value-of select="count(image)" />) + </xsl:when> + </xsl:choose> + </span> + </div> + </xsl:template> + + <xsl:template match="image"> + <xsl:param name="selectedID">0</xsl:param> + <xsl:variable name="path"> + <xsl:call-template name="replaceCharsInString"> + <xsl:with-param name="stringIn"> + <xsl:text>.thumbs/</xsl:text><xsl:apply-templates select="ancestor::folder" mode="getpath" /><xsl:value-of select="@file" /> + </xsl:with-param> + <xsl:with-param name="charsIn" select="' '"/> + <xsl:with-param name="charsOut" select="'%20'"/> + </xsl:call-template> + </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="$path" /></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" /> + + <xsl:choose> + <!-- the passed in ID is an image --> + <xsl:when test="$folder = 0"> + <xsl:apply-templates select="//image[@id = $post_id]" mode="post" /> + </xsl:when> + + <!-- the passed in ID is an folder --> + <xsl:when test="$folder = 1"> + <xsl:apply-templates select="//folder[@id = $post_id]" mode="post" /> + </xsl:when> + </xsl:choose> + </xsl:template> + + <xsl:template match="folder" mode="post"> + <div id="breadcrumbtrail"> + <xsl:apply-templates select="self::*" mode="breadcrumbtrail" /> + </div> + <div id="albums"> + <div id="selectedalbum"> + <xsl:apply-templates select="folder"/> + <xsl:apply-templates select="image"/> + </div> + </div> + </xsl:template> + + <xsl:template match="folder" mode="breadcrumbtrail"> + <xsl:if test="parent::folder"> + <xsl:apply-templates select="parent::folder" mode="breadcrumbtrail" /> + </xsl:if> + + <xsl:variable name="currentName"><xsl:value-of select="@name" ... [truncated message content] |
From: <esp...@us...> - 2007-08-19 11:35:30
|
Revision: 50 http://picfinity.svn.sourceforge.net/picfinity/?rev=50&view=rev Author: espadav8 Date: 2007-08-19 04:35:33 -0700 (Sun, 19 Aug 2007) Log Message: ----------- Various updates to the new theme First workings of a comment system No way to add new comments yet though Modified Paths: -------------- trunk/.themes/db/db.css trunk/.themes/db/db.js trunk/.themes/db/getcomments.php Modified: trunk/.themes/db/db.css =================================================================== --- trunk/.themes/db/db.css 2007-08-18 20:36:55 UTC (rev 49) +++ trunk/.themes/db/db.css 2007-08-19 11:35:33 UTC (rev 50) @@ -1,3 +1,6 @@ +@import "colours.css"; +@import "borders.css"; + * { padding: 0; @@ -2,3 +5,2 @@ margin: 0; - border: 0; } @@ -25,11 +27,9 @@ { font-size: 1.2em; text-align: center; - color: #d0d0d0; } - /* --- ids --- */ #themes @@ -39,6 +39,13 @@ right: 10px; } + +#comments +{ + float: left; + clear: both; +} + #selectedalbum { margin-top: 5px; @@ -54,7 +61,6 @@ width: 100px; display: block; padding: 14px 25px; - border-bottom: 1px solid #ccc; } .folder, @@ -65,7 +71,6 @@ display: block; float: left; margin: 0 5px 5px 0; - border: 1px solid #ccc; position: relative; } @@ -86,7 +91,6 @@ #loadingspan, #linktospan a { - color: #f0f0f0; font-weight: bold; padding: 3px 0; text-align: center; @@ -112,7 +116,6 @@ #expandedimage { - border: 1px solid #ccc; float: left; clear: both; margin-top: 5px; @@ -120,15 +123,12 @@ #expandedimagespan { - border-top: 1px solid #ccc; - border-bottom: 1px solid #ccc; padding: 5px; } #loadingspan { padding: 3px 5px; - border-bottom: 1px solid #ccc; } /* --- hover actions --- */ @@ -139,40 +139,6 @@ cursor: pointer; } - -/*** BACKGROUND ***/ - -html, -.selected a, -#linktospan a:hover, -#breadcrumbtrail ul li a:hover, -#breadcrumbtrail ul li ul li.selected -{ - background-color: #303030; -} - -.folder, -.thumbnail, -#expandedimage, -#breadcrumbtrail ul li -{ - background-color: #505050; -} - -#linktospan a, -.image a:hover, -#breadcrumbtrail ul li ul li a:hover -{ - background-color: #707070; -} - - -#loadingspan -{ - background-color: #cc0022; -} - - /*** BREADCRUMB TRAIL ***/ #breadcrumbtrail ul @@ -196,26 +162,68 @@ margin-right: 5px; float: left; width: 150px; - border: 1px solid #ccc; } + #breadcrumbtrail ul li ul { - border: 1px solid #ccc; left: -999em; position: absolute; width: 150px; z-index: 10; } +#breadcrumbtrail ul li.over ul, +#breadcrumbtrail ul li:hover ul +{ + left: auto; + margin-left: -1px; +} -#breadcrumbtrail ul li ul li + +/*** COMMENTS ***/ + +.comment { - border: none; + padding: 5px; + margin-top: 5px; + clear: both; } -#breadcrumbtrail ul li.over ul, -#breadcrumbtrail ul li:hover ul + + +.comment .date, +.comment .name, +.comment .web { - left: auto; - margin-left: -1px; + font-size: 0.8em; + float: left; + text-align: right; + font-weight: normal; + padding: 0; +} + +.comment .date +{ + float: right; +} + +.comment .web +{ + margin-left: 10px; +} + +.comment .rating +{ + display: block; + text-align: right; + float: right; + clear: both; +} + + +.comment .commenttext +{ + clear: both; + float: left; + margin: 5px 0; } \ No newline at end of file Modified: trunk/.themes/db/db.js =================================================================== --- trunk/.themes/db/db.js 2007-08-18 20:36:55 UTC (rev 49) +++ trunk/.themes/db/db.js 2007-08-19 11:35:33 UTC (rev 50) @@ -2,6 +2,7 @@ addEvent(window, 'load', IE6navhover, false); var xmlDoc; +var xmlHttp; function IE6navhover() { @@ -601,6 +602,12 @@ document.getElementById("selectedalbum").parentNode.insertBefore(expandedImage, document.getElementById("selectedalbum")); } + // remove the old comments + if (document.getElementById("comments")) + document.getElementById("comments").parentNode.removeChild(document.getElementById("comments")); + + getCommentsXML(imageID); + var lastSelectedImage = getElementsByClassName("selected", "div", document); if (lastSelectedImage) @@ -614,6 +621,7 @@ function closeImage() { document.getElementById("expandedimage").parentNode.removeChild(document.getElementById("expandedimage")); + document.getElementById("comments").parentNode.removeChild(document.getElementById("comments")); var lastSelectedImage = getElementsByClassName("selected", "div", document); @@ -621,10 +629,108 @@ lastSelectedImage[0].className = "thumbnail"; } +function getCommentsXML(imageID) +{ + if (window.XMLHttpRequest) + { + xmlHttp = new XMLHttpRequest(); + xmlHttp.onprogress = commentsProgress; + xmlHttp.onreadystatechange = function() { + if (xmlHttp.readyState == 4) + { + createCommentsSection(); + } + } + xmlHttp.open("GET", ".themes/db/getcomments.php?md5=" + imageID, true); + xmlHttp.send(null) + } +} +function commentsProgress(e) +{ +} +function createCommentsSection() +{ + var comments = xmlHttp.responseXML.documentElement; + var commentsDiv = document.createElement("div"); + commentsDiv.setAttribute("id", "comments"); + + for (var i = 0; i < comments.childNodes.length; i++) + { + var currentComment = comments.childNodes[i]; + + var comment = document.createElement("div"); + comment.className = "comment"; + if (i % 2) comment.className += " odd"; + + var commentOwner = document.createElement("span"); + commentOwner.className = "name"; + var commentOwnerAnchor = document.createElement("a"); + commentOwner.appendChild(commentOwnerAnchor); + + var commentOwnerWeb = document.createElement("span"); + commentOwnerWeb.className = "web"; + var commentOwnerWebAnchor = document.createElement("a"); + commentOwnerWeb.appendChild(commentOwnerWebAnchor); + + var commentRating = document.createElement("span"); + commentRating.className = "rating"; + + var commentContents = document.createElement("span"); + commentContents.className = "commenttext"; + + var commentDate = document.createElement("span"); + commentDate.className = "date"; + + for (var j = 0; j < currentComment.childNodes.length; j++) + { + var currentNodeName = currentComment.childNodes[j].nodeName; + var currentNodeValue = currentComment.childNodes[j].textContent; + + if (currentNodeName == "name") + { + commentOwnerAnchor.appendChild(document.createTextNode(currentNodeValue)); + } + else if (currentNodeName == "www") + { + commentOwnerWebAnchor.appendChild(document.createTextNode(currentNodeValue)); + commentOwnerWebAnchor.setAttribute("href", "http://" + currentNodeValue); + } + else if (currentNodeName == "email") + { + commentOwnerAnchor.setAttribute("href", "mailto:" + currentNodeValue); + } + else if (currentNodeName == "rating") + { + commentRating.appendChild(document.createTextNode(currentNodeValue)); + } + else if (currentNodeName == "comment_text") + { + commentContents.appendChild(document.createTextNode(currentNodeValue)); + } + else if (currentNodeName == "added") + { + commentDate.appendChild(document.createTextNode(currentNodeValue)); + } + } + + comment.appendChild(commentDate); + comment.appendChild(commentOwner); + comment.appendChild(commentOwnerWeb); + comment.appendChild(commentContents); + comment.appendChild(commentRating); + + commentsDiv.appendChild(comment); + } + + document.getElementById("expandedimage").parentNode.insertBefore(commentsDiv, document.getElementById("expandedimage").nextSibling); +} + + + function getCookie(name) { var start = document.cookie.indexOf( name + "=" ); var len = start + name.length + 1; Modified: trunk/.themes/db/getcomments.php =================================================================== --- trunk/.themes/db/getcomments.php 2007-08-18 20:36:55 UTC (rev 49) +++ trunk/.themes/db/getcomments.php 2007-08-19 11:35:33 UTC (rev 50) @@ -12,29 +12,35 @@ , date_added FROM comments INNER JOIN images - ON images.image_id - WHERE image_md5 = '$image_md5'"; + WHERE images.image_id = comments.image_id + AND images.image_md5 = '$image_md5' + ORDER BY date_added DESC"; $result = mysql_query($query); if ($result) { - $comments_xml = "<?xml version=\"1.0\"?>\n" + header('Content-Type: text/xml'); + $comments_xml = "<?xml version=\"1.0\"?>" . "<comments>"; while ($row = mysql_fetch_assoc($result)) { - $comments_xml .= " - <comment> - <name>$row[user_name]</name> - <www>$row[user_www]</www> - <email>$row[user_email]</email> - <comment_text>$row[user_comment]</comment_text> - <rating>$row[comment_rating]</rating> - <added>$row[date_added]</added> - </comment>"; + $comments_xml .= "<comment>" + . "<name>$row[user_name]</name>" + . "<www>$row[user_www]</www>" + . "<email>$row[user_email]</email>" + . "<comment_text>$row[user_comment]</comment_text>" + . "<rating>$row[comment_rating]</rating>" + . "<added>$row[date_added]</added>" + . "</comment>"; } - $comments_xml .= "\n</comments>\n"; + $comments_xml .= "</comments>"; echo $comments_xml; } + else + { + header('Content-Type: text/xml'); + echo "<error><message>Error in getting the results</message></error>"; + } ?> This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site. |
From: <esp...@us...> - 2007-08-19 11:47:31
|
Revision: 52 http://picfinity.svn.sourceforge.net/picfinity/?rev=52&view=rev Author: espadav8 Date: 2007-08-19 04:47:34 -0700 (Sun, 19 Aug 2007) Log Message: ----------- Missed 2 CSS files Added Paths: ----------- trunk/.themes/db/borders.css trunk/.themes/db/colours.css Added: trunk/.themes/db/borders.css =================================================================== --- trunk/.themes/db/borders.css (rev 0) +++ trunk/.themes/db/borders.css 2007-08-19 11:47:34 UTC (rev 52) @@ -0,0 +1,31 @@ +*, +#breadcrumbtrail ul li ul li +{ + border: 0; +} + +.image a +{ + border-bottom: 1px solid #ccc; +} + +.folder, +.thumbnail, +#expandedimage, +#breadcrumbtrail ul li, +#breadcrumbtrail ul li ul, +.comment +{ + border: 1px solid #ccc; +} + +#expandedimagespan +{ + border-top: 1px solid #ccc; + border-bottom: 1px solid #ccc; +} + +#loadingspan +{ + border-bottom: 1px solid #ccc; +} \ No newline at end of file Added: trunk/.themes/db/colours.css =================================================================== --- trunk/.themes/db/colours.css (rev 0) +++ trunk/.themes/db/colours.css 2007-08-19 11:47:34 UTC (rev 52) @@ -0,0 +1,60 @@ +/*** TEXT COLOURS ***/ +* +{ + color: #f0f0f0; +} + +h1, +h1 a +{ + color: #d0d0d0; +} + +.comment a, +.comment.odd .date, +.comment.odd .rating +{ + color: #c0c0c0; +} + +.comment.odd a, +.comment .date, +.comment .rating +{ + color: #000000; +} + + +/*** BACKGROUND COLOURS ***/ + +html, +.selected a, +#linktospan a:hover, +#breadcrumbtrail ul li a:hover, +#breadcrumbtrail ul li ul li.selected +{ + background-color: #303030; +} + +.folder, +.thumbnail, +.comment, +#expandedimage, +#breadcrumbtrail ul li +{ + background-color: #505050; +} + +#linktospan a, +.image a:hover, +.comment.odd, +#breadcrumbtrail ul li ul li a:hover +{ + background-color: #707070; +} + + +#loadingspan +{ + background-color: #cc0022; +} This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site. |
From: <esp...@us...> - 2007-09-02 08:12:02
|
Revision: 58 http://picfinity.svn.sourceforge.net/picfinity/?rev=58&view=rev Author: espadav8 Date: 2007-08-25 08:04:21 -0700 (Sat, 25 Aug 2007) Log Message: ----------- A lot of changes to get the comments working JS -- Add the functions to get the comments and post new comments Create the form when we view an image When a new comment is posted, reload the comments addComment.php -- get the data via a POST and make sure it's been real_escaped Return either a success or error message to be handled getcomments.php -- Strip any slashes out that were added when the comment was added CSS -- A bit of clean up Add all the comment and commentform CSS (this needs cleaning up) XSL -- If there are comments for the selected image then show them Modified Paths: -------------- trunk/.themes/db/borders.css trunk/.themes/db/colours.css trunk/.themes/db/db.css trunk/.themes/db/db.js trunk/.themes/db/db.xsl trunk/.themes/db/getcomments.php Added Paths: ----------- trunk/.themes/db/addComment.php Added: trunk/.themes/db/addComment.php =================================================================== --- trunk/.themes/db/addComment.php (rev 0) +++ trunk/.themes/db/addComment.php 2007-08-25 15:04:21 UTC (rev 58) @@ -0,0 +1,62 @@ +<?php + require_once('../../db.inc'); + + $image_md5 = mysql_real_escape_string($_POST['image_id']); + $ajax = mysql_real_escape_string($_POST['ajax']); + $name = mysql_real_escape_string($_POST['name']); + $email = mysql_real_escape_string($_POST['email']); + $web = mysql_real_escape_string($_POST['web']); + $comment = mysql_real_escape_string($_POST['comment']); + $user_ip = mysql_real_escape_string($_SERVER['REMOTE_ADDR']); + $approved = "1"; + + $query = "SELECT image_id FROM images WHERE image_md5 = '$image_md5'"; + $select_result = mysql_query($query); + + if ($select_result) + { + $image_id = mysql_fetch_row($select_result); + + $query = " + INSERT INTO comments + ( image_id + , user_name + , user_www + , user_email + , user_comment + , user_ip + , comment_rating + , approved + ) + VALUES + ( $image_id[0] + , '$name' + , '$web' + , '$email' + , '$comment' + , '$user_ip' + , 0 + , $approved + )"; + + $insert_result = mysql_query($query); + if ($insert_result) + { + header('Content-Type: text/xml'); + echo "<success><message>Comment added successfully</message></success>"; + } + else + { + header('Content-Type: text/xml'); + echo "<error><message>Error inserting comment</message>\n" + ."<message>".mysql_error()."</message>\n" + ."<message>".$query."</message>\n</error>"; + } + } + else + { + header('Content-Type: text/xml'); + echo "<error><message>Image md5 doesn't exist</message></error>"; + } + +?> Modified: trunk/.themes/db/borders.css =================================================================== --- trunk/.themes/db/borders.css 2007-08-25 14:55:36 UTC (rev 57) +++ trunk/.themes/db/borders.css 2007-08-25 15:04:21 UTC (rev 58) @@ -4,11 +4,6 @@ border: 0; } -.image a -{ - border-bottom: 1px solid #ccc; -} - .folder, .thumbnail, #expandedimage, @@ -19,13 +14,22 @@ border: 1px solid #ccc; } +#commentform, #expandedimagespan { border-top: 1px solid #ccc; +} + +.image a, +#loadingspan, +#expandedimagespan +{ border-bottom: 1px solid #ccc; } -#loadingspan +#commentform input, +#commentform textarea, +#commentform button { - border-bottom: 1px solid #ccc; + border: 1px solid #000; } \ No newline at end of file Modified: trunk/.themes/db/colours.css =================================================================== --- trunk/.themes/db/colours.css 2007-08-25 14:55:36 UTC (rev 57) +++ trunk/.themes/db/colours.css 2007-08-25 15:04:21 UTC (rev 58) @@ -19,7 +19,10 @@ .comment.odd a, .comment .date, -.comment .rating +.comment .rating, +input, +textarea, +button { color: #000000; } @@ -30,6 +33,7 @@ html, .selected a, #linktospan a:hover, +#addcomment a:hover, #breadcrumbtrail ul li a:hover, #breadcrumbtrail ul li ul li.selected { @@ -48,6 +52,7 @@ #linktospan a, .image a:hover, .comment.odd, +#commentform, #breadcrumbtrail ul li ul li a:hover { background-color: #707070; Modified: trunk/.themes/db/db.css =================================================================== --- trunk/.themes/db/db.css 2007-08-25 14:55:36 UTC (rev 57) +++ trunk/.themes/db/db.css 2007-08-25 15:04:21 UTC (rev 58) @@ -89,7 +89,8 @@ .name, #loadingspan, -#linktospan a +#linktospan a, +#addcomment a { font-weight: bold; padding: 3px 0; @@ -217,10 +218,40 @@ clear: both; } - .comment .commenttext { clear: both; float: left; margin: 5px 0 0 0; -} \ No newline at end of file +} + + +#commentform form +{ + padding: 0 5px 5px 5px +} + +#commentform button, +#commentform label span +{ + font-size: 0.9em; +} + +#commentform label, +#commentform label span, +#commentform button +{ + float: left; + clear: both; +} + +#commentform label +{ + margin-bottom: 5px; +} + +#commentform button, +#commentform label span +{ + width: 100px; +} Modified: trunk/.themes/db/db.js =================================================================== --- trunk/.themes/db/db.js 2007-08-25 14:55:36 UTC (rev 57) +++ trunk/.themes/db/db.js 2007-08-25 15:04:21 UTC (rev 58) @@ -397,10 +397,13 @@ imageNameDiv.className = "name"; imageNameDiv.appendChild(document.createTextNode(imageNode.getAttribute("file"))); + var commentForm = createCommentForm(imageNode.getAttribute("id")); + expandedImageDiv.appendChild(linkToDiv); expandedImageDiv.appendChild(loadingDiv); expandedImageDiv.appendChild(imageDiv); expandedImageDiv.appendChild(imageNameDiv); + expandedImageDiv.appendChild(commentForm); var expandedImage = new Image(); expandedImage.onload = function() @@ -414,6 +417,100 @@ return expandedImageDiv; } +function createCommentForm(imageID) +{ + var commentFormDiv = document.createElement("div") + commentFormDiv.setAttribute("id", "commentform"); + + var addCommentSpan = document.createElement("div"); + addCommentSpan.setAttribute("id", "addcomment"); + + var addCommentAnchor = document.createElement("a"); + addCommentSpan.setAttribute("href", "#"); + addCommentAnchor.appendChild(document.createTextNode("Add Comment")); + addCommentAnchor.onclick = toggleCommentsForm; + addCommentSpan.appendChild(addCommentAnchor); + + var commentForm = document.createElement("form"); + commentForm.onsubmit = addNewComment; + commentForm.action = ".themes/db/postComment.php"; + commentForm.style.display = "none"; + + var commentFormFieldset = document.createElement("fieldset"); + + var ajaxInput = document.createElement("input"); + ajaxInput.type = "hidden"; + ajaxInput.value = "0"; + ajaxInput.name = "ajax"; + + var imageIDInput = document.createElement("input"); + imageIDInput.type = "hidden"; + imageIDInput.value = imageID; + imageIDInput.name = "image_id"; + + var nameLabel = createFormInput("user_name", "Name:"); + var emailLabel = createFormInput("user_email", "Email:"); + var webLabel = createFormInput("user_web", "Web:"); + var commentLabel = createFormTextarea("user_comment", "Comment:"); + var submitButton = createFormButton("submit", "Submit"); + + commentFormFieldset.appendChild(ajaxInput); + commentFormFieldset.appendChild(imageIDInput); + commentFormFieldset.appendChild(nameLabel); + commentFormFieldset.appendChild(emailLabel); + commentFormFieldset.appendChild(webLabel); + commentFormFieldset.appendChild(commentLabel); + commentFormFieldset.appendChild(submitButton); + + commentForm.appendChild(commentFormFieldset); + + commentFormDiv.appendChild(addCommentSpan); + commentFormDiv.appendChild(commentForm); + + return commentFormDiv; +} + +function createFormInput(inputName, spanText) +{ + var tmpLabel = document.createElement("label"); + var tmpSpan = document.createElement("span"); + tmpSpan.appendChild(document.createTextNode(spanText)); + var tmpInput = document.createElement("input"); + tmpInput.type = "text"; + tmpInput.value = ""; + tmpInput.name = inputName; + + tmpLabel.appendChild(tmpSpan); + tmpLabel.appendChild(tmpInput); + + return tmpLabel; +} + +function createFormTextarea(textareaName, spanText) +{ + var tmpLabel = document.createElement("label"); + var tmpSpan = document.createElement("span"); + tmpSpan.appendChild(document.createTextNode(spanText)); + var tmpTextarea = document.createElement("textarea"); + tmpTextarea.name = textareaName; + tmpTextarea.rows = 3; + tmpTextarea.cols = 50; + + tmpLabel.appendChild(tmpSpan); + tmpLabel.appendChild(tmpTextarea); + + return tmpLabel; +} + +function createFormButton(buttonType, buttonText) +{ + var tmpButton = document.createElement("button"); + tmpButton.appendChild(document.createTextNode(buttonText)); + tmpButton.type = buttonType; + + return tmpButton; +} + function createBreadcrumbTrail(element) { var breadcrumbTrailDiv = document.createElement("div"); @@ -726,11 +823,82 @@ commentsDiv.appendChild(comment); } - document.getElementById("expandedimage").parentNode.insertBefore(commentsDiv, document.getElementById("expandedimage").nextSibling); + if (document.getElementById("comments")) + { + document.getElementById("comments").parentNode.replaceChild(commentsDiv, document.getElementById("comments")); + } + else + { + document.getElementById("expandedimage").parentNode.insertBefore(commentsDiv, document.getElementById("expandedimage").nextSibling); + } } +function toggleCommentsForm() +{ + var commentForm = document.getElementById("commentform").getElementsByTagName("form")[0]; + if (commentForm.style.display != "none") + commentForm.style.display = "none"; + else + { + commentForm.style.display = ""; + commentForm.getElementsByTagName("input")[0].focus(); + } +} +function resetCommentsForm() +{ + var commentForm = document.getElementById("commentform").getElementsByTagName("form")[0]; + commentForm.reset(); +} + +function addNewComment() +{ + if (window.XMLHttpRequest) + { + var commentForm = document.getElementById("commentform").getElementsByTagName("form")[0]; + + var postData = "image_id=" + commentForm.image_id.value + "&" + + "ajax=1&" + + "name=" + commentForm.user_name.value + "&" + + "email=" + commentForm.user_email.value + "&" + + "web=" + commentForm.user_web.value + "&" + + "comment=" + encodeURIComponent(commentForm.user_comment.value); + + xmlHttp = new XMLHttpRequest(); + xmlHttp.open("POST", ".themes/db/addComment.php", true); + + xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); + xmlHttp.setRequestHeader("Content-length", postData.length); + xmlHttp.setRequestHeader("Connection", "close"); + + xmlHttp.onreadystatechange = function() { + if (xmlHttp.readyState == 4) + { + checkAddedCommentReply(commentForm.image_id.value) + } + } + xmlHttp.send(postData); + return false; + } + else + { + return true; + } +} + +function checkAddedCommentReply(imageID) +{ + var insertReply = xmlHttp.responseXML.documentElement; + + if (insertReply.nodeName == "success") + { + resetCommentsForm(); + toggleCommentsForm(); + getCommentsXML(imageID); + } +} + function getCookie(name) { var start = document.cookie.indexOf( name + "=" ); var len = start + name.length + 1; Modified: trunk/.themes/db/db.xsl =================================================================== --- trunk/.themes/db/db.xsl 2007-08-25 14:55:36 UTC (rev 57) +++ trunk/.themes/db/db.xsl 2007-08-25 15:04:21 UTC (rev 58) @@ -295,6 +295,40 @@ </a> </div> <div class="name"><xsl:value-of select="@file" /></div> +<div id="commentform"> + <div id="addcomment"> + <a href="#" onclick="toggleCommentsForm(); return false;">Add Comment</a> + </div> + <form action=".themes/db/postComment.php" method="post" style="display: none;" onsubmit="return addNewComment();"> + <fieldset> + <input type="hidden" name="ajax" value="0" /> + <input type="hidden" name="image_id"> + <xsl:attribute name="value"><xsl:value-of select="@id" /></xsl:attribute> + </input> + <label> + <span>Name: </span> + <input type="text" name="user_name"/> + </label> + + <label> + <span>E-mail: </span> + <input type="text" name="user_email"/> + </label> + + <label> + <span>Web: </span> + <input type="text" name="user_web"/> + </label> + + <label> + <span>Comment: </span> + <textarea cols="50" rows="3" name="user_comment"/> + </label> + + <button type="submit">Submit</button> + </fieldset> + </form> +</div> </div> <xsl:if test="count(comment) > 0"> @@ -350,7 +384,9 @@ </xsl:choose> </span> <span class="commenttext"> - <xsl:value-of select="comment_text" /> + <xsl:call-template name="nl2br"> + <xsl:with-param name="contents" select="comment_text" /> + </xsl:call-template> </span> <span class="rating"> <xsl:value-of select="rating" /> @@ -381,4 +417,20 @@ </xsl:choose> </xsl:template> + <xsl:template name="nl2br"> + <xsl:param name="contents" /> + <xsl:choose> + <xsl:when test="contains($contents, ' ')"> + <xsl:value-of select="substring-before($contents, ' ')" /> + <br /> + <xsl:call-template name="nl2br"> + <xsl:with-param name="contents" select="substring-after($contents, ' ')" /> + </xsl:call-template> + </xsl:when> + <xsl:otherwise> + <xsl:value-of select="$contents" /> + </xsl:otherwise> + </xsl:choose> + </xsl:template> + </xsl:stylesheet> Modified: trunk/.themes/db/getcomments.php =================================================================== --- trunk/.themes/db/getcomments.php 2007-08-25 14:55:36 UTC (rev 57) +++ trunk/.themes/db/getcomments.php 2007-08-25 15:04:21 UTC (rev 58) @@ -26,12 +26,12 @@ while ($row = mysql_fetch_assoc($result)) { $comments_xml .= "<comment>" - . "<name>$row[user_name]</name>" - . "<www>$row[user_www]</www>" - . "<email>$row[user_email]</email>" - . "<comment_text>$row[user_comment]</comment_text>" - . "<rating>$row[comment_rating]</rating>" - . "<added>$row[date_added]</added>" + . "<name>".stripslashes($row['user_name'])."</name>" + . "<www>".stripslashes($row['user_www'])."</www>" + . "<email>".stripslashes($row['user_email'])."</email>" + . "<comment_text>".stripslashes($row['user_comment'])."</comment_text>" + . "<rating>".stripslashes($row['comment_rating'])."</rating>" + . "<added>".stripslashes($row['date_added'])."</added>" . "</comment>"; } $comments_xml .= "</comments>"; This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site. |