[Summary view] [Print] [Text view]

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