[yelp-xsl] Added ui:expanded for listing, synopsis, figure

[Shaun McCance <shaunm src gnome org>]

commit 4d45bcc2371c7c6562a6bb0afde0e73d7492e8d2
Author: Shaun McCance <shaunm gnome org>
Date:   Tue Jun 14 15:08:25 2011 -0400

    Added ui:expanded for listing, synopsis, figure
    
    Figure support required retooling the auto-zoom code

 xslt/common/html.xsl                 |   61 +++++++++++++++++---------
 xslt/mallard/html/mal2html-block.xsl |   79 +++++++++++++++++++++++-----------
 2 files changed, 95 insertions(+), 45 deletions(-)
---
diff --git a/xslt/common/html.xsl b/xslt/common/html.xsl
index 5170e38..09bae69 100644
--- a/xslt/common/html.xsl
+++ b/xslt/common/html.xsl
@@ -577,7 +577,7 @@ h3, h4, h5, h6, h7 { font-size: 1em; }
 p { line-height: 1.72em; }
 div, pre, p { margin: 1em 0 0 0; padding: 0; }
 div:first-child, pre:first-child, p:first-child { margin-top: 0; }
-div.inner, div.contents, pre.contents { margin-top: 0; }
+div.inner, div.region, div.contents, pre.contents { margin-top: 0; }
 pre.contents div { margin-top: 0 !important; }
 p img { vertical-align: middle; }
 div.clear {
@@ -785,7 +785,7 @@ div.figure {
 div.figure > div.inner > a.zoom {
   float: </xsl:text><xsl:value-of select="$right"/><xsl:text>;
 }
-div.figure > div.inner > div.contents {
+div.figure > div.inner > div.region > div.contents {
   margin: 0;
   padding: 0.5em 1em 0.5em 1em;
   clear: both;
@@ -799,7 +799,7 @@ div.figure > div.inner > div.contents {
 }
 div.list > div.title { margin-bottom: 0.5em; }
 div.listing > div.inner { margin: 0; padding: 0; }
-div.listing > div.inner > div.desc { font-style: italic; }
+div.listing > div.inner > div.region > div.desc { font-style: italic; }
 div.note {
   padding: 6px;
   border: solid 1px </xsl:text>
@@ -811,7 +811,7 @@ div.note > div.inner > div.title {
   margin-</xsl:text><xsl:value-of select="$left"/><xsl:text>: </xsl:text>
     <xsl:value-of select="$icons.size.note + 6"/><xsl:text>px;
 }
-div.note > div.inner > div.contents {
+div.note > div.inner > div.region > div.contents {
   margin: 0; padding: 0;
   margin-</xsl:text><xsl:value-of select="$left"/><xsl:text>: </xsl:text>
     <xsl:value-of select="$icons.size.note + 6"/><xsl:text>px;
@@ -843,7 +843,7 @@ div.note-sidebar {
 div.note-sidebar > div.inner { background-image: none; }
 div.note-sidebar > div.inner > div.title { margin-</xsl:text>
   <xsl:value-of select="$left"/><xsl:text>: 0px; }
-div.note-sidebar > div.inner > div.contents { margin-</xsl:text>
+div.note-sidebar > div.inner > div.region > div.contents { margin-</xsl:text>
   <xsl:value-of select="$left"/><xsl:text>: 0px; }
 div.quote {
   padding: 0;
@@ -897,7 +897,7 @@ ol.steps .steps {
 }
 li.steps { margin-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 1.44em; }
 li.steps li.steps { margin-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 2.4em; }
-div.synopsis > div.inner > div.contents, div.synopsis > pre.contents {
+div.synopsis > div.inner > div.region > div.contents, div.synopsis > pre.contents {
   padding: 0.5em 1em 0.5em 1em;
   border-top: solid 1px;
   border-bottom: solid 1px;
@@ -906,7 +906,7 @@ div.synopsis > div.inner > div.contents, div.synopsis > pre.contents {
   background-color: </xsl:text>
     <xsl:value-of select="$color.gray_background"/><xsl:text>;
 }
-div.synopsis > div.inner > div.desc { font-style: italic; }
+div.synopsis > div.inner > div.region > div.desc { font-style: italic; }
 div.synopsis div.code {
   background: none;
   border: none;
@@ -1280,19 +1280,33 @@ $.fn.yelp_auto_resize = function () {
   }
   $(window).unbind('resize', yelp_resize_imgs);
   var zoom = fig.children('div.inner').children('a.zoom');
+  if (fig.find('div.contents:first').is(':hidden')) {
+    zoom.hide();
+    return;
+  }
   for (var i = 0; i < imgs.length; i++) {
     var img = $(imgs[i]);
     if (img.data('yelp-original-width') == undefined) {
-      img.data('yelp-original-width', img.width());
+      var iwidth = parseInt(img.attr('width'));
+      if (!iwidth)
+        iwidth = img[0].width;
+      img.data('yelp-original-width', iwidth);
+      var iheight = parseInt(img.attr('height'));
+      if (!iheight)
+        iheight = img[0].height * (iwidth / img[0].width);
+      img.data('yelp-original-height', iheight);
     }
     if (img.data('yelp-original-width') > img.parent().width()) {
       if (img.data('yelp-zoomed') != true) {
-        img.width(img.parent().width());
+        img[0].width = img.parent().width();
+        img[0].height = (parseInt(img.data('yelp-original-height')) *
+                         img.width() / parseInt(img.data('yelp-original-width')));
       }
       zoom.show();
     }
     else {
-      img.width(img.data('yelp-original-width'));
+      img[0].width = img.data('yelp-original-width');
+      img[0].height = img.data('yelp-original-height');
       zoom.hide();
     }
   }
@@ -1329,10 +1343,14 @@ $(document).ready(function () {
       zoom.parent().find('img').each(function () {
         var zimg = $(this);
         zimg.data('yelp-zoomed', zoomed);
-        if (zoomed)
-          zimg.width(zimg.data('yelp-original-width'));
-        else
-          zimg.width(zimg.parent().width());
+        if (zoomed) {
+          zimg[0].width = zimg.data('yelp-original-width');
+          zimg[0].height = zimg.data('yelp-original-height');
+        } else {
+          zimg[0].width = zimg.parent().width();
+          zimg[0].height = (parseInt(zimg.data('yelp-original-height')) *
+                            zimg.width() / parseInt(zimg.data('yelp-original-width')));
+        }
         yelp_paint_zoom(zoom, zoomed);
       });
       return false;
@@ -1459,29 +1477,32 @@ $(document).ready(function () {
       arrow = $('<span class="ui-expander-arrow-rtl">â</span>');
     else
       arrow = $('<span class="ui-expander-arrow-ltr">â</span>');
-    var contents = expander.children('.inner').children('.contents');
+    var region = expander.children('.inner').children('.region');
     var title = expander.children('.inner').children('.title');
     var titlespan = title.find('span.title:first');
     var titlebase = titlespan.html();
-    title.attr('role', 'button').attr('aria-controls', contents.attr('id'));
+    title.attr('role', 'button').attr('aria-controls', region.attr('id'));
     title.children().append('&#x00A0;&#x00A0;').append(arrow);
     var title_e = yelpdata.children('div.yelp-title-expanded');
     var title_c = yelpdata.children('div.yelp-title-collapsed');
     if (yelpdata.attr('data-yelp-expanded') == 'no') {
       expander.addClass('ui-expander-c');
-      contents.attr('aria-expanded', 'false').hide();
+      region.attr('aria-expanded', 'false').hide();
       if (title_c.length != 0)
         titlespan.html(title_c.html());
     } else {
       expander.addClass('ui-expander-e');
-      contents.attr('aria-expanded', 'true');
+      region.attr('aria-expanded', 'true');
       if (title_e.length != 0)
         titlespan.html(title_e.html());
     }
     expander.children('.inner').children('.title').click(function () {
+      var compfunc = function () { return true; };
+      if (expander.is('div.figure'))
+        compfunc = function () { expander.yelp_auto_resize(); };
       if (expander.is('.ui-expander-e')) {
         expander.removeClass('ui-expander-e').addClass('ui-expander-c');
-        contents.attr('aria-expanded', 'false').slideUp('fast');
+        region.attr('aria-expanded', 'false').slideUp('fast', compfunc);
         if (title_c.length != 0)
           titlespan.html(title_c.html());
         else
@@ -1489,7 +1510,7 @@ $(document).ready(function () {
       }
       else {
         expander.removeClass('ui-expander-c').addClass('ui-expander-e');
-        contents.attr('aria-expanded', 'true').slideDown('fast');
+        region.attr('aria-expanded', 'true').slideDown('fast', compfunc);
         if (title_e.length != 0)
           titlespan.html(title_e.html());
         else
diff --git a/xslt/mallard/html/mal2html-block.xsl b/xslt/mallard/html/mal2html-block.xsl
index c804f1c..a871360 100644
--- a/xslt/mallard/html/mal2html-block.xsl
+++ b/xslt/mallard/html/mal2html-block.xsl
@@ -273,8 +273,15 @@ in accordance with the Mallard specification on fallback block content.
 <!-- = figure = -->
 <xsl:template mode="mal2html.block.mode" match="mal:figure">
   <xsl:variable name="if"><xsl:call-template name="mal.if.test"/></xsl:variable><xsl:if test="$if = 'true'">
-  <div class="figure">
+  <div>
     <xsl:call-template name="html.lang.attrs"/>
+    <xsl:attribute name="class">
+      <xsl:text>figure</xsl:text>
+      <xsl:if test="mal:title and @ui:expanded">
+        <xsl:text> ui-expander</xsl:text>
+      </xsl:if>
+    </xsl:attribute>
+    <xsl:call-template name="mal2html.ui.expander.data"/>
     <div class="inner">
       <a href="#" class="zoom">
         <xsl:attribute name="data-zoom-in-title">
@@ -289,12 +296,14 @@ in accordance with the Mallard specification on fallback block content.
         </xsl:attribute>
       </a>
       <xsl:apply-templates mode="mal2html.block.mode" select="mal:title"/>
-      <div class="contents">
-        <xsl:for-each select="*[not(self::mal:title or self::mal:desc)]">
-          <xsl:apply-templates mode="mal2html.block.mode" select="."/>
-        </xsl:for-each>
+      <div class="region">
+        <div class="contents">
+          <xsl:for-each select="*[not(self::mal:title or self::mal:desc)]">
+            <xsl:apply-templates mode="mal2html.block.mode" select="."/>
+          </xsl:for-each>
+        </div>
+        <xsl:apply-templates mode="mal2html.block.mode" select="mal:desc"/>
       </div>
-      <xsl:apply-templates mode="mal2html.block.mode" select="mal:desc"/>
     </div>
   </div>
 </xsl:if>
@@ -303,15 +312,24 @@ in accordance with the Mallard specification on fallback block content.
 <!-- = listing = -->
 <xsl:template mode="mal2html.block.mode" match="mal:listing">
   <xsl:variable name="if"><xsl:call-template name="mal.if.test"/></xsl:variable><xsl:if test="$if = 'true'">
-  <div class="listing">
+  <div>
     <xsl:call-template name="html.lang.attrs"/>
+    <xsl:attribute name="class">
+      <xsl:text>listing</xsl:text>
+      <xsl:if test="mal:title and @ui:expanded">
+        <xsl:text> ui-expander</xsl:text>
+      </xsl:if>
+    </xsl:attribute>
+    <xsl:call-template name="mal2html.ui.expander.data"/>
     <div class="inner">
       <xsl:apply-templates mode="mal2html.block.mode" select="mal:title"/>
-      <xsl:apply-templates mode="mal2html.block.mode" select="mal:desc"/>
-      <div class="contents">
-        <xsl:for-each select="*[not(self::mal:title or self::mal:desc)]">
-          <xsl:apply-templates mode="mal2html.block.mode" select="."/>
-        </xsl:for-each>
+      <div class="region">
+        <xsl:apply-templates mode="mal2html.block.mode" select="mal:desc"/>
+        <div class="contents">
+          <xsl:for-each select="*[not(self::mal:title or self::mal:desc)]">
+            <xsl:apply-templates mode="mal2html.block.mode" select="."/>
+          </xsl:for-each>
+        </div>
       </div>
     </div>
   </div>
@@ -357,13 +375,15 @@ in accordance with the Mallard specification on fallback block content.
     <xsl:call-template name="mal2html.ui.expander.data"/>
     <div class="inner">
       <xsl:apply-templates mode="mal2html.block.mode" select="mal:title"/>
-      <div class="contents">
-        <xsl:if test="mal:title and @ui:expanded">
-          <xsl:attribute name="id">
-            <xsl:value-of select="concat('-yelp-', generate-id(.))"/>
-          </xsl:attribute>
-        </xsl:if>
-        <xsl:apply-templates mode="mal2html.block.mode" select="*[not(self::mal:title)]"/>
+      <div class="region">
+        <div class="contents">
+          <xsl:if test="mal:title and @ui:expanded">
+            <xsl:attribute name="id">
+              <xsl:value-of select="concat('-yelp-', generate-id(.))"/>
+            </xsl:attribute>
+          </xsl:if>
+          <xsl:apply-templates mode="mal2html.block.mode" select="*[not(self::mal:title)]"/>
+        </div>
       </div>
     </div>
   </div>
@@ -468,15 +488,24 @@ in accordance with the Mallard specification on fallback block content.
 <!-- = synopsis = -->
 <xsl:template mode="mal2html.block.mode" match="mal:synopsis">
   <xsl:variable name="if"><xsl:call-template name="mal.if.test"/></xsl:variable><xsl:if test="$if = 'true'">
-  <div class="synopsis">
+  <div>
     <xsl:call-template name="html.lang.attrs"/>
+    <xsl:attribute name="class">
+      <xsl:text>synopsis</xsl:text>
+      <xsl:if test="mal:title and @ui:expanded">
+        <xsl:text> ui-expander</xsl:text>
+      </xsl:if>
+    </xsl:attribute>
+    <xsl:call-template name="mal2html.ui.expander.data"/>
     <div class="inner">
       <xsl:apply-templates mode="mal2html.block.mode" select="mal:title"/>
-      <xsl:apply-templates mode="mal2html.block.mode" select="mal:desc"/>
-      <div class="contents">
-        <xsl:for-each select="*[not(self::mal:title or self::mal:desc)]">
-          <xsl:apply-templates mode="mal2html.block.mode" select="."/>
-        </xsl:for-each>
+      <div class="region">
+        <xsl:apply-templates mode="mal2html.block.mode" select="mal:desc"/>
+        <div class="contents">
+          <xsl:for-each select="*[not(self::mal:title or self::mal:desc)]">
+            <xsl:apply-templates mode="mal2html.block.mode" select="."/>
+          </xsl:for-each>
+        </div>
       </div>
     </div>
   </div>