Skip to content

Commit 6c0bf1c

Browse files
mojavelinuxmojavelinux
committed
continue assembling nav
1 parent bbf6d00 commit 6c0bf1c

File tree

6 files changed

+150
-202
lines changed

6 files changed

+150
-202
lines changed

‎src/helpers/nav-group-for-page.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
'use strict'
2+
3+
module.exports = (navGroups, { data: { root: { page, site } } }) => {
4+
const pageComponentName = page.component.name
5+
return navGroups.find(({ components }) => components.includes(pageComponentName))
6+
}

‎src/helpers/nav-group.js‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

src/helpers/compile-nav-groups.js renamed to src/helpers/nav-groups.js

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
'use strict'
22

3-
const { inspect } = require('util')
43
const yaml = require('js-yaml')
54

65
module.exports = ({ data: { root: { contentCatalog, site } } }) => {
@@ -22,11 +21,15 @@ module.exports = ({ data: { root: { contentCatalog, site } } }) => {
2221
if (!componentsInGroup.length) return accum
2322
let startPage = navGroup.startPage
2423
if (startPage) {
25-
startPage = contentCatalog ? contentCatalog.resolvePage(startPage) : { url: '/index.html' }
26-
if (startPage) navGroup.url = startPage.url
24+
startPage = contentCatalog && contentCatalog.resolvePage(startPage)
25+
if (startPage) navGroup.url = startPage.pub.url
2726
delete navGroup.startPage
2827
}
2928
navGroup.components = componentsInGroup
29+
navGroup.latestVersions = componentsInGroup.reduce((latestVersionMap, it) => {
30+
latestVersionMap[it] = components[it].latest.version
31+
return latestVersionMap
32+
}, {})
3033
return accum.concat(navGroup)
3134
}, [])
3235
navGroups._compiled = true

‎src/js/01-nav.js‎

