[yelp-xsl] mal2html-links: Experimental thumbnail grid links

[Shaun McCance <shaunm src gnome org>]

commit fdda9d8909977ec63ccec8b6fde228c625d0a2f8
Author: Shaun McCance <shaunm gnome org>
Date:   Mon Feb 20 09:36:40 2012 -0500

    mal2html-links: Experimental thumbnail grid links

 xslt/mallard/html/mal2html-links.xsl |   83 ++++++++++++++++++++++++++++++++++
 xslt/mallard/html/mal2html-page.xsl  |   27 +++++++++++
 2 files changed, 110 insertions(+), 0 deletions(-)
---
diff --git a/xslt/mallard/html/mal2html-links.xsl b/xslt/mallard/html/mal2html-links.xsl
index 895dcfd..a988356 100644
--- a/xslt/mallard/html/mal2html-links.xsl
+++ b/xslt/mallard/html/mal2html-links.xsl
@@ -660,6 +660,13 @@ when determining which links to output.
                   <xsl:with-param name="links" select="$_links"/>
                 </xsl:call-template>
               </xsl:when>
+              <xsl:when test="$node/self::mal:links/@ui:thumbs = 'grid'">
+                <xsl:call-template name="mal2html.ui.links.grid">
+                  <xsl:with-param name="node" select="$node"/>
+                  <xsl:with-param name="links" select="$_links"/>
+                  <xsl:with-param name="role" select="'topic'"/>
+                </xsl:call-template>
+              </xsl:when>
               <xsl:when test="contains($style, ' mouseovers ')">
                 <xsl:call-template name="_mal2html.links.mouseovers">
                   <xsl:with-param name="node" select="$node"/>
@@ -887,4 +894,80 @@ when determining which links to output.
   <xsl:apply-templates mode="_mal2html.links.divs.nolink.mode" select="node()"/>
 </xsl:template>
 
+
+<!-- UI -->
+<xsl:template name="mal2html.ui.links.grid">
+  <xsl:param name="node" select="."/>
+  <xsl:param name="links"/>
+  <xsl:param name="role"/>
+  <xsl:variable name="width">
+    <xsl:choose>
+      <xsl:when test="$node/@ui:width">
+        <xsl:value-of select="$node/@ui:width"/>
+      </xsl:when>
+      <xsl:otherwise>
+        <xsl:text>200</xsl:text>
+      </xsl:otherwise>
+    </xsl:choose>
+  </xsl:variable>
+  <xsl:variable name="height">
+    <xsl:choose>
+      <xsl:when test="$node/@ui:width">
+        <xsl:value-of select="$node/@ui:width"/>
+      </xsl:when>
+      <xsl:otherwise>
+        <xsl:text>200</xsl:text>
+      </xsl:otherwise>
+    </xsl:choose>
+  </xsl:variable>
+  <xsl:for-each select="$links">
+    <xsl:sort data-type="number" select="@groupsort"/>
+    <xsl:sort select="mal:title[ type = 'sort']"/>
+    <xsl:variable name="link" select="."/>
+    <xsl:for-each select="$mal.cache">
+      <xsl:variable name="target" select="key('mal.cache.key', $link/@xref)"/>
+      <div class="links-ui-grid">
+        <xsl:variable name="thumb" select="$target/mal:info/ui:thumb"/>
+        <a>
+          <xsl:attribute name="href">
+            <xsl:call-template name="mal.link.target">
+              <xsl:with-param name="node" select="$node"/>
+              <xsl:with-param name="xref" select="$link/@xref"/>
+            </xsl:call-template>
+          </xsl:attribute>
+          <xsl:attribute name="title">
+            <xsl:call-template name="mal.link.tooltip">
+              <xsl:with-param name="node" select="$node"/>
+              <xsl:with-param name="xref" select="$link/@xref"/>
+            </xsl:call-template>
+          </xsl:attribute>
+          <span class="links-ui-grid-img" style="width: {$width}px; height: {$height}px;">
+            <xsl:if test="$thumb">
+              <img src="{$thumb/@src}">
+                <xsl:if test="$node/@ui:overflow = 'scale'">
+                  <xsl:attribute name="style">
+                    <xsl:value-of select="concat('width: ', $width, 'px; height: ', $height, 'px;')"/>
+                  </xsl:attribute>
+                </xsl:if>
+              </img>
+            </xsl:if>
+          </span>
+          <span class="title" style="width: {$width}px; max-height: {number($height) div 2}px;">
+            <xsl:call-template name="mal.link.content">
+              <xsl:with-param name="node" select="$node"/>
+              <xsl:with-param name="xref" select="$link/@xref"/>
+              <xsl:with-param name="role" select="$role"/>
+            </xsl:call-template>
+          </span>
+          <xsl:if test="$target/mal:info/mal:desc">
+            <span class="desc" style="width: {$width}px; max-height: {number($height) div 2}px;">
+              <xsl:apply-templates select="$target/mal:info/mal:desc/node()"/>
+            </span>
+          </xsl:if>
+        </a>
+      </div>
+    </xsl:for-each>
+  </xsl:for-each>
+</xsl:template>
+
 </xsl:stylesheet>
diff --git a/xslt/mallard/html/mal2html-page.xsl b/xslt/mallard/html/mal2html-page.xsl
index 575211c..458fdef 100644
--- a/xslt/mallard/html/mal2html-page.xsl
+++ b/xslt/mallard/html/mal2html-page.xsl
@@ -911,6 +911,33 @@ ul.mouseovers a img {
   div.mouseovers { display: none; }
 }
 
+div.links-ui-grid {
+  display: inline-block;
+  vertical-align: top;
+  clear: both
+  margin: 0;
+}
+div.links-ui-grid > a {
+  display: inline-block;
+  vertical-align: top;
+  margin: 0;
+  margin-</xsl:text><xsl:value-of select="$right"/><xsl:text>: 1em;
+  padding: 1em;
+  border-radius: 6px;
+}
+div.links-ui-grid > a:hover {
+  background-color: </xsl:text><xsl:value-of select="$color.blue_background"/><xsl:text>;
+  border: none;
+}
+div.links-ui-grid > a > * {
+  display: block;
+  overflow: hidden;
+}
+div.links-ui-grid > a > span.title {
+  margin-top: 0.5em;
+  font-weight: bold;
+}
+
 div.links-grid {
   display: inline-block;
   clear: both