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

7 files changed, 159 insertions, 87 deletions

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
@@ -34,13 +34,44 @@ 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">