From 41d51d94c7ba752ba9da39537867a7325bf87298 Mon Sep 17 00:00:00 2001 From: Dan Allen Date: Thu, 31 Mar 2022 05:22:56 -0600 Subject: [PATCH 01/18] define nav variable in nav script so it's available to showNav even if menu panel is missing --- ui/src/js/01-nav.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/js/01-nav.js b/ui/src/js/01-nav.js index 61a2f8c3f..abee0301f 100644 --- a/ui/src/js/01-nav.js +++ b/ui/src/js/01-nav.js @@ -6,6 +6,7 @@ var navContainer = document.querySelector('.nav-container') if (!navContainer) return var navToggle = document.querySelector('.nav-toggle') + var nav = navContainer.querySelector('.nav') navToggle.addEventListener('click', showNav) navContainer.addEventListener('click', trapEvent) @@ -13,7 +14,6 @@ var menuPanel = navContainer.querySelector('[data-panel=menu]') if (!menuPanel) return var explorePanel = navContainer.querySelector('[data-panel=explore]') - var nav = navContainer.querySelector('.nav') var currentPageItem = menuPanel.querySelector('.is-current-page') var originalPageItem = currentPageItem From 8a05e6efcc5803c149716e662596a86e9a1d8d32 Mon Sep 17 00:00:00 2001 From: Dan Allen Date: Sat, 9 Jul 2022 00:32:29 -0600 Subject: [PATCH 02/18] only call highlightBlock on code element with data-lang attribute - prevents highlight.js from logging a warning about the unknown language "none" --- ui/src/js/vendor/highlight.bundle.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/js/vendor/highlight.bundle.js b/ui/src/js/vendor/highlight.bundle.js index af5891478..5cd0a41a5 100644 --- a/ui/src/js/vendor/highlight.bundle.js +++ b/ui/src/js/vendor/highlight.bundle.js @@ -43,6 +43,6 @@ hljs.registerLanguage('xml', xml) hljs.registerLanguage('yaml', yaml) hljs.registerLanguage('toml', ini) -for (const node of document.querySelectorAll('pre code.hljs')) { +for (const node of document.querySelectorAll('pre code.hljs[data-lang]')) { hljs.highlightElement(node) } From 7002d1ac67dc03318191eb9c9a7df135e72ae576 Mon Sep 17 00:00:00 2001 From: Dan Allen Date: Sun, 18 Sep 2022 14:39:02 -0600 Subject: [PATCH 03/18] clean up copy to clipboard script; pass UI root path as data attribute --- ui/src/js/06-copy-to-clipboard.js | 12 ++++++++---- ui/src/partials/footer-scripts.hbs | 2 +- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/ui/src/js/06-copy-to-clipboard.js b/ui/src/js/06-copy-to-clipboard.js index 03096f159..ecfd955d3 100644 --- a/ui/src/js/06-copy-to-clipboard.js +++ b/ui/src/js/06-copy-to-clipboard.js @@ -4,7 +4,11 @@ var CMD_RX = /^\$ (\S[^\\\n]*(\\\n(?!\$ )[^\\\n]*)*)(?=\n|$)/gm var LINE_CONTINUATION_RX = /( ) *\\\n *|\\\n( ?) */g var TRAILING_SPACE_RX = / +$/gm + var config = (document.getElementById('site-script') || { dataset: {} }).dataset + var uiRootPath = config.uiRootPath == null ? '.' : config.uiRootPath + var svgAs = config.svgAs + var supportsCopy = window.navigator.clipboard ;[].slice.call(document.querySelectorAll('.doc pre.highlight, .doc .literalblock pre')).forEach(function (pre) { var code, language, lang, copy, toast, toolbox @@ -28,19 +32,19 @@ } ;(toolbox = document.createElement('div')).className = 'source-toolbox' if (lang) toolbox.appendChild(lang) - if (window.navigator.clipboard) { + if (supportsCopy) { ;(copy = document.createElement('button')).className = 'copy-button' copy.setAttribute('title', 'Copy to clipboard') - if (config.svgAs === 'svg') { + if (svgAs === 'svg') { var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg') svg.setAttribute('class', 'copy-icon') var use = document.createElementNS('http://www.w3.org/2000/svg', 'use') - use.setAttribute('href', window.uiRootPath + '/img/octicons-16.svg#icon-clippy') + use.setAttribute('href', uiRootPath + '/img/octicons-16.svg#icon-clippy') svg.appendChild(use) copy.appendChild(svg) } else { var img = document.createElement('img') - img.src = window.uiRootPath + '/img/octicons-16.svg#view-clippy' + img.src = uiRootPath + '/img/octicons-16.svg#view-clippy' img.alt = 'copy icon' img.className = 'copy-icon' copy.appendChild(img) diff --git a/ui/src/partials/footer-scripts.hbs b/ui/src/partials/footer-scripts.hbs index 171536393..850887e89 100644 --- a/ui/src/partials/footer-scripts.hbs +++ b/ui/src/partials/footer-scripts.hbs @@ -1,4 +1,4 @@ - + --> {{/with}} - + {{!-- --}} From 1d7a6eebd5fe8d075a6ce37b6979cdddb0347159 Mon Sep 17 00:00:00 2001 From: Dan Allen Date: Tue, 22 Aug 2023 16:36:44 -0600 Subject: [PATCH 06/18] allow page-pagination to be set to next or prev to fine-tune which direction is shown --- ui/src/partials/pagination.hbs | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/ui/src/partials/pagination.hbs b/ui/src/partials/pagination.hbs index a8afacef4..84dc2c6e1 100644 --- a/ui/src/partials/pagination.hbs +++ b/ui/src/partials/pagination.hbs @@ -1,12 +1,16 @@ {{#unless (eq page.attributes.pagination undefined)}} {{#if (or page.previous page.next)}} {{/if}} {{/unless}} From 9696c97c9717159ea52b49cbf1b1903e4709bc70 Mon Sep 17 00:00:00 2001 From: Dan Allen Date: Tue, 10 Oct 2023 13:37:05 -0600 Subject: [PATCH 07/18] add fallbacks in scripts if HTML document does not have article.doc --- ui/src/js/02-on-this-page.js | 1 + ui/src/js/03-fragment-jumper.js | 1 + 2 files changed, 2 insertions(+) diff --git a/ui/src/js/02-on-this-page.js b/ui/src/js/02-on-this-page.js index 3271eacae..f3b27325f 100644 --- a/ui/src/js/02-on-this-page.js +++ b/ui/src/js/02-on-this-page.js @@ -9,6 +9,7 @@ var articleSelector = 'article.doc' var article = document.querySelector(articleSelector) + if (!article) return var headingsSelector = [] for (var level = 0; level <= levels; level++) { var headingSelector = [articleSelector] diff --git a/ui/src/js/03-fragment-jumper.js b/ui/src/js/03-fragment-jumper.js index 940857b0a..f1377eb3a 100644 --- a/ui/src/js/03-fragment-jumper.js +++ b/ui/src/js/03-fragment-jumper.js @@ -2,6 +2,7 @@ 'use strict' var article = document.querySelector('article.doc') + if (!article) return var toolbar = document.querySelector('.toolbar') var supportsScrollToOptions = 'scrollTo' in document.documentElement From 58dfc215f85d0ea82cf6c914c4c10a62b3b72c8b Mon Sep 17 00:00:00 2001 From: Dan Allen Date: Tue, 7 Nov 2023 14:49:13 -0700 Subject: [PATCH 08/18] add aria- attributes to mobile menu button --- ui/src/js/05-mobile-navbar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/js/05-mobile-navbar.js b/ui/src/js/05-mobile-navbar.js index cbcfb4caa..9274bd2b1 100644 --- a/ui/src/js/05-mobile-navbar.js +++ b/ui/src/js/05-mobile-navbar.js @@ -8,7 +8,7 @@ function toggleNavbarMenu (e) { e.stopPropagation() // trap event document.documentElement.classList.toggle('is-clipped--navbar') - this.classList.toggle('is-active') + navbarBurger.setAttribute('aria-expanded', this.classList.toggle('is-active')) var menu = document.getElementById(this.dataset.target) menu.classList.toggle('is-active') } From 7df2b01b8b9df4cf6d161753d6808f6f2830058e Mon Sep 17 00:00:00 2001 From: Dan Allen Date: Tue, 7 Nov 2023 15:05:03 -0700 Subject: [PATCH 09/18] replace data-target with aria-controls (but check for data-target as fallback) --- ui/src/js/05-mobile-navbar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/js/05-mobile-navbar.js b/ui/src/js/05-mobile-navbar.js index 9274bd2b1..4204ae34a 100644 --- a/ui/src/js/05-mobile-navbar.js +++ b/ui/src/js/05-mobile-navbar.js @@ -9,7 +9,7 @@ e.stopPropagation() // trap event document.documentElement.classList.toggle('is-clipped--navbar') navbarBurger.setAttribute('aria-expanded', this.classList.toggle('is-active')) - var menu = document.getElementById(this.dataset.target) + var menu = document.getElementById(this.getAttribute('aria-controls') || this.dataset.target) menu.classList.toggle('is-active') } })() From eefdc7bddc2128cc39f718d77544828dbcdba357 Mon Sep 17 00:00:00 2001 From: Dan Allen Date: Thu, 9 Nov 2023 02:31:03 -0700 Subject: [PATCH 10/18] resolves #72 add toggle expand/collapse all button to nav --- ui/src/css/nav.css | 23 +++++++++++++++++++++++ ui/src/img/octicons-16.svg | 2 +- ui/src/js/01-nav.js | 16 ++++++++++++++++ ui/src/partials/nav-menu.hbs | 3 +++ 4 files changed, 43 insertions(+), 1 deletion(-) diff --git a/ui/src/css/nav.css b/ui/src/css/nav.css index d13239484..18270bcd0 100644 --- a/ui/src/css/nav.css +++ b/ui/src/css/nav.css @@ -108,6 +108,29 @@ html.is-clipped--nav { color: var(--nav-font-color); } +.nav-menu-toggle { + background: transparent url(../img/octicons-16.svg#view-unfold) no-repeat center / 100% 100%; + border: none; + float: right; + height: 1em; + margin-right: -0.5rem; + opacity: 0.75; + outline: none; + padding: 0; + position: sticky; + top: calc((var(--nav-line-height) - 1 + 0.5) * 1rem); + visibility: hidden; + width: 1em; +} + +.nav-menu-toggle.is-active { + background-image: url(../img/octicons-16.svg#view-fold); +} + +.nav-panel-menu.is-active:hover .nav-menu-toggle { + visibility: visible; +} + .nav-menu h3.title { color: var(--nav-heading-font-color); font-size: inherit; diff --git a/ui/src/img/octicons-16.svg b/ui/src/img/octicons-16.svg index aba79fe78..8a219549f 100644 --- a/ui/src/img/octicons-16.svg +++ b/ui/src/img/octicons-16.svg @@ -1 +1 @@ -Octicons v11.2.0 by GitHub - https://primer.style/octicons/ - License: MIT +Octicons v11.2.0 by GitHub - https://primer.style/octicons/ - License: MIT diff --git a/ui/src/js/01-nav.js b/ui/src/js/01-nav.js index abee0301f..d851ecb97 100644 --- a/ui/src/js/01-nav.js +++ b/ui/src/js/01-nav.js @@ -7,6 +7,7 @@ if (!navContainer) return var navToggle = document.querySelector('.nav-toggle') var nav = navContainer.querySelector('.nav') + var navMenuToggle = navContainer.querySelector('.nav-menu-toggle') navToggle.addEventListener('click', showNav) navContainer.addEventListener('click', trapEvent) @@ -24,6 +25,21 @@ menuPanel.scrollTop = 0 } + if (navMenuToggle) { + navMenuToggle.addEventListener('click', function () { + var collapse = !this.classList.toggle('is-active') + find(menuPanel, '.nav-item > .nav-item-toggle').forEach(function (btn) { + collapse ? btn.parentElement.classList.remove('is-active') : btn.parentElement.classList.add('is-active') + }) + if (currentPageItem) { + if (collapse) activateCurrentPath(currentPageItem) + scrollItemToMidpoint(menuPanel, currentPageItem.querySelector('.nav-link')) + } else { + menuPanel.scrollTop = 0 + } + }) + } + find(menuPanel, '.nav-item-toggle').forEach(function (btn) { var li = btn.parentElement btn.addEventListener('click', toggleActive.bind(li)) diff --git a/ui/src/partials/nav-menu.hbs b/ui/src/partials/nav-menu.hbs index 29e92204d..7900ecae5 100644 --- a/ui/src/partials/nav-menu.hbs +++ b/ui/src/partials/nav-menu.hbs @@ -1,6 +1,9 @@ {{#with page.navigation}}