[yelp-xsl] mal2html-ui: First pass at media overlays

[Shaun McCance <shaunm src gnome org>]

commit 87a12d2d0d6c2f26c75a00502601d057846764f9
Author: Shaun McCance <shaunm gnome org>
Date:   Thu Nov 1 22:58:17 2012 -0400

    mal2html-ui: First pass at media overlays

 xslt/mallard/html/mal2html-page.xsl |   72 +++++++++++++++++++++++++++++++-
 xslt/mallard/html/mal2html-ui.xsl   |   79 ++++++++++++++++++++++++++++++++++-
 2 files changed, 148 insertions(+), 3 deletions(-)
---
diff --git a/xslt/mallard/html/mal2html-page.xsl b/xslt/mallard/html/mal2html-page.xsl
index 8dec3f8..6b66a68 100644
--- a/xslt/mallard/html/mal2html-page.xsl
+++ b/xslt/mallard/html/mal2html-page.xsl
@@ -919,22 +919,56 @@ ul.mouseovers a img {
   div.mouseovers { display: none; }
 }
 
+div.ui-screen {
+  display: none;
+  position: fixed;
+  margin: 0;
+  left: 0; top: 0;
+  width: 100%; height: 100%;
+  background: </xsl:text><xsl:value-of select="$color.text_light"/><xsl:text>;
+  opacity: 0.6;
+}
+div.ui-overlay {
+  display: none;
+  position: absolute;
+  text-align: center;
+  left: 0;
+  width: 100%;
+  z-index: 10;
+}
+div.ui-overlay > div.contents {
+  display: inline-block;
+  padding: 8px;
+  background-color: </xsl:text><xsl:value-of select="$color.gray_background"/><xsl:text>;
+  border: solid 1px </xsl:text><xsl:value-of select="$color.text_light"/><xsl:text>;
+  box-shadow: 0 2px 4px </xsl:text><xsl:value-of select="$color.text_light"/><xsl:text>;
+  -moz-border-radius: 6px;
+  -webkit-border-radius: 6px;
+  border-radius: 6px;
+}
+
 div.ui-tile {
   display: inline-block;
+  margin-bottom: 1em;
   vertical-align: top;
   clear: both
-  margin: 0;
 }
+div.ui-tile:first-child, div.ui-tile + div.ui-tile { margin-top: 0; }
 div.ui-tile > a {
   display: inline-block;
   vertical-align: top;
   margin: 0;
   margin-</xsl:text><xsl:value-of select="$right"/><xsl:text>: 1em;
   padding: 1em;
+  -moz-border-radius: 6px;
+  -webkit-border-radius: 6px;
   border-radius: 6px;
 }
-div.ui-tile > a { border: none; }
+div.ui-tile > a {
+  border: solid 1px </xsl:text><xsl:value-of select="$color.gray_background"/><xsl:text>;
+}
 div.ui-tile > a:hover {
+  border: solid 1px </xsl:text><xsl:value-of select="$color.blue_background"/><xsl:text>;
   box-shadow: 0 1px 2px </xsl:text><xsl:value-of select="$color.blue_border"/><xsl:text>;
 }
 div.ui-tile > a > * { display: block; }
@@ -1271,6 +1305,40 @@ $(document).ready(function () {
       );
     });
   });
+  $('a.ui-overlay').each(function () {
+    $(this).click(function () {
+      var overlay = $(this).parent('div').children('div.ui-overlay');
+      var contents = overlay.children('div.contents');
+      var screen = $('div.ui-screen');
+      if (screen.length == 0) {
+        screen = $('<div class="ui-screen"></div>');
+        $('body').append(screen);
+      }
+      var hideoverlay = function () {
+        screen.unbind('click');
+        screen.fadeOut('slow');
+        overlay.unbind('click');
+        overlay.slideUp('fast');
+      };
+      screen.click(hideoverlay);
+      overlay.click(function (event) {
+        var target = event.target;
+        do {
+          if (target == contents[0]) {
+            break;
+          }
+        } while (target = target.parentNode);
+        if (target != contents[0]) {
+          hideoverlay();
+          return false;
+        }
+      });
+      overlay.css({top: $(this).offset().top});
+      screen.fadeIn('slow');
+      overlay.slideDown('fast');
+      return false;
+    });
+  });
 });
 ]]></xsl:text>
 </xsl:template>
