feat: Group versions

Resolves #209

src/css/main.css

@@ -195,6 +195,10 @@ html.dark-theme #modal-versions .colset .col-right {
   color: var(--link-font-color);
 }
 
+#modal-versions ul li.component {
+  padding-bottom: 1rem;
+}
+
 #modal-versions ul li.component > a.title {
   color: var(--body-font-dark-color);
 }
@@ -211,6 +215,55 @@ html.dark-theme #modal-versions .colset .col-right {
   list-style: circle;
 }
 
+#modal-versions .nav-versions .version-item .versions {
+  display: none;
+  padding: 0;
+  margin: 0;
+  margin-left: 45px;
+}
+
+#modal-versions .nav-versions .version-item.is-active .versions {
+  display: block;
+}
+
+#modal-versions .nav-versions a.title {
+  color: var(--body-font-dark-color);
+  padding-bottom: 10px;
+}
+
+#modal-versions .version-toggle {
+  position: relative;
+  border: none;
+  margin: 8px 0;
+  padding: 0;
+  padding-left: 30px;
+  width: auto;
+  overflow: visible;
+  background: transparent;
+  color: var(--body-font-dark-color);
+}
+
+#modal-versions .version-toggle span {
+  background: transparent url(../img/chevron.svg) no-repeat center / 50%;
+  border: none;
+  outline: none;
+  line-height: inherit;
+  position: absolute;
+  height: 30px;
+  width: 30px;
+  left: 0;
+  top: -4px;
+  transform: rotate(-90deg);
+}
+
+html.dark-theme #modal-versions .version-toggle span {
+  background: transparent url(../img/chevron-white.svg) no-repeat center / 50%;
+}
+
+#modal-versions .is-active .version-toggle span {
+  transform: rotate(0);
+}
+
 #modal-versions ul.projects {
   width: 100%;
 }

src/helpers/notEmpty.js

@@ -0,0 +1,3 @@
+'use strict'
+
+module.exports = (a) => a !== null

src/helpers/versionTree.js

@@ -0,0 +1,27 @@
+'use strict'
+
+module.exports = (components) => versionTree(components)
+
+function versionTree (components) {
+  return components.map((comp) => {
+    return {
+      ...comp,
+      versions: splitVersions(comp.versions),
+    }
+  })
+}
+
+function splitVersions (versions) {
+  const snapshot = versions.filter((v) => v.version.includes('SNAPSHOT'))
+  const stable = versions.filter((v) => {
+    const split = v.version.split('-')
+    if (split.length === 1) return true
+    return false
+  })
+  const preview = versions.filter((v) => !snapshot.includes(v) && !stable.includes(v))
+  return {
+    snapshot: snapshot.length > 0 ? snapshot : null,
+    stable: stable.length > 0 ? stable : null,
+    preview: preview.length > 0 ? preview : null,
+  }
+}

src/js/01-nav.js

@@ -50,6 +50,16 @@
     }
   })
 
