GNOME.org
 

[yelp-xsl] Added ui-expander-preview style for elements with ui:expanded

commit 30a542d15625fc76495d4b50d1e896460c22a6cb
Author: Shaun McCance <shaunm redhat com>
Date:   Sun Oct 14 15:01:02 2018 -0400

    Added ui-expander-preview style for elements with ui:expanded

 doc/yelp-xsl/C/mal2html-block.page             |  3 +
 doc/yelp-xsl/C/mal2html-links.page             |  3 +
 doc/yelp-xsl/C/mal2html-list.page              |  3 +
 doc/yelp-xsl/C/mal2html-page.page              |  3 +
 doc/yelp-xsl/C/mal2html-table.page             |  3 +
 doc/yelp-xsl/C/mal2html.links.links.page       |  3 +
 doc/yelp-xsl/C/mal2html.links.section.page     |  3 +
 doc/yelp-xsl/C/mal2html.links.series.page      |  3 +
 doc/yelp-xsl/C/mal2html.section.page           |  3 +
 doc/yelp-xsl/C/mal2html.ui.expander.class.page | 37 ++++++++++++
 doc/yelp-xsl/C/mal2html.ui.expander.data.page  | 13 +++--
 xslt/common/html.xsl                           | 79 +++++++++++++++++++++++++-
 xslt/mallard/html/mal2html-block.xsl           | 58 ++++++-------------
 xslt/mallard/html/mal2html-links.xsl           | 30 +++++-----
 xslt/mallard/html/mal2html-list.xsl            | 23 +++-----
 xslt/mallard/html/mal2html-page.xsl            |  6 +-
 xslt/mallard/html/mal2html-table.xsl           |  5 +-
 xslt/mallard/html/mal2html-ui.xsl              | 45 +++++++++++++--
 18 files changed, 230 insertions(+), 93 deletions(-)
---
diff --git a/doc/yelp-xsl/C/mal2html-block.page b/doc/yelp-xsl/C/mal2html-block.page
index 5deee9a4..e9536259 100644
--- a/doc/yelp-xsl/C/mal2html-block.page
+++ b/doc/yelp-xsl/C/mal2html-block.page
@@ -61,6 +61,9 @@
   <item>
    <p><link xref="mal.if.test"/></p>
   </item>
+  <item>
+   <p><link xref="mal2html.ui.expander.class"/></p>
+  </item>
   <item>
    <p><link xref="mal2html.ui.expander.data"/></p>
   </item>
diff --git a/doc/yelp-xsl/C/mal2html-links.page b/doc/yelp-xsl/C/mal2html-links.page
index 1ded43a0..7b6772be 100644
--- a/doc/yelp-xsl/C/mal2html-links.page
+++ b/doc/yelp-xsl/C/mal2html-links.page
@@ -68,6 +68,9 @@
   <item>
    <p><link xref="mal2html.editor.badge"/></p>
   </item>
+  <item>
+   <p><link xref="mal2html.ui.expander.class"/></p>
+  </item>
   <item>
    <p><link xref="mal2html.ui.expander.data"/></p>
   </item>
diff --git a/doc/yelp-xsl/C/mal2html-list.page b/doc/yelp-xsl/C/mal2html-list.page
index b5bf5c4e..24b60572 100644
--- a/doc/yelp-xsl/C/mal2html-list.page
+++ b/doc/yelp-xsl/C/mal2html-list.page
@@ -41,6 +41,9 @@
   <item>
    <p><link xref="mal.if.test"/></p>
   </item>
+  <item>
+   <p><link xref="mal2html.ui.expander.class"/></p>
+  </item>
   <item>
    <p><link xref="mal2html.ui.expander.data"/></p>
   </item>
diff --git a/doc/yelp-xsl/C/mal2html-page.page b/doc/yelp-xsl/C/mal2html-page.page
index 50a816db..e6db9923 100644
--- a/doc/yelp-xsl/C/mal2html-page.page
+++ b/doc/yelp-xsl/C/mal2html-page.page
@@ -146,6 +146,9 @@
   <item>
    <p><link xref="mal2html.links.topic"/></p>
   </item>
+  <item>
+   <p><link xref="mal2html.ui.expander.class"/></p>
+  </item>
   <item>
    <p><link xref="mal2html.ui.expander.data"/></p>
   </item>
