Deprecate mouseovers/hover links and dejquery the implementation

3 files changed, 55 insertions, 116 deletions

diff --git a/xslt/mallard/html/mal2html-links.xsl b/xslt/mallard/html/mal2html-links.xsl
index 60282099..1ec7cec1 100644
--- a/xslt/mallard/html/mal2html-links.xsl
+++ b/xslt/mallard/html/mal2html-links.xsl
@@ -153,7 +153,7 @@ parameter will be used if provided.
             </xsl:call-template>
           </xsl:when>
           <xsl:when test="$uithumbs = 'hover'">
-            <xsl:call-template name="mal2html.ui.links.hover">
+            <xsl:call-template name="_mal2html.ui.links.hover">
               <xsl:with-param name="node" select="$node"/>
               <xsl:with-param name="links" select="$links"/>
               <xsl:with-param name="role" select="$role"/>
@@ -872,14 +872,18 @@ when determining which links to output.
   <xsl:param name="node"/>
   <xsl:param name="links"/>
   <xsl:variable name="role" select="$node/self::mal:links/@role"/>
-  <div class="mouseovers">
+  <xsl:message>
+    <xsl:text>DEPRECATION WARNING: The mouseovers style on the links element is deprecated.</xsl:text>
+  </xsl:message>
+  <div class="links-uix-hover">
+  <div class="links-uix-hover-img">
     <xsl:for-each select="$node/e:mouseover[not(@match)]">
       <img>
         <xsl:copy-of select="@src | @width | @height"/>
       </img>
     </xsl:for-each>
   </div>
-  <ul class="mouseovers">
+  <ul class="links-uix-hover">
     <xsl:for-each select="$links">
       <xsl:sort data-type="number" select="@groupsort"/>
       <xsl:sort select="mal:title[@type = 'sort']"/>
@@ -904,9 +908,11 @@ when determining which links to output.
               </xsl:call-template>
             </xsl:attribute>
             <xsl:for-each select="$node/e:mouseover[@match = $xref]">
-              <img>
-                <xsl:copy-of select="@src | @width | @height"/>
-              </img>
+              <span class="links-uix-hover-img">
+                <img>
+                  <xsl:copy-of select="@src | @width | @height"/>
+                </img>
+              </span>
             </xsl:for-each>
             <xsl:call-template name="mal.link.content">
               <xsl:with-param name="node" select="."/>
@@ -920,7 +926,7 @@ when determining which links to output.
       </xsl:for-each>
     </xsl:for-each>
   </ul>
-  <div class="clear"/>
+  </div>
 </xsl:template>
 
 
diff --git a/xslt/mallard/html/mal2html-page.xsl b/xslt/mallard/html/mal2html-page.xsl
index 03dc10f4..dd04fbae 100644
--- a/xslt/mallard/html/mal2html-page.xsl
+++ b/xslt/mallard/html/mal2html-page.xsl
@@ -926,37 +926,45 @@ ul.links-heading > li { margin: 2em 0 2em 0; padding: 0; }
 div.links-heading > a { font-size: 1.72em; font-weight: bold; }
 ul.links-heading > li > div.desc { margin-top: 0.5em; }
 
