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.

2 files changed, 29 insertions, 15 deletions

diff --git a/xslt/mallard/html/mal2html-page.xsl b/xslt/mallard/html/mal2html-page.xsl
index 0a053e10..d920d7b9 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 8e192819..5acba1b8 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>