From 99629f7edb1f247ecf070fc7c4248185adcdcce9 Mon Sep 17 00:00:00 2001 From: Damien Vitrac Date: Fri, 14 Jun 2024 09:17:29 +0200 Subject: [PATCH] feat: Group versions Resolves #209 --- src/css/main.css | 53 +++++++++++++++++++++++++++++++ src/helpers/notEmpty.js | 3 ++ src/helpers/versionTree.js | 27 ++++++++++++++++ src/js/01-nav.js | 10 ++++++ src/partials/version-nav.hbs | 12 +++++++ src/partials/version.hbs | 61 ++++++++++++++++++++++++++---------- test/versionTree-test.js | 58 ++++++++++++++++++++++++++++++++++ 7 files changed, 208 insertions(+), 16 deletions(-) create mode 100644 src/helpers/notEmpty.js create mode 100644 src/helpers/versionTree.js create mode 100644 src/partials/version-nav.hbs create mode 100644 test/versionTree-test.js diff --git a/src/css/main.css b/src/css/main.css index bbbed92..4ca9407 100644 --- 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 new file mode 100644 index 0000000..69e83fb --- /dev/null +++ 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 new file mode 100644 index 0000000..3384a7d --- /dev/null +++ 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 index 4557106..0f75115 100644 --- 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-nav.hbs b/src/partials/version-nav.hbs new file mode 100644 index 0000000..e8b63d5 --- /dev/null +++ b/src/partials/version-nav.hbs @@ -0,0 +1,12 @@ + \ No newline at end of file diff --git a/src/partials/version.hbs b/src/partials/version.hbs index 0da5636..3a54416 100644 --- a/src/partials/version.hbs +++ b/src/partials/version.hbs @@ -7,23 +7,52 @@
+
    - {{#each site.components}} -
  • - {{{./title}}} - -
    • + {{#each (versionTree site.components)}} +
  • + + + + {{~#if (notEmpty ./versions.stable)}} +
    +
    + +
    + {{> version-nav ./versions.stable}} +
    + {{/if}} + + {{~#if (notEmpty ./versions.preview)}} +
    +
    + +
    + {{> version-nav ./versions.preview}} +
    + {{/if}} + + {{~#if (notEmpty ./versions.snapshot)}} +
    +
    + +
    + {{> version-nav ./versions.snapshot}} +
    + {{/if}} + +
    • {{/each}}
diff --git a/test/versionTree-test.js b/test/versionTree-test.js new file mode 100644 index 0000000..c4d4ba3 --- /dev/null +++ b/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) + }) +})