@excelwebzone/symfony-admin-ui/src/js/contextual_nav.js

Symfony Admin UI is a simple set of UI behaviors and components used with your [symfony-admin](https://github.com/excelwebzone/symfony-admin-bundle) application.

import $ from 'jquery';
import _ from 'underscore';
import bp from './breakpoints';

export default class ContextualNav {
  constructor() {
    this.initDomElements();
    this.render();
  }

  initDomElements() {
    this.$menu = $('.navigation-main');
  }

  bindEvents() {
    this.$menu.on('mouseover', '> ul > li', this.mouseOver);
    this.$menu.on('mouseout', '> ul > li', this.mouseOut);

    $(window).on('resize', () => _.debounce(this.render(), 100));
  }

  mouseOver() {
    $(this)
      .addClass('open')
      .siblings()
      .removeClass('open opening');

    if ($(this).find('ul').length === 0) {
      return;
    }

    $(this).addClass('opening');
  }

  mouseOut() {
    if ($(this).find('ul').length === 0) {
      return;
    }

    $(this)
      .addClass('closing')
      .removeClass('open opening closing');
  }

  render() {
    if (this.$menu.length === 0) {
      return;
    }

    const extraLiHide = parseInt(this.$menu.data('hideExtraLi')) || 0;

    let menuRect = this.$menu[0].getBoundingClientRect();
    let liTotalWidth = 0;
    let liCount = 0;

    this.$menu
      .children('ul')
      .children('li.navigation-morenav')
      .remove();

    this.$menu
      .children('ul')
      .children('li')
      .each(function(index) {
        $(this).removeAttr('style');
        liTotalWidth = liTotalWidth + $(this).outerWidth(true);
        liCount++;
      });

    let possibleLi = parseInt(menuRect.width / (liTotalWidth / liCount)) - 1;
    possibleLi = possibleLi - extraLiHide;

    // force at least one item
    if (possibleLi <= 0) {
      possibleLi = 1;
    }

    if (liCount > possibleLi) {
      const wrapper = this.createWrapperLI();
      for (let i = possibleLi; i < liCount; i++) {
        var currentLi = this.$menu
          .children('ul')
          .children('li')
          .eq(i);

        const clone = currentLi.clone();
        clone.children('ul').addClass('navigation-subnav');
        wrapper.children('ul').append(clone);
        currentLi.hide();
      }
    }

    const breakpoint = bp.getBreakpointSize();

    if (breakpoint !== 'lg') {
      _.each(this.$menu.find('.navigation-item-button'), (element) => {
        const id = _.now();
        $(element).next().prop('id', id).hide();

        $(element).off('click');
        $(element).on('click', () => {
          $(element).next().toggle();
          $(element).parent().toggleClass('is-expanded');
        });
      });
    } else {
      _.each(this.$menu.find('.navigation-item-button'), (element) => {
        $(element).next().css('display', '');
        $(element).parent().removeClass('is-expanded');
        $(element).off('click');
      });
    }
  }

  createWrapperLI() {
    this.$menu.children('ul').append('<li class="navigation-morenav"><a href="javascript:void(0)"><span class="title"><i class="ledger-icons ledger-icon-more"></i></span></a><ul></ul></li>');

    return this.$menu.children('ul').children('li.navigation-morenav');
  }
}