[Summary view] [Print] [Text view]

   1  (function () {
   2    'use strict';
   3  
   4    /**
   5     * @copyright  (C) 2019 Open Source Matters, Inc. <https://www.joomla.org>
   6     * @license    GNU General Public License version 2 or later; see LICENSE.txt
   7     */
   8    if (!Joomla) {
   9      throw new Error('Joomla API is not initialized');
  10    }
  11  
  12    var getCookie = function getCookie() {
  13      return document.cookie.length && document.cookie.split('; ').find(function (row) {
  14        return row.startsWith('atumSidebarState=');
  15      }).split('=')[1];
  16    };
  17  
  18    var mobile = window.matchMedia('(max-width: 992px)');
  19    var small = window.matchMedia('(max-width: 575.98px)');
  20    var tablet = window.matchMedia('(min-width: 576px) and (max-width:991.98px)');
  21    var menu = document.querySelector('.sidebar-menu');
  22    var sidebarNav = [].slice.call(document.querySelectorAll('.sidebar-nav'));
  23    var subhead = document.querySelector('#subhead-container');
  24    var wrapper = document.querySelector('.wrapper');
  25    var sidebarWrapper = document.querySelector('.sidebar-wrapper');
  26    var logo = document.querySelector('.logo');
  27    var isLogin = document.querySelector('body.com_login');
  28    var menuToggleIcon = document.getElementById('menu-collapse-icon');
  29    var navDropDownIcon = document.querySelectorAll('.nav-item.dropdown span[class*="icon-angle-"]');
  30    var headerTitleArea = document.querySelector('#header .header-title');
  31    var headerItemsArea = document.querySelector('#header .header-items');
  32    var headerExpandedItems = [].slice.call(headerItemsArea.children).filter(function (element) {
  33      return element.classList.contains('header-item');
  34    });
  35    var headerCondensedItemContainer = document.getElementById('header-more-items');
  36    var headerCondensedItems = [].slice.call(headerCondensedItemContainer.querySelectorAll('.header-dd-item'));
  37    var headerTitleWidth = headerTitleArea.getBoundingClientRect().width;
  38    var headerItemWidths = headerExpandedItems.map(function (element) {
  39      return element.getBoundingClientRect().width;
  40    }); // Get the ellipsis button width
  41  
  42    headerCondensedItemContainer.classList.remove('d-none'); // eslint-disable-next-line no-unused-expressions
  43  
  44    headerCondensedItemContainer.paddingTop;
  45    var ellipsisWidth = headerCondensedItemContainer.getBoundingClientRect().width;
  46    headerCondensedItemContainer.classList.add('d-none');
  47    /**
  48     * Shrink or extend the logo, depending on sidebar
  49     *
  50     * @param {string} [change] is the sidebar 'open' or 'closed'
  51     *
  52     * @since   4.0.0
  53     */
  54  
  55    function changeLogo(change) {
  56      if (!logo || isLogin) {
  57        return;
  58      }
  59  
  60      if (small.matches) {
  61        logo.classList.add('small');
  62        return;
  63      }
  64  
  65      var state = change || getCookie();
  66  
  67      if (state === 'closed') {
  68        logo.classList.add('small');
  69      } else {
  70        logo.classList.remove('small');
  71      }
  72  
  73      if (menuToggleIcon) {
  74        if (wrapper.classList.contains('closed')) {
  75          menuToggleIcon.classList.add('icon-toggle-on');
  76          menuToggleIcon.classList.remove('icon-toggle-off');
  77        } else {
  78          menuToggleIcon.classList.remove('icon-toggle-on');
  79          menuToggleIcon.classList.add('icon-toggle-off');
  80        }
  81      }
  82    }
  83    /**
  84     * toggle arrow icon between down and up depending on position of the nav header
  85     *
  86     * @param {string} [positionTop] set if the nav header positioned to the 'top' otherwise 'bottom'
  87     *
  88     * @since   4.0.0
  89     */
  90  
  91  
  92    function toggleArrowIcon(positionTop) {
  93      var remIcon = positionTop ? 'icon-angle-up' : 'icon-angle-down';
  94      var addIcon = positionTop ? 'icon-angle-down' : 'icon-angle-up';
  95  
  96      if (!navDropDownIcon) {
  97        return;
  98      }
  99  
 100      navDropDownIcon.forEach(function (item) {
 101        item.classList.remove(remIcon);
 102        item.classList.add(addIcon);
 103      });
 104    }
 105    /**
 106     *
 107     * @param {[]} arr
 108     * @returns {Number}
 109     */
 110  
 111  
 112    var getSum = function getSum(arr) {
 113      return arr.reduce(function (a, b) {
 114        return Number(a) + Number(b);
 115      }, 0);
 116    };
 117    /**
 118     * put elements that are too much in the header in a dropdown
 119     *
 120     * @since   4.0.0
 121     */
 122  
 123  
 124    function headerItemsInDropdown() {
 125      headerTitleWidth = headerTitleArea.getBoundingClientRect().width;
 126      var minViable = headerTitleWidth + ellipsisWidth;
 127      var totalHeaderItemWidths = 50 + getSum(headerItemWidths);
 128  
 129      if (headerTitleWidth + totalHeaderItemWidths < document.body.getBoundingClientRect().width) {
 130        headerExpandedItems.map(function (element) {
 131          return element.classList.remove('d-none');
 132        });
 133        headerCondensedItemContainer.classList.add('d-none');
 134      } else {
 135        headerCondensedItemContainer.classList.remove('d-none');
 136        headerCondensedItems.map(function (el) {
 137          return el.classList.add('d-none');
 138        });
 139        headerCondensedItemContainer.classList.remove('d-none');
 140        headerItemWidths.forEach(function (width, index) {
 141          var tempArr = headerItemWidths.slice(index, headerItemWidths.length);
 142  
 143          if (minViable + getSum(tempArr) < document.body.getBoundingClientRect().width) {
 144            return;
 145          }
 146  
 147          if (headerExpandedItems[index].children && !headerExpandedItems[index].children[0].classList.contains('dropdown')) {
 148            headerExpandedItems[index].classList.add('d-none');
 149            headerCondensedItems[index].classList.remove('d-none');
 150          }
 151        });
 152      }
 153    }
 154    /**
 155     * Change appearance for mobile devices
 156     *
 157     * @since   4.0.0
 158     */
 159  
 160  
 161    function setMobile() {
 162      if (small.matches) {
 163        toggleArrowIcon();
 164  
 165        if (menu) {
 166          wrapper.classList.remove('closed');
 167        }
 168      } else {
 169        toggleArrowIcon('top');
 170      }
 171  
 172      if (tablet.matches && menu) {
 173        wrapper.classList.add('closed');
 174      }
 175  
 176      if (small.matches) {
 177        sidebarNav.map(function (el) {
 178          return el.classList.add('collapse');
 179        });
 180        if (subhead) subhead.classList.add('collapse');
 181        if (sidebarWrapper) sidebarWrapper.classList.add('collapse');
 182      } else {
 183        sidebarNav.map(function (el) {
 184          return el.classList.remove('collapse');
 185        });
 186        if (subhead) subhead.classList.remove('collapse');
 187        if (sidebarWrapper) sidebarWrapper.classList.remove('collapse');
 188      }
 189  
 190      changeLogo('closed');
 191    }
 192    /**
 193     * Change appearance for mobile devices
 194     *
 195     * @since   4.0.0
 196     */
 197  
 198  
 199    function setDesktop() {
 200      if (!sidebarWrapper) {
 201        changeLogo('closed');
 202      } else {
 203        changeLogo(getCookie() || 'open');
 204        sidebarWrapper.classList.remove('collapse');
 205      }
 206  
 207      sidebarNav.map(function (el) {
 208        return el.classList.remove('collapse');
 209      });
 210      if (subhead) subhead.classList.remove('collapse');
 211      toggleArrowIcon('top');
 212    }
 213    /**
 214     * React on resizing window
 215     *
 216     * @since   4.0.0
 217     */
 218  
 219  
 220    function reactToResize() {
 221      window.addEventListener('resize', function () {
 222        if (mobile.matches) {
 223          setMobile();
 224        } else {
 225          setDesktop();
 226        }
 227  
 228        headerItemsInDropdown();
 229      });
 230    }
 231    /**
 232     * Subhead gets white background when user scrolls down
 233     *
 234     * @since   4.0.0
 235     */
 236  
 237  
 238    function subheadScrolling() {
 239      if (subhead) {
 240        document.addEventListener('scroll', function () {
 241          if (window.scrollY > 0) {
 242            subhead.classList.add('shadow-sm');
 243          } else {
 244            subhead.classList.remove('shadow-sm');
 245          }
 246        });
 247      }
 248    } // Initialize
 249  
 250  
 251    headerItemsInDropdown();
 252    reactToResize();
 253    subheadScrolling();
 254  
 255    if (small.matches) {
 256      changeLogo('closed');
 257  
 258      if (subhead) {
 259        subhead.classList.remove('show');
 260        subhead.classList.add('collapse');
 261      }
 262    }
 263  
 264    if (!navigator.cookieEnabled) {
 265      Joomla.renderMessages({
 266        error: [Joomla.Text._('JGLOBAL_WARNCOOKIES')]
 267      }, undefined, false, 6000);
 268    }
 269  
 270    window.addEventListener('joomla:menu-toggle', function (event) {
 271      headerItemsInDropdown();
 272      document.cookie = "atumSidebarState=" + event.detail + ";";
 273  
 274      if (mobile.matches) {
 275        changeLogo('closed');
 276      } else {
 277        changeLogo(event.detail);
 278      }
 279    });
 280  
 281  })();