Thread: [Picfinity-commit] SF.net SVN: picfinity: [37] trunk/.themes/ajax/ajax.js
Status: Beta
Brought to you by:
espadav8
Menu
▾
▴
picfinity-commit
|
From: <esp...@us...> - 2007-08-14 16:10:36
|
Revision: 37
http://picfinity.svn.sourceforge.net/picfinity/?rev=37&view=rev
Author: espadav8
Date: 2007-08-14 09:10:39 -0700 (Tue, 14 Aug 2007)
Log Message:
-----------
Convert all element.setAttribute("class", ...) to element.className = ... for IE
Add a different way to load the XML (windows.XMLHttpRequest) This enables Safari to work
Change the way selectLayoutNodeFromPath so it works without the need for a treewalker
With these changes the ajax theme now works in Safari and almost completely in IE. IE7 works, but the dropdowns are mis-aligned, IE6 doesn't like
the dropdowns at all.
Modified Paths:
--------------
trunk/.themes/ajax/ajax.js
Modified: trunk/.themes/ajax/ajax.js
===================================================================
--- trunk/.themes/ajax/ajax.js 2007-08-14 00:52:28 UTC (rev 36)
+++ trunk/.themes/ajax/ajax.js 2007-08-14 16:10:39 UTC (rev 37)
@@ -4,8 +4,20 @@
function importLayout()
{
- if (document.implementation && document.implementation.createDocument)
+ if (window.XMLHttpRequest)
{
+ var xmlHttp = new XMLHttpRequest();
+ xmlHttp.onreadystatechange = function() {
+ if (xmlHttp.readyState == 4)
+ {
+ xmlDoc = xmlHttp.responseXML;
+ }
+ }
+ xmlHttp.open("GET", "gallery.xml", true);
+ xmlHttp.send(null)
+ }
+ else if (document.implementation && document.implementation.createDocument)
+ {
xmlDoc = document.implementation.createDocument("", "layout", null);
xmlDoc.load("gallery.xml");
}
@@ -133,8 +145,6 @@
for(var i = 0; i < element.childNodes.length; i++)
{
- // if (tagName == "image") alert(element.childNodes[i].nodeName + '\n' + tagName);
-
// this hack is for Konqueror (and possibly Safari)
// for some reason the <image> tags are replaced
// with <img> tags
@@ -235,7 +245,7 @@
var classes = (optClass == undefined) ? "thumbnail" : "thumbnail " + optClass;
var albumImageDiv = document.createElement("div");
- albumImageDiv.setAttribute("class", classes);
+ albumImageDiv.className = classes;
albumImageDiv.setAttribute("id", imageNodeID);
var imageAnchor = document.createElement("a");
@@ -243,7 +253,7 @@
imageAnchor.onclick = function() { showImage(imageNodeID); return false; };
var imageSpan = document.createElement("span");
- imageSpan.setAttribute("class", "image");
+ imageSpan.className = "image";
var albumImage = document.createElement("img");
var imageThumbPath = '.thumbs/' + nodePath + '/' + imageNode.getAttribute("file");
@@ -251,7 +261,7 @@
imageAnchor.appendChild(albumImage);
var imageNameSpan = document.createElement("span");
- imageNameSpan.setAttribute("class", "name");
+ imageNameSpan.className = "name";
imageNameSpan.appendChild(document.createTextNode(imageNode.getAttribute("file")));
imageSpan.appendChild(imageAnchor)
@@ -268,7 +278,7 @@
// create the main folder div
var subFolder = document.createElement("div");
- subFolder.setAttribute("class", "folder");
+ subFolder.className = "folder";
subFolder.setAttribute("id", folderID);
var folderAnchor = document.createElement("a");
@@ -280,7 +290,7 @@
// create a span for the image
var folderImageSpan = document.createElement("span");
- folderImageSpan.setAttribute("class", "image");
+ folderImageSpan.className = "image";
// create the image
var folderImage = document.createElement("img");
@@ -291,7 +301,7 @@
// create a span for the folder icon
var iconSpan = document.createElement("span");
- iconSpan.setAttribute("class", "icon");
+ iconSpan.className = "icon";
// create the icon image
var iconImage = document.createElement("img");
@@ -300,7 +310,7 @@
// create a span for the text
var textSpan = document.createElement("span");
- textSpan.setAttribute("class", "name");
+ textSpan.className = "name";
// create the text
var textContents = folderNode.getAttribute("name");
@@ -362,7 +372,7 @@
imageSpan.appendChild(imageAnchor);
var imageNameSpan = document.createElement("span");
- imageNameSpan.setAttribute("class", "name");
+ imageNameSpan.className = "name";
imageNameSpan.appendChild(document.createTextNode(imageNode.getAttribute("file")));
var expandedImage = new Image();
@@ -418,10 +428,10 @@
function createBreadcrumbMenu(path, currentFolder)
{
var breadcrumbEntry = document.createElement("ul");
- breadcrumbEntry.setAttribute("class", "trailentry");
+ breadcrumbEntry.className = "trailentry";
var menuLi = document.createElement("li");
- menuLi.setAttribute("class", "currentfolder");
+ menuLi.className = "currentfolder";
var dropMenu = document.createElement("ul");
menuLi.appendChild(dropMenu);
@@ -443,12 +453,12 @@
if ((node.nodeName == "folder") && (node.getAttribute("name") == currentFolder))
{
var nameSpan = document.createElement("span");
- nameSpan.setAttribute("class", "name");
+ nameSpan.className = "name";
nameSpan.appendChild(document.createTextNode(node.getAttribute("name")));
// create a span for the folder icon
var iconSpan = document.createElement("span");
- iconSpan.setAttribute("class", "icon");
+ iconSpan.className = "icon";
// create the icon image
var iconImage = document.createElement("img");
@@ -476,7 +486,7 @@
// create a span for the folder icon
var iconSpan = document.createElement("span");
- iconSpan.setAttribute("class", "icon");
+ iconSpan.className = "icon";
// create the icon image
var iconImage = document.createElement("img");
@@ -490,7 +500,7 @@
// create a span for the folder icon
var iconSpan = document.createElement("span");
- iconSpan.setAttribute("class", "icon");
+ iconSpan.className = "icon";
// create the icon image
var iconImage = document.createElement("img");
@@ -502,15 +512,15 @@
// we do this so we can show the user the currently selected folder in the drop down
if (node.getAttribute("name") == currentFolder)
{
- dropMenuItem.setAttribute("class", "menuentry selected");
+ dropMenuItem.className = "menuentry selected";
}
else
{
- dropMenuItem.setAttribute("class", "menuentry");
+ dropMenuItem.className = "menuentry";
}
var nameSpan = document.createElement("span");
- nameSpan.setAttribute("class", "name");
+ nameSpan.className = "name";
nameSpan.appendChild(document.createTextNode(node.getAttribute("name")));
dropMenuItem.appendChild(nameSpan);
@@ -528,25 +538,19 @@
else if (path != '')
{
path = (path.indexOf("./") == 0) ? path.substring(2) : path;
-
var currentPath = path.split('/')[0];
+ var nodes = getChildNodesByTagName(node, "folder");
- // FIXME: doesn't work with IE or Safari
- if (document.createTreeWalker)
+ for (var i = 0; i < nodes.length; i++)
{
- var nodes = document.createTreeWalker(node, NodeFilter.SHOW_ELEMENT, null, false);
-
- while ((selectedNode = nodes.nextNode()) != null)
+ if ((nodes[i].getAttribute("name") == currentPath))
{
- if ((selectedNode.nodeName == "folder") && (selectedNode.getAttribute("name") == currentPath))
- {
- return selectLayoutNodeFromPath(path.replace(currentPath + '/', ''), selectedNode);
- }
- else
- {
- continue;
- }
+ return selectLayoutNodeFromPath(path.replace(currentPath + '/', ''), nodes[i]);
}
+ else
+ {
+ continue;
+ }
}
}
else
This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site.
|
|
From: <esp...@us...> - 2007-08-18 20:31:36
|
Revision: 46
http://picfinity.svn.sourceforge.net/picfinity/?rev=46&view=rev
Author: espadav8
Date: 2007-08-18 13:31:22 -0700 (Sat, 18 Aug 2007)
Log Message:
-----------
Remove some completely unneeded code from the createExpandedImage function
Modified Paths:
--------------
trunk/.themes/ajax/ajax.js
Modified: trunk/.themes/ajax/ajax.js
===================================================================
--- trunk/.themes/ajax/ajax.js 2007-08-18 18:55:16 UTC (rev 45)
+++ trunk/.themes/ajax/ajax.js 2007-08-18 20:31:22 UTC (rev 46)
@@ -72,12 +72,12 @@
{
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)
@@ -90,14 +90,14 @@
}
}
}
-
+
// 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)
@@ -105,9 +105,9 @@
return xmlDocFolders[i];
}
}
-
+
var xmlDocImages = xmlDoc.getElementsByTagName("image");
-
+
for (var i = 0; i < xmlDocImages.length; i++)
{
if (xmlDocImages[i].getAttribute("id") == elementID)
@@ -180,7 +180,7 @@
function getNodePath(element, nodePath)
{
nodePath = (nodePath == undefined) ? '' : nodePath;
-
+
if (element == xmlDoc.documentElement)
{
return '.' + nodePath;
@@ -196,27 +196,27 @@
{
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]);
@@ -224,9 +224,9 @@
}
newAlbumsDiv.appendChild(selectedDiv);
-
+
document.getElementById("albums").parentNode.replaceChild(newAlbumsDiv, document.getElementById("albums"));
-
+
IE6navhover()
return false;
}
@@ -241,7 +241,7 @@
{
var nodePath = getNodePath(getLayoutNode(element.getAttribute("id")));
var imageChildNodes = getChildNodesByTagName(element, "image");
-
+
if (imageChildNodes.length > 0)
{
var imagePath = '.thumbs/'
@@ -262,33 +262,33 @@
{
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;
}
@@ -296,48 +296,48 @@
{
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);
+ 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");
+ 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 += " (";
@@ -348,59 +348,59 @@
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()
{
@@ -409,7 +409,7 @@
linkToDiv.style.display = "";
};
expandedImage.src = imageThumbPath;
-
+
return expandedImageDiv;
}
@@ -417,20 +417,20 @@
{
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"));
@@ -445,54 +445,54 @@
{
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");
+ 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;
}
@@ -500,39 +500,39 @@
{
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");
+ 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");
+ 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)
{
@@ -542,12 +542,12 @@
{
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;
}
@@ -555,7 +555,7 @@
function selectLayoutNodeFromPath(path, node)
{
node = (node == undefined) ? xmlDoc.documentElement : node;
-
+
if(path == "./")
{
return xmlDoc.documentElement;
@@ -565,7 +565,7 @@
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))
@@ -586,41 +586,33 @@
function showImage(imageID)
{
- var siblingNodes = getChildNodesByTagName(getLayoutNode(imageID).parentNode, "image");
-
- for (var i = 0; i < siblingNodes.length; i++)
+ var expandedImage = createExpandedImage(getLayoutNode(imageID));
+
+ if (document.getElementById("expandedimage"))
{
- 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"));
- }
- }
+ 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";
}
@@ -632,31 +624,31 @@
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 : '') +
This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site.
|
×
Want the latest updates on software, tech news, and AI?
Get latest updates about software, tech news, and AI from SourceForge directly in your inbox once a month.
Thanks for helping keep SourceForge clean.
X