585 lines
20 KiB
JavaScript
585 lines
20 KiB
JavaScript
;(function ($, document, window) {
|
|
var
|
|
// default settings object.
|
|
defaults = {
|
|
label: 'MENU',
|
|
duplicate: true,
|
|
duration: 200,
|
|
easingOpen: 'swing',
|
|
easingClose: 'swing',
|
|
closedSymbol: '►',
|
|
openedSymbol: '▼',
|
|
prependTo: 'body',
|
|
appendTo: '',
|
|
parentTag: 'a',
|
|
closeOnClick: false,
|
|
allowParentLinks: false,
|
|
nestedParentLinks: true,
|
|
showChildren: false,
|
|
removeIds: true,
|
|
removeClasses: false,
|
|
removeStyles: false,
|
|
brand: '',
|
|
animations: 'jquery',
|
|
init: function () {},
|
|
beforeOpen: function () {},
|
|
beforeClose: function () {},
|
|
afterOpen: function () {},
|
|
afterClose: function () {}
|
|
},
|
|
mobileMenu = 'slicknav',
|
|
prefix = 'slicknav',
|
|
|
|
Keyboard = {
|
|
DOWN: 40,
|
|
ENTER: 13,
|
|
ESCAPE: 27,
|
|
LEFT: 37,
|
|
RIGHT: 39,
|
|
SPACE: 32,
|
|
TAB: 9,
|
|
UP: 38,
|
|
};
|
|
|
|
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);
|
|
|
|
// Don't remove IDs by default if duplicate is false
|
|
if (!this.settings.duplicate && !options.hasOwnProperty("removeIds")) {
|
|
this.settings.removeIds = false;
|
|
}
|
|
|
|
this._defaults = defaults;
|
|
this._name = mobileMenu;
|
|
|
|
this.init();
|
|
}
|
|
|
|
Plugin.prototype.init = function () {
|
|
var $this = this,
|
|
menu = $(this.element),
|
|
settings = this.settings,
|
|
iconClass,
|
|
menuBar;
|
|
|
|
// clone menu if needed
|
|
if (settings.duplicate) {
|
|
$this.mobileNav = menu.clone();
|
|
} else {
|
|
$this.mobileNav = menu;
|
|
}
|
|
|
|
// remove IDs if set
|
|
if (settings.removeIds) {
|
|
$this.mobileNav.removeAttr('id');
|
|
$this.mobileNav.find('*').each(function (i, e) {
|
|
$(e).removeAttr('id');
|
|
});
|
|
}
|
|
|
|
// remove classes if set
|
|
if (settings.removeClasses) {
|
|
$this.mobileNav.removeAttr('class');
|
|
$this.mobileNav.find('*').each(function (i, e) {
|
|
$(e).removeAttr('class');
|
|
});
|
|
}
|
|
|
|
// remove styles if set
|
|
if (settings.removeStyles) {
|
|
$this.mobileNav.removeAttr('style');
|
|
$this.mobileNav.find('*').each(function (i, e) {
|
|
$(e).removeAttr('style');
|
|
});
|
|
}
|
|
|
|
// styling class for the button
|
|
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');
|
|
menuBar = $('<div class="' + prefix + '_menu"></div>');
|
|
if (settings.brand !== '') {
|
|
var brand = $('<div class="' + prefix + '_brand">'+settings.brand+'</div>');
|
|
$(menuBar).append(brand);
|
|
}
|
|
$this.btn = $(
|
|
['<' + settings.parentTag + ' aria-haspopup="true" role="button" 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>',
|
|
'</' + settings.parentTag + '>'
|
|
].join('')
|
|
);
|
|
$(menuBar).append($this.btn);
|
|
if(settings.appendTo !== '') {
|
|
$(settings.appendTo).append(menuBar);
|
|
} else {
|
|
$(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),
|
|
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
|
|
// check for anchors
|
|
|
|
var a = item.contents(),
|
|
containsAnchor = false,
|
|
nodes = [];
|
|
|
|
$(a).each(function () {
|
|
if (!$(this).is('ul')) {
|
|
nodes.push(this);
|
|
} else {
|
|
return false;
|
|
}
|
|
|
|
if($(this).is("a")) {
|
|
containsAnchor = true;
|
|
}
|
|
});
|
|
|
|
var wrapElement = $(
|
|
'<' + settings.parentTag + ' role="menuitem" aria-haspopup="true" tabindex="-1" class="' + prefix + '_item"/>'
|
|
);
|
|
|
|
// wrap item text with tag and add classes unless we are separating parent links
|
|
if ((!settings.allowParentLinks || settings.nestedParentLinks) || !containsAnchor) {
|
|
var $wrap = $(nodes).wrapAll(wrapElement).parent();
|
|
$wrap.addClass(prefix+'_row');
|
|
} else
|
|
$(nodes).wrapAll('<span class="'+prefix+'_parent-link '+prefix+'_row"/>').parent();
|
|
|
|
if (!settings.showChildren) {
|
|
item.addClass(prefix+'_collapsed');
|
|
} else {
|
|
item.addClass(prefix+'_open');
|
|
}
|
|
|
|
item.addClass(prefix+'_parent');
|
|
|
|
// create parent arrow. wrap with link if parent links and separating
|
|
var arrowElement = $('<span class="'+prefix+'_arrow">'+(settings.showChildren?settings.openedSymbol:settings.closedSymbol)+'</span>');
|
|
|
|
if (settings.allowParentLinks && !settings.nestedParentLinks && containsAnchor)
|
|
arrowElement = arrowElement.wrap(wrapElement).parent();
|
|
|
|
//append arrow
|
|
$(nodes).last().after(arrowElement);
|
|
|
|
|
|
} else if ( item.children().length === 0) {
|
|
item.addClass(prefix+'_txtnode');
|
|
}
|
|
|
|
// accessibility for links
|
|
item.children('a').attr('role', 'menuitem').click(function(event){
|
|
//Ensure that it's not a parent
|
|
if (settings.closeOnClick && !$(event.target).parent().closest('li').hasClass(prefix+'_parent')) {
|
|
//Emulate menu close if set
|
|
$($this.btn).click();
|
|
}
|
|
});
|
|
|
|
//also close on click if parent links are set
|
|
if (settings.closeOnClick && settings.allowParentLinks) {
|
|
item.children('a').children('a').click(function (event) {
|
|
//Emulate menu close
|
|
$($this.btn).click();
|
|
});
|
|
|
|
item.find('.'+prefix+'_parent-link a:not(.'+prefix+'_item)').click(function(event){
|
|
//Emulate menu close
|
|
$($this.btn).click();
|
|
});
|
|
}
|
|
});
|
|
|
|
// structure is in place, now hide appropriate items
|
|
$(items).each(function () {
|
|
var data = $(this).data('menu');
|
|
if (!settings.showChildren){
|
|
$this._visibilityToggle(data.children, null, false, null, true);
|
|
}
|
|
});
|
|
|
|
// finally toggle entire menu
|
|
$this._visibilityToggle($this.mobileNav, null, 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 keyboard events on menu button and menu parents
|
|
$($this.btn).keydown(function (e) {
|
|
var ev = e || event;
|
|
|
|
switch(ev.keyCode) {
|
|
case Keyboard.ENTER:
|
|
case Keyboard.SPACE:
|
|
case Keyboard.DOWN:
|
|
e.preventDefault();
|
|
if (ev.keyCode !== Keyboard.DOWN || !$($this.btn).hasClass(prefix+'_open')){
|
|
$this._menuToggle();
|
|
}
|
|
|
|
$($this.btn).next().find('[role="menuitem"]').first().focus();
|
|
break;
|
|
}
|
|
|
|
|
|
});
|
|
|
|
$this.mobileNav.on('keydown', '.'+prefix+'_item', function(e) {
|
|
var ev = e || event;
|
|
|
|
switch(ev.keyCode) {
|
|
case Keyboard.ENTER:
|
|
e.preventDefault();
|
|
$this._itemClick($(e.target));
|
|
break;
|
|
case Keyboard.RIGHT:
|
|
e.preventDefault();
|
|
if ($(e.target).parent().hasClass(prefix+'_collapsed')) {
|
|
$this._itemClick($(e.target));
|
|
}
|
|
$(e.target).next().find('[role="menuitem"]').first().focus();
|
|
break;
|
|
}
|
|
});
|
|
|
|
$this.mobileNav.on('keydown', '[role="menuitem"]', function(e) {
|
|
var ev = e || event;
|
|
|
|
switch(ev.keyCode){
|
|
case Keyboard.DOWN:
|
|
e.preventDefault();
|
|
var allItems = $(e.target).parent().parent().children().children('[role="menuitem"]:visible');
|
|
var idx = allItems.index( e.target );
|
|
var nextIdx = idx + 1;
|
|
if (allItems.length <= nextIdx) {
|
|
nextIdx = 0;
|
|
}
|
|
var next = allItems.eq( nextIdx );
|
|
next.focus();
|
|
break;
|
|
case Keyboard.UP:
|
|
e.preventDefault();
|
|
var allItems = $(e.target).parent().parent().children().children('[role="menuitem"]:visible');
|
|
var idx = allItems.index( e.target );
|
|
var next = allItems.eq( idx - 1 );
|
|
next.focus();
|
|
break;
|
|
case Keyboard.LEFT:
|
|
e.preventDefault();
|
|
if ($(e.target).parent().parent().parent().hasClass(prefix+'_open')) {
|
|
var parent = $(e.target).parent().parent().prev();
|
|
parent.focus();
|
|
$this._itemClick(parent);
|
|
} else if ($(e.target).parent().parent().hasClass(prefix+'_nav')){
|
|
$this._menuToggle();
|
|
$($this.btn).focus();
|
|
}
|
|
break;
|
|
case Keyboard.ESCAPE:
|
|
e.preventDefault();
|
|
$this._menuToggle();
|
|
$($this.btn).focus();
|
|
break;
|
|
}
|
|
});
|
|
|
|
// allow links clickable within parent tags if set
|
|
if (settings.allowParentLinks && settings.nestedParentLinks) {
|
|
$('.'+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, btn.parent(), 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();
|
|
//Separated parent link structure
|
|
if (data.parent.hasClass(prefix+'_parent-link')) {
|
|
data.parent = el.parent().parent();
|
|
data.ul = el.parent().next('ul');
|
|
}
|
|
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, data.parent, 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, data.parent, true, el);
|
|
}
|
|
};
|
|
|
|
// toggle actual visibility and accessibility tags
|
|
Plugin.prototype._visibilityToggle = function(el, parent, animate, trigger, init) {
|
|
var $this = this;
|
|
var settings = $this.settings;
|
|
var items = $this._getActionItems(el);
|
|
var duration = 0;
|
|
if (animate) {
|
|
duration = settings.duration;
|
|
}
|
|
|
|
function afterOpen(trigger, parent) {
|
|
$(trigger).removeClass(prefix+'_animating');
|
|
$(parent).removeClass(prefix+'_animating');
|
|
|
|
//Fire afterOpen callback
|
|
if (!init) {
|
|
settings.afterOpen(trigger);
|
|
}
|
|
}
|
|
|
|
function afterClose(trigger, parent) {
|
|
el.attr('aria-hidden','true');
|
|
items.attr('tabindex', '-1');
|
|
$this._setVisAttr(el, true);
|
|
el.hide(); //jQuery 1.7 bug fix
|
|
|
|
$(trigger).removeClass(prefix+'_animating');
|
|
$(parent).removeClass(prefix+'_animating');
|
|
|
|
//Fire init or afterClose callback
|
|
if (!init){
|
|
settings.afterClose(trigger);
|
|
} else if (trigger == 'init'){
|
|
settings.init();
|
|
}
|
|
}
|
|
|
|
if (el.hasClass(prefix+'_hidden')) {
|
|
el.removeClass(prefix+'_hidden');
|
|
//Fire beforeOpen callback
|
|
if (!init) {
|
|
settings.beforeOpen(trigger);
|
|
}
|
|
if (settings.animations === 'jquery') {
|
|
el.stop(true,true).slideDown(duration, settings.easingOpen, function(){
|
|
afterOpen(trigger, parent);
|
|
});
|
|
} else if(settings.animations === 'velocity') {
|
|
el.velocity("finish").velocity("slideDown", {
|
|
duration: duration,
|
|
easing: settings.easingOpen,
|
|
complete: function() {
|
|
afterOpen(trigger, parent);
|
|
}
|
|
});
|
|
}
|
|
el.attr('aria-hidden','false');
|
|
items.attr('tabindex', '0');
|
|
$this._setVisAttr(el, false);
|
|
} else {
|
|
el.addClass(prefix+'_hidden');
|
|
|
|
//Fire init or beforeClose callback
|
|
if (!init){
|
|
settings.beforeClose(trigger);
|
|
}
|
|
|
|
if (settings.animations === 'jquery') {
|
|
el.stop(true,true).slideUp(duration, this.settings.easingClose, function() {
|
|
afterClose(trigger, parent)
|
|
});
|
|
} else if (settings.animations === 'velocity') {
|
|
|
|
el.velocity("finish").velocity("slideUp", {
|
|
duration: duration,
|
|
easing: settings.easingClose,
|
|
complete: function() {
|
|
afterClose(trigger, parent);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
|
|
// 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.find('a');
|
|
data.links = anchors.add(items.find('.'+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(){
|
|
var $this = this;
|
|
$this._menuToggle();
|
|
};
|
|
|
|
Plugin.prototype.open = function(){
|
|
var $this = this;
|
|
if ($this.btn.hasClass(prefix+'_collapsed')) {
|
|
$this._menuToggle();
|
|
}
|
|
};
|
|
|
|
Plugin.prototype.close = function(){
|
|
var $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;
|
|
}
|
|
};
|
|
}(jQuery, document, window));
|