-<!-- FIXME -->
-div.mouseovers {
-  width: 250px;
-  height: 200px;
-  text-align: center;
-  margin: 0;
-  float: </xsl:text><xsl:value-of select="$left"/><xsl:text>;
+div.links-uix-hover {
+  position: relative;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: stretch;
+  justify-content: flex-start;
 }
-ul.mouseovers li { margin: 0; }
-ul.mouseovers a {
-  display: inline-block;
-  padding: 4px 1.2em 4px 1.2em;
+ul.links-uix-hover { flex-grow: 1; }
+ul.links-uix-hover li { margin: 0; padding: 0; }
+ul.links-uix-hover a {
+  display: block;
+  padding: 8px 1.2em;
   border-bottom: none;
 }
-ul.mouseovers a:hover {
-  text-decoration: none;
+ul.links-uix-hover a:hover {
   background: </xsl:text><xsl:value-of select="$color.bg.blue"/><xsl:text>;
 }
-ul.mouseovers a img {
-  display: none;
+ul.links-uix-hover img {
+  display: block;
   position: absolute;
-  margin: 0; padding: 0;
+  top: 0; </xsl:text><xsl:value-of select="$left"/><xsl:text>: 0;
+  visibility: hidden;
+  opacity: 0.0;
+  transition: opacity 0.6s, visibility 0.6s;
+}
+ul.links-uix-hover a:hover img {
+  visibility: visible;
+  opacity: 1.0;
+  transition: opacity 0.2s, visibility 0.2s;
 }
 @media only screen and (max-width: 480px) {
-  ul.mouseovers a {
-    display: block;
-    padding: 12px;
-    margin-left: -12px;
-    margin-right: -12px;
+  div.links-uix-hover-img { display: none; }
+  ul.links-uix-hover img { display: none; }
+  ul.links-uix-hover li {
+    margin-left: -10px; margin-right: -10px;
+  }
+  ul.links-uix-hover li a {
+    padding: 10px;
   }
-  div.mouseovers { display: none; }
 }
 
 <!-- uix:overlay -->
@@ -1062,42 +1070,6 @@ div.links-tile > a > span.links-tile-text > span.desc {
   color: </xsl:text><xsl:value-of select="$color.fg.dark"/><xsl:text>;
 }
 
-<!-- FIXME -->
-div.links-ui-hover {
-  text-align: center;
-  margin: 0;
-  float: </xsl:text><xsl:value-of select="$left"/><xsl:text>;
-  margin-</xsl:text><xsl:value-of select="$right"/><xsl:text>: 1.2em;
-  overflow: hidden;
-}
-ul.links-ui-hover li { margin: 0; }
-ul.links-ui-hover a {
-  display: block;
-  padding: 4px 1.2em 4px 1.2em;
-  border-bottom: none;
-}
-ul.links-ui-hover a:hover {
-  text-decoration: none;
-  background: </xsl:text><xsl:value-of select="$color.bg.blue"/><xsl:text>;
-}
-span.links-ui-hover-img {
-  display: none;
-  position: absolute;
-  margin: 0; padding: 0;
-  overflow: hidden;
-  background: </xsl:text><xsl:value-of select="$color.bg.blue"/><xsl:text>;
-  text-align: center;
-}
-@media only screen and (max-width: 480px) {
-  ul.links-ui-hover a {
-    display: block;
-    padding: 12px;
-    margin-left: -12px;
-    margin-right: -12px;
-  }
-  div.links-ui-hover { display: none; }
-}
-
 <!-- links/@style = 'grid' -->
 div.links-grid-container {
   margin-left: -10px;
@@ -1422,50 +1394,6 @@ span.status-stub, span.status-draft, span.status-incomplete, span.status-outdate
   <xsl:call-template name="mal2html.gloss.js"/>
 <xsl:text><![CDATA[
 $(document).ready(function () {
-  $('div.mouseovers').each(function () {
-    var contdiv = $(this);
-    var width = 0;
-    var height = 0;
-    contdiv.find('img').each(function () {
-      if ($(this).attr('data-yelp-match') == '')
-        $(this).show();
-    });
-    contdiv.next('ul').find('a').each(function () {
-      var mlink = $(this);
-      mlink.hover(
-        function () {
-          if (contdiv.is(':visible')) {
-            var offset = contdiv.offset();
-            mlink.find('img').css({left: offset.left, top: offset.top, zIndex: 10});
-            mlink.find('img').fadeIn('fast');
-          }
-        },
-        function () {
-          mlink.find('img').fadeOut('fast');
-        }
-      );
-    });
-  });
-  $('div.links-ui-hover').each(function () {
-    var contdiv = $(this);
-    var width = 0;
-    var height = 0;
-    contdiv.next('ul').find('a').each(function () {
-      var mlink = $(this);
-      mlink.hover(
-        function () {
-          if (contdiv.is(':visible')) {
-            var offset = contdiv.offset();
-            mlink.find('img').parent('span').css({left: offset.left, top: offset.top, zIndex: 10});
-            mlink.find('img').parent('span').show();
-          }
-        },
-        function () {
-          mlink.find('img').parent('span').hide();
-        }
-      );
-    });
-  });
   $('a.ui-overlay').each(function () {
     $(this).click(function () {
       var overlay = $(this).parent('div').children('div.ui-overlay');
diff --git a/xslt/mallard/html/mal2html-ui.xsl b/xslt/mallard/html/mal2html-ui.xsl
index 23f00227..22603773 100644
--- a/xslt/mallard/html/mal2html-ui.xsl
+++ b/xslt/mallard/html/mal2html-ui.xsl
@@ -193,8 +193,8 @@ This template handles link sorting.
 </xsl:template>
 
 
-<!--**==========================================================================
-mal2html.ui.links.hover
+<!--DEPRECATED==================================================================
+_mal2html.ui.links.hover
 Output links with thumbnails shown on hover.
 :Revision:version="3.4" date="2012-02-26" status="final"
 $node: A #{links} element to link from.
@@ -211,7 +211,8 @@ are hovered.
 
 This template handles link sorting.
 -->
-<xsl:template name="mal2html.ui.links.hover">
+<!--#* _mal2html.ui.links.hover -->
+<xsl:template name="_mal2html.ui.links.hover">
   <xsl:param name="node"/>
   <xsl:param name="links"/>
   <xsl:param name="role"/>
@@ -235,7 +236,11 @@ This template handles link sorting.
       </xsl:otherwise>
     </xsl:choose>
   </xsl:variable>
-  <div class="links-ui-hover" style="width: {$width}px; height: {$height}px;">
+  <xsl:message>
+    <xsl:text>DEPRECATION WARNING: The uix:thumbs attribute on the links element is deprecated.</xsl:text>
+  </xsl:message>
+  <div class="links-uix-hover">
+  <div class="links-uix-hover-img" style="width: {$width}px; height: {$height}px;">
     <xsl:for-each select="$node/uix:thumb[1]">
       <img>
         <xsl:copy-of select="@src"/>
@@ -248,7 +253,7 @@ This template handles link sorting.
       </img>
     </xsl:for-each>
   </div>
-  <ul class="links-ui-hover">
+  <ul class="links-uix-hover">
     <xsl:for-each select="$links">
       <xsl:sort data-type="number" select="@groupsort"/>
       <xsl:sort select="mal:title[@type = 'sort']"/>
@@ -279,7 +284,7 @@ This template handles link sorting.
                 <xsl:with-param name="info" select="$link[@href]/mal:info"/>
               </xsl:call-template>
             </xsl:attribute>
-            <span class="links-ui-hover-img" style="width: {$width}px; height: {$height}px;">
+            <span class="links-uix-hover-img" style="width: {$width}px; height: {$height}px;">
               <xsl:call-template name="mal2html.ui.links.img">
                 <xsl:with-param name="node" select="$node"/>
                 <xsl:with-param name="thumbs" select="$thumbs"/>
@@ -302,7 +307,7 @@ This template handles link sorting.
       </xsl:for-each>
     </xsl:for-each>
   </ul>
-  <div class="clear"/>
+  </div>
 </xsl:template>