feat: Group versions

Resolves #209
spring-io · May 27, 2024 · 7d151cf · 7d151cf
1 parent 623eb3e
commit 7d151cf
Show file tree

Hide file tree

Showing 5 changed files with 170 additions and 16 deletions.
diff --git a/src/css/main.css b/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%;
 }

diff --git a/src/helpers/notEmpty.js b/src/helpers/notEmpty.js
@@ -0,0 +1,3 @@
+'use strict'
+
+module.exports = (a) => a !== null
diff --git a/src/helpers/versionTree.js b/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,
+  }
+}
diff --git a/src/js/01-nav.js b/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,

diff --git a/src/partials/version.hbs b/src/partials/version.hbs
@@ -7,23 +7,84 @@
               </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>
+                          <ul class="versions">
+                            {{#each ./versions.stable}}
+                            <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>
+                        </div>
+                        {{/if}}
+
+                        {{~#if (notEmpty ./versions.preview)}}
+                        <div class="version-item is-active">
+                          <div>
+                            <button class="version-toggle" type="button">
+                              <span></span>
+                              Preview
+                            </button>
+                          </div>
+                          <ul class="versions">
+                            {{#each ./versions.preview}}
+                            <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>
+                        </div>
+                        {{/if}}
+
+                        {{~#if (notEmpty ./versions.snapshot)}}
+                        <div class="version-item">
+                          <div>
+                            <button class="version-toggle" type="button">
+                              <span></span>
+                              Snapshot
+                            </button>
+                          </div>
+                          <ul class="versions">
+                            {{#each ./versions.snapshot}}
+                            <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>
+                        </div>
+                        {{/if}}
+
+                      </li>
                     {{/each}}
                   </ul>
                 </div>