From 48505cb550502fea2e6f356cae8fe52382340d94 Mon Sep 17 00:00:00 2001 From: boyska Date: Wed, 5 Aug 2020 14:28:25 +0200 Subject: [PATCH] chiudi menu cliccando fuori --- themes/maya0x17/static/ruotalogo.js | 92 ++++++++++++++++++----------- themes/maya0x17/static/theme.scss | 2 +- 2 files changed, 59 insertions(+), 35 deletions(-) diff --git a/themes/maya0x17/static/ruotalogo.js b/themes/maya0x17/static/ruotalogo.js index bb86f63..7a5d369 100644 --- a/themes/maya0x17/static/ruotalogo.js +++ b/themes/maya0x17/static/ruotalogo.js @@ -1,41 +1,65 @@ +function menu_get() { + return document.querySelector('#menu-row') +} +function menu_is_shown() { + return (window.getComputedStyle(menu_get()).display !== 'none') +} +function menu_hide() { + menu_get().style.display = 'none' +} +function menu_show() { + menu_get().style.display = 'block' +} document.addEventListener('DOMContentLoaded', function() { - var logo = document.getElementById('logo-img') - logo.classList.add('rotate') - function ruotaLogo() { - logo.style.transform = 'rotate(' + window.pageYOffset/2+'deg)' - } - function scrollSetup() { - "use strict"; - var last_known_scroll_position = 0 - var ticking = false + var logo = document.getElementById('logo-img') + logo.classList.add('rotate') + function ruotaLogo() { + logo.style.transform = 'rotate(' + window.pageYOffset/2+'deg)' + } + function scrollSetup() { + "use strict"; + var last_known_scroll_position = 0 + var ticking = false - window.addEventListener('scroll', function (e) { - last_known_scroll_position = window.scrollY + window.addEventListener('scroll', function (e) { + last_known_scroll_position = window.scrollY - if (!ticking) { - window.requestAnimationFrame(function () { + if (!ticking) { + window.requestAnimationFrame(function () { - ruotaLogo() - ticking = false; - }); + ruotaLogo() + ticking = false; + }); - ticking = true; - } - }) - } - setTimeout(function () { - logo.classList.remove('rotate') - //ruotaLogo() - scrollSetup() - }, 1000) - logo.addEventListener('click', function () { - var menu = document.querySelector('#menu-row') - if (window.getComputedStyle(menu).display === 'none') { - menu.style.display = 'block' - // menu.scrollIntoView() - } else { - menu.style.display = 'none' - } - console.log('cliccato') + ticking = true; + } }) + } + setTimeout(function () { + logo.classList.remove('rotate') + //ruotaLogo() + scrollSetup() + }, 1000) + logo.addEventListener('click', function (evt) { + if (!menu_is_shown()) { + console.log('show') + menu_show() + // menu.scrollIntoView() + } else { + menu_hide() + } + console.log('cliccato') + evt.stopPropagation() + }) + document.querySelector('#menu-row').addEventListener('click', function(evt) { + evt.stopPropagation() + }) + + document.body.addEventListener('click', function (evt) { + if (!menu_is_shown()) { + return + } + menu_hide() + evt.stopPropagation() + }) }) diff --git a/themes/maya0x17/static/theme.scss b/themes/maya0x17/static/theme.scss index 14b80e9..c7c0497 100644 --- a/themes/maya0x17/static/theme.scss +++ b/themes/maya0x17/static/theme.scss @@ -89,7 +89,7 @@ h1 > (a, a:focus, a:active) { color: $c-titles; } #menu-row { display: none; position: fixed; - top: 0px; + top: 3em; left: 8vw; background: $c-bg-menu; width: 89vw;