diff --git a/xslt/mallard/html/mal2html-ui.xsl b/xslt/mallard/html/mal2html-ui.xsl
index d274654..1c553d6 100644
--- a/xslt/mallard/html/mal2html-ui.xsl
+++ b/xslt/mallard/html/mal2html-ui.xsl
@@ -55,7 +55,7 @@ for blocks that produce automatic titles.
   <xsl:param name="node" select="."/>
   <xsl:if test="$node/@uix:expanded">
     <xsl:message>
-      <xsl:text>DEPRECATION WARNING: The expanded attribute from the expander/ui namespace
+      <xsl:text>DEPRECATION WARNING: The expanded attribute from the experimental/ui namespace
 is deprecated. Use the expanded attribute from the ui/1.0 namespace instead.
 Note that the non-experimental attribute takes true/false instead of yes/no.
 http://projectmallard.org/ui/1.0/ui_expanded.html</xsl:text>
@@ -470,4 +470,81 @@ ${node} element.
   </xsl:choose>
 </xsl:template>
 
+
+<!-- == Matched Templates == -->
+
+<!-- = ui:overlay = -->
+<xsl:template mode="mal2html.block.mode" match="uix:overlay">
+  <xsl:variable name="media" select="mal:media[1]"/>
+  <xsl:variable name="width">
+    <xsl:choose>
+      <xsl:when test="@width">
+        <xsl:value-of select="@width"/>
+      </xsl:when>
+      <xsl:otherwise>
+        <xsl:text>80</xsl:text>
+      </xsl:otherwise>
+    </xsl:choose>
+  </xsl:variable>
+  <xsl:variable name="height">
+    <xsl:choose>
+      <xsl:when test="@height">
+        <xsl:value-of select="@height"/>
+      </xsl:when>
+      <xsl:otherwise>
+        <xsl:text>80</xsl:text>
+      </xsl:otherwise>
+    </xsl:choose>
+  </xsl:variable>
+  <div class="ui-tile ui-tile-side">
+    <a href="{$media/@src}" class="ui-overlay">
+      <span class="ui-tile-img" style="width: {$width}px; height: {$height}px;">
+        <xsl:choose>
+          <xsl:when test="$media/uix:thumb">
+            <img src="{$media/uix:thumb[1]/@src}">
+              <xsl:call-template name="mal2html.ui.links.img.attrs">
+                <xsl:with-param name="node" select="."/>
+                <xsl:with-param name="thumb" select="$media/uix:thumb[1]"/>
+                <xsl:with-param name="width" select="$width"/>
+                <xsl:with-param name="height" select="$height"/>
+              </xsl:call-template>
+            </img>
+          </xsl:when>
+          <!-- FIXME: audio/video with image child -->
+          <!--
+          <xsl:when test="($media/@type = 'video' or $media/@type = 'audio') and
+            $media/mal:media[not(@type) or @type = 'image']">
+          </xsl:when>
+          -->
+          <xsl:when test="$media/@type = 'video'">
+            <video src="{$media/@src}">
+              <xsl:call-template name="mal2html.ui.links.img.attrs">
+                <xsl:with-param name="node" select="."/>
+                <xsl:with-param name="thumb" select="$media"/>
+                <xsl:with-param name="width" select="$width"/>
+                <xsl:with-param name="height" select="$height"/>
+              </xsl:call-template>
+            </video>
+          </xsl:when>
+          <xsl:otherwise>
+            <img src="{$media/@src}">
+              <xsl:call-template name="mal2html.ui.links.img.attrs">
+                <xsl:with-param name="node" select="."/>
+                <xsl:with-param name="thumb" select="$media"/>
+                <xsl:with-param name="width" select="$width"/>
+                <xsl:with-param name="height" select="$height"/>
+              </xsl:call-template>
+            </img>
+          </xsl:otherwise>
+        </xsl:choose>
+      </span>
+    </a>
+    <div class="ui-overlay">
+      <div class="contents">
+        <xsl:apply-templates mode="mal2html.block.mode" select="$media"/>
+      </div>
+    </div>
+  </div>
+</xsl:template>
+
 </xsl:stylesheet>