+  var versionsToggle = document.querySelectorAll('.version-toggle')
+  if (versionsToggle) {
+    versionsToggle.forEach(function (el) {
+      var container = el.parentElement.parentElement
+      el.addEventListener('click', function () {
+        container.classList.toggle('is-active')
+      })
+    })
+  }
+
   document.querySelector('#browse-version').addEventListener('click', function () {
     MicroModal.show('modal-versions', {
       disableScroll: true,

src/partials/version-nav.hbs

@@ -0,0 +1,12 @@
+<ul class="versions">
+  {{#each this}}
+  <li class="version
+    {{~#if (and (eq .. @root.page.component) (eq this @root.page.componentVersion))}} is-current{{/if~}}
+    {{~#if (eq this ../latest)}} is-latest{{/if}}">
+    <a href="{{{relativize ./url}}}">
+      {{./displayVersion}}
+      {{~#if (eq this ../latest)}}<span class="current">current</span>{{/if}}
+    </a>
+  </li>
+  {{/each}}
+</ul>

src/partials/version.hbs

@@ -7,23 +7,52 @@
               </button>
               <div class="colset">
                 <div class="col-left">
+
                   <ul class="nav-versions">
-                    {{#each site.components}}
-                    <li class="component{{#if (eq this @root.page.component)}} is-current{{/if}}">
-                      <a class="title" href="{{{relativize ./url}}}">{{{./title}}}</a>
-                      <ul class="versions">
-                        {{#each ./versions}}
-                        <li class="version
-                          {{~#if (and (eq .. @root.page.component) (eq this @root.page.componentVersion))}} is-current{{/if~}}
-                          {{~#if (eq this ../latest)}} is-latest{{/if}}">
-                          <a href="{{{relativize ./url}}}">
-                            {{./displayVersion}}
-                            {{~#if (eq this ../latest)}}<span class="current">current</span>{{/if}}
-                          </a>
-                        </li>
-                        {{/each}}
-                      </ul>
-                    </li>
+                    {{#each (versionTree site.components)}}
+                      <li class="component">
+                        <div>
+                          <a class="title" href="{{{relativize ./url}}}">{{{./title}}}</a>
+                        </div>
+
+
+                        {{~#if (notEmpty ./versions.stable)}}
+                        <div class="version-item is-active">
+                          <div>
+                            <button class="version-toggle" type="button">
+                              <span></span>
+                              Stable
+                            </button>
+                          </div>
+                          {{> version-nav ./versions.stable}}
+                        </div>
+                        {{/if}}
+
+                        {{~#if (notEmpty ./versions.preview)}}
+                        <div class="version-item">
+                          <div>
+                            <button class="version-toggle" type="button">
+                              <span></span>
+                              Preview
+                            </button>
+                          </div>
+                          {{> version-nav ./versions.preview}}
+                        </div>
+                        {{/if}}
+
+                        {{~#if (notEmpty ./versions.snapshot)}}
+                        <div class="version-item">
+                          <div>
+                            <button class="version-toggle" type="button">
+                              <span></span>
+                              Snapshot
+                            </button>
+                          </div>
+                          {{> version-nav ./versions.snapshot}}
+                        </div>
+                        {{/if}}
+
+                      </li>
                     {{/each}}
                   </ul>
                 </div>

test/versionTree-test.js

@@ -0,0 +1,58 @@
+/* eslint-env mocha */
+'use strict'
+
+const { expect } = require('./harness')
+const versionTree = require('../src/helpers/versionTree.js')
+
+describe('versionTree', () => {
+  it('should return stable, preview and snapshot  versions', () => {
+    const result = versionTree([
+      {
+        versions: [
+          {
+            version: '3.0.1-SNAPSHOT',
+          },
+          {
+            version: '3.0.0-SNAPSHOT',
+          },
+          {
+            version: '2.0.0',
+          },
+          {
+            version: '1.0.0',
+          },
+          {
+            version: '1.0.0-RC1',
+          },
+          {
+            version: '1.0.0-RC2',
+          },
+        ],
+      },
+    ])
+
+    expect(result[0].versions.stable.length).is.eql(2)
+    expect(result[0].versions.stable[0].version).is.eql('2.0.0')
+    expect(result[0].versions.stable[1].version).is.eql('1.0.0')
+
+    expect(result[0].versions.preview.length).is.eql(2)
+    expect(result[0].versions.preview[0].version).is.eql('1.0.0-RC1')
+    expect(result[0].versions.preview[1].version).is.eql('1.0.0-RC2')
+
+    expect(result[0].versions.snapshot.length).is.eql(2)
+    expect(result[0].versions.snapshot[0].version).is.eql('3.0.1-SNAPSHOT')
+    expect(result[0].versions.snapshot[1].version).is.eql('3.0.0-SNAPSHOT')
+  })
+
+  it('should return an empty structure', () => {
+    const result = versionTree([
+      {
+        versions: [
+        ],
+      },
+    ])
+    expect(result[0].versions.stable).is.eql(null)
+    expect(result[0].versions.preview).is.eql(null)
+    expect(result[0].versions.snapshot).is.eql(null)
+  })
+})