diff --git a/dist/hamburger-menu.css b/dist/hamburger-menu.css index 56fb288..121175a 100644 --- a/dist/hamburger-menu.css +++ b/dist/hamburger-menu.css @@ -1,4 +1,4 @@ -/*! hamburger-menu v0.5.2 ☰ https://github.com/center-key/hamburger-menu ☰ MIT License */ +/*! hamburger-menu v0.6.0 ☰ https://github.com/center-key/hamburger-menu ☰ MIT License */ /* Structure for HamburgerMenu: @@ -63,7 +63,7 @@ nav.hamburger-menu aside ul ul li span { font-size: 0.8rem; padding: 4px 0px 4px 30px; } -@media (max-width: 667px) { /* selects iPhone 6/6s/7/8/SE(2020) landscape and anything narrower */ +@media (max-width: 667px) { /* selects iPhone 6/6s/7/8/SE2/SE3 landscape and anything narrower */ html body { padding: 35px 10px 0px 10px; cursor: pointer; /* enables closing menu */ diff --git a/dist/hamburger-menu.js b/dist/hamburger-menu.js index 54350cd..b54af9a 100644 --- a/dist/hamburger-menu.js +++ b/dist/hamburger-menu.js @@ -1,50 +1,82 @@ -//! hamburger-menu v0.5.2 ☰ https://github.com/center-key/hamburger-menu ☰ MIT License +//! hamburger-menu v0.6.0 ☰ https://github.com/center-key/hamburger-menu ☰ MIT License const hamburgerMenu = { + // - version: '0.5.2', + version: '0.6.0', - selectItem(event) { - const item = $(event.target).closest('li'); - item.closest('aside').find('li').removeClass('current'); - item.addClass('current'); - const nav = item.closest('.hamburger-menu').addClass('collapse-menu'); - const eventRoutes = {}; + selectItem(elem) { + const menuItem = elem.closest('li'); + const navMenu = menuItem.closest('.hamburger-menu'); + const reset = (elem) => elem.classList.remove('current'); + menuItem.closest('aside').querySelectorAll('li').forEach(reset); + menuItem.classList.add('current'); + navMenu.classList.add('collapse-menu'); + navMenu.dataset.menuCollapsed = String(Date.now()); const restoreAllowExand = () => { - nav.removeClass('collapse-menu'); - console.log('restoreAllowExand'); - $(globalThis.document).off(eventRoutes); + navMenu.classList.remove('collapse-menu'); + globalThis.document.removeEventListener('click', restoreAllowExand); + globalThis.document.removeEventListener('mousemove', restoreAllowExand); + }; + const listen = () => { + globalThis.document.addEventListener('click', restoreAllowExand); + globalThis.document.addEventListener('mousemove', restoreAllowExand); }; - eventRoutes.click = restoreAllowExand; - eventRoutes.mousemove = restoreAllowExand; const afterCurrentClick = 100; - globalThis.setTimeout(() => $(globalThis.document).on(eventRoutes), afterCurrentClick); + globalThis.setTimeout(listen, afterCurrentClick); }, setup() { - $(globalThis.document).on({ click: $.noop }); //workaround for sticky hover on mobile - const nav = $('nav.hamburger-menu'); + globalThis.document.addEventListener('click', () => {}); //workaround for sticky hover on mobile + const navMenu = globalThis.document.querySelector('.hamburger-menu'); + const aside = navMenu?.querySelector('aside'); const autoHighlightMultiPage = () => { - const current = { - url: new globalThis.URL(globalThis.location.href), - path: globalThis.location.pathname.replace(/\/$/, ''), - }; - const isCurrent = (i, elem) => { - const linkUrl = new globalThis.URL($(elem).attr('href'), current.url); - return linkUrl.pathname.replace(/\/$/, '') === current.path; + const currentUrl = new globalThis.URL(globalThis.location.href); + const currentPath = globalThis.location.pathname.replace(/\/$/, ''); + const setCurrent = (elem) => { + const linkUrl = new globalThis.URL(elem.href, currentUrl); + const isCurrent = linkUrl.pathname.replace(/\/$/, '') === currentPath; + elem.parentElement.classList.add(isCurrent ? 'current' : 'other-page'); }; - nav.find('li >a').filter(isCurrent).first().closest('li').addClass('current'); + navMenu.querySelectorAll('li >a').forEach(setCurrent); + }; + const delegateSelectItem = (event) => { + const elem = event.target.closest('.hamburger-menu li'); + if (elem) + hamburgerMenu.selectItem(elem); }; const autoHighlightSinglePageApp = () => - nav.find('>aside li').on({ click: hamburgerMenu.selectItem }); + globalThis.document.addEventListener('click', delegateSelectItem); const autoHighlight = () => { autoHighlightMultiPage(); autoHighlightSinglePageApp(); }; - if (!nav.find('>aside').hasClass('disable-auto-highlight')) + if (aside && !aside.classList.contains('disable-auto-highlight')) autoHighlight(); }, + dom: { + onReady(callback) { + // Calls the specified function once the web page is loaded and ready. + // Example (execute myApp.setup() as soon as the DOM is interactive): + // hamburgerMenu.dom.onReady(myApp.setup); + if (globalThis.document.readyState === 'complete') + callback(); + else + globalThis.window.addEventListener('DOMContentLoaded', callback); + }, + }, + }; -$(hamburgerMenu.setup); +hamburgerMenu.dom.onReady(hamburgerMenu.setup); diff --git a/dist/hamburger-menu.min.css b/dist/hamburger-menu.min.css index ad2ee46..a9c16a4 100644 --- a/dist/hamburger-menu.min.css +++ b/dist/hamburger-menu.min.css @@ -1,2 +1,2 @@ -/*! hamburger-menu v0.5.2 ☰ https://github.com/center-key/hamburger-menu ☰ MIT License */ +/*! hamburger-menu v0.6.0 ☰ https://github.com/center-key/hamburger-menu ☰ MIT License */ body{margin:0;padding:0 50px 0 200px}nav.hamburger-menu a.hamburger{display:none;color:inherit;background-color:inherit}nav.hamburger-menu aside{position:fixed;top:0;bottom:0;left:0;float:none;background-color:inherit;padding:0;margin:0;overflow-y:scroll;z-index:5000}nav.hamburger-menu aside ul{list-style:none;padding:0;margin:0}nav.hamburger-menu aside ul li a,nav.hamburger-menu aside ul li span{display:block;font-size:1.1rem;font-weight:700;text-align:left;text-decoration:none;color:inherit;border-top:1px solid transparent;border-bottom:1px solid transparent;padding:10px 0 10px 15px;transition:all 400ms;cursor:pointer}nav.hamburger-menu aside ul li.current>a,nav.hamburger-menu aside ul li.current>span{border-color:inherit;cursor:default}nav.hamburger-menu aside ul ul li a,nav.hamburger-menu aside ul ul li span{font-size:.8rem;padding:4px 0 4px 30px}@media (max-width:667px){html body{padding:35px 10px 0;cursor:pointer}nav.hamburger-menu{cursor:auto}nav.hamburger-menu a.hamburger{display:block;position:absolute;top:0;left:0;font-size:1.4rem;font-weight:700;text-decoration:none;padding:6px 10px 8px 8px}nav.hamburger-menu a.hamburger:not(:hover){transition:opacity .5s .8s}nav.hamburger-menu a.hamburger:hover{opacity:0}nav.hamburger-menu aside{max-width:0;overflow:hidden;transition:max-width 1s}nav.hamburger-menu aside ul li{white-space:nowrap}nav.hamburger-menu:not(.collapse-menu):hover .hamburger+aside{max-width:400px;overflow-y:scroll}}nav.hamburger-menu aside{width:150px}nav.hamburger-menu{color:#dcdcdc;background-color:teal}nav.hamburger-menu aside ul li.current{border-color:#fff}nav.hamburger-menu aside ul li.current>a,nav.hamburger-menu aside ul li.current>span,nav.hamburger-menu aside ul li>a:hover,nav.hamburger-menu aside ul li>span:hover{color:#fff;background-color:#008b8b} diff --git a/dist/hamburger-menu.min.js b/dist/hamburger-menu.min.js index a85ff61..d743a8f 100644 --- a/dist/hamburger-menu.min.js +++ b/dist/hamburger-menu.min.js @@ -1,2 +1,2 @@ -//! hamburger-menu v0.5.2 ☰ https://github.com/center-key/hamburger-menu ☰ MIT License -const hamburgerMenu={version:"0.5.2",selectItem(event){const item=$(event.target).closest("li");item.closest("aside").find("li").removeClass("current");item.addClass("current");const nav=item.closest(".hamburger-menu").addClass("collapse-menu");const eventRoutes={};const restoreAllowExand=()=>{nav.removeClass("collapse-menu");console.log("restoreAllowExand");$(globalThis.document).off(eventRoutes)};eventRoutes.click=restoreAllowExand;eventRoutes.mousemove=restoreAllowExand;const afterCurrentClick=100;globalThis.setTimeout(()=>$(globalThis.document).on(eventRoutes),afterCurrentClick)},setup(){$(globalThis.document).on({click:$.noop});const nav=$("nav.hamburger-menu");const autoHighlightMultiPage=()=>{const current={url:new globalThis.URL(globalThis.location.href),path:globalThis.location.pathname.replace(/\/$/,"")};const isCurrent=(i,elem)=>{const linkUrl=new globalThis.URL($(elem).attr("href"),current.url);return linkUrl.pathname.replace(/\/$/,"")===current.path};nav.find("li >a").filter(isCurrent).first().closest("li").addClass("current")};const autoHighlightSinglePageApp=()=>nav.find(">aside li").on({click:hamburgerMenu.selectItem});const autoHighlight=()=>{autoHighlightMultiPage();autoHighlightSinglePageApp()};if(!nav.find(">aside").hasClass("disable-auto-highlight"))autoHighlight()}};$(hamburgerMenu.setup); +//! hamburger-menu v0.6.0 ☰ https://github.com/center-key/hamburger-menu ☰ MIT License +const hamburgerMenu={version:"0.6.0",selectItem(elem){const menuItem=elem.closest("li");const navMenu=menuItem.closest(".hamburger-menu");const reset=elem=>elem.classList.remove("current");menuItem.closest("aside").querySelectorAll("li").forEach(reset);menuItem.classList.add("current");navMenu.classList.add("collapse-menu");navMenu.dataset.menuCollapsed=String(Date.now());const restoreAllowExand=()=>{navMenu.classList.remove("collapse-menu");globalThis.document.removeEventListener("click",restoreAllowExand);globalThis.document.removeEventListener("mousemove",restoreAllowExand)};const listen=()=>{globalThis.document.addEventListener("click",restoreAllowExand);globalThis.document.addEventListener("mousemove",restoreAllowExand)};const afterCurrentClick=100;globalThis.setTimeout(listen,afterCurrentClick)},setup(){globalThis.document.addEventListener("click",()=>{});const navMenu=globalThis.document.querySelector(".hamburger-menu");const aside=navMenu?.querySelector("aside");const autoHighlightMultiPage=()=>{const currentUrl=new globalThis.URL(globalThis.location.href);const currentPath=globalThis.location.pathname.replace(/\/$/,"");const setCurrent=elem=>{const linkUrl=new globalThis.URL(elem.href,currentUrl);const isCurrent=linkUrl.pathname.replace(/\/$/,"")===currentPath;elem.parentElement.classList.add(isCurrent?"current":"other-page")};navMenu.querySelectorAll("li >a").forEach(setCurrent)};const delegateSelectItem=event=>{const elem=event.target.closest(".hamburger-menu li");if(elem)hamburgerMenu.selectItem(elem)};const autoHighlightSinglePageApp=()=>globalThis.document.addEventListener("click",delegateSelectItem);const autoHighlight=()=>{autoHighlightMultiPage();autoHighlightSinglePageApp()};if(aside&&!aside.classList.contains("disable-auto-highlight"))autoHighlight()},dom:{onReady(callback){if(globalThis.document.readyState==="complete")callback();else globalThis.window.addEventListener("DOMContentLoaded",callback)}}};hamburgerMenu.dom.onReady(hamburgerMenu.setup); diff --git a/docs/hamburger-menu.css b/docs/hamburger-menu.css index 73ac9fe..121175a 100644 --- a/docs/hamburger-menu.css +++ b/docs/hamburger-menu.css @@ -1,4 +1,4 @@ -/*! hamburger-menu v0.5.2 ☰ https://github.com/center-key/hamburger-menu ☰ MIT License */ +/*! hamburger-menu v0.6.0 ☰ https://github.com/center-key/hamburger-menu ☰ MIT License */ /* Structure for HamburgerMenu: diff --git a/docs/hamburger-menu.js b/docs/hamburger-menu.js index 2886f1a..b54af9a 100644 --- a/docs/hamburger-menu.js +++ b/docs/hamburger-menu.js @@ -1,4 +1,4 @@ -//! hamburger-menu v0.5.2 ☰ https://github.com/center-key/hamburger-menu ☰ MIT License +//! hamburger-menu v0.6.0 ☰ https://github.com/center-key/hamburger-menu ☰ MIT License const hamburgerMenu = { // - version: '0.5.2', + version: '0.6.0', selectItem(elem) { const menuItem = elem.closest('li'); diff --git a/package.json b/package.json index b52d5dc..d6d55c4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hamburger-menu", - "version": "0.5.2", + "version": "0.6.0", "description": "☰ A responsive CSS solution for a hamburger menu ☰", "license": "MIT", "type": "module",