|
6 | 6 | var body = document.body |
7 | 7 | var header = document.getElementById('header') |
8 | 8 | var menu = document.querySelector('.sidebar') |
9 | | - var menuToggle = document.querySelector('.sidebar .toggle') |
10 | 9 | var content = document.querySelector('.content') |
| 10 | + var mobileBar = document.getElementById('mobile-bar') |
11 | 11 |
|
12 | | - if (!menu) return |
13 | | - |
14 | | - menuToggle.addEventListener('click', function () { |
| 12 | + var menuButton = mobileBar.querySelector('.menu-button') |
| 13 | + menuButton.addEventListener('click', function () { |
15 | 14 | menu.classList.toggle('open') |
16 | 15 | }) |
17 | 16 |
|
| 17 | + body.addEventListener('click', function (e) { |
| 18 | + if (e.target !== menuButton && !menu.contains(e.target)) { |
| 19 | + menu.classList.remove('open') |
| 20 | + } |
| 21 | + }) |
| 22 | + |
18 | 23 | // build sidebar |
19 | | - var allLinks = [] |
20 | 24 | var currentPageAnchor = menu.querySelector('.sidebar-link.current') |
21 | | - var sectionContainer = document.createElement('ul') |
22 | | - sectionContainer.className = 'menu-sub' |
23 | | - currentPageAnchor.parentNode.appendChild(sectionContainer) |
24 | | - var h2s = content.querySelectorAll('h2') |
25 | | - if (h2s.length) { |
26 | | - each.call(h2s, function (h) { |
27 | | - sectionContainer.appendChild(makeLink(h)) |
28 | | - var h3s = collectH3s(h) |
29 | | - allLinks.push(h) |
30 | | - allLinks.push.apply(allLinks, h3s) |
31 | | - if (h3s.length) { |
32 | | - sectionContainer.appendChild(makeSubLinks(h3s)) |
| 25 | + if (currentPageAnchor) { |
| 26 | + var allLinks = [] |
| 27 | + var sectionContainer = document.createElement('ul') |
| 28 | + sectionContainer.className = 'menu-sub' |
| 29 | + currentPageAnchor.parentNode.appendChild(sectionContainer) |
| 30 | + var h2s = content.querySelectorAll('h2') |
| 31 | + if (h2s.length) { |
| 32 | + each.call(h2s, function (h) { |
| 33 | + sectionContainer.appendChild(makeLink(h)) |
| 34 | + var h3s = collectH3s(h) |
| 35 | + allLinks.push(h) |
| 36 | + allLinks.push.apply(allLinks, h3s) |
| 37 | + if (h3s.length) { |
| 38 | + sectionContainer.appendChild(makeSubLinks(h3s)) |
| 39 | + } |
| 40 | + }) |
| 41 | + } else { |
| 42 | + h2s = content.querySelectorAll('h3') |
| 43 | + each.call(h2s, function (h) { |
| 44 | + sectionContainer.appendChild(makeLink(h)) |
| 45 | + allLinks.push(h) |
| 46 | + }) |
| 47 | + } |
| 48 | + |
| 49 | + var animating = false |
| 50 | + sectionContainer.addEventListener('click', function (e) { |
| 51 | + e.preventDefault() |
| 52 | + if (e.target.classList.contains('section-link')) { |
| 53 | + menu.classList.remove('open') |
| 54 | + setActive(e.target) |
| 55 | + animating = true |
| 56 | + setTimeout(function () { |
| 57 | + animating = false |
| 58 | + }, 400) |
33 | 59 | } |
34 | | - }) |
35 | | - } else { |
36 | | - h2s = content.querySelectorAll('h3') |
37 | | - each.call(h2s, function (h) { |
38 | | - sectionContainer.appendChild(makeLink(h)) |
39 | | - allLinks.push(h) |
| 60 | + }, true) |
| 61 | + |
| 62 | + // init smooth scroll |
| 63 | + smoothScroll.init({ |
| 64 | + speed: 400, |
| 65 | + offset: window.innerWidth > 720 |
| 66 | + ? 40 |
| 67 | + : 58 |
40 | 68 | }) |
41 | 69 | } |
42 | 70 |
|
43 | | - // init smooth scroll |
44 | | - smoothScroll.init({ |
45 | | - speed: 400 |
46 | | - }) |
47 | | - |
48 | | - var animating = false |
49 | | - sectionContainer.addEventListener('click', function (e) { |
50 | | - e.preventDefault() |
51 | | - if (e.target.classList.contains('section-link')) { |
52 | | - setActive(e.target) |
53 | | - animating = true |
54 | | - setTimeout(function () { |
55 | | - animating = false |
56 | | - }, 400) |
57 | | - } |
58 | | - }, true) |
59 | | - |
60 | 71 | // listen for scroll event to do positioning & highlights |
61 | 72 | window.addEventListener('scroll', updateSidebar) |
62 | 73 | window.addEventListener('resize', updateSidebar) |
63 | 74 |
|
64 | 75 | function updateSidebar () { |
65 | 76 | var top = doc && doc.scrollTop || body.scrollTop |
66 | | - if (top > header.offsetHeight) { |
| 77 | + var headerHeight = header.offsetHeight |
| 78 | + if (top > headerHeight) { |
67 | 79 | main.className = 'fix-sidebar' |
68 | 80 | } else { |
69 | 81 | main.className = '' |
70 | 82 | } |
71 | | - if (animating) return |
| 83 | + if (animating || !allLinks) return |
72 | 84 | var last |
73 | 85 | for (var i = 0; i < allLinks.length; i++) { |
74 | 86 | var link = allLinks[i] |
|
0 commit comments