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

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

Revision: 39
          http://picfinity.svn.sourceforge.net/picfinity/?rev=39&view=rev
Author:   espadav8
Date:     2007-08-14 16:06:33 -0700 (Tue, 14 Aug 2007)

Log Message:
-----------
Add a fieldset around the theme selector and button
For all images replace ' ' with '%20' and include the alt attributes
Convert the <spans> with divs for the expanded image (needs to be updated in the JS as well

Set font sizes in the CSS (using ems)
Clean up a lot of the CSS

Add the onload before setting the src for the Image() loader
Don'y need to get the element in the onload function
	These 2 changes allow IE and Opera to open an image if it's been stored in the cache

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-14 21:12:12 UTC (rev 38)
+++ trunk/.themes/ajax/ajax.css	2007-08-14 23:06:33 UTC (rev 39)
@@ -18,6 +18,7 @@
 h1,
 h1 a
 {
+	font-size: 1.2em;
 	text-align: center;
 	color: #d0d0d0;
 }
@@ -39,24 +40,6 @@
 	float: left;
 }
 
-#expandedimage
-{
-	padding: 5px 5px 0 5px;
-	border: 1px solid #ccc;
-	clear: both;
-	float: left;
-}
-
-#loadingspan
-{
-	text-align: center;
-	color: #fff;
-	font-weight: bold;
-	margin: -5px;
-	padding: 5px;
-}
-
-
 /* --- folders --- */
 
 .image a
@@ -65,6 +48,7 @@
 	width: 100px;
 	display: block;
 	padding: 14px 25px;
+	border-bottom: 1px solid #ccc;
 }
 
 .folder,
@@ -92,37 +76,46 @@
 
 /* --- image names --- */
 
-.name
+.name,
+#loadingspan,
+#linktospan a
 {
 	color: #f0f0f0;
 	font-weight: bold;
-	border-top: 1px solid #ccc;
 	padding: 3px 0;
 	text-align: center;
 	display: block;
-	height: 16px;
 	overflow: hidden;
+	font-size: 0.7em;
 }
 
-#expandedimage span.name
+/* --- expanded image --- */
+
+#linktospan a
 {
-	margin: 5px -5px 0 -5px;
+	text-decoration: none;
 }
 
-/* --- image link --- */
 
-#linktospan a
+#expandedimage
 {
-	color: #f0f0f0;
-	font-weight: bold;
+	border: 1px solid #ccc;
+	float: left;
+}
+
+#expandedimagespan
+{
+	border-top: 1px solid #ccc;
 	border-bottom: 1px solid #ccc;
-	padding: 3px 0 3px 0;
-	text-align: center;
-	display: block;
-	text-decoration: none;
-	margin: -5px -5px 5px -5px;
+	padding: 5px;
 }
 
+#loadingspan
+{
+	padding: 3px 5px;
+	border-bottom: 1px solid #ccc;
+}
+
 /* --- hover actions --- */
 
 a:hover,
@@ -163,7 +156,7 @@
 #breadcrumbtrail ul li ul
 {
 	display: none;
-	margin: 22px 0 -1px -6px;
+	margin: 21px 0 -1px -6px;
 	position: fixed;
 	z-index: 10;
 }
@@ -201,7 +194,7 @@
 #breadcrumbtrail ul li:hover,
 #breadcrumbtrail ul li ul li.selected
 {
-	background: #303030;
+	background-color: #303030;
 }
 
 .folder,
@@ -209,19 +202,19 @@
 #expandedimage,
 #breadcrumbtrail ul
 {
-	background: #505050;
+	background-color: #505050;
 }
 
 .image a:hover,
 #linktospan a:hover,
 #breadcrumbtrail ul li ul li:hover
 {
-	background: #707070;
+	background-color: #707070;
 }
 
 
 #loadingspan
 {
-	background: #cc0022;
+	background-color: #cc0022;
 }
 

Modified: trunk/.themes/ajax/ajax.js
===================================================================
--- trunk/.themes/ajax/ajax.js	2007-08-14 21:12:12 UTC (rev 38)
+++ trunk/.themes/ajax/ajax.js	2007-08-14 23:06:33 UTC (rev 39)
@@ -375,25 +375,20 @@
 	imageNameSpan.className = "name";
 	imageNameSpan.appendChild(document.createTextNode(imageNode.getAttribute("file")));
 	
+	expandedImageSpan.appendChild(linkToSpan);
+	expandedImageSpan.appendChild(loadingSpan);
+	expandedImageSpan.appendChild(imageSpan);
+	expandedImageSpan.appendChild(imageNameSpan);
+	
 	var expandedImage = new Image();
-	expandedImage.src = imageThumbPath;
 	expandedImage.onload = function()
 							{
-								var loadingSpan = document.getElementById("loadingspan");
 								loadingSpan.style.display = "none";
-								
-								var imageSpan = document.getElementById("expandedimagespan");
 								imageSpan.style.display = "block";
-								
-								var linkToSpan = document.getElementById("linktospan");
 								linkToSpan.style.display = "block";
-							}
+							};
+	expandedImage.src = imageThumbPath;
 	
-	expandedImageSpan.appendChild(linkToSpan);
-	expandedImageSpan.appendChild(loadingSpan);
-	expandedImageSpan.appendChild(imageSpan);
-	expandedImageSpan.appendChild(imageNameSpan);
-	
 	return expandedImageSpan;
 }
 

