diff options
| -rw-r--r-- | themes/hugo-pt2021/assets/script.js | 23 |
1 files changed, 21 insertions, 2 deletions
diff --git a/themes/hugo-pt2021/assets/script.js b/themes/hugo-pt2021/assets/script.js index bc95b27..2805cef 100644 --- a/themes/hugo-pt2021/assets/script.js +++ b/themes/hugo-pt2021/assets/script.js @@ -1,12 +1,31 @@ // enable burger menu support // src: https://bulma.io/documentation/components/navbar/ +// +// Note (2022-03-05): I initially switched from Array.prototype.slice() +// to Array.from() and added "const D = document;" to shrink the +// minified, uncompressed code from 307 bytes to 292 bytes for a ~4.9% +// (15 bytes) size reduction. +// +// Then, I dropped Array.from() entirely, since all modern browsers (see +// URL below) support NodeList.forEach(). +// +// Ref: https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach +// +// This shrunk the minified, uncompressed size to 280 bytes, for a +// ~8.8% (27 bytes) cumulative size reduction. +// +// I also tried switching from forEach to for..of, but that increased +// the minified, uncompressed size by a two bytes. +// document.addEventListener('DOMContentLoaded', () => { "use strict"; + const D = document; + // iterate through burgers - Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0).forEach(e => { + D.querySelectorAll('.navbar-burger').forEach(e => { e.addEventListener('click', () => { // get target from data-target attribute - const t = document.getElementById(e.dataset.target); + const t = D.getElementById(e.dataset.target); // toggle is-active on both burger and menu [e, t].forEach(e => e.classList.toggle('is-active')); |