GNOME.org
 

[yelp-xsl/wip/html5] Use SVG icons for figure resizing and fix figure margins

commit d88f2be9c5532ff7949f7673ace3cbbd535f3091
Author: Shaun McCance <shaunm gnome org>
Date:   Fri Feb 12 07:50:08 2016 -0500

    Use SVG icons for figure resizing and fix figure margins
    
    This is the first step towards moving all the iconography to inline SVG.

 xslt/common/html.xsl                 |   46 ++++++++++++++-----------------
 xslt/common/icons.xsl                |   49 +++++++++++++++++++++++++++++++++-
 xslt/dita/html/dita2html-block.xsl   |    2 +
 xslt/dita/html/dita2html.xsl         |    6 +++-
 xslt/docbook/html/db2html-block.xsl  |    2 +
 xslt/docbook/html/db2html.xsl        |    4 ++-
 xslt/mallard/html/mal2html-block.xsl |    2 +
 7 files changed, 83 insertions(+), 28 deletions(-)
---
diff --git a/xslt/common/html.xsl b/xslt/common/html.xsl
index 52f96fa..931c756 100644
--- a/xslt/common/html.xsl
+++ b/xslt/common/html.xsl
@@ -1021,6 +1021,12 @@ All parameters can be automatically computed if not provided.
     </xsl:call-template>
   </xsl:param>
   <xsl:text>