diff --git a/doc/yelp-xsl/C/mal2html-table.page b/doc/yelp-xsl/C/mal2html-table.page
index e39435ac..8916e633 100644
--- a/doc/yelp-xsl/C/mal2html-table.page
+++ b/doc/yelp-xsl/C/mal2html-table.page
@@ -34,6 +34,9 @@
   <item>
    <p><link xref="mal.if.test"/></p>
   </item>
+  <item>
+   <p><link xref="mal2html.ui.expander.class"/></p>
+  </item>
   <item>
    <p><link xref="mal2html.ui.expander.data"/></p>
   </item>
diff --git a/doc/yelp-xsl/C/mal2html.links.links.page b/doc/yelp-xsl/C/mal2html.links.links.page
index fece0e71..bb36ccf6 100644
--- a/doc/yelp-xsl/C/mal2html.links.links.page
+++ b/doc/yelp-xsl/C/mal2html.links.links.page
@@ -62,6 +62,9 @@
   <item>
    <p><link xref="mal2html.links.ul"/></p>
   </item>
+  <item>
+   <p><link xref="mal2html.ui.expander.class"/></p>
+  </item>
   <item>
    <p><link xref="mal2html.ui.expander.data"/></p>
   </item>
diff --git a/doc/yelp-xsl/C/mal2html.links.section.page b/doc/yelp-xsl/C/mal2html.links.section.page
index 56c43a2b..4bda5b9e 100644
--- a/doc/yelp-xsl/C/mal2html.links.section.page
+++ b/doc/yelp-xsl/C/mal2html.links.section.page
@@ -30,6 +30,9 @@
  </list>
  <list style="compact">
   <title>Calls Templates</title>
+  <item>
+   <p><link xref="mal2html.ui.expander.class"/></p>
+  </item>
   <item>
    <p><link xref="mal2html.ui.expander.data"/></p>
   </item>
diff --git a/doc/yelp-xsl/C/mal2html.links.series.page b/doc/yelp-xsl/C/mal2html.links.series.page
index d5c333ac..15d094ba 100644
--- a/doc/yelp-xsl/C/mal2html.links.series.page
+++ b/doc/yelp-xsl/C/mal2html.links.series.page
@@ -38,6 +38,9 @@
   <item>
    <p><link xref="mal2html.links.series.prev"/></p>
   </item>
+  <item>
+   <p><link xref="mal2html.ui.expander.class"/></p>
+  </item>
   <item>
    <p><link xref="mal2html.ui.expander.data"/></p>
   </item>
diff --git a/doc/yelp-xsl/C/mal2html.section.page b/doc/yelp-xsl/C/mal2html.section.page
index 242887f4..ebfd19c2 100644
--- a/doc/yelp-xsl/C/mal2html.section.page
+++ b/doc/yelp-xsl/C/mal2html.section.page
@@ -71,6 +71,9 @@
   <item>
    <p><link xref="html.class.attr"/></p>
   </item>
+  <item>
+   <p><link xref="mal2html.ui.expander.class"/></p>
+  </item>
   <item>
    <p><link xref="mal2html.ui.expander.data"/></p>
   </item>
diff --git a/doc/yelp-xsl/C/mal2html.ui.expander.class.page b/doc/yelp-xsl/C/mal2html.ui.expander.class.page
new file mode 100644
index 00000000..35f6f6d7
--- /dev/null
+++ b/doc/yelp-xsl/C/mal2html.ui.expander.class.page
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<page xmlns="http://projectmallard.org/1.0/"; style="xslt-template" id="mal2html.ui.expander.class">
+ <info>
+  <link type="guide" xref="mal2html-ui" group="templates"/>
+  <link type="guide" xref="templates" group="mal2html"/>
+  <desc>Output HTML class value for an expander.</desc>
+  <revision version="3.32" date="2018-10-14" status="final"/>
+ </info>
+ <title>mal2html.ui.expander.class</title>
+ <synopsis>
+  <title>Parameters</title>
+  <terms>
+   <item>
+    <title><code>$node</code></title>
+    <p>The source element to output data for.</p>
+   </item>
+   <item>
+    <title><code>$hastitle</code></title>
+    <p>True if <code>$node</code> has a title or a title can be automatically computed.</p>
+   </item>
+  </terms>
+ </synopsis>
+ <p>This template outputs HTML class attribute values for elements that can be
+ expanded and collapsed. It outputs the string <sys>ui-expander</sys> only if <code>$node</code> has
+ a <sys>ui:expanded</sys> attribute and <code>$hastitle</code> is true. By default, <code>$hastitle</code> 
is true
+ if <code>$node</code> has a <sys>title</sys> element. Set <code>$hastitle</code> explicitly when calling 
this
+ template on elements that have an automatic default title.</p>
+ <p>This template also outputs <sys>ui-expander-preview</sys> if <code>$node</code> is an expander and
+ it has the style hint <sys>ui-expander-preview</sys>. This is an alternative style
+ that shows a scaled down preview of collapsed content.</p>
+ <list style="compact">
+  <title>Calls Parameters</title>
+  <item>
+   <p><link xref="mal.cache"/></p>
+  </item>
+ </list>
+</page>
diff --git a/doc/yelp-xsl/C/mal2html.ui.expander.data.page b/doc/yelp-xsl/C/mal2html.ui.expander.data.page
index 006f12fc..b8aa0965 100644
--- a/doc/yelp-xsl/C/mal2html.ui.expander.data.page
+++ b/doc/yelp-xsl/C/mal2html.ui.expander.data.page
@@ -4,7 +4,7 @@
   <link type="guide" xref="mal2html-ui" group="templates"/>
   <link type="guide" xref="templates" group="mal2html"/>
   <desc>Output data for an expander.</desc>
