Add modal to tag count with direct links to other examples

examples/resources/layout.css

@@ -64,6 +64,35 @@ a:hover, a:focus, footer a:hover, footer a:focus {
   margin-top: 0;
 }
 
+.badge-group {
+  display: inline-block;
+}
+.badge-group > .badge:not(:last-child) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.badge-group > .badge:not(:first-child) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.tag-modal-toggle {
+  cursor: pointer;
+}
+.modal-tag-example .modal-body {
+  padding: 0;
+}
+.modal-tag-example .list-group-item:focus,
+.modal-tag-example .list-group-item:hover,
+.modal-tag-example .list-group-item:active {
+  background-color: rgba(31, 107, 117, .6875);
+  border-color: #1F6B75;
+  color: white;
+}
+.modal-tag-example .list-group-item.active {
+  background-color: #1F6B75;
+  color: white;
+}
+
 #docs {
   margin-top: 1em;
 }

examples/templates/example.html

@@ -113,9 +113,36 @@
           </h4>
           <p class="tags">
             {{#each tags}}
-              <a href="./index.html?q={{./tag}}" class="badge badge-info">{{ ./tag }} ({{ ./amount }})</a>
+            <span class="badge-group">
+              <a
+                href="./index.html?q={{ ./tag }}" class="badge badge-info">{{ ./tag }}</a
+              ><a
+                class="badge badge-info tag-modal-toggle text-white"
+                data-toggle="modal"
+                data-target="#tag-example-list"
+                data-title="{{ ./tag }}"
+                data-content="{{#each ./examples}}
+                  &lt;a class=&quot;list-group-item list-group-item-action{{#if ./isCurrent}} active{{/if}}&quot; href=&quot;./{{ ./link }}&quot;&gt;{{escape ./title}}&lt;/a&gt;{{/each}}"
+                tabindex="0"
+                >{{ ./examples.length }}</a>
+            </span>
             {{/each}}
           </p>
+          <div class="modal modal-tag-example" id="tag-example-list" tabindex="-1" role="dialog" aria-labelledby="tag-example-title" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-scrollable" role="document">
+              <div class="modal-content">
+                <div class="modal-header">
+                  <h5 class="modal-title" id="tag-example-title"></h5>
+                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                  </button>
+                </div>
+                <div class="modal-body">
+                  <div class="list-group"></div>
+                </div>
+              </div>
+            </div>
+          </div>
           {{{ contents }}}
         </div>
         <form method="POST" id="codepen-form" target="_blank" action="https://codesandbox.io/api/v1/sandboxes/define">
@@ -186,6 +213,16 @@
     <script src="./resources/common.js"></script>
     <script src="./resources/prism/prism.min.js"></script>
     {{{ js.tag }}}
+    <script>
+      $('#tag-example-list').on('show.bs.modal', function (event) {
+        const button = $(event.relatedTarget); // Button that triggered the modal
+        const title = button.data('title');
+        const content = button.data('content');
+        const modal = $(this)
+        modal.find('.modal-title').text(title);
+        modal.find('.modal-body').html(content);
+      });
+    </script>
   </body>
   <script>
   var packageUrl = 'https://raw.githubusercontent.com/openlayers/openlayers.github.io/build/package.json';

examples/webpack/example-builder.js

@@ -18,6 +18,13 @@ handlebars.registerHelper(
   (str) => new handlebars.SafeString(marked(str))
 );
 
+/**
+ * Used to doube-escape the title when stored as data-* attribute.
+ */
+handlebars.registerHelper('escape', (text) => {
+  return handlebars.Utils.escapeExpression(text);
+});
+
 handlebars.registerHelper('indent', (text, options) => {
   if (!text) {
     return text;
@@ -205,9 +212,17 @@ class ExampleBuilder {
       };
       exampleData.forEach((data) => {
         data.tags = data.tags.map((tag) => {
+          const tagExamples = tagIndex[tag.toLowerCase()];
           return {
             tag: tag,
-            amount: tagIndex[tag.toLowerCase()].length,
+            examples: tagExamples.map((exampleIdx) => {
+              const example = examples[exampleIdx];
+              return {
+                link: example.link,
+                title: example.title,
+                isCurrent: data.filename === example.link,
+              };
+            }),
           };
         });
       });