diff options
author | Shaun McCance <shaunm@redhat.com> | 2018-10-14 15:01:02 -0400 |
---|---|---|
committer | Shaun McCance <shaunm@redhat.com> | 2018-10-15 09:54:24 -0400 |
commit | 30a542d15625fc76495d4b50d1e896460c22a6cb (patch) | |
tree | f0d2f0a754b87230f6d7b45f0fffa4d57258976f | |
parent | 77e523204fa86fe730734ed7d669cbb9fbbb3feb (diff) | |
download | yelp-xsl-30a542d15625fc76495d4b50d1e896460c22a6cb.tar.gz |
Added ui-expander-preview style for elements with ui:expanded
-rw-r--r-- | doc/yelp-xsl/C/mal2html-block.page | 3 | ||||
-rw-r--r-- | doc/yelp-xsl/C/mal2html-links.page | 3 | ||||
-rw-r--r-- | doc/yelp-xsl/C/mal2html-list.page | 3 | ||||
-rw-r--r-- | doc/yelp-xsl/C/mal2html-page.page | 3 | ||||
-rw-r--r-- | doc/yelp-xsl/C/mal2html-table.page | 3 | ||||
-rw-r--r-- | doc/yelp-xsl/C/mal2html.links.links.page | 3 | ||||
-rw-r--r-- | doc/yelp-xsl/C/mal2html.links.section.page | 3 | ||||
-rw-r--r-- | doc/yelp-xsl/C/mal2html.links.series.page | 3 | ||||
-rw-r--r-- | doc/yelp-xsl/C/mal2html.section.page | 3 | ||||
-rw-r--r-- | doc/yelp-xsl/C/mal2html.ui.expander.class.page | 37 | ||||
-rw-r--r-- | doc/yelp-xsl/C/mal2html.ui.expander.data.page | 13 | ||||
-rw-r--r-- | xslt/common/html.xsl | 79 | ||||
-rw-r--r-- | xslt/mallard/html/mal2html-block.xsl | 58 | ||||
-rw-r--r-- | xslt/mallard/html/mal2html-links.xsl | 30 | ||||
-rw-r--r-- | xslt/mallard/html/mal2html-list.xsl | 23 | ||||
-rw-r--r-- | xslt/mallard/html/mal2html-page.xsl | 6 | ||||
-rw-r--r-- | xslt/mallard/html/mal2html-table.xsl | 5 | ||||
-rw-r--r-- | 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 @@ -62,6 +62,9 @@ <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> <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 @@ -69,6 +69,9 @@ <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> <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 @@ -42,6 +42,9 @@ <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> </list> 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 @@ -147,6 +147,9 @@ <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> </list> 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 @@ -35,6 +35,9 @@ <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> <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 @@ -63,6 +63,9 @@ <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> <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 @@ -31,6 +31,9 @@ <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> </list> 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 @@ -39,6 +39,9 @@ <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> </list> 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 @@ -72,6 +72,9 @@ <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> </list> 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 < 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"> |