diff options
Diffstat (limited to 'src/js/zen.js')
-rw-r--r-- | src/js/zen.js | 84 |
1 files changed, 54 insertions, 30 deletions
diff --git a/src/js/zen.js b/src/js/zen.js index 05ec6b3..be5f7d7 100644 --- a/src/js/zen.js +++ b/src/js/zen.js @@ -1,38 +1,62 @@ -'use strict'; - -const toggleArrow = document.getElementById('harr'); -const initValue = document.body.style.getPropertyValue('--width_panel_bis'); - -toggleArrow.addEventListener('click', () => { - if (toggleArrow.classList.contains('hide_arrow_off')) { - showAbout(); - setTimeout(() => { - toggleArrow.classList.remove('hide_arrow_off'); - }, 1000); - } else { - toggleArrow.classList.add('hide_arrow_off'); - hideAbout(); +window.addEventListener('DOMContentLoaded', () => { + let firstTime = window.location.pathname != '/' && window.pageYOffset < 800; + const toggleArrow = document.querySelector('#harr'); + const hid = document.querySelector('#hid'); + const initValue = document.body.style.getPropertyValue('--width_panel_bis'); + + toggleArrow.addEventListener('click', () => { + if (toggleArrow.classList.contains('hide_arrow_off')) { + firstTime = false; + showAbout(); + showHID(); + setTimeout(() => { + toggleArrow.classList.remove('hide_arrow_off'); + }, 1000); + } else { + toggleArrow.classList.add('hide_arrow_off'); + hideAbout(); + + // If the screen is smaller than 500px, hide the HID + if (window.screen.availWidth <= 500) { + hideHID(); + } + } + }); + + function hideAbout() { + document.body.style.setProperty('--width_panel_bis', '0px'); + } + + function showAbout() { + document.body.style.setProperty('--width_panel_bis', initValue); } -}); -function hideAbout() { - document.body.style.setProperty('--width_panel_bis', '0px'); -} + function hideHID() { + hid.style.setProperty('display', 'none'); + } -function showAbout() { - document.body.style.setProperty('--width_panel_bis', initValue); -} + function showHID() { + hid.style.setProperty('display', ''); + } -window.addEventListener('scroll', () => { - const toggleArrow = document.getElementById('harr'); + window.addEventListener('scroll', () => { + if(!toggleArrow) return; + if (window.pageYOffset >= 800) { + if (firstTime && document.body.style.getPropertyValue('--width_panel_bis') === initValue) { + toggleArrow.click(); + firstTime = true; + } - if (window.pageYOffset >= 800) { - if (toggleArrow) { toggleArrow.classList.add('hide_arrow_show'); + // A hideAbout(header, articles); + } else if (!toggleArrow.classList.contains('hide_arrow_off')) { + // A showAbout(header, articles); + toggleArrow.classList.remove('hide_arrow_show'); } - // A hideAbout(header, articles); - } else if (toggleArrow && !toggleArrow.classList.contains('hide_arrow_off')) { - // A showAbout(header, articles); - toggleArrow.classList.remove('hide_arrow_show'); - } + + if(firstTime && window.pageYOffset === 0 && document.body.style.getPropertyValue('--width_panel_bis') !== initValue) { + toggleArrow.click(); + firstTime = true; + } + }); }); |