[yelp-xsl] Added experimental ui:expanded support

[Shaun McCance <shaunm src gnome org>]

commit 7791ffbf1674fa13063b270fa20cae2db1beef8e
Author: Shaun McCance <shaunm gnome org>
Date:   Mon Jun 13 11:47:59 2011 -0400

    Added experimental ui:expanded support

 xslt/common/html.xsl                 |   45 ++++++++++++++++++++++++++++++++++
 xslt/mallard/html/mal2html-block.xsl |   24 +++++++++++++++++-
 2 files changed, 68 insertions(+), 1 deletions(-)
---
diff --git a/xslt/common/html.xsl b/xslt/common/html.xsl
index d012b00..8363060 100644
--- a/xslt/common/html.xsl
+++ b/xslt/common/html.xsl
@@ -1050,6 +1050,23 @@ div.media-ttml-p {
   -moz-box-shadow: 2px 2px 4px </xsl:text>
     <xsl:value-of select="$color.gray_border"/><xsl:text>;
 }
+div.ui-expander > div.inner > div.title:hover {
+  color: </xsl:text><xsl:value-of select="$color.link"/><xsl:text>;
+}
+div.ui-expander-e > div.inner > div.title span.ui-expander-arrow-ltr {
+  display: inline-block; <!-- webkit needs this to rotate -->
+  -moz-transform: rotate(90deg);
+  -webkit-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+}
+div.ui-expander-e > div.inner > div.title span.ui-expander-arrow-rtl {
+  display: inline-block; <!-- webkit needs this to rotate -->
+  -moz-transform: rotate(-90deg);
+  -webkit-transform: rotate(-90deg);
+  -o-transform: rotate(-90deg);
+  -ms-transform: rotate(-90deg);
+}
 </xsl:text>
 </xsl:template>
 
@@ -1438,6 +1455,34 @@ function yelp_init_video (element) {
 $(document).ready(function () {
   $('video.media-block').each(function () { yelp_init_video(this) });;
 });
+$(document).ready(function () {
+  $('.ui-expander').each(function () {
+    var expander = $(this);
+    var arrow;
+    if (expander.attr('data-yelp-dir') == 'rtl')
+      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 title = expander.children('.inner').children('.title');
+    title.attr('role', 'button').attr('aria-controls', contents.attr('id'));
+    title.children().append('&#x00A0;&#x00A0;').append(arrow);
+    if (expander.is('.ui-expander-c'))
+      contents.attr('aria-expanded', 'false').hide();
+    else
+      contents.attr('aria-expanded', 'true');
+    expander.children('.inner').children('.title').click(function () {
+      if (expander.is('.ui-expander-e')) {
+        expander.removeClass('ui-expander-e').addClass('ui-expander-c');
+        contents.attr('aria-expanded', 'false').slideUp('fast');
+      }
+      else {
+        expander.removeClass('ui-expander-c').addClass('ui-expander-e');
+        contents.attr('aria-expanded', 'true').slideDown('fast');
+      }
+    });
+  });
+});
 ]]></xsl:text>
 </xsl:template>
 
diff --git a/xslt/mallard/html/mal2html-block.xsl b/xslt/mallard/html/mal2html-block.xsl
index 61c845a..5cd51d3 100644
--- a/xslt/mallard/html/mal2html-block.xsl
+++ b/xslt/mallard/html/mal2html-block.xsl
@@ -19,9 +19,10 @@ Free Software Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA
 <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform";
                 xmlns:mal="http://projectmallard.org/1.0/";
                 xmlns:if="http://projectmallard.org/experimental/if/";
+                xmlns:ui="http://projectmallard.org/experimental/ui/";
                 xmlns:msg="http://projects.gnome.org/yelp/gettext/";
                 xmlns="http://www.w3.org/1999/xhtml";
-                exclude-result-prefixes="mal if msg"
+                exclude-result-prefixes="mal if ui msg"
                 version="1.0">
 
 <!--!!==========================================================================
@@ -349,10 +350,31 @@ in accordance with the Mallard specification on fallback block content.
       <xsl:if test="normalize-space($notestyle) != ''">
         <xsl:value-of select="concat(' note-', $notestyle)"/>
       </xsl:if>
+      <xsl:if test="mal:title and @ui:expanded">
+        <xsl:text> ui-expander </xsl:text>
+        <xsl:choose>
+          <xsl:when test="@ui:expanded = 'yes'">
+            <xsl:text>ui-expander-e</xsl:text>
+          </xsl:when>
+          <xsl:otherwise>
+            <xsl:text>ui-expander-c</xsl:text>
+          </xsl:otherwise>
+        </xsl:choose>
+      </xsl:if>
     </xsl:attribute>
+    <xsl:if test="mal:title and @ui:expanded">
+      <xsl:attribute name="data-yelp-dir">
+        <xsl:call-template name="l10n.direction"/>
+      </xsl:attribute>
+    </xsl:if>
     <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>
     </div>