-  <revision version="3.4" date="2012-02-25" status="final"/>
+  <revision version="3.32" date="2018-10-14" status="final"/>
  </info>
  <title>mal2html.ui.expander.data</title>
  <synopsis>
@@ -15,8 +15,8 @@
     <p>The source element to output data for.</p>
    </item>
    <item>
-    <title><code>$expander</code></title>
-    <p>Whether <code>$node</code> is actually an expander.</p>
+    <title><code>$hastitle</code></title>
+    <p>True if <code>$node</code> has a title or a title can be automatically computed.</p>
    </item>
   </terms>
  </synopsis>
@@ -25,9 +25,10 @@
  the CSS. The div contains information about text directionality, the default
  expanded state, and optionally additional titles for the expanded and collapsed
  states.</p>
- <p>The expander information is only output if the <code>$expander</code> parameter is <sys>true</sys>.
- This parameter can be calculated automatically, but it will give false negatives
- for blocks that produce automatic titles.</p>
+ <p>The expander information is only output if <code>$node</code> has a <sys>ui:expanded</sys> attribute
+ and <code>$hastitle</code> is true. By default, <code>$hastitle</code> is true if <code>$node</code> has a 
<sys>title</sys>
+ element. Set <code>$hastitle</code> explicitly when calling this template on elements that
+ have an automatic default title.</p>
  <list style="compact">
   <title>Calls Parameters</title>
   <item>
diff --git a/xslt/common/html.xsl b/xslt/common/html.xsl
index 9d38a9e7..9dcf55e5 100644
--- a/xslt/common/html.xsl
+++ b/xslt/common/html.xsl
@@ -47,7 +47,6 @@ should override the match for `/`.
 </xsl:template>
 
 
-
 <!--@@==========================================================================
 html.basename
 The base filename of the primary output file.
@@ -902,7 +901,7 @@ a `class` attribute.
   <xsl:variable name="nclass" select="normalize-space($fclass)"/>
   <xsl:if test="$nclass != ''">
     <xsl:attribute name="class">
-      <xsl:value-of select="$nclass"/>
+      <xsl:value-of select="normalize-space($nclass)"/>
     </xsl:attribute>
   </xsl:if>
 </xsl:template>
@@ -2093,7 +2092,60 @@ div.yelp-data { display: none; }
   from { transform: scaleY(0); }
   to   { transform: scaleY(1); }
 }
