[yelp-xsl] Group UI overlays with JS instead of XSLT

[Shaun McCance <shaunm src gnome org>]

commit ca3e1b17bebee8cc2af86607bbc234f4958b75f6
Author: Shaun McCance <shaunm redhat com>
Date:   Thu Oct 5 19:35:20 2017 -0400

    Group UI overlays with JS instead of XSLT
    
    UI overlays don't have a grouping element, but we want to group them
    in the HTML so we can use flexbox for row wrap. We were doing the
    grouping in XSLT, but this only worked if overlays were exactly next
    to each other in document order. If you put them in conditionals,
    you lost grouping. Instead, just output them as-is, then use JS to
    group them after the fact.

 xslt/mallard/html/mal2html-page.xsl |   30 +++++++++++++++++++++++++++++-
 xslt/mallard/html/mal2html-ui.xsl   |   14 --------------
 2 files changed, 29 insertions(+), 15 deletions(-)
---
diff --git a/xslt/mallard/html/mal2html-page.xsl b/xslt/mallard/html/mal2html-page.xsl
index 0a053e1..d920d7b 100644
--- a/xslt/mallard/html/mal2html-page.xsl
+++ b/xslt/mallard/html/mal2html-page.xsl
@@ -1041,11 +1041,13 @@ div.links-tiles {
   margin: 0 -10px;
 }
 div.links-tile {
+  max-width: 300px;
   flex: 1 0 300px;
   vertical-align: top;
   margin: 0;
   padding: 10px;
 }
+div.links-tiles > div.links-tile { max-width: none; }
 div.links-tile:empty { padding: 0 10px; height: 0; }
 div.links-tile > a {
   display: block;
@@ -1061,7 +1063,6 @@ div.links-tile > a:hover {
 div.links-tile > a > span.links-tile-img {
   display: block;
   text-align: center;
-  max-width: 360px;
 }
 div.links-tile > a > span.links-tile-img > img {
   width: 100%;
@@ -1384,6 +1385,33 @@ span.status-stub, span.status-draft, span.status-incomplete, span.status-outdate
 <xsl:template mode="html.js.mode" match="mal:page">
 <xsl:text><![CDATA[
 document.addEventListener('DOMContentLoaded', function() {
+  var tiles = document.querySelectorAll('div.links-tile');
+  for (var i = 0; i < tiles.length; i++) {
+    (function (tile) {
+      if (!tile.parentNode.classList.contains('links-tiles') &&
+          (tile.nextElementSibling &&
+           tile.nextElementSibling.classList.contains('links-tile')) &&
+          !(tile.previousElementSibling &&
+            tile.previousElementSibling.classList.contains('links-tile'))) {
+        var tilesdiv = document.createElement('div');
+        tilesdiv.className = 'links-tiles';
+        tile.parentNode.insertBefore(tilesdiv, tile);
+        var cur = tile;
+        while (cur && cur.classList.contains('links-tile')) {
+          var curcur = cur;
+          cur = cur.nextElementSibling;
+          tilesdiv.appendChild(curcur);
+        }
+        for (j = 0; j < 2; j++) {
+          var paddiv = document.createElement('div');
+          paddiv.className = 'links-tile';
+          tilesdiv.appendChild(paddiv);
+        }
+      }
+    })(tiles[i]);
+  }
+});
+document.addEventListener('DOMContentLoaded', function() {
   var overlays = document.querySelectorAll('a.ui-overlay');
   for (var i = 0; i < overlays.length; i++) {
     (function (ovlink) {
diff --git a/xslt/mallard/html/mal2html-ui.xsl b/xslt/mallard/html/mal2html-ui.xsl
index 8e19281..5acba1b 100644
--- a/xslt/mallard/html/mal2html-ui.xsl
+++ b/xslt/mallard/html/mal2html-ui.xsl
@@ -498,14 +498,6 @@ ${node} element.
 
 <!-- = ui:overlay = -->
 <xsl:template mode="mal2html.block.mode" match="uix:overlay">
-  <!-- only process first, and handle consecutive overlays so we
-       can put them in a wrapper div for flexbox -->
-  <xsl:if test="not(preceding-sibling::*[1][self::uix:overlay])">
-    <div class="links-tiles">
-      <xsl:variable name="count" select="count(following-sibling::*[not(self::uix:overlay)])"/>
-      <xsl:for-each select="self::* |
-                            following-sibling::uix:overlay
-                            [count(following-sibling::*[not(self::uix:overlay)]) = $count]">
         <xsl:variable name="media" select="mal:media[1]"/>
         <xsl:variable name="width">
           <xsl:choose>
@@ -595,12 +587,6 @@ ${node} element.
             </div>
           </div>
         </div>
-      </xsl:for-each>
-      <!-- blank tiles for homogeneous sizing -->
-      <div class="links-tile"></div>
-      <div class="links-tile"></div>
-    </div>
-  </xsl:if>
 </xsl:template>
 
 </xsl:stylesheet>