Lines changed: 129 additions & 175 deletions
Original file line numberDiff line numberDiff line change
@@ -1,197 +1,100 @@
11
;(function () {
22
'use strict'
33

4-
var nav = document.querySelector('.nav-container-wrap')
5-
var navPanels = nav.querySelector('.panels')
6-
var pageUrl = document.head.querySelector('meta[name=page-url]').getAttribute('content')
4+
var pageNavigationGroup = window.pageNavigationGroup
5+
if (!pageNavigationGroup) return
76

87
var siteNavigationData = window.siteNavigationData.reduce(function (accum, entry) {
98
return (accum[entry.name] = entry) && accum
109
}, {})
11-
window.siteNavigationGroups.forEach(function (group) {
12-
var groupName = document.createElement('div')
13-
groupName.className = 'group-name'
14-
groupName.appendChild(document.createTextNode(group.title))
15-
navPanels.appendChild(groupName)
16-
group.components.forEach(function (componentName) {
17-
var componentNavData = siteNavigationData[componentName]
18-
var navTrees = document.createElement('div')
19-
navTrees.className = 'nav-trees'
20-
var versionBox = document.createElement('div')
21-
versionBox.className = 'version-box'
22-
var selectVersion = document.createElement('select')
23-
selectVersion.className = 'select-version'
24-
componentNavData.versions.forEach(function(version) {
25-
var versionOption = document.createElement('option')
26-
versionOption.value = version.version
27-
versionOption.appendChild(document.createTextNode(version.displayVersion || version.version))
28-
selectVersion.appendChild(versionOption)
29-
})
30-
versionBox.appendChild(selectVersion)
31-
navTrees.appendChild(versionBox)
32-
componentNavData.versions.forEach(function(version) {
33-
var navTree = document.createElement('div')
34-
var navItem = document.createElement('div')
35-
navItem.className = 'nav-item is-link nav-top'
36-
var navTitle = document.createElement('a')
37-
// FIXME: this should be component version url
38-
navTitle.href = relativize(pageUrl, '/' + componentNavData.name + '/current/index.html')
39-
navTitle.appendChild(document.createTextNode(componentNavData.title))
40-
navItem.appendChild(navTitle)
41-
navTree.appendChild(navItem)
42-
navTrees.appendChild(navTree)
43-
})
44-
navPanels.appendChild(navTrees)
45-
})
46-
})
4710

48-
return
49-
var menuExpandToggle = document.querySelector('.menu-expand-toggle')
50-
var versionToggle = document.querySelector('.clickable')
51-
var versionDropdownList = document.querySelector('.frame-dropdown')
52-
var navMenu = {}
53-
if (!(navMenu.element = nav && nav.querySelector('.nav-menu'))) return
54-
var navControl
55-
// var currentPageItem = navMenu.element.querySelector('.is-current-page')
11+
var navContainer = document.querySelector('.nav-container')
12+
buildNav(navContainer, getPage(), pageNavigationGroup, siteNavigationData)
13+
activateNav(navContainer)
5614

57-
// NOTE prevent text from being selected by double click
58-
navMenu.element.addEventListener('mousedown', function (e) {
59-
if (e.detail > 1) e.preventDefault()
60-
})
61-
62-
find(/*'.nav-toggle',*/ '.in-toggle', navMenu.element).forEach(function (toggleBtn) {
63-
// console.log(toggleBtn, 17)
64-
var navItem = findAncestorWithClass('nav-item', toggleBtn, navMenu.element)
65-
toggleBtn.addEventListener('click', toggleActive.bind(navItem))
66-
// var dataDepth = toggleBtn.getAttribute('data-depth')
67-
// if (dataDepth === 1) {
68-
// toggleBtn.classList.add("mystyle")
69-
// }
70-
// toggleBtn.addEventListener('click', addActive.bind(navItem))
71-
72-
var navItemSpan = findNextElement(toggleBtn)
73-
if (navItemSpan.classList.contains('nav-text')) {
74-
navItemSpan.style.cursor = 'pointer'
75-
navItemSpan.addEventListener('click', toggleActive.bind(navItem))
76-
// navItemSpan.addEventListener('click', addActive.bind(navItem))
15+
function getPage () {
16+
var head = document.head
17+
return {
18+
component: head.querySelector('meta[name="dcterms.subject"]').getAttribute('content'),
19+
version: head.querySelector('meta[name="dcterms.identifier"]').getAttribute('content'),
20+
url: head.querySelector('meta[name=page-url]').getAttribute('content'),
7721
}
78-
})
79-
80-
if ((navControl = document.querySelector('main .nav-control'))) navControl.addEventListener('click', revealNav)
81-
82-
// Toggle class
83-
function toggleActive (e) {
84-
this.classList.toggle('open')
85-
this.classList.toggle('is-active')
8622
}
8723

88-
function revealNav (e) {
89-
if (nav.classList.contains('is-active')) return hideNav(e)
90-
document.documentElement.classList.add('is-clipped--nav')
91-
nav.classList.add('is-active')
92-
nav.addEventListener('click', concealEvent)
93-
window.addEventListener('click', hideNav)
94-
concealEvent(e) // NOTE don't let event get picked up by window click listener
95-
}
96-
97-
function hideNav (e) {
98-
if (e.which === 3 || e.button === 2) return
99-
document.documentElement.classList.remove('is-clipped--nav')
100-
nav.classList.remove('is-active')
101-
nav.removeEventListener('click', concealEvent)
102-
window.removeEventListener('click', hideNav)
103-
concealEvent(e) // NOTE don't let event get picked up by window click listener
104-
}
105-
106-
function find (selector, from) {
107-
return [].slice.call((from || document).querySelectorAll(selector))
108-
}
109-
110-
function findAncestorWithClass (className, from, scope) {
111-
if ((from = from.parentNode) !== scope) {
112-
if (from.classList.contains(className)) {
113-
return from
114-
} else {
115-
return findAncestorWithClass(className, from, scope)
116-
}
117-
}
118-
}
119-
120-
function findNextElement (from, el) {
121-
if ((el = from.nextElementSibling)) return el
122-
el = from
123-
while ((el = el.nextSibling) && el.nodeType !== 1);
124-
return el
24+
function buildNav (container, page, group, navData) {
25+
var groupEl = createElement('div', 'components')
26+
var groupNameEl = createElement('div', 'components-name')
27+
groupNameEl.appendChild(document.createTextNode(group.title))
28+
groupEl.appendChild(groupNameEl)
29+
var componentsListEl = createElement('ul', 'components_list')
30+
group.components.forEach(function (componentName) {
31+
var componentNavData = navData[componentName]
32+
var componentsListItemsEl = createElement('li', 'components_list-items')
33+
var componentVersionsEl = createElement('div', 'component_list-version')
34+
// FIXME we would prefer if the navigation data identified the latest version itself
35+
var selectedVersion = componentName === page.component ? page.version : group.latestVersions[componentName]
36+
var componentTitleEl = createElement('span', 'component_list_title')
37+
componentTitleEl.appendChild(document.createTextNode(componentNavData.title))
38+
componentVersionsEl.appendChild(componentTitleEl)
39+
var componentVersionsSelectEl = createElement('select', 'version_list')
40+
componentNavData.versions.forEach(function (componentVersion) {
41+
var optionEl = createElement('option')
42+
optionEl.value = componentVersion.version
43+
if (componentVersion.version === selectedVersion) optionEl.setAttribute('selected', '')
44+
optionEl.appendChild(document.createTextNode(componentVersion.displayVersion || componentVersion.version))
45+
componentVersionsSelectEl.appendChild(optionEl)
46+
})
47+
componentVersionsEl.appendChild(componentVersionsSelectEl)
48+
componentsListItemsEl.appendChild(componentVersionsEl)
49+
componentNavData.versions.forEach(function (componentVersion) {
50+
var componentVersionNavEl = createElement('div', 'version_items')
51+
// TODO only open if no page is found
52+
if (page.component !== componentName || page.version !== componentVersion.version) {
53+
componentVersionNavEl.classList.add('hide')
54+
}
55+
componentVersionNavEl.dataset.version = componentVersion.version
56+
buildNavTree(componentVersion.sets, componentVersionNavEl, page, [])
57+
componentsListItemsEl.appendChild(componentVersionNavEl)
58+
})
59+
componentsListEl.appendChild(componentsListItemsEl)
60+
})
61+
groupEl.appendChild(componentsListEl)
62+
container.appendChild(groupEl)
12563
}
12664

127-
menuExpandToggle.addEventListener('click', function (e) {
128-
e.preventDefault()
129-
if (nav.classList.contains('collapse-menu')) {
130-
nav.classList.remove('collapse-menu')
131-
} else {
132-
nav.classList.add('collapse-menu')
133-
}
134-
})
135-
136-
if (versionToggle) {
137-
versionToggle.addEventListener('click', function (e) {
138-
e.preventDefault()
139-
if (versionDropdownList.classList.contains('show')) {
140-
versionDropdownList.classList.remove('show')
65+
function buildNavTree (items, parent, page, currentPath) {
66+
if (!(items || []).length) return
67+
var navListEl = createElement('ul', 'menu_row')
68+
// FIXME we could pass some sort of forceOpen flag so hide is automatically removed
69+
if (currentPath.length) navListEl.classList.add('hide')
70+
currentPath = currentPath.concat(navListEl)
71+
items.forEach(function (item) {
72+
var navItemEl = createElement('li', 'menu_list')
73+
var navTextEl
74+
var isCurrentPage
75+
if (item.url) {
76+
navTextEl = createElement('a', 'menu_title menu_link')
77+
navTextEl.href = relativize(page.url, item.url)
78+
if (page.url === item.url) {
79+
isCurrentPage = true
80+
navItemEl.classList.add('is-current-page')
81+
currentPath.forEach(function (ancestorEl) {
82+
ancestorEl.classList.remove('hide')
83+
})
84+
}
14185
} else {
142-
versionDropdownList.classList.add('show')
86+
navTextEl = createElement('span', 'menu_title menu_text')
14387
}
144-
concealEvent(e)
88+
navTextEl.innerHTML = item.content
89+
navItemEl.appendChild(navTextEl)
90+
// FIXME we could pass some sort of forceOpen flag so hide is automatically removed
91+
var childNavListEl = buildNavTree(item.items, navItemEl, page, currentPath)
92+
if (isCurrentPage && childNavListEl) childNavListEl.classList.remove('hide')
93+
navListEl.appendChild(navItemEl)
14594
})
95+
return parent.appendChild(navListEl)
14696
}
14797

148-
window.addEventListener('click', function (e) {
149-
versionDropdownList.classList.remove('show')
150-
})
151-
152-
// has children in li
153-
function concealEvent (e) {
154-
e.stopPropagation()
155-
}
156-
// scroll left menu to current active page
157-
setTimeout(function () {
158-
if (document.querySelector('.is-current-page')) {
159-
var currentPageMenu = document.querySelector('.is-current-page')
160-
var topPositon = currentPageMenu.offsetTop - 100
161-
var leftMenu = document.querySelector('.left-sidebar-menu .nav-menu')
162-
leftMenu.scrollTop = topPositon
163-
}
164-
}, 100) //setTime Out end
165-
166-
// show depth 0 child element
167-
if (document.querySelector('.is-current-page')) {
168-
var otherNavs = document.querySelectorAll('.nav-list > .nav-item[data-depth="0"]')
169-
otherNavs.forEach(function (nav) {
170-
var navSubMenu = Array.from(nav.querySelector('ul.nav-list').children)
171-
// var navDataDepth = Array.from(nav.querySelector('ul.nav-list'))
172-
navSubMenu.forEach(function (item) {
173-
item.classList.remove('is-inactive')
174-
})
175-
176-
// hide main menu for top level navigation -
177-
178-
// if (nav.className.includes('is-current-page')) {
179-
// navMenuControl.style.display = 'none'
180-
// }
181-
182-
// hide in second level menu
183-
if (nav.className.includes('is-current-path')) {
184-
otherNavs.forEach(function (navItem) {
185-
if (!navItem.className.includes('is-current-path')) {
186-
navItem.classList.add('is-inactive')
187-
}
188-
})
189-
}
190-
})
191-
} // if condition end
192-
193-
// clearTimeout(scrollCurrentPageMenu, 20000)
194-
19598
function relativize (from, to) {
19699
if (!(from && to.charAt() === '/')) return to
197100
var hash = ''
@@ -236,4 +139,55 @@
236139
}
237140
return arr.slice(start, end)
238141
}
142+
143+
function createElement (tagName, className) {
144+
var el = document.createElement(tagName)
145+
if (className) el.className = className
146+
return el
147+
}
148+
149+
function find (selector, from) {
150+
return [].slice.call((from || document).querySelectorAll(selector))
151+
}
152+
153+
// FIXME integrate into nav builder
154+
function activateNav (container) {
155+
find('.component_list_title', container).forEach(function (componentTitleEl) {
156+
componentTitleEl.style.cursor = 'pointer'
157+
componentTitleEl.addEventListener('click', function () {
158+
var versionEl = componentTitleEl.parentNode
159+
var componentVersionEl = versionEl.parentNode
160+
var activeVersionEl = componentVersionEl.querySelector('.version_items:not(.hide)')
161+
if (activeVersionEl) {
162+
activeVersionEl.classList.add('hide')
163+
} else {
164+
var activateVersionEl = componentVersionEl.querySelector(
165+
'.version_items[data-version="' + componentVersionEl.querySelector('.version_list').value + '"]'
166+
)
167+
if (activateVersionEl) activateVersionEl.classList.remove('hide')
168+
}
169+
})
170+
})
171+
172+
find('.menu_title', container).forEach(function (menuTitleEl) {
173+
if (!menuTitleEl.nextElementSibling) return
174+
if (!menuTitleEl.href) menuTitleEl.style.cursor = 'pointer'
175+
menuTitleEl.addEventListener('click', function (e) {
176+
e.preventDefault()
177+
menuTitleEl.nextElementSibling.classList.toggle('hide')
178+
})
179+
})
180+
181+
find('.version_list', container).forEach(function (versionListEl) {
182+
versionListEl.addEventListener('change', function () {
183+
var componentVersionEl = versionListEl.parentNode.parentNode
184+
var activeVersionEl = componentVersionEl.querySelector('.version_items:not(.hide)')
185+
if (activeVersionEl) activeVersionEl.classList.add('hide')
186+
var activateVersionEl = componentVersionEl.querySelector(
187+
'.version_items[data-version="' + versionListEl.value + '"]'
188+
)
189+
if (activateVersionEl) activateVersionEl.classList.remove('hide')
190+
})
191+
})
192+
}
239193
})()

‎src/partials/footer-scripts.hbs‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1-
{{!-- may pass this path to site.js and have it load the navigation data --}}
1+
{{#if page.component}}
2+
{{!-- may pass this path to site.js and have it load the navigation data itself --}}
23
<script src="{{siteRootPath}}/site-navigation-data.js"></script>
34
<script>
4-
window.siteNavigationGroups = {{{stringify (compile-nav-groups)}}}
5-
{{#if page.component}}
6-
window.pageNavigationGroup = "{{{lookup (nav-group) 'title'}}}"
7-
{{/if}}
5+
window.pageNavigationGroup = {{{stringify (nav-group-for-page (nav-groups))}}}
86
</script>
7+
{{/if}}
98
<script src="{{{uiRootPath}}}/js/site.js"></script>
109
{{#with page.attributes.content-scripts}}
1110
{{{this}}}

0 commit comments

Comments
 (0)