Modified: trunk/.themes/ajax/ajax.xsl
===================================================================
--- trunk/.themes/ajax/ajax.xsl	2007-08-14 21:12:12 UTC (rev 38)
+++ trunk/.themes/ajax/ajax.xsl	2007-08-14 23:06:33 UTC (rev 39)
@@ -58,11 +58,13 @@
 	<xsl:template match="themes">
 		<div id="themes">
 			<form id="themeform" action="index.php" method="post">
-				<select name="theme" onchange="submit();">
-					<option value="">Please choose a theme</option>
-					<xsl:apply-templates select="theme" />
-				</select>
-				<button type="submit">Go</button>
+				<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>
@@ -97,23 +99,27 @@
 					<xsl:choose>
 						<xsl:when test="count(image) > 0">
 							<xsl:variable name="path">
-								<xsl:apply-templates select="ancestor::folder" mode="getpath" />
+								<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>
-								<xsl:attribute name="src"><xsl:value-of select="concat('.thumbs/' , $path, @name, '/', image[1]/@file)" /></xsl:attribute>
+							<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>
+							<img alt="Image Folder">
 								<xsl:attribute name="src"><xsl:value-of select="concat('.themes/', $themename, '/folder.png')" /></xsl:attribute>
-								<xsl:attribute name="alt">Image Folder</xsl:attribute>
 							</img>
 						</xsl:when>
 						<xsl:otherwise>
-							<img>
+							<img alt="Empty Folder">
 								<xsl:attribute name="src"><xsl:value-of select="concat('.themes/', $themename, '/empty.png')" /></xsl:attribute>
-								<xsl:attribute name="alt">Empty Folder</xsl:attribute>
 							</img>
 						</xsl:otherwise>
 					</xsl:choose>
@@ -121,9 +127,8 @@
 			</span>
 			<xsl:if test="count(folder) > 0 or count(image) > 0">
 				<span class="icon">
-					<img>
+					<img alt="Folder Icon">
 						<xsl:attribute name="src"><xsl:value-of select="concat('.themes/', $themename, '/foldericon.png')" /></xsl:attribute>
-						<xsl:attribute name="alt">Folder Icon</xsl:attribute>
 					</img>
 				</span>
 			</xsl:if>
@@ -147,7 +152,13 @@
 	<xsl:template match="image">
 		<xsl:param name="selectedID">0</xsl:param>
 		<xsl:variable name="path">
-			<xsl:apply-templates select="ancestor::folder" mode="getpath" />
+			<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">
@@ -161,7 +172,7 @@
 					<xsl:attribute name="href">index.php?id=<xsl:value-of select="@id" /></xsl:attribute>
 					<img>
 						<xsl:attribute name="alt"><xsl:value-of select="@file" /></xsl:attribute>
-						<xsl:attribute name="src"><xsl:value-of select="concat('./.thumbs/', $path, @file)" /></xsl:attribute>
+						<xsl:attribute name="src"><xsl:value-of select="$path" /></xsl:attribute>
 					</img>
 				</a>
 			</span>
@@ -216,7 +227,7 @@
 			<li class="currentfolder">
 				<xsl:attribute name="onclick">openFolder('<xsl:value-of select="@id" />'); return false;</xsl:attribute>
 				<span class="icon">
-					<img src=".themes/ajax/foldericon.png" />
+					<img src=".themes/ajax/foldericon.png" alt="Folder Icon" />
 				</span>
 				<span class="name"><xsl:value-of select="@name" /></span>
 				<ul>
@@ -224,7 +235,7 @@
 						<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" />
+								<img src=".themes/ajax/foldericon.png" alt="Folder Icon" />
 							</span>
 							<span class="name"><xsl:value-of select="@name" /></span>
 						</li>
@@ -236,7 +247,13 @@
 	
 	<xsl:template match="image" mode="post">
 		<xsl:variable name="path">
-			<xsl:apply-templates select="ancestor::folder" mode="getpath" />
+			<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">
@@ -244,21 +261,23 @@
 		</div>
 		
 		<div id="albums">
-			<span id="expandedimage">
-				<span style="display: block;" id="linktospan">
+			<div id="expandedimage">
+				<div id="linktospan">
 					<a>
 						<xsl:attribute name="href">index.php?id=<xsl:value-of select="@id" /></xsl:attribute>
-						Link to this image</a>
-				</span>
-				<span style="display: block;" id="expandedimagespan">
+						<xsl:text>Link to this image</xsl:text>
+					</a>
+				</div>
+				<div id="expandedimagespan">
 					<a href="#" onclick="closeImage(); return false;">
 						<img>
-							<xsl:attribute name="src"><xsl:value-of select="concat('./', $path, @file)" /></xsl:attribute>
+							<xsl:attribute name="src"><xsl:value-of select="$path" /></xsl:attribute>
+							<xsl:attribute name="alt"><xsl:value-of select="@file" /></xsl:attribute>
 						</img>
 					</a>
-				</span>
-				<span class="name"><xsl:value-of select="@file" /></span>
-			</span>
+				</div>
+				<div class="name"><xsl:value-of select="@file" /></div>
+			</div>
 			
 			<div id="selectedalbum">
 				<xsl:apply-templates select="parent::*/folder" />
@@ -273,5 +292,24 @@
 	<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>


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