Switch to native events and elements

center-key · Jun 18, 2023 · a4ee5de · a4ee5de
1 parent 39810ab
commit a4ee5de
Show file tree

Hide file tree

Showing 15 changed files with 180 additions and 110 deletions.
diff --git a/README.md b/README.md
@@ -28,7 +28,6 @@ Include the **HamburgerMenu** CSS and JavaScript:
 ...
 <link rel=stylesheet href=hamburger-menu.css>
 ...
-<script src=https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js></script>
 <script src=hamburger-menu.js></script>
 ...
 ```
@@ -37,7 +36,6 @@ Include the **HamburgerMenu** CSS and JavaScript:
 ...
 <link rel=stylesheet href=https://cdn.jsdelivr.net/npm/[email protected]/dist/hamburger-menu.min.css>
 ...
-<script src=https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js></script>
 <script src=https://cdn.jsdelivr.net/npm/[email protected]/dist/hamburger-menu.min.js></script>
 ...
 ```
@@ -110,19 +108,13 @@ Example of highlighting the menu item for "**Page 2**":
 <li class=current><a href=page2.html>Page 2</a></li>
 ```
 
-...and an equivalent example using jQuery:
-```javascript
-$('nav.hamburger-menu').find('a[href=page2.html]').parent().addClass('current');
-```
-
 **Note:**<br>
 To support old legacy web browsers, add a polyfill for
 [URL](https://www.npmjs.com/package/url-polyfill)
 to your website.
 
-## F) Removing jQuery Dependency
-The `hamburger-menu.js` file depends on jQuery, but you can eliminate **both** jQuery
-and the `hamburger-menu.js` file by incorporating this one line of JavaScript in your website:
+## F) hamburger-menu.js File is Optional
+You can the `hamburger-menu.js` file by incorporating this one line of JavaScript in your website:
 ```javascript
 document.addEventListener('click', () => {});  //workaround for sticky hover on mobile
 ```

diff --git a/docs/app.js b/docs/app.js
@@ -5,21 +5,41 @@ License: MIT
 */
 
 const app = {
+   pulse(elem, text) {
+      elem.style.opacity =    '0';
+      elem.style.transition = 'all 0ms';
+      if (text !== undefined)
+         elem.textContent = text;
+      const animate = () => {
+         elem.style.opacity = '1';
+         elem.style.transition = 'all 500ms';
+         };
+      globalThis.requestAnimationFrame(animate);
+      },
    actionClick(event) {
-      const title = $(event.target).closest('li').find('span').first().text();
-      $('main >h1').hide().text(title).fadeIn();
+      const menuItemSelector = 'body.single-page-app nav.hamburger-menu aside ul li span';
+      const elem = event.target.closest(menuItemSelector);
+      const displayTitle = () => {
+         const title =  elem.closest('li').querySelector('span').textContent;
+         const header = globalThis.document.querySelector('main >h1');
+         app.pulse(header, title);
+         };
+      if (elem)
+         displayTitle();
       },
-   setupIcons() {
-      const getName = (elem) => elem.data().icon || elem.data().brand;
-      const makeIcon = (i, elem) => $(elem).addClass('font-icon fa-' + getName($(elem)));
-      $('i[data-icon]').addClass('fas').each(makeIcon);
-      $('i[data-brand]').addClass('fab').each(makeIcon);
+   makeIcons(type, selector, addClass) {
+      const iconify = (elem) => {
+         elem.classList.add('font-icon');
+         elem.classList.add(addClass);
+         elem.classList.add('fa-' + elem.dataset[type]);
+         };
+      globalThis.document.querySelectorAll(selector).forEach(iconify);
       },
    setup() {
-      app.setupIcons();
-      const menuItemSelector = 'body.single-page-app nav.hamburger-menu aside ul li span';
-      $(globalThis.document).on({ click: app.actionClick }, menuItemSelector);
+      app.makeIcons('icon',  'i[data-icon]',  'fas');
+      app.makeIcons('brand', 'i[data-brand]', 'fab');
+      globalThis.document.addEventListener('click', app.actionClick);
       },
    };
 
-app.setup();
+hamburgerMenu.dom.onReady(app.setup);
diff --git a/docs/hamburger-menu.css b/docs/hamburger-menu.css
@@ -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/docs/hamburger-menu.js b/docs/hamburger-menu.js
@@ -1,50 +1,82 @@
 //! hamburger-menu v0.5.2 ☰ https://github.com/center-key/hamburger-menu ☰ MIT License
 
 const hamburgerMenu = {
+   // <nav class=hamburger-menu>
+   //    <a class=hamburger href=#>&#9776;</a>
+   //    <aside>
+   //       <ul>
+   //          <li><a href=.>Home</a></li>
+   //          <li><a href=page1.html>Page 1</a></li>
+   //          <li><a href=page2.html>Page 2</a></li>
+   //          <li><a href=page3.html>Page 3</a></li>
+   //       </ul>
+   //    </aside>
+   // </nav>
 
    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 = {};
+   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/docs/index.html b/docs/index.html
@@ -9,9 +9,9 @@
    <link rel=icon       href=https://centerkey.com/graphics/bookmark.png>
    <link rel=preconnect href=https://fonts.googleapis.com>
    <link rel=preconnect href=https://fonts.gstatic.com crossorigin>
-   <link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.3/css/all.min.css>
-   <link rel=stylesheet href=https://cdn.jsdelivr.net/npm/dna-engine@2.3/dist/dna-engine.css>
-   <link rel=stylesheet href=https://cdn.jsdelivr.net/npm/web-ignition@1.6/dist/reset.min.css>
+   <link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4/css/all.min.css>
+   <link rel=stylesheet href=https://cdn.jsdelivr.net/npm/dna-engine@3.0/dist/dna-engine.css>
+   <link rel=stylesheet href=https://cdn.jsdelivr.net/npm/web-ignition@2.0/dist/reset.min.css>
    <style>
       body { text-align: center; color: gray; background-color: black; }
       body >header { margin-bottom: 40px; }
@@ -21,18 +21,18 @@
       body >footer p:first-child { font-size: 1.3rem; font-weight: lighter; margin-bottom: 10px; }
       body >footer i.font-icon { font-size: 2.7rem; }
       body >footer figure { display: inline-block; width: 100px; }
-      @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 */
          body >header h1 { font-size: 1.2rem; }
          body >main >nav i.font-icon { font-size: 6rem; }
          }
    </style>
-   <script defer src=https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js></script>
-   <script defer src=https://cdn.jsdelivr.net/npm/[email protected]/dist/dna-engine.min.js></script>
-   <script defer src=https://cdn.jsdelivr.net/npm/[email protected]/dist/lib-x.min.js></script>
+   <script defer src=https://cdn.jsdelivr.net/npm/[email protected]/dist/dna-engine.min.js></script>
+   <script defer src=https://cdn.jsdelivr.net/npm/[email protected]/dist/lib-x.min.js></script>
    <script defer src=hamburger-menu.js></script>
-   <script>globalThis.onerror = () => document.body.style.background = 'pink';</script>
+   <script>globalThis.onerror = () => globalThis.document.body.style.background = 'pink';</script>
    <script data-on-load=displayVersion>
-      const displayVersion = () => $('.version-number').text(hamburgerMenu.version);
+      const displayVersion = () =>
+         globalThis.document.querySelector('.version-number').textContent = hamburgerMenu.version;
    </script>
 </head>
 <body>

diff --git a/docs/multipage/about.html b/docs/multipage/about.html
@@ -12,13 +12,12 @@
    <meta name=description content="About page with a mobile-friendly hamburger drop-down menu">
    <title>HamburgerMenu &#9776; Multipage</title>
    <link rel=icon       href=https://centerkey.com/graphics/bookmark.png>
-   <link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.3/css/all.min.css>
+   <link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4/css/all.min.css>
    <link rel=stylesheet href=../hamburger-menu.css>
    <link rel=stylesheet href=../style.css>
-   <script defer src=https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js></script>
    <script defer src=../hamburger-menu.js></script>
    <script defer src=../app.js></script>
-   <script>globalThis.onerror = () => document.body.style.background = 'pink';</script>
+   <script>globalThis.onerror = () => globalThis.document.body.style.background = 'pink';</script>
 </head>
 <body>
 

diff --git a/docs/multipage/index.html b/docs/multipage/index.html
@@ -12,13 +12,12 @@
    <meta name=description content="Home page with a mobile-friendly hamburger drop-down menu">
    <title>HamburgerMenu &#9776; Multipage</title>
    <link rel=icon       href=https://centerkey.com/graphics/bookmark.png>
-   <link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.3/css/all.min.css>
+   <link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4/css/all.min.css>
    <link rel=stylesheet href=../hamburger-menu.css>
    <link rel=stylesheet href=../style.css>
-   <script defer src=https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js></script>
    <script defer src=../hamburger-menu.js></script>
    <script defer src=../app.js></script>
-   <script>globalThis.onerror = () => document.body.style.background = 'pink';</script>
+   <script>globalThis.onerror = () => globalThis.document.body.style.background = 'pink';</script>
 </head>
 <body>
 

diff --git a/docs/multipage/products/index.html b/docs/multipage/products/index.html
@@ -12,13 +12,12 @@
    <meta name=description content="Products page with a mobile-friendly hamburger drop-down menu">
    <title>HamburgerMenu &#9776; Multipage</title>
    <link rel=icon       href=https://centerkey.com/graphics/bookmark.png>
-   <link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.3/css/all.min.css>
+   <link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4/css/all.min.css>
    <link rel=stylesheet href=../../hamburger-menu.css>
    <link rel=stylesheet href=../../style.css>
-   <script defer src=https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js></script>
    <script defer src=../../hamburger-menu.js></script>
    <script defer src=../../app.js></script>
-   <script>globalThis.onerror = () => document.body.style.background = 'pink';</script>
+   <script>globalThis.onerror = () => globalThis.document.body.style.background = 'pink';</script>
 </head>
 <body>
 

diff --git a/docs/multipage/products/x3000.html b/docs/multipage/products/x3000.html
@@ -12,13 +12,12 @@
    <meta name=description content="X-3000 product page with a mobile-friendly hamburger drop-down menu">
    <title>HamburgerMenu &#9776; Multipage</title>
    <link rel=icon       href=https://centerkey.com/graphics/bookmark.png>
-   <link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.3/css/all.min.css>
+   <link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4/css/all.min.css>
    <link rel=stylesheet href=../../hamburger-menu.css>
    <link rel=stylesheet href=../../style.css>
-   <script defer src=https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js></script>
    <script defer src=../../hamburger-menu.js></script>
    <script defer src=../../app.js></script>
-   <script>globalThis.onerror = () => document.body.style.background = 'pink';</script>
+   <script>globalThis.onerror = () => globalThis.document.body.style.background = 'pink';</script>
 </head>
 <body>
 

diff --git a/docs/multipage/products/x3200.html b/docs/multipage/products/x3200.html
@@ -12,13 +12,12 @@
    <meta name=description content="X-3200 product page with a mobile-friendly hamburger drop-down menu">
    <title>HamburgerMenu &#9776; Multipage</title>
    <link rel=icon       href=https://centerkey.com/graphics/bookmark.png>
-   <link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.3/css/all.min.css>
+   <link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4/css/all.min.css>
    <link rel=stylesheet href=../../hamburger-menu.css>
    <link rel=stylesheet href=../../style.css>
-   <script defer src=https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js></script>
    <script defer src=../../hamburger-menu.js></script>
    <script defer src=../../app.js></script>
-   <script>globalThis.onerror = () => document.body.style.background = 'pink';</script>
+   <script>globalThis.onerror = () => globalThis.document.body.style.background = 'pink';</script>
 </head>
 <body>
 

diff --git a/docs/multipage/support.html b/docs/multipage/support.html
@@ -12,13 +12,12 @@
    <meta name=description content="Support page with a mobile-friendly hamburger drop-down menu">
    <title>HamburgerMenu &#9776; Multipage</title>
    <link rel=icon       href=https://centerkey.com/graphics/bookmark.png>
-   <link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.3/css/all.min.css>
+   <link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4/css/all.min.css>
    <link rel=stylesheet href=../hamburger-menu.css>
    <link rel=stylesheet href=../style.css>
-   <script defer src=https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js></script>
    <script defer src=../hamburger-menu.js></script>
    <script defer src=../app.js></script>
-   <script>globalThis.onerror = () => document.body.style.background = 'pink';</script>
+   <script>globalThis.onerror = () => globalThis.document.body.style.background = 'pink';</script>
 </head>
 <body>
 

diff --git a/docs/single-page-app/index.html b/docs/single-page-app/index.html
@@ -12,13 +12,12 @@
    <meta name=description content="Single-page web app with a mobile-friendly hamburger drop-down menu">
    <title>HamburgerMenu &#9776; Single-Page Web App</title>
    <link rel=icon       href=https://centerkey.com/graphics/bookmark.png>
-   <link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.3/css/all.min.css>
+   <link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4/css/all.min.css>
    <link rel=stylesheet href=../hamburger-menu.css>
    <link rel=stylesheet href=../style.css>
-   <script defer src=https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js></script>
    <script defer src=../hamburger-menu.js></script>
    <script defer src=../app.js></script>
-   <script>globalThis.onerror = () => document.body.style.background = 'pink';</script>
+   <script>globalThis.onerror = () => globalThis.document.body.style.background = 'pink';</script>
 </head>
 <body class=single-page-app>