Club Drupal

/*!

        SlickNav Responsive Mobile Menu

        (c) 2014 Josh Cope

        licensed under MIT

*/

;(function ($, document, window) {

  var

    // default settings object.

    defaults = {

      label: 'MENU',

      duplicate: true,

      duration: 200,

      easingOpen: 'swing',

      easingClose: 'swing',

      closedSymbol: '►',

      openedSymbol: '▼',

      prependTo: 'body',

      parentTag: 'a',

      closeOnClick: false,

      allowParentLinks: false,

      init: function () {

      },

      open: function () {

      },

      close: function () {

      }

    },

    mobileMenu = 'slicknav',

    prefix = 'slicknav';

  function Plugin(element, options) {

    this.element = element;

    // jQuery has an extend method which merges the contents of two or

    // more objects, storing the result in the first object. The first object

    // is generally empty as we don't want to alter the default options for

    // future instances of the plugin

    this.settings = $.extend({}, defaults, options);

    this._defaults = defaults;

    this._name = mobileMenu;

    this.init();

  }

  Plugin.prototype.init = function () {

    var $this = this;

    var menu = $(this.element);

    var settings = this.settings;

    // clone menu if needed

    if (settings.duplicate) {

      $this.mobileNav = menu.clone();

      //remove ids from clone to prevent css issues

      $this.mobileNav.removeAttr('id');

      $this.mobileNav.find('*').each(function (i, e) {

        $(e).removeAttr('id');

      });

    }

    else {

      $this.mobileNav = menu;

    }

    // styling class for the button

    var iconClass = prefix + '_icon';

    if (settings.label == '') {

      iconClass += ' ' + prefix + '_no-text';

    }

    if (settings.parentTag == 'a') {

      settings.parentTag = 'a href="#"';

    }

    // create menu bar

    $this.mobileNav.attr('class', prefix + '_nav');

    var menuBar = $('<div class="' + prefix + '_menu"></div>');

    $this.btn = $('<' + settings.parentTag + ' aria-haspopup="true" tabindex="0" class="' + prefix + '_btn ' + prefix + '_collapsed"><span class="' + prefix + '_menutxt">' + settings.label + '</span><span class="' + iconClass + '"><span class="' + prefix + '_icon-bar"></span><span class="' + prefix + '_icon-bar"></span><span class="' + prefix + '_icon-bar"></span></span></a>');

    $(menuBar).append($this.btn);

    $(settings.prependTo).prepend(menuBar);

    menuBar.append($this.mobileNav);

    // iterate over structure adding additional structure

    var items = $this.mobileNav.find('li');

    $(items).each(function () {

      var item = $(this);

      var data = {};

      data.children = item.children('ul').attr('role', 'menu');

      item.data("menu", data);

      // if a list item has a nested menu

      if (data.children.length > 0) {

        // select all text before the child menu

        var a = item.contents();

        var nodes = [];

        $(a).each(function () {

          if (!$(this).is("ul")) {

            nodes.push(this);

          }

          else {

            return false;

          }

        });

        // wrap item text with tag and add classes

        var wrap = $(nodes).wrapAll('<' + settings.parentTag + ' role="menuitem" aria-haspopup="true" tabindex="-1" class="' + prefix + '_item"/>').parent();

        item.addClass(prefix + '_collapsed');

        item.addClass(prefix + '_parent');

        // create parent arrow

        $(nodes).last().after('<span class="' + prefix + '_arrow">' + settings.closedSymbol + '</span>');

      }

      else {

        if (item.children().length == 0) {

          item.addClass(prefix + '_txtnode');

        }

      }

      // accessibility for links

      item.children('a').attr('role', 'menuitem').click(function () {

        //Emulate menu close if set

        if (settings.closeOnClick) {

          $($this.btn).click();

        }

      });

    });

    // structure is in place, now hide appropriate items

    $(items).each(function () {

      var data = $(this).data("menu");

      $this._visibilityToggle(data.children, false, null, true);

    });

    // finally toggle entire menu

    $this._visibilityToggle($this.mobileNav, false, 'init', true);

    // accessibility for menu button

    $this.mobileNav.attr('role', 'menu');

    // outline prevention when using mouse

    $(document).mousedown(function () {

      $this._outlines(false);

    });

    $(document).keyup(function () {

      $this._outlines(true);

    });

    // menu button click

    $($this.btn).click(function (e) {

      e.preventDefault();

      $this._menuToggle();

    });

    // click on menu parent

    $this.mobileNav.on('click', '.' + prefix + '_item', function (e) {

      e.preventDefault();

      $this._itemClick($(this));

    });

    // check for enter key on menu button and menu parents

    $($this.btn).keydown(function (e) {

      var ev = e || event;

      if (ev.keyCode == 13) {

        e.preventDefault();

        $this._menuToggle();

      }

    });

    $this.mobileNav.on('keydown', '.' + prefix + '_item', function (e) {

      var ev = e || event;

      if (ev.keyCode == 13) {

        e.preventDefault();

        $this._itemClick($(e.target));

      }

    });

    // allow links clickable within parent tags if set

    if (settings.allowParentLinks) {

      $('.' + prefix + '_item a').click(function (e) {

        e.stopImmediatePropagation();

      });

    }

  };

  //toggle menu

  Plugin.prototype._menuToggle = function (el) {

    var $this = this;

    var btn = $this.btn;

    var mobileNav = $this.mobileNav;

    if (btn.hasClass(prefix + '_collapsed')) {

      btn.removeClass(prefix + '_collapsed');

      btn.addClass(prefix + '_open');

    }

    else {

      btn.removeClass(prefix + '_open');

      btn.addClass(prefix + '_collapsed');

    }

    btn.addClass(prefix + '_animating');

    $this._visibilityToggle(mobileNav, true, btn);

  };

  // toggle clicked items

  Plugin.prototype._itemClick = function (el) {

    var $this = this;

    var settings = $this.settings;

    var data = el.data("menu");

    if (!data) {

      data = {};

      data.arrow = el.children('.' + prefix + '_arrow');

      data.ul = el.next('ul');

      data.parent = el.parent();

      el.data("menu", data);

    }

    if (data.parent.hasClass(prefix + '_collapsed')) {

      data.arrow.html(settings.openedSymbol);

      data.parent.removeClass(prefix + '_collapsed');

      data.parent.addClass(prefix + '_open');

      data.parent.addClass(prefix + '_animating');

      $this._visibilityToggle(data.ul, true, el);

    }

    else {

      data.arrow.html(settings.closedSymbol);

      data.parent.addClass(prefix + '_collapsed');

      data.parent.removeClass(prefix + '_open');

      data.parent.addClass(prefix + '_animating');

      $this._visibilityToggle(data.ul, true, el);

    }

  };

  // toggle actual visibility and accessibility tags

  Plugin.prototype._visibilityToggle = function (el, animate, trigger, init) {

    var $this = this;

    var settings = $this.settings;

    var items = $this._getActionItems(el);

    var duration = 0;

    if (animate) {

      duration = settings.duration;

    }

    if (el.hasClass(prefix + '_hidden')) {

      el.removeClass(prefix + '_hidden');

      el.slideDown(duration, settings.easingOpen, function () {

        $(trigger).removeClass(prefix + '_animating');

        $(trigger).parent().removeClass(prefix + '_animating');

        //Fire open callback

        if (!init) {

          settings.open(trigger);

        }

      });

      el.attr('aria-hidden', 'false');

      items.attr('tabindex', '0');

      $this._setVisAttr(el, false);

    }

    else {

      el.addClass(prefix + '_hidden');

      el.slideUp(duration, this.settings.easingClose, function () {

        el.attr('aria-hidden', 'true');

        items.attr('tabindex', '-1');

        $this._setVisAttr(el, true);

        el.hide(); //jQuery 1.7 bug fix

        $(trigger).removeClass(prefix + '_animating');

        $(trigger).parent().removeClass(prefix + '_animating');

        //Fire init or close callback

        if (!init) {

          settings.close(trigger);

        }

        else {

          if (trigger == 'init') {

            settings.init();

          }

        }

      });

    }

  };

  // set attributes of element and children based on visibility

  Plugin.prototype._setVisAttr = function (el, hidden) {

    var $this = this;

    // select all parents that aren't hidden

    var nonHidden = el.children('li').children('ul').not('.' + prefix + '_hidden');

    // iterate over all items setting appropriate tags

    if (!hidden) {

      nonHidden.each(function () {

        var ul = $(this);

        ul.attr('aria-hidden', 'false');

        var items = $this._getActionItems(ul);

        items.attr('tabindex', '0');

        $this._setVisAttr(ul, hidden);

      });

    }

    else {

      nonHidden.each(function () {

        var ul = $(this);

        ul.attr('aria-hidden', 'true');

        var items = $this._getActionItems(ul);

        items.attr('tabindex', '-1');

        $this._setVisAttr(ul, hidden);

      });

    }

  };

  // get all 1st level items that are clickable

  Plugin.prototype._getActionItems = function (el) {

    var data = el.data("menu");

    if (!data) {

      data = {};

      var items = el.children('li');

      var anchors = items.children('a');

      data.links = anchors.add(items.children('.' + prefix + '_item'));

      el.data("menu", data);

    }

    return data.links;

  };

  Plugin.prototype._outlines = function (state) {

    if (!state) {

      $('.' + prefix + '_item, .' + prefix + '_btn').css('outline', 'none');

    }

    else {

      $('.' + prefix + '_item, .' + prefix + '_btn').css('outline', '');

    }

  };

  Plugin.prototype.toggle = function () {

    $this._menuToggle();

  };

  Plugin.prototype.open = function () {

    $this = this;

    if ($this.btn.hasClass(prefix + '_collapsed')) {

      $this._menuToggle();

    }

  };

  Plugin.prototype.close = function () {

    $this = this;

    if ($this.btn.hasClass(prefix + '_open')) {

      $this._menuToggle();

    }

  };

  $.fn[mobileMenu] = function (options) {

    var args = arguments;

    // Is the first parameter an object (options), or was omitted, instantiate

    // a new instance

    if (options === undefined || typeof options === 'object') {

      return this.each(function () {

        // Only allow the plugin to be instantiated once due to methods

        if (!$.data(this, 'plugin_' + mobileMenu)) {

          // if it has no instance, create a new one, pass options to our

          // plugin constructor, and store the plugin instance in the elements

          // jQuery data object.

          $.data(this, 'plugin_' + mobileMenu, new Plugin(this, options));

        }

      });

      // If is a string and doesn't start with an underscore or 'init'

      // function, treat this as a call to a public method.

    }

    else {

      if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {

        // Cache the method call to make it possible to return a value

        var returns;

        this.each(function () {

          var instance = $.data(this, 'plugin_' + mobileMenu);

          // Tests that there's already a plugin-instance and checks that the

          // requested public method exists

          if (instance instanceof Plugin && typeof instance[options] === 'function') {

            // Call the method of our plugin instance, and pass it the supplied

            // arguments.

            returns = instance[options].apply(instance, Array.prototype.slice.call(args, 1));

          }

        });

        // If the earlier cached method gives a value back return the value,

        // otherwise return this to preserve chainability.

        return returns !== undefined ? returns : this;

      }

    }

  };

}($jQueryAdminimal, document, window));

