[Picfinity-commit] SF.net SVN: picfinity: [42] trunk/.themes/ajax
Status: Beta
Brought to you by:
espadav8
Menu
▾
▴
[Picfinity-commit] SF.net SVN: picfinity: [42] trunk/.themes/ajax
|
From: <esp...@us...> - 2007-08-16 12:57:27
|
Revision: 42
http://picfinity.svn.sourceforge.net/picfinity/?rev=42&view=rev
Author: espadav8
Date: 2007-08-16 05:57:30 -0700 (Thu, 16 Aug 2007)
Log Message:
-----------
Update the XSL to produce a suckerfish dropdown
Clean parts of the CSS and ann the new styles for the suckerfish
Add some JS for IE6 dropdown
Create the dropdown correctly in the JS
Create the expanded image correctly in the JS
Modified Paths:
--------------
trunk/.themes/ajax/ajax.css
trunk/.themes/ajax/ajax.js
trunk/.themes/ajax/ajax.xsl
Modified: trunk/.themes/ajax/ajax.css
===================================================================
--- trunk/.themes/ajax/ajax.css 2007-08-15 21:26:41 UTC (rev 41)
+++ trunk/.themes/ajax/ajax.css 2007-08-16 12:57:30 UTC (rev 42)
@@ -5,6 +5,11 @@
border: 0;
}
+a
+{
+ text-decoration: none;
+}
+
img
{
display: block;
@@ -30,12 +35,13 @@
#themes
{
position: absolute;
- top: 20px;
- right: 20px;
+ top: 10px;
+ right: 10px;
}
#selectedalbum
{
+ margin-top: 5px;
clear: both;
float: left;
}
@@ -58,7 +64,7 @@
width: 150px;
display: block;
float: left;
- margin: 5px 5px 0 0;
+ margin: 0 5px 5px 0;
border: 1px solid #ccc;
position: relative;
}
@@ -91,13 +97,8 @@
/* --- expanded image --- */
-#linktospan
-{
- position: relative;
-}
#linktospan a
{
- text-decoration: none;
padding: 4px 0;
}
@@ -113,6 +114,8 @@
{
border: 1px solid #ccc;
float: left;
+ clear: both;
+ margin-top: 5px;
}
#expandedimagespan
@@ -131,103 +134,88 @@
/* --- hover actions --- */
a:hover,
-#breadcrumbtrail ul li:hover
+#breadcrumbtrail ul li a:hover
{
cursor: pointer;
}
-/* --- breadcrumb --- */
+/*** BACKGROUND ***/
-#breadcrumbtrail
+html,
+.selected a,
+#linktospan a:hover,
+#breadcrumbtrail ul li a:hover,
+#breadcrumbtrail ul li ul li.selected
{
- display: block;
- margin: 0 0 10px 0;
- height: 24px;
+ background-color: #303030;
}
-#breadcrumbtrail ul
-{
- color: #fff;
- font-weight: bold;
- list-style: none;
- display: block;
- float: left;
- width: 150px;
- margin: 0 5px 0 0;
- border: 1px solid #ccc;
-}
-
+.folder,
+.thumbnail,
+#expandedimage,
#breadcrumbtrail ul li
{
- height: 18px;
- padding: 3px 0 3px 5px;
- width: 145px;
+ background-color: #505050;
}
-#breadcrumbtrail ul li ul
+#linktospan a,
+.image a:hover,
+#breadcrumbtrail ul li ul li a:hover
{
- display: none;
- margin: 21px 0 -1px -6px;
- position: fixed;
- z-index: 10;
+ background-color: #707070;
}
-#breadcrumbtrail ul li ul li
-{
- clear: left;
-}
-#breadcrumbtrail ul li .name
+#loadingspan
{
- float: left;
- border: none;
- text-align: left;
- padding: 3px 0 3px 5px;
+ background-color: #cc0022;
}
-#breadcrumbtrail ul li .icon
+
+/*** BREADCRUMB TRAIL ***/
+
+#breadcrumbtrail ul
{
- position: static;
- float: left;
- margin: -3px 0 0 0;
+ list-style: none;
}
-#breadcrumbtrail ul li:hover ul
+#breadcrumbtrail a
{
display: block;
+ width: 150px;
}
-
-/*** BACKGROUND ***/
-
-html,
-.selected a,
-#linktospan a:hover,
-#breadcrumbtrail ul li:hover,
-#breadcrumbtrail ul li ul li.selected
+#breadcrumbtrail img
{
- background-color: #303030;
+ display: none;
}
-.folder,
-.thumbnail,
-#expandedimage,
-#breadcrumbtrail ul
+#breadcrumbtrail ul li
{
- background-color: #505050;
+ margin-right: 5px;
+ float: left;
+ width: 150px;
+ border: 1px solid #ccc;
}
-
-#linktospan a,
-.image a:hover,
-#breadcrumbtrail ul li ul li:hover
+#breadcrumbtrail ul li ul
{
- background-color: #707070;
+ border: 1px solid #ccc;
+ left: -999em;
+ position: absolute;
+ width: 150px;
+ z-index: 10;
}
-#loadingspan
+#breadcrumbtrail ul li ul li
{
- background-color: #cc0022;
+ border: none;
}
+#breadcrumbtrail ul li.over ul,
+#breadcrumbtrail ul li:hover ul
+{
+ left: auto;
+ margin-left: -1px;
+}
\ No newline at end of file
Modified: trunk/.themes/ajax/ajax.js
===================================================================
--- trunk/.themes/ajax/ajax.js 2007-08-15 21:26:41 UTC (rev 41)
+++ trunk/.themes/ajax/ajax.js 2007-08-16 12:57:30 UTC (rev 42)
@@ -1,7 +1,27 @@
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)
@@ -177,7 +197,7 @@
var layoutNode = getLayoutNode(elementID);
var nodePath = getNodePath(layoutNode);
- var breadcrumbDiv = createBreadcrumbTrail(layoutNode);;
+ var breadcrumbDiv = createBreadcrumbTrail(layoutNode);
var newAlbumsDiv = document.createElement("div");
newAlbumsDiv.setAttribute("id", "albums");
@@ -207,6 +227,7 @@
document.getElementById("albums").parentNode.replaceChild(newAlbumsDiv, document.getElementById("albums"));
+ IE6navhover()
return false;
}
@@ -340,56 +361,56 @@
{
var nodePath = getNodePath(getLayoutNode(imageNode.getAttribute("id")));
- var expandedImageSpan = document.createElement("span");
- expandedImageSpan.setAttribute("id", "expandedimage");
+ var expandedImageDiv = document.createElement("div");
+ expandedImageDiv.setAttribute("id", "expandedimage");
- var linkToSpan = document.createElement("span");
- linkToSpan.setAttribute("id", "linktospan");
- linkToSpan.style.display = "none";
+ 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"));
- linkToSpan.appendChild(linkToAnchor);
+ linkToDiv.appendChild(linkToAnchor);
- var loadingSpan = document.createElement("span");
- loadingSpan.setAttribute("id", "loadingspan");
- loadingSpan.style.display = "block";
- loadingSpan.appendChild(document.createTextNode("Loading image"));
+ 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 imageSpan = document.createElement("span");
- imageSpan.setAttribute("id", "expandedimagespan");
- imageSpan.style.display = "none";
+ 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);
- imageSpan.appendChild(imageAnchor);
+ imageDiv.appendChild(imageAnchor);
- var imageNameSpan = document.createElement("span");
- imageNameSpan.className = "name";
- imageNameSpan.appendChild(document.createTextNode(imageNode.getAttribute("file")));
+ var imageNameDiv = document.createElement("div");
+ imageNameDiv.className = "name";
+ imageNameDiv.appendChild(document.createTextNode(imageNode.getAttribute("file")));
- expandedImageSpan.appendChild(linkToSpan);
- expandedImageSpan.appendChild(loadingSpan);
- expandedImageSpan.appendChild(imageSpan);
- expandedImageSpan.appendChild(imageNameSpan);
+ expandedImageDiv.appendChild(linkToDiv);
+ expandedImageDiv.appendChild(loadingDiv);
+ expandedImageDiv.appendChild(imageDiv);
+ expandedImageDiv.appendChild(imageNameDiv);
var expandedImage = new Image();
expandedImage.onload = function()
{
- loadingSpan.style.display = "none";
- imageSpan.style.display = "block";
- linkToSpan.style.display = "block";
+ loadingDiv.style.display = "none";
+ imageDiv.style.display = "";
+ linkToDiv.style.display = "";
};
expandedImage.src = imageThumbPath;
- return expandedImageSpan;
+ return expandedImageDiv;
}
function createBreadcrumbTrail(element)
@@ -447,6 +468,9 @@
// 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")));
@@ -459,9 +483,11 @@
var iconImage = document.createElement("img");
iconImage.setAttribute("src", ".themes/ajax/foldericon.png");
iconSpan.appendChild(iconImage);
+
+ dropMenuAnchor.appendChild(nameSpan);
+ dropMenuAnchor.appendChild(nameSpan);
- menuLi.insertBefore(nameSpan, menuLi.firstChild);
- menuLi.insertBefore(iconSpan, menuLi.firstChild);
+ menuLi.insertBefore(dropMenuAnchor, menuLi.firstChild);
breadcrumbEntry.appendChild(menuLi);
}
@@ -475,10 +501,12 @@
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())
{
- dropMenuItem.onclick = function() { openFolder(dropMenuItem.getAttribute("id")); return false; };
-
// create a span for the folder icon
var iconSpan = document.createElement("span");
iconSpan.className = "icon";
@@ -487,11 +515,12 @@
var iconImage = document.createElement("img");
iconImage.setAttribute("src", ".themes/ajax/foldericon.png");
iconSpan.appendChild(iconImage);
- dropMenuItem.appendChild(iconSpan);
+
+ dropMenuAnchor.appendChild(iconSpan);
}
else
{
- dropMenuItem.setAttribute("class", "folder empty");
+ dropMenuItem.setAttribute("class", "empty");
// create a span for the folder icon
var iconSpan = document.createElement("span");
@@ -517,8 +546,9 @@
var nameSpan = document.createElement("span");
nameSpan.className = "name";
nameSpan.appendChild(document.createTextNode(node.getAttribute("name")));
- dropMenuItem.appendChild(nameSpan);
+ dropMenuAnchor.appendChild(nameSpan);
+ dropMenuItem.appendChild(dropMenuAnchor);
return dropMenuItem;
}
Modified: trunk/.themes/ajax/ajax.xsl
===================================================================
--- trunk/.themes/ajax/ajax.xsl 2007-08-15 21:26:41 UTC (rev 41)
+++ trunk/.themes/ajax/ajax.xsl 2007-08-16 12:57:30 UTC (rev 42)
@@ -223,23 +223,39 @@
<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">
- <xsl:attribute name="onclick">openFolder('<xsl:value-of select="@id" />'); return false;</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>
+ <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 class="menuentry">
- <xsl:attribute name="onclick">openFolder('<xsl:value-of select="@id" />'); return false;</xsl:attribute>
- <span class="icon">
- <img src=".themes/ajax/foldericon.png" alt="Folder Icon" />
- </span>
- <span class="name"><xsl:value-of select="@name" /></span>
+ <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>
This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site.
|
