Skip to content

Commit 5964238

Browse files
lfranckexeniapemojavelinuxferdnyc
authored
chore: Sync the vendored UI with upstream antora-ui-default, part 2: JS and a11y ports (#920)
Co-authored-by: Xenia <xenia.fischer@stackable.tech> Co-authored-by: Dan Allen <dan@opendevise.com> Co-authored-by: FeRD (Frank Dana) <ferdnyc@gmail.com>
1 parent cbf6118 commit 5964238

16 files changed

Lines changed: 82 additions & 24 deletions

‎ui/src/css/header.css‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@
33
* It also handles the mobile version of the menu.
44
*/
55

6-
html.is-clipped--navbar {
7-
overflow-y: hidden;
6+
@media screen and (max-width: 1200px) {
7+
html.is-clipped--navbar {
8+
overflow-y: hidden;
9+
}
810
}
911

1012
body {

‎ui/src/css/nav.css‎

Lines changed: 29 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,12 @@
88
* of the sidebar menu needs to be adjusted.
99
*/
1010

11+
@media screen and (max-width: 1023.5px) {
12+
html.is-clipped--nav {
13+
overflow-y: hidden;
14+
}
15+
}
16+
1117
.nav-container {
1218
position: fixed;
1319
top: var(--body-top);
@@ -71,10 +77,6 @@
7177
height: inherit;
7278
}
7379

74-
html.is-clipped--nav {
75-
overflow-y: hidden;
76-
}
77-
7880
.nav-panel-menu {
7981
overflow-y: scroll;
8082
overscroll-behavior: none;
@@ -108,6 +110,29 @@ html.is-clipped--nav {
108110
color: var(--nav-font-color);
109111
}
110112

113+
.nav-menu-toggle {
114+
background: transparent url(../img/octicons-16.svg#view-unfold) no-repeat center / 100% 100%;
115+
border: none;
116+
float: right;
117+
height: 1em;
118+
margin-right: -0.5rem;
119+
opacity: 0.75;
120+
outline: none;
121+
padding: 0;
122+
position: sticky;
123+
top: calc((var(--nav-line-height) - 1 + 0.5) * 1rem);
124+
visibility: hidden;
125+
width: 1em;
126+
}
127+
128+
.nav-menu-toggle.is-active {
129+
background-image: url(../img/octicons-16.svg#view-fold);
130+
}
131+
132+
.nav-panel-menu.is-active:hover .nav-menu-toggle {
133+
visibility: visible;
134+
}
135+
111136
.nav-menu h3.title {
112137
color: var(--nav-heading-font-color);
113138
font-size: inherit;

‎ui/src/img/octicons-16.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎ui/src/js/01-nav.js‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,17 @@
44
var SECT_CLASS_RX = /^sect(\d)$/
55

66
var navContainer = document.querySelector('.nav-container')
7-
if (!navContainer) return
87
var navToggle = document.querySelector('.nav-toggle')
8+
if (!navContainer && (!navToggle || (navToggle.hidden = true))) return
9+
var nav = navContainer.querySelector('.nav')
10+
var navMenuToggle = navContainer.querySelector('.nav-menu-toggle')
911

1012
navToggle.addEventListener('click', showNav)
1113
navContainer.addEventListener('click', trapEvent)
1214

1315
var menuPanel = navContainer.querySelector('[data-panel=menu]')
1416
if (!menuPanel) return
1517
var explorePanel = navContainer.querySelector('[data-panel=explore]')
16-
var nav = navContainer.querySelector('.nav')
1718

1819
var currentPageItem = menuPanel.querySelector('.is-current-page')
1920
var originalPageItem = currentPageItem
@@ -34,6 +35,22 @@
3435
}
3536
})
3637

38+
if (navMenuToggle && menuPanel.querySelector('.nav-item-toggle')) {
39+
navMenuToggle.style.display = ''
40+
navMenuToggle.addEventListener('click', function () {
41+
var collapse = !this.classList.toggle('is-active')
42+
find(menuPanel, '.nav-item > .nav-item-toggle').forEach(function (btn) {
43+
collapse ? btn.parentElement.classList.remove('is-active') : btn.parentElement.classList.add('is-active')
44+
})
45+
if (currentPageItem) {
46+
if (collapse) activateCurrentPath(currentPageItem)
47+
scrollItemToMidpoint(menuPanel, currentPageItem.querySelector('.nav-link'))
48+
} else {
49+
menuPanel.scrollTop = 0
50+
}
51+
})
52+
}
53+
3754
if (explorePanel) {
3855
explorePanel.querySelector('.context').addEventListener('click', function () {
3956
// NOTE logic assumes there are only two panels

‎ui/src/js/02-on-this-page.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99

1010
var articleSelector = 'article.doc'
1111
var article = document.querySelector(articleSelector)
12+
if (!article) return
1213
var headingsSelector = []
1314
for (var level = 0; level <= levels; level++) {
1415
var headingSelector = [articleSelector]

‎ui/src/js/03-fragment-jumper.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
'use strict'
33

44
var article = document.querySelector('article.doc')
5+
if (!article) return
56
var toolbar = document.querySelector('.toolbar')
67
var supportsScrollToOptions = 'scrollTo' in document.documentElement
78

@@ -19,7 +20,7 @@
1920
window.location.hash = '#' + this.id
2021
e.preventDefault()
2122
}
22-
var y = computePosition(this, 0) - toolbar.getBoundingClientRect().bottom
23+
var y = computePosition(this, 0) - (toolbar ? toolbar.getBoundingClientRect().bottom : 0)
2324
var instant = e === false && supportsScrollToOptions
2425
instant ? window.scrollTo({ left: 0, top: y, behavior: 'instant' }) : window.scrollTo(0, y)
2526
}

‎ui/src/js/05-mobile-navbar.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88
function toggleNavbarMenu (e) {
99
e.stopPropagation() // trap event
1010
document.documentElement.classList.toggle('is-clipped--navbar')
11-
this.classList.toggle('is-active')
12-
var menu = document.getElementById(this.dataset.target)
11+
navbarBurger.setAttribute('aria-expanded', this.classList.toggle('is-active'))
12+
var menu = document.getElementById(this.getAttribute('aria-controls') || this.dataset.target)
1313
menu.classList.toggle('is-active')
1414
}
1515
})()

‎ui/src/js/06-copy-to-clipboard.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,11 @@
44
var CMD_RX = /^\$ (\S[^\\\n]*(\\\n(?!\$ )[^\\\n]*)*)(?=\n|$)/gm
55
var LINE_CONTINUATION_RX = /( ) *\\\n *|\\\n( ?) */g
66
var TRAILING_SPACE_RX = / +$/gm
7+
78
var config = (document.getElementById('site-script') || { dataset: {} }).dataset
9+
var supportsCopy = window.navigator.clipboard
10+
var svgAs = config.svgAs
11+
var uiRootPath = (config.uiRootPath == null ? window.uiRootPath : config.uiRootPath) || '.'
812

913
;[].slice.call(document.querySelectorAll('.doc pre.highlight, .doc .literalblock pre')).forEach(function (pre) {
1014
var code, language, lang, copy, toast, toolbox
@@ -28,19 +32,19 @@
2832
}
2933
;(toolbox = document.createElement('div')).className = 'source-toolbox'
3034
if (lang) toolbox.appendChild(lang)
31-
if (window.navigator.clipboard) {
35+
if (supportsCopy) {
3236
;(copy = document.createElement('button')).className = 'copy-button'
3337
copy.setAttribute('title', 'Copy to clipboard')
34-
if (config.svgAs === 'svg') {
38+
if (svgAs === 'svg') {
3539
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
3640
svg.setAttribute('class', 'copy-icon')
3741
var use = document.createElementNS('http://www.w3.org/2000/svg', 'use')
38-
use.setAttribute('href', window.uiRootPath + '/img/octicons-16.svg#icon-clippy')
42+
use.setAttribute('href', uiRootPath + '/img/octicons-16.svg#icon-clippy')
3943
svg.appendChild(use)
4044
copy.appendChild(svg)
4145
} else {
4246
var img = document.createElement('img')
43-
img.src = window.uiRootPath + '/img/octicons-16.svg#view-clippy'
47+
img.src = uiRootPath + '/img/octicons-16.svg#view-clippy'
4448
img.alt = 'copy icon'
4549
img.className = 'copy-icon'
4650
copy.appendChild(img)

‎ui/src/js/vendor/highlight.bundle.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,6 @@ hljs.registerLanguage('xml', xml)
4343
hljs.registerLanguage('yaml', yaml)
4444
hljs.registerLanguage('toml', ini)
4545

46-
for (const node of document.querySelectorAll('pre code.hljs')) {
46+
for (const node of document.querySelectorAll('pre code.hljs[data-lang]')) {
4747
hljs.highlightElement(node)
4848
}

‎ui/src/partials/edit-this-page.hbs‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{{#if (and page.fileUri (not env.CI))}}
2+
<div class="edit-this-page"><a href="{{page.fileUri}}">Edit this Page</a></div>
3+
{{else if (and page.editUrl (or env.FORCE_SHOW_EDIT_PAGE_LINK (not page.origin.private)))}}
4+
<div class="edit-this-page"><a href="{{page.editUrl}}">Edit this Page</a></div>
5+
{{/if}}

0 commit comments

Comments
 (0)