-
+div.ui-expander-preview > div.inner > div.region {
+  transform-origin: 0 0;
+  transition: transform 0.2s linear, background-color 0.2s linear;
+  animation-name: none;
+}
+div.ui-expander-preview.ui-expander-c > div.inner {
+  max-height: 100px;
+  overflow: hidden;
+}
+div.ui-expander-preview.ui-expander-c > div.inner > div.region {
+  display: block;
+  transform: scaleY(0.4);
+  background-color: </xsl:text><xsl:value-of select="$color.bg.gray"/><xsl:text>;
+}
+div.ui-expander-preview.ui-expander-c > div.inner > div.region:hover {
+  background-color: </xsl:text><xsl:value-of select="$color.bg.blue"/><xsl:text>;
+  cursor: zoom-in;
+}
+div.ui-expander-preview.ui-expander-c > div.inner > div.region:hover * {
+  cursor: zoom-in;
+}
+div.ui-expander-preview > div.inner > div.region > * {
+  transform-origin: 0 0;
+  transition: transform 0.2s linear;
+}
+div.ui-expander-preview.ui-expander-c > div.inner > div.region > * {
+  transform: scaleX(0.4);
+}
+section.ui-expander-preview > div.inner > div.region > div.contents{
+  transform-origin: 0 0;
+  transition: transform 0.2s linear, background-color 0.2s linear;
+}
+section.ui-expander-preview.ui-expander-c > div.inner {
+  max-height: 140px;
+  overflow: hidden;
+}
+section.ui-expander-preview.ui-expander-c > div.inner > div.region {
+  display: block;
+}
+section.ui-expander-preview.ui-expander-c > div.inner > div.region > div.contents {
+  transform: scaleY(0.6);
+  background-color: </xsl:text><xsl:value-of select="$color.bg.gray"/><xsl:text>;
+}
+section.ui-expander-preview > div.inner > div.region > div.contents > * {
+  transform-origin: 0 0;
+  transition: transform 0.2s linear;
+}
+section.ui-expander-preview.ui-expander-c > div.inner > div.region > div.contents > * {
+  transform: scaleX(0.6);
+}
+section.ui-expander-preview.ui-expander-c > div.inner > div.region > div.contents:hover {
+  background-color: </xsl:text><xsl:value-of select="$color.bg.blue"/><xsl:text>;
+  cursor: zoom-in;
+}
 @media only screen and (max-width: 480px) {
   article > div.region > div.contents > div.example,
   article > div.region > section > div.inner > div.region > div.contents > div.example {
@@ -2440,6 +2492,7 @@ function yelp_ui_expander_init (expander) {
   var yelpdata = null;
   var innerdiv = null;
   var region = null;
+  var contents = null;
   var title = null;
   var title_e = null;
   var title_c = null;
@@ -2508,6 +2561,26 @@ function yelp_ui_expander_init (expander) {
     title_c = node;
   }
 
+  var ui_expander_zoom_region = function (event) {
+    if (yelpdata.getAttribute('data-yelp-expanded') != 'false') {
+      ui_expander_toggle();
+      event.preventDefault();
+    }
+  }
+  if (expander.nodeName == 'section' || expander.nodeName == 'SECTION') {
+    for (var i = 0; i < region.children.length; i++) {
+      var child = region.children[i];
+      if (child.classList.contains('contents')) {
+        contents = child;
+        break;
+      }
+    }
+    contents.addEventListener('click', ui_expander_zoom_region, true);
+  }
+  else {
+    region.addEventListener('click', ui_expander_zoom_region, true);
+  }
+
   var ui_expander_toggle = function () {
     if (yelpdata.getAttribute('data-yelp-expanded') == 'false') {
       yelpdata.setAttribute('data-yelp-expanded', 'true');
diff --git a/xslt/mallard/html/mal2html-block.xsl b/xslt/mallard/html/mal2html-block.xsl
index f90a1bf6..7c235f0a 100644
--- a/xslt/mallard/html/mal2html-block.xsl
+++ b/xslt/mallard/html/mal2html-block.xsl
@@ -141,10 +141,8 @@ in accordance with the Mallard specification on fallback block content.
         <xsl:call-template name="html.lang.attrs"/>
         <xsl:call-template name="html.class.attr">
           <xsl:with-param name="class">
-            <xsl:text>unknown</xsl:text>
-            <xsl:if test="mal:title and @ui:expanded">
-              <xsl:text> ui-expander</xsl:text>
-            </xsl:if>
+            <xsl:text>unknown </xsl:text>
+            <xsl:call-template name="mal2html.ui.expander.class"/>
             <xsl:if test="$if != 'true'">
               <xsl:text> if-if </xsl:text>
               <xsl:value-of select="$if"/>
@@ -439,10 +437,8 @@ in accordance with the Mallard specification on fallback block content.
       <xsl:call-template name="html.lang.attrs"/>
       <xsl:call-template name="html.class.attr">
         <xsl:with-param name="class">
-          <xsl:text>comment</xsl:text>
-          <xsl:if test="mal:title and (@ui:expanded or @uix:expanded)">
-            <xsl:text> ui-expander</xsl:text>
-          </xsl:if>
+          <xsl:text>comment </xsl:text>
+          <xsl:call-template name="mal2html.ui.expander.class"/>
           <xsl:if test="$if != 'true'">
             <xsl:text> if-if </xsl:text>
             <xsl:value-of select="$if"/>
@@ -518,10 +514,8 @@ in accordance with the Mallard specification on fallback block content.
     <xsl:call-template name="html.lang.attrs"/>
     <xsl:call-template name="html.class.attr">
       <xsl:with-param name="class">
-        <xsl:text>div</xsl:text>
-        <xsl:if test="mal:title and @ui:expanded">
-          <xsl:text> ui-expander</xsl:text>
-        </xsl:if>
+        <xsl:text>div </xsl:text>
+        <xsl:call-template name="mal2html.ui.expander.class"/>
         <xsl:if test="$if != 'true'">
           <xsl:text> if-if </xsl:text>
           <xsl:value-of select="$if"/>
@@ -551,10 +545,8 @@ in accordance with the Mallard specification on fallback block content.
     <xsl:call-template name="html.lang.attrs"/>
     <xsl:call-template name="html.class.attr">
       <xsl:with-param name="class">
-        <xsl:text>example</xsl:text>
-        <xsl:if test="mal:title and @ui:expanded">
-          <xsl:text> ui-expander</xsl:text>
-        </xsl:if>
+        <xsl:text>example </xsl:text>
+        <xsl:call-template name="mal2html.ui.expander.class"/>
         <xsl:if test="$if != 'true'">
           <xsl:text> if-if </xsl:text>
           <xsl:value-of select="$if"/>
@@ -584,10 +576,8 @@ in accordance with the Mallard specification on fallback block content.
     <xsl:call-template name="html.lang.attrs"/>
     <xsl:call-template name="html.class.attr">
       <xsl:with-param name="class">
-        <xsl:text>figure</xsl:text>
-        <xsl:if test="mal:title and (@ui:expanded or @uix:expanded)">
-          <xsl:text> ui-expander</xsl:text>
-        </xsl:if>
+        <xsl:text>figure </xsl:text>
+        <xsl:call-template name="mal2html.ui.expander.class"/>
         <xsl:if test="$if != 'true'">
           <xsl:text> if-if </xsl:text>
           <xsl:value-of select="$if"/>
@@ -631,10 +621,8 @@ in accordance with the Mallard specification on fallback block content.
     <xsl:call-template name="html.lang.attrs"/>
     <xsl:call-template name="html.class.attr">
       <xsl:with-param name="class">
-        <xsl:text>listing</xsl:text>
-        <xsl:if test="mal:title and (@ui:expanded or @uix:expanded)">
-          <xsl:text> ui-expander</xsl:text>
-        </xsl:if>
+        <xsl:text>listing </xsl:text>
+        <xsl:call-template name="mal2html.ui.expander.class"/>
         <xsl:if test="$if != 'true'">
           <xsl:text> if-if </xsl:text>
           <xsl:value-of select="$if"/>
@@ -710,9 +698,8 @@ in accordance with the Mallard specification on fallback block content.
         <xsl:if test="$notestyle != 'note'">
           <xsl:value-of select="concat(' note-', $notestyle)"/>
         </xsl:if>
-        <xsl:if test="mal:title and (@ui:expanded or @uix:expanded)">
-          <xsl:text> ui-expander</xsl:text>
-        </xsl:if>
+        <xsl:text> </xsl:text>
+        <xsl:call-template name="mal2html.ui.expander.class"/>
         <xsl:if test="$if != 'true'">
           <xsl:text> if-if </xsl:text>
           <xsl:value-of select="$if"/>
@@ -736,11 +723,6 @@ in accordance with the Mallard specification on fallback block content.
       <xsl:apply-templates mode="mal2html.block.mode" select="mal:title"/>
       <div class="region">
         <div class="contents">
-          <xsl:if test="mal:title and (@ui:expanded or @uix: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>
@@ -781,10 +763,8 @@ in accordance with the Mallard specification on fallback block content.
     <xsl:call-template name="html.lang.attrs"/>
     <xsl:call-template name="html.class.attr">
       <xsl:with-param name="class">
-        <xsl:text>quote</xsl:text>
-        <xsl:if test="mal:title and (@ui:expanded or @uix:expanded)">
-          <xsl:text> ui-expander</xsl:text>
-        </xsl:if>
+        <xsl:text>quote </xsl:text>
+        <xsl:call-template name="mal2html.ui.expander.class"/>
         <xsl:if test="$if != 'true'">
           <xsl:text> if-if </xsl:text>
           <xsl:value-of select="$if"/>
@@ -845,10 +825,8 @@ in accordance with the Mallard specification on fallback block content.
     <xsl:call-template name="html.lang.attrs"/>
     <xsl:call-template name="html.class.attr">
       <xsl:with-param name="class">
-        <xsl:text>synopsis</xsl:text>
-        <xsl:if test="mal:title and (@ui:expanded or @uix:expanded)">
-          <xsl:text> ui-expander</xsl:text>
-        </xsl:if>
+        <xsl:text>synopsis </xsl:text>
+        <xsl:call-template name="mal2html.ui.expander.class"/>
         <xsl:if test="$if != 'true'">
           <xsl:text> if-if </xsl:text>
           <xsl:value-of select="$if"/>
diff --git a/xslt/mallard/html/mal2html-links.xsl b/xslt/mallard/html/mal2html-links.xsl
index 3099894c..09b23e5f 100644
--- a/xslt/mallard/html/mal2html-links.xsl
+++ b/xslt/mallard/html/mal2html-links.xsl
@@ -78,9 +78,6 @@ parameter will be used if provided.
   <xsl:variable name="style" select="concat(' ', $node[self::mal:links or $lastrole = 'topic']/@style, ' 
')"/>
   <xsl:variable name="nodesc" select="contains($style, ' nodesc ')"/>
   <xsl:variable name="maltitle" select="$node/self::mal:links/mal:title"/>
-  <xsl:variable name="expander" select="($maltitle or ($title != '')) and
-                                        ($node/self::mal:links/@ui:expanded or
-                                         $node/self::mal:links/@uix:expanded)"/>
   <xsl:variable name="depth_">
     <xsl:choose>
       <xsl:when test="$depth &lt; 6">
@@ -99,9 +96,10 @@ parameter will be used if provided.
         <xsl:if test="$lastrole != ''">
           <xsl:value-of select="concat($lastrole, 'links')"/>
         </xsl:if>
-        <xsl:if test="$expander">
-          <xsl:text> ui-expander</xsl:text>
-        </xsl:if>
+        <xsl:call-template name="mal2html.ui.expander.class">
+          <xsl:with-param name="node" select="$node"/>
+          <xsl:with-param name="hastitle" select="$maltitle or ($title != '')"/>
+        </xsl:call-template>
         <xsl:if test="contains($style, ' center ')">
           <xsl:text> links-center</xsl:text>
         </xsl:if>
@@ -109,7 +107,7 @@ parameter will be used if provided.
     </xsl:call-template>
     <xsl:call-template name="mal2html.ui.expander.data">
       <xsl:with-param name="node" select="$node"/>
-      <xsl:with-param name="expander" select="$expander"/>
+      <xsl:with-param name="hastitle" select="$maltitle or ($title != '')"/>
     </xsl:call-template>
     <div class="inner">
       <xsl:choose>
@@ -555,9 +553,9 @@ element containing $node.
             <xsl:text> floatright</xsl:text>
           </xsl:when>
         </xsl:choose>
-        <xsl:if test="mal:title and ($node/@ui:expanded or $node/@uix:expanded)">
-          <xsl:text> ui-expander</xsl:text>
-        </xsl:if>
+        <xsl:call-template name="mal2html.ui.expander.class">
+          <xsl:with-param name="node" select="$node"/>
+        </xsl:call-template>
       </xsl:attribute>
       <xsl:call-template name="mal2html.ui.expander.data">
         <xsl:with-param name="node" select="$node"/>
@@ -663,9 +661,6 @@ This template calls {mal2html.links.series.prev} and
   <xsl:variable name="page" select="$node/ancestor-or-self::mal:page[last()]"/>
   <xsl:variable name="title" select="$node/self::mal:links/mal:title"/>
   <xsl:variable name="style" select="concat(' ', $node/@style, ' ')"/>
-  <xsl:variable name="expander" select="$title and
-                                        ($node/self::mal:links/@ui:expanded or
-                                         $node/self::mal:links/@uix:expanded)"/>
   <xsl:variable name="role" select="$node/self::mal:links/@role"/>
   <div>
     <xsl:attribute name="class">
@@ -684,13 +679,14 @@ This template calls {mal2html.links.series.prev} and
           <xsl:text> floatright</xsl:text>
         </xsl:when>
       </xsl:choose>
-      <xsl:if test="$expander">
-        <xsl:text> ui-expander</xsl:text>
-      </xsl:if>
+      <xsl:call-template name="mal2html.ui.expander.class">
+        <xsl:with-param name="node" select="$node"/>
+        <xsl:with-param name="hastitle" select="count($title) > 0"/>
+      </xsl:call-template>
     </xsl:attribute>
     <xsl:call-template name="mal2html.ui.expander.data">
       <xsl:with-param name="node" select="$node"/>
-      <xsl:with-param name="expander" select="$expander"/>
+      <xsl:with-param name="hastitle" select="count($title) > 0"/>
     </xsl:call-template>
     <div class="inner">
       <xsl:apply-templates mode="mal2html.block.mode" select="$title"/>
diff --git a/xslt/mallard/html/mal2html-list.xsl b/xslt/mallard/html/mal2html-list.xsl
index d494f243..59c8b112 100644
--- a/xslt/mallard/html/mal2html-list.xsl
+++ b/xslt/mallard/html/mal2html-list.xsl
@@ -53,10 +53,8 @@ as well as any special processing for child `item` elements.
     <xsl:call-template name="html.lang.attrs"/>
     <xsl:call-template name="html.class.attr">
       <xsl:with-param name="class">
-        <xsl:text>list</xsl:text>
-        <xsl:if test="mal:title and (@ui:expanded or @uix:expanded)">
-          <xsl:text> ui-expander</xsl:text>
-        </xsl:if>
+        <xsl:text>list </xsl:text>
+        <xsl:call-template name="mal2html.ui.expander.class"/>
         <xsl:if test="$if != 'true'">
           <xsl:text> if-if </xsl:text>
           <xsl:value-of select="$if"/>
@@ -118,10 +116,8 @@ as well as any special processing for child `item` elements.
     <xsl:call-template name="html.lang.attrs"/>
     <xsl:call-template name="html.class.attr">
       <xsl:with-param name="class">
-        <xsl:text>steps</xsl:text>
-        <xsl:if test="mal:title and (@ui:expanded or @uix:expanded)">
-          <xsl:text> ui-expander</xsl:text>
-        </xsl:if>
+        <xsl:text>steps </xsl:text>
+        <xsl:call-template name="mal2html.ui.expander.class"/>
         <xsl:if test="$if != 'true'">
           <xsl:text> if-if </xsl:text>
           <xsl:value-of select="$if"/>
@@ -199,10 +195,8 @@ as well as any special processing for child `item` elements.
     <xsl:call-template name="html.lang.attrs"/>
     <xsl:call-template name="html.class.attr">
       <xsl:with-param name="class">
-        <xsl:text>terms</xsl:text>
-        <xsl:if test="mal:title and (@ui:expanded or @uix:expanded)">
-          <xsl:text> ui-expander</xsl:text>
-        </xsl:if>
+        <xsl:text>terms </xsl:text>
+        <xsl:call-template name="mal2html.ui.expander.class"/>
         <xsl:if test="$if != 'true'">
           <xsl:text> if-if </xsl:text>
           <xsl:value-of select="$if"/>
@@ -276,9 +270,8 @@ as well as any special processing for child `item` elements.
         <xsl:if test="$lines">
           <xsl:text> tree-lines</xsl:text>
         </xsl:if>
-        <xsl:if test="mal:title and (@ui:expanded or @uix:expanded)">
-          <xsl:text> ui-expander</xsl:text>
-        </xsl:if>
+        <xsl:text> </xsl:text>
+        <xsl:call-template name="mal2html.ui.expander.class"/>
         <xsl:if test="$if != 'true'">
           <xsl:text> if-if </xsl:text>
           <xsl:value-of select="$if"/>
diff --git a/xslt/mallard/html/mal2html-page.xsl b/xslt/mallard/html/mal2html-page.xsl
index d03b274e..f2ce208e 100644
--- a/xslt/mallard/html/mal2html-page.xsl
+++ b/xslt/mallard/html/mal2html-page.xsl
@@ -755,9 +755,9 @@ templates that handle `page` and `section` elements.
     <xsl:call-template name="html.class.attr">
       <xsl:with-param name="node" select="$node"/>
       <xsl:with-param name="class">
-        <xsl:if test="@ui:expanded or @uix:expanded">
-          <xsl:text>ui-expander</xsl:text>
-        </xsl:if>
+        <xsl:call-template name="mal2html.ui.expander.class">
+          <xsl:with-param name="node" select="$node"/>
+        </xsl:call-template>
       </xsl:with-param>
     </xsl:call-template>
     <xsl:call-template name="mal2html.ui.expander.data">
diff --git a/xslt/mallard/html/mal2html-table.xsl b/xslt/mallard/html/mal2html-table.xsl
index 9510c417..a36325d2 100644
--- a/xslt/mallard/html/mal2html-table.xsl
+++ b/xslt/mallard/html/mal2html-table.xsl
@@ -170,9 +170,8 @@ REMARK: Describe this module
         <xsl:for-each select="str:tokenize(@style)">
           <xsl:value-of select="concat(' style-', .)"/>
         </xsl:for-each>
-        <xsl:if test="mal:title and (@ui:expanded or @uix:expanded)">
-          <xsl:text> ui-expander</xsl:text>
-        </xsl:if>
+        <xsl:text> </xsl:text>
+        <xsl:call-template name="mal2html.ui.expander.class"/>
         <xsl:if test="$if != 'true'">
           <xsl:text> if-if </xsl:text>
           <xsl:value-of select="$if"/>
diff --git a/xslt/mallard/html/mal2html-ui.xsl b/xslt/mallard/html/mal2html-ui.xsl
index 07064791..7fa0a042 100644
--- a/xslt/mallard/html/mal2html-ui.xsl
+++ b/xslt/mallard/html/mal2html-ui.xsl
@@ -33,14 +33,45 @@ extension.
 -->
 
 
+<!--**==========================================================================
+mal2html.ui.expander.class
+Output HTML class value for an expander.
+@revision[version=3.32 date=2018-10-14 status=final]
+
+[xsl:params]
+$node: The source element to output data for.
+$hastitle: True if $node has a title or a title can be automatically computed.
+
+This template outputs HTML class attribute values for elements that can be
+expanded and collapsed. It outputs the string `ui-expander` only if $node has
+a `ui:expanded` attribute and $hastitle is true. By default, $hastitle is true
+if $node has a `title` element. Set $hastitle explicitly when calling this
+template on elements that have an automatic default title.
+
+This template also outputs `ui-expander-preview` if $node is an expander and
+it has the style hint `ui-expander-preview`. This is an alternative style
+that shows a scaled down preview of collapsed content.
+-->
+<xsl:template name="mal2html.ui.expander.class">
+  <xsl:param name="node" select="."/>
+  <xsl:param name="hastitle" select="$node/mal:title"/>
+  <xsl:if test="$hastitle and ($node/@ui:expanded or $node/@uix:expanded)">
+    <xsl:text> ui-expander </xsl:text>
+    <xsl:if test="contains(concat(' ', $node/@style, ' '), ' ui-expander-preview ')">
+      <xsl:text>ui-expander-preview </xsl:text>
+    </xsl:if>
+  </xsl:if>
+</xsl:template>
+
+
 <!--**==========================================================================
 mal2html.ui.expander.data
 Output data for an expander.
-@revision[version=3.4 date=2012-02-25 status=final]
+@revision[version=3.32 date=2018-10-14 status=final]
 
 [xsl:params]
 $node: The source element to output data for.
-$expander: Whether $node is actually an expander.
+$hastitle: True if $node has a title or a title can be automatically computed.
 
 This template outputs an HTML `div` element with the `class` attribute set to
 `"yelp-data yelp-data-ui-expander"`. All `yelp-data` elements are hidden by
@@ -48,12 +79,14 @@ the CSS. The div contains information about text directionality, the default
 expanded state, and optionally additional titles for the expanded and collapsed
 states.
 
-The expander information is only output if the $expander parameter is `true`.
-This parameter can be calculated automatically, but it will give false negatives
-for blocks that produce automatic titles.
+The expander information is only output if $node has a `ui:expanded` attribute
+and $hastitle is true. By default, $hastitle is true if $node has a `title`
+element. Set $hastitle explicitly when calling this template on elements that
+have an automatic default title.
 -->
 <xsl:template name="mal2html.ui.expander.data">
   <xsl:param name="node" select="."/>
+  <xsl:param name="hastitle" select="$node/mal:title"/>
   <xsl:if test="$node/@uix:expanded and not($node/@ui:expanded)">
     <xsl:message>
       <xsl:text>DEPRECATION WARNING: The expanded attribute from the experimental/ui namespace
@@ -62,7 +95,7 @@ Note that the non-experimental attribute takes true/false instead of yes/no.
 http://projectmallard.org/ui/1.0/ui_expanded.html</xsl:text>
     </xsl:message>
   </xsl:if>
-  <xsl:if test="$node/mal:title and ($node/@ui:expanded or $node/@uix:expanded)">
+  <xsl:if test="$hastitle and ($node/@ui:expanded or $node/@uix:expanded)">
     <xsl:variable name="title_e" select="$node/mal:info/mal:title[@type = 'ui:expanded'][1]"/>
     <xsl:variable name="title_c" select="$node/mal:info/mal:title[@type = 'ui:collapsed'][1]"/>
     <div class="yelp-data yelp-data-ui-expander">
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]