scripts/menu.js

   1 /**
   2  * Menu module.
   3  */
   4 const Menu = (function () {
   5     // Elements
   6     var buttons = document.querySelectorAll('#menu button');
   7     var sections = document.querySelectorAll('body>div:not(#menu)');
   8
   9     // Custom events
  10     const displayEvent = new Event("display");
  11
  12     /**
  13      * Event listener helper for display event.
  14      *
  15      * @param string sSection
  16      * @param string fCallback
  17      */
  18     function ondisplay (sSection, fCallback) {
  19         for (var i = 0; i < sections.length; i++) {
  20             if (sSection.toLowerCase() == sections[i].id) {
  21                 sections[i].addEventListener('display', (event) => {
  22                     fCallback(event.target, event);
  23                 });
  24                 break;
  25             }
  26         }
  27
  28     }
  29
  30     /**
  31      * Display page section.
  32      *
  33      * @param string sName
  34      */
  35     function displaySection (sName) {
  36         for (var i = 0; i < sections.length; i++) {
  37             var isSelected = sName == sections[i].id;
  38             sections[i].classList.remove('selected');
  39             if (isSelected) {
  40                 sections[i].classList.add('selected');
  41                 sections[i].dispatchEvent(displayEvent);
  42             }
  43         }
  44     }
  45
  46     /**
  47      * Handle menu button's click event.
  48      *
  49      * @param Object btn
  50      */
  51     function onButtonClick (btn) {
  52         for (var i = 0; i < buttons.length; i++) {
  53             buttons[i].classList.remove('selected');
  54         }
  55         btn.classList.add('selected');
  56         displaySection(btn.innerText.toLowerCase());
  57     }
  58
  59     // Add 'click' event listener on all menu buttons
  60     for (var i = 0; i < buttons.length; i++) {
  61         buttons[i].addEventListener('click', (event) => {
  62             onButtonClick(event.target);
  63         });
  64     }
  65
  66     // Exposed functions
  67     return {
  68         ondisplay,
  69     };
  70 });