+.yelp-svg-fill {
+  fill: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
+}
+.yelp-svg-stroke {
+  stroke: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
+}
 div.title {
   margin: 0 0 0.2em 0;
   font-weight: bold;
@@ -1124,11 +1130,12 @@ div.example {
   padding-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 1em;
 }
 div.example > div.inner > div.region > div.desc { font-style: italic; }
-div.figure img { max-width: 100%; }
 div.figure {
   display: inline-block;
   max-width: 100%;
   margin-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 1.72em;
+}
+div.figure > div.inner {
   padding: 4px;
   color: </xsl:text>
     <xsl:value-of select="$color.fg.dark"/><xsl:text>;
@@ -1146,6 +1153,13 @@ a.figure-zoom {
   float: </xsl:text><xsl:value-of select="$right"/><xsl:text>;
 }
 a.figure-zoom:hover { border-bottom: none; }
+a.figure-zoom:hover .yelp-svg-fill { fill: </xsl:text>
+  <xsl:value-of select="$color.blue"/><xsl:text>; }
+a.figure-zoom:hover .yelp-svg-stroke { stroke: </xsl:text>
+  <xsl:value-of select="$color.blue"/><xsl:text>; }
+a.figure-zoom .figure-zoom-out { display: none; }
+a.figure-zoom.figure-zoomed .figure-zoom-in { display: none; }
+a.figure-zoom.figure-zoomed .figure-zoom-out { display: inline-block; }
 div.figure > div.inner > div.region > div.contents {
   margin: 0;
   padding: 0.5em 1em 0.5em 1em;
@@ -2075,27 +2089,9 @@ yelp_color_gray_border = ']]></xsl:text>
 <xsl:value-of select="$color.gray"/><xsl:text><![CDATA[';
 function yelp_figure_init (figure) {
   var zoom = figure.querySelector('a.figure-zoom');
-  var zoomCanvas = document.createElement('canvas');
-  zoomCanvas.setAttribute('width', '10');
-  zoomCanvas.setAttribute('height', '10');
-  zoom.setAttribute('data-yelp-zoomed', 'false');
-  zoom.appendChild(zoomCanvas);
 
   var figure_resize = function () {
-    var zoomed = zoom.getAttribute('data-yelp-zoomed');
-    var ctxt = zoomCanvas.getContext('2d');
-    ctxt.strokeStyle = ctxt.fillStyle = yelp_color_text_light;
-    ctxt.clearRect(0, 0, 10, 10);
-    ctxt.strokeRect(0.5, 0.5, 9, 9);
-    if (zoomed == 'true') {
-      ctxt.fillRect(1, 1, 9, 4);
-      ctxt.fillRect(5, 5, 4, 4);
-      zoom.setAttribute('title', zoom.getAttribute('data-zoom-out-title'));
-    }
-    else {
-      ctxt.fillRect(1, 5, 4, 4);
-      zoom.setAttribute('title', zoom.getAttribute('data-zoom-in-title'));
-    }
+    var zoomed = zoom.classList.contains('figure-zoomed');
     var imgs = figure.querySelectorAll('img');
     for (var i = 0; i < imgs.length; i++) {
       var img = imgs[i];
@@ -2135,7 +2131,7 @@ function yelp_figure_init (figure) {
         img.height = parseInt(img.getAttribute('data-yelp-original-height'));
         zoom.style.display = 'none';
       }
-      else if (zoomed == 'true') {
+      else if (zoomed) {
         img.width = parseInt(img.getAttribute('data-yelp-original-width'));
         img.height = parseInt(img.getAttribute('data-yelp-original-height'));
         zoom.style.display = 'block';
@@ -2153,11 +2149,11 @@ function yelp_figure_init (figure) {
   figure.yelp_figure_resize();
 
   zoom.onclick = function (e) {
-    var zoomed = zoom.getAttribute('data-yelp-zoomed');
-    if (zoomed == 'true')
-      zoom.setAttribute('data-yelp-zoomed', 'false');
+    var zoomed = zoom.classList.contains('figure-zoomed');
+    if (zoomed)
+      zoom.classList.remove('figure-zoomed');
     else
-      zoom.setAttribute('data-yelp-zoomed', 'true');
+      zoom.classList.add('figure-zoomed');
     figure.yelp_figure_resize();
     return false;
   };
diff --git a/xslt/common/icons.xsl b/xslt/common/icons.xsl
index 983e9ee..88906a3 100644
--- a/xslt/common/icons.xsl
+++ b/xslt/common/icons.xsl
@@ -15,12 +15,12 @@ along with this program; see the file COPYING.LGPL.  If not, see <http://www.gnu
 -->
 
 <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform";
+                xmlns:svg="http://www.w3.org/2000/svg";
                 version="1.0">
 
 <!--!!==========================================================================
 Icons
 Specify common named icons to style output.
-:Requires: l10n
 :Revision:version="1.0" date="2010-05-25" status="final"
 
 This stylesheet provides a common interface to specify icons for transformations
@@ -125,4 +125,51 @@ This parameters still affects the size of that character.
 <xsl:param name="icons.size.quote" select="48"/>
 
 
+
+
+<!--**==========================================================================
+icons.svg.figure.zoom.in
+Output an #{svg} element for a figure zoom-in icon.
+:Revision: version="3.20" date="2016-02-11" status="final"
+
+This template outputs an SVG #{svg} element with the zoom-in icon for figures.
+Figures automatically scale images down. This icon shows them at their original
+size.
+
+SVG icons can use CSS class names to pick up colors from the !{colors} module.
+By default, this icon uses the #{yelp-svg-stroke} and #{yelp-svg-fill} class
+names.
+-->
+<xsl:template name="icons.svg.figure.zoom.in">
+  <svg:svg width="10" height="10" class="figure-zoom-in">
+    <svg:rect x="0.5" y="0.5" width="9" height="9"
+              class="yelp-svg-stroke" stroke-width="1" fill="none"/>
+    <svg:rect x="0" y="5" width="5" height="5"
+              class="yelp-svg-fill"/>
+  </svg:svg>
+</xsl:template>
+
+
+<!--**==========================================================================
+icons.svg.figure.zoom.out
+Output an #{svg} element for a figure zoom-out icon.
+:Revision: version="3.20" date="2016-02-11" status="final"
+
+This template outputs an SVG #{svg} element with the zoom-in icon for figures.
+Figures automatically scale images down. This icon scales them back down after
+they have been zoomed.
+
+SVG icons can use CSS class names to pick up colors from the !{colors} module.
+By default, this icon uses the #{yelp-svg-stroke} and #{yelp-svg-fill} class
+names.
+-->
+<xsl:template name="icons.svg.figure.zoom.out">
+  <svg:svg width="10" height="10" class="figure-zoom-out">
+    <svg:rect x="0.5" y="0.5" width="9" height="9"
+              class="yelp-svg-stroke" stroke-width="1" fill="none"/>
+    <svg:polygon points="0,0 10,0 10,10 5,10 5,5 10,5 0,5"
+                 class="yelp-svg-fill"/>
+  </svg:svg>
+</xsl:template>
+
 </xsl:stylesheet>
diff --git a/xslt/dita/html/dita2html-block.xsl b/xslt/dita/html/dita2html-block.xsl
index 894c70f..9f4a9c8 100644
--- a/xslt/dita/html/dita2html-block.xsl
+++ b/xslt/dita/html/dita2html-block.xsl
@@ -425,6 +425,8 @@ FIXME
               <xsl:with-param name="msgid" select="'Scale images down'"/>
             </xsl:call-template>
           </xsl:attribute>
+          <xsl:call-template name="icons.svg.figure.zoom.in"/>
+          <xsl:call-template name="icons.svg.figure.zoom.out"/>
         </a>
       </xsl:if>
       <xsl:apply-templates mode="dita2html.topic.mode" select="$conref/&topic_title_all;"/>
diff --git a/xslt/dita/html/dita2html.xsl b/xslt/dita/html/dita2html.xsl
index 21bc585..ede0436 100644
--- a/xslt/dita/html/dita2html.xsl
+++ b/xslt/dita/html/dita2html.xsl
@@ -16,7 +16,9 @@ along with this program; see the file COPYING.LGPL.  If not, see <http://www.gnu
 
 <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform";
                 xmlns:html="http://www.w3.org/1999/xhtml";
-                exclude-result-prefixes="html"
+                xmlns:mml="http://www.w3.org/1998/Math/MathML";
+                xmlns:svg="http://www.w3.org/2000/svg";
+                exclude-result-prefixes="html mml svg"
                 version="1.0">
 
 <!--!!==========================================================================
@@ -30,5 +32,7 @@ REMARK: Describe this module
 <xsl:param name="html.xhtml" select="false()"/>
 
 <xsl:namespace-alias stylesheet-prefix="html" result-prefix="#default"/>
+<xsl:namespace-alias stylesheet-prefix="mml" result-prefix="#default"/>
+<xsl:namespace-alias stylesheet-prefix="svg" result-prefix="#default"/>
 
 </xsl:stylesheet>
diff --git a/xslt/docbook/html/db2html-block.xsl b/xslt/docbook/html/db2html-block.xsl
index 0f46ec4..171065e 100644
--- a/xslt/docbook/html/db2html-block.xsl
+++ b/xslt/docbook/html/db2html-block.xsl
@@ -134,6 +134,8 @@ This template handles conditional processing.
               <xsl:with-param name="msgid" select="'Scale images down'"/>
             </xsl:call-template>
           </xsl:attribute>
+          <xsl:call-template name="icons.svg.figure.zoom.in"/>
+          <xsl:call-template name="icons.svg.figure.zoom.out"/>
         </a>
       </xsl:if>
       <xsl:if test="$title">
diff --git a/xslt/docbook/html/db2html.xsl b/xslt/docbook/html/db2html.xsl
index 96bd4c1..d95ef9b 100644
--- a/xslt/docbook/html/db2html.xsl
+++ b/xslt/docbook/html/db2html.xsl
@@ -17,7 +17,8 @@ along with this program; see the file COPYING.LGPL.  If not, see <http://www.gnu
 <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform";
                 xmlns:html="http://www.w3.org/1999/xhtml";
                 xmlns:mml="http://www.w3.org/1998/Math/MathML";
-                exclude-result-prefixes="html mml"
+                xmlns:svg="http://www.w3.org/2000/svg";
+                exclude-result-prefixes="html mml svg"
                 version="1.0">
 
 <!--!!==========================================================================
@@ -38,5 +39,6 @@ sets a namespace alias to output non-XML HTML. This stylesheet sets
 
 <xsl:namespace-alias stylesheet-prefix="html" result-prefix="#default"/>
 <xsl:namespace-alias stylesheet-prefix="mml" result-prefix="#default"/>
+<xsl:namespace-alias stylesheet-prefix="svg" result-prefix="#default"/>
 
 </xsl:stylesheet>
diff --git a/xslt/mallard/html/mal2html-block.xsl b/xslt/mallard/html/mal2html-block.xsl
index 989fff9..cffd714 100644
--- a/xslt/mallard/html/mal2html-block.xsl
+++ b/xslt/mallard/html/mal2html-block.xsl
@@ -545,6 +545,8 @@ in accordance with the Mallard specification on fallback block content.
             <xsl:with-param name="msgid" select="'Scale images down'"/>
           </xsl:call-template>
         </xsl:attribute>
+        <xsl:call-template name="icons.svg.figure.zoom.in"/>
+        <xsl:call-template name="icons.svg.figure.zoom.out"/>
       </a>
       <xsl:apply-templates mode="mal2html.block.mode" select="mal:title[1]"/>
       <div class="region">
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]