|
1 | 1 | // Close search on click
|
2 |
| -window.onclick = function(e) { |
3 |
| - if (!e.target.matches('#searchResults') && !e.target.matches('#searchInput')) { |
4 |
| - const searchResults = document.getElementById('searchResults') |
5 |
| - searchResults.style.display = 'none' |
6 |
| - } |
| 2 | +window.onclick = function (e) { |
| 3 | + if ( |
| 4 | + !e.target.matches('#searchResults') && |
| 5 | + !e.target.matches('#searchInput') |
| 6 | + ) { |
| 7 | + const searchResults = document.getElementById('searchResults') |
| 8 | + searchResults.style.display = 'none' |
| 9 | + } |
7 | 10 | }
|
8 | 11 |
|
9 | 12 | // Copy/paste button in code
|
10 | 13 | function copy(event) {
|
11 |
| - const table = event.parentNode.parentNode |
12 |
| - const codeContainer = table.querySelector('td.code pre') |
13 |
| - const code = codeContainer.textContent |
14 |
| - |
15 |
| - const textarea = document.createElement('textarea') |
16 |
| - textarea.value = code |
17 |
| - textarea.setAttribute('readonly', '') |
18 |
| - textarea.style.position = 'absolute' |
19 |
| - textarea.style.left = '-9999px' |
20 |
| - document.body.appendChild(textarea) |
21 |
| - textarea.select() |
22 |
| - document.execCommand('copy') |
23 |
| - document.body.removeChild(textarea) |
| 14 | + const table = event.parentNode.parentNode |
| 15 | + const codeContainer = table.querySelector('td.code pre') |
| 16 | + const code = codeContainer.textContent |
| 17 | + |
| 18 | + const textarea = document.createElement('textarea') |
| 19 | + textarea.value = code |
| 20 | + textarea.setAttribute('readonly', '') |
| 21 | + textarea.style.position = 'absolute' |
| 22 | + textarea.style.left = '-9999px' |
| 23 | + document.body.appendChild(textarea) |
| 24 | + textarea.select() |
| 25 | + document.execCommand('copy') |
| 26 | + document.body.removeChild(textarea) |
24 | 27 | }
|
25 | 28 |
|
26 | 29 | function addCopyPaste() {
|
27 |
| - const codeTables = document.getElementsByClassName('highlighttable') |
28 |
| - |
29 |
| - for (let i = 0; i < codeTables.length; i++) { |
30 |
| - const button = document.createElement('button') |
31 |
| - button.className = 'copy-button' |
32 |
| - button.innerHTML = '<span class="clipboard-message">Copied to clipboard</span><i class="far fa-clone"></i>' |
33 |
| - button.onclick = function(e){ |
34 |
| - copy(this) |
35 |
| - this.children[0].classList.toggle('clipboard-message--active') |
36 |
| - setTimeout(() => {this.children[0].classList.remove("clipboard-message--active")}, 2000) |
37 |
| - } |
38 |
| - |
39 |
| - codeTables[i].appendChild(button) |
40 |
| - } |
| 30 | + const codeTables = document.getElementsByClassName('highlighttable') |
| 31 | + |
| 32 | + for (let i = 0; i < codeTables.length; i++) { |
| 33 | + const button = document.createElement('button') |
| 34 | + button.className = 'copy-button' |
| 35 | + button.innerHTML = |
| 36 | + '<span class="clipboard-message">Copied to clipboard</span><i class="far fa-clone"></i>' |
| 37 | + button.onclick = function (e) { |
| 38 | + copy(this) |
| 39 | + this.children[0].classList.toggle('clipboard-message--active') |
| 40 | + setTimeout(() => { |
| 41 | + this.children[0].classList.remove('clipboard-message--active') |
| 42 | + }, 2000) |
| 43 | + } |
| 44 | + |
| 45 | + codeTables[i].appendChild(button) |
| 46 | + } |
41 | 47 | }
|
42 | 48 |
|
43 |
| -setTimeout(function() { |
44 |
| - addCopyPaste() |
45 |
| -}, 500); |
| 49 | +setTimeout(function () { |
| 50 | + addCopyPaste() |
| 51 | +}, 500) |
46 | 52 |
|
47 | 53 | // Up button
|
48 |
| -window.onscroll = function() { scrollFunc() } |
| 54 | +window.onscroll = function () { |
| 55 | + scrollFunc() |
| 56 | +} |
49 | 57 |
|
50 | 58 | function scrollFunc() {
|
51 |
| - if (document.body.scrollTop > 40 || document.documentElement.scrollTop > 40) |
52 |
| - document.getElementById('upButton').style.display = 'block' |
53 |
| - else |
54 |
| - document.getElementById('upButton').style.display = 'none' |
| 59 | + if (document.body.scrollTop > 40 || document.documentElement.scrollTop > 40) |
| 60 | + document.getElementById('upButton').style.display = 'block' |
| 61 | + else document.getElementById('upButton').style.display = 'none' |
55 | 62 | }
|
56 | 63 |
|
57 | 64 | function scrollTop() {
|
58 |
| - document.body.scrollTop = 0; |
59 |
| - document.documentElement.scrollTop = 0; |
| 65 | + document.body.scrollTop = 0 |
| 66 | + document.documentElement.scrollTop = 0 |
60 | 67 | }
|
61 | 68 |
|
62 | 69 | function addUpButton() {
|
63 |
| - const div = document.createElement('div') |
64 |
| - div.id = 'upButton' |
65 |
| - div.className = 'up-button' |
66 |
| - div.innerHTML = '<i class="fas fa-angle-double-up"></i>' |
67 |
| - div.onclick = function() { scrollTop() } |
68 |
| - |
69 |
| - const header = document.getElementsByTagName('header')[0] |
70 |
| - header.appendChild(div) |
| 70 | + const div = document.createElement('div') |
| 71 | + div.id = 'upButton' |
| 72 | + div.className = 'up-button' |
| 73 | + div.innerHTML = '<i class="fas fa-angle-double-up"></i>' |
| 74 | + div.onclick = function () { |
| 75 | + scrollTop() |
| 76 | + } |
| 77 | + |
| 78 | + const header = document.getElementsByTagName('header')[0] |
| 79 | + header.appendChild(div) |
71 | 80 | }
|
72 | 81 |
|
73 |
| -let scrollPos = 0; |
| 82 | +let scrollPos = 0 |
74 | 83 | function updateUpButton() {
|
75 |
| - |
76 |
| - |
77 |
| - if ((document.body.getBoundingClientRect()).top > scrollPos) { |
78 |
| - document.getElementById('upButton').classList.add('up'); |
79 |
| - document.getElementById('upButton').classList.remove('down'); |
| 84 | + if (document.body.getBoundingClientRect().top > scrollPos) { |
| 85 | + document.getElementById('upButton').classList.add('up') |
| 86 | + document.getElementById('upButton').classList.remove('down') |
80 | 87 | } else {
|
81 |
| - document.getElementById('upButton').classList.add('down'); |
82 |
| - document.getElementById('upButton').classList.remove('up'); |
| 88 | + document.getElementById('upButton').classList.add('down') |
| 89 | + document.getElementById('upButton').classList.remove('up') |
83 | 90 | }
|
84 |
| - scrollPos = (document.body.getBoundingClientRect()).top; |
| 91 | + scrollPos = document.body.getBoundingClientRect().top |
85 | 92 | }
|
86 | 93 |
|
87 | 94 | addUpButton()
|
88 | 95 |
|
89 | 96 | // Highlight nav links
|
90 | 97 | function updateBlur() {
|
91 |
| - const toc = document.getElementById('toc') |
92 |
| - const els_ = document.querySelectorAll('#toc li') |
93 |
| - const anchors_ = document.querySelectorAll('.section') |
94 |
| - |
95 |
| - const offset = window.pageYOffset |
96 |
| - |
97 |
| - if (anchors_.length === 0) |
98 |
| - return |
99 |
| - |
100 |
| - let last = 0 |
101 |
| - for (let i = 0; i < Math.min(els_.length, anchors_.length); i++) { |
102 |
| - if ((anchors_[i].offsetTop-70) <= offset) { |
103 |
| - els_[i].classList.add('blur') |
104 |
| - last = i |
105 |
| - } else { |
106 |
| - els_[i].classList.remove('blur') |
107 |
| - } |
108 |
| - } |
109 |
| - |
110 |
| - { // scroll toc to current element |
111 |
| - const div = toc.children[0] |
| 98 | + const toc = document.getElementById('toc') |
| 99 | + const els_ = document.querySelectorAll('#toc li') |
| 100 | + const anchors_ = document.querySelectorAll('.section') |
| 101 | + |
| 102 | + const offset = window.pageYOffset |
| 103 | + |
| 104 | + if (anchors_.length === 0) return |
| 105 | + |
| 106 | + let last = 0 |
| 107 | + for (let i = 0; i < Math.min(els_.length, anchors_.length); i++) { |
| 108 | + if (anchors_[i].offsetTop - 70 <= offset) { |
| 109 | + els_[i].classList.add('blur') |
| 110 | + last = i |
| 111 | + } else { |
| 112 | + els_[i].classList.remove('blur') |
| 113 | + } |
| 114 | + } |
| 115 | + |
| 116 | + { |
| 117 | + // scroll toc to current element |
| 118 | + const div = toc.children[0] |
112 | 119 | // div.scrollTo(0, els_[last].offsetTop-div.offsetHeight/2)
|
113 |
| - } |
| 120 | + } |
114 | 121 | }
|
115 | 122 |
|
116 | 123 | updateBlur()
|
117 | 124 |
|
118 |
| -document.addEventListener('scroll', function() { |
| 125 | +document.addEventListener('scroll', function () { |
119 | 126 | updateBlur()
|
120 | 127 | updateUpButton()
|
121 | 128 | })
|
0 commit comments