(function ($) {

  Drupal.admin = Drupal.admin || {};

  Drupal.admin.behaviors = Drupal.admin.behaviors || {};

// Create the responsive menu using SlickNav.

  Drupal.admin.behaviors.responsivemenu = function (context, settings, $adminMenu) {

    $('#admin-menu-menu-responsive').slicknav({

      label: Drupal.t('Menu'),

      prependTo: 'body',

      closedSymbol: '<i class="closed"></i>',

      openedSymbol: '<i class="open"></i>',

      allowParentLinks: true

    });

  };

// Create the responsive shortcuts dropdown.

  Drupal.admin.behaviors.responsiveshortcuts = function (context, settings, $adminMenu) {

    // Check if there are any shortucts to respondify.

    if (jQuery("div.toolbar-shortcuts ul.menu li").length) {

      // Create the dropdown base

      $('<select id="responsive-shortcuts-dropdown"/>').appendTo("#admin-menu-shortcuts-responsive div.toolbar-shortcuts");

      // Create default option "Select"

      $("<option />", {

        "selected": "selected",

        "class": "hide",

        "value": "",

        "text": Drupal.t('Shortcuts')

      }).appendTo("#admin-menu-shortcuts-responsive div.toolbar-shortcuts select");

      // Populate dropdown with menu items

      $("#admin-menu-shortcuts-responsive div.toolbar-shortcuts a").each(function () {

        var el = $(this);

        $("<option />", {

          "value": el.attr("href"),

          "text": el.text()

        }).appendTo("#admin-menu-shortcuts-responsive div.toolbar-shortcuts select");

      });

      // Redirect the user when selecting an option.

      $("#admin-menu-shortcuts-responsive div.toolbar-shortcuts select").change(function () {

        window.location = $(this).find("option:selected").val();

      });

      // Clean the mess.

      $('#admin-menu-shortcuts-responsive div.toolbar-shortcuts ul').remove();

      // Move the select box into the responsive menu.

      $("#admin-menu-shortcuts-responsive").prependTo(".slicknav_menu");

    }

    // Remove the edit shortcuts link from the DOM to avoid duble rendering.

    $('#admin-menu-shortcuts-responsive #edit-shortcuts').remove();

  };

})($jQueryAdminimal);