From f6b2fc28103b4c7904bb3722133ab2f8bc57418d Mon Sep 17 00:00:00 2001 From: slackero Date: Thu, 21 Jan 2021 20:23:25 +0300 Subject: [PATCH 1/4] Optimise formatting --- jquery.slicknav.js | 140 ++++++++++++++++++++++----------------------- 1 file changed, 68 insertions(+), 72 deletions(-) diff --git a/jquery.slicknav.js b/jquery.slicknav.js index bba1293..13e6c7e 100644 --- a/jquery.slicknav.js +++ b/jquery.slicknav.js @@ -1,45 +1,44 @@ ;(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, - }; + var 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; @@ -52,7 +51,7 @@ // Don't remove IDs by default if duplicate is false if (!this.settings.duplicate && !options.hasOwnProperty("removeIds")) { - this.settings.removeIds = false; + this.settings.removeIds = false; } this._defaults = defaults; @@ -69,18 +68,14 @@ menuBar; // clone menu if needed - if (settings.duplicate) { - $this.mobileNav = menu.clone(); - } else { - $this.mobileNav = menu; - } + $this.mobileNav = settings.duplicate ? menu.clone() : menu; // remove IDs if set if (settings.removeIds) { - $this.mobileNav.removeAttr('id'); - $this.mobileNav.find('*').each(function (i, e) { - $(e).removeAttr('id'); - }); + $this.mobileNav.removeAttr('id'); + $this.mobileNav.find('*').each(function (i, e) { + $(e).removeAttr('id'); + }); } // remove classes if set @@ -106,7 +101,7 @@ iconClass += ' ' + prefix + '_no-text'; } - if (settings.parentTag == 'a') { + if (settings.parentTag === 'a') { settings.parentTag = 'a href="#"'; } @@ -174,8 +169,9 @@ if ((!settings.allowParentLinks || settings.nestedParentLinks) || !containsAnchor) { var $wrap = $(nodes).wrapAll(wrapElement).parent(); $wrap.addClass(prefix+'_row'); - } else - $(nodes).wrapAll('').parent(); + } else { + $(nodes).wrapAll('').parent(); + } if (!settings.showChildren) { item.addClass(prefix+'_collapsed'); @@ -188,34 +184,34 @@ // create parent arrow. wrap with link if parent links and separating var arrowElement = $(''+(settings.showChildren?settings.openedSymbol:settings.closedSymbol)+''); - if (settings.allowParentLinks && !settings.nestedParentLinks && containsAnchor) + 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'); + 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(); - } + //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) { + item.children('a').children('a').click(function () { //Emulate menu close $($this.btn).click(); }); - item.find('.'+prefix+'_parent-link a:not(.'+prefix+'_item)').click(function(event){ + item.find('.'+prefix+'_parent-link a:not(.'+prefix+'_item)').click(function(){ //Emulate menu close $($this.btn).click(); }); @@ -269,12 +265,12 @@ 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) { @@ -302,7 +298,7 @@ case Keyboard.DOWN: e.preventDefault(); var allItems = $(e.target).parent().parent().children().children('[role="menuitem"]:visible'); - var idx = allItems.index( e.target ); + var idx = allItems.index(e.target); var nextIdx = idx + 1; if (allItems.length <= nextIdx) { nextIdx = 0; @@ -313,8 +309,8 @@ 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 ); + var idx = allItems.index(e.target); + var next = allItems.eq(idx - 1); next.focus(); break; case Keyboard.LEFT: @@ -332,14 +328,14 @@ e.preventDefault(); $this._menuToggle(); $($this.btn).focus(); - break; + break; } }); // allow links clickable within parent tags if set if (settings.allowParentLinks && settings.nestedParentLinks) { $('.'+prefix+'_item a').click(function(e){ - e.stopImmediatePropagation(); + e.stopImmediatePropagation(); }); } }; @@ -402,7 +398,7 @@ if (animate) { duration = settings.duration; } - + function afterOpen(trigger, parent) { $(trigger).removeClass(prefix+'_animating'); $(parent).removeClass(prefix+'_animating'); @@ -412,7 +408,7 @@ settings.afterOpen(trigger); } } - + function afterClose(trigger, parent) { el.attr('aria-hidden','true'); items.attr('tabindex', '-1'); @@ -425,7 +421,7 @@ //Fire init or afterClose callback if (!init){ settings.afterClose(trigger); - } else if (trigger == 'init'){ + } else if (trigger === 'init'){ settings.init(); } } @@ -465,7 +461,7 @@ afterClose(trigger, parent) }); } else if (settings.animations === 'velocity') { - + el.velocity("finish").velocity("slideUp", { duration: duration, easing: settings.easingClose, From 672335868d48382e2cd8c009a7333b6a5d812143 Mon Sep 17 00:00:00 2001 From: slackero Date: Thu, 21 Jan 2021 20:34:47 +0300 Subject: [PATCH 2/4] Equalize on() event listener and trigger() event method --- jquery.slicknav.js | 24 +++++++++++------------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/jquery.slicknav.js b/jquery.slicknav.js index 13e6c7e..e893ec8 100644 --- a/jquery.slicknav.js +++ b/jquery.slicknav.js @@ -196,24 +196,24 @@ } // accessibility for links - item.children('a').attr('role', 'menuitem').click(function(event){ + item.children('a').attr('role', 'menuitem').on('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(); + $($this.btn).trigger('click'); } }); //also close on click if parent links are set if (settings.closeOnClick && settings.allowParentLinks) { - item.children('a').children('a').click(function () { + item.children('a').children('a').on('click', function () { //Emulate menu close - $($this.btn).click(); + $($this.btn).trigger('click'); }); - item.find('.'+prefix+'_parent-link a:not(.'+prefix+'_item)').click(function(){ + item.find('.'+prefix+'_parent-link a:not(.'+prefix+'_item)').on('click', function(){ //Emulate menu close - $($this.btn).click(); + $($this.btn).trigger('click'); }); } }); @@ -233,16 +233,16 @@ $this.mobileNav.attr('role','menu'); // outline prevention when using mouse - $(document).mousedown(function(){ + $(document).on('mousedown', function(){ $this._outlines(false); }); - $(document).keyup(function(){ + $(document).on('keyup', function(){ $this._outlines(true); }); // menu button click - $($this.btn).click(function (e) { + $($this.btn).on('click', function (e) { e.preventDefault(); $this._menuToggle(); }); @@ -254,7 +254,7 @@ }); // check for keyboard events on menu button and menu parents - $($this.btn).keydown(function (e) { + $($this.btn).on('keydown', function (e) { var ev = e || event; switch(ev.keyCode) { @@ -269,8 +269,6 @@ $($this.btn).next().find('[role="menuitem"]').first().focus(); break; } - - }); $this.mobileNav.on('keydown', '.'+prefix+'_item', function(e) { @@ -334,7 +332,7 @@ // allow links clickable within parent tags if set if (settings.allowParentLinks && settings.nestedParentLinks) { - $('.'+prefix+'_item a').click(function(e){ + $('.'+prefix+'_item a').on('click', function(e){ e.stopImmediatePropagation(); }); } From bcd6ada7ab57f229d721f56a1c245d445ab6cea9 Mon Sep 17 00:00:00 2001 From: slackero Date: Thu, 21 Jan 2021 20:53:08 +0300 Subject: [PATCH 3/4] Added options to set number of bars or custom content to replace bars inside menu button --- README.md | 2 ++ jquery.slicknav.js | 48 +++++++++++++++++++++++++++++++--------------- 2 files changed, 35 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index b3db636..4e01962 100644 --- a/README.md +++ b/README.md @@ -64,6 +64,8 @@ If you prefer you can also use the _CSS_ and _JS_ libraries from the **CDN**: 'removeIds': true // Remove IDs from all menu elements. Defaults to false if duplicate set to false. 'removeClasses': false // Remove classes from all menu elements. 'brand': '' // Add branding to menu bar. + 'barItems': 3 // Change the numbers of bars in the menu button (default: 3) + 'bar': '' // Replace the barItems by custom html content 'animations': 'jquery' // Animation library. Currently supports "jquery" and "velocity". ### Callbacks diff --git a/jquery.slicknav.js b/jquery.slicknav.js index e893ec8..945e11c 100644 --- a/jquery.slicknav.js +++ b/jquery.slicknav.js @@ -19,6 +19,8 @@ removeClasses: false, removeStyles: false, brand: '', + barItems: 3, + bar: '', animations: 'jquery', init: function () {}, beforeOpen: function () {}, @@ -65,6 +67,7 @@ menu = $(this.element), settings = this.settings, iconClass, + iconBar='', menuBar; // clone menu if needed @@ -108,21 +111,36 @@ // create menu bar $this.mobileNav.attr('class', prefix + '_nav'); menuBar = $('
'); - if (settings.brand !== '') { - var brand = $('
'+settings.brand+'
'); - $(menuBar).append(brand); - } - $this.btn = $( - ['<' + settings.parentTag + ' aria-label="' + settings.label + '" aria-haspopup="true" role="button" tabindex="0" class="' + prefix + '_btn ' + prefix + '_collapsed">', - '' + settings.label + '', - '', - '', - '', - '', - '', - '' - ].join('') - ); + if (settings.brand !== '') { + var brand = $('
'+settings.brand+'
'); + $(menuBar).append(brand); + } + + // create icon bar + iconBar += '<' + settings.parentTag + ' aria-label="' + settings.label + '" aria-haspopup="true" role="button" tabindex="0" class="' + prefix + '_btn ' + prefix + '_collapsed">'; + if(settings.label === '') { + iconClass += ' ' + prefix + '_no-text'; + } else { + iconBar += '' + settings.label + ''; + } + iconBar += ''; + + if(settings.bar !== '') { + iconBar += settings.bar; + } else if(settings.barItems > 0 && settings.barItems !== 3) { + for(var b=1; b<=settings.barItems; b++) { + iconBar += ''; + } + } else { + // fallback (default) + iconBar += ''; + iconBar += ''; + iconBar += ''; + } + iconBar += ''; + + $this.btn = $(iconBar); + $(menuBar).append($this.btn); if(settings.appendTo !== '') { $(settings.appendTo).append(menuBar); From 2e8b5de91ae121fbc83689b538db836b4cefbfc2 Mon Sep 17 00:00:00 2001 From: slackero Date: Thu, 21 Jan 2021 20:53:38 +0300 Subject: [PATCH 4/4] Updated demo --- demo/index.html | 83 +++++++++++++++++++++++++------------------------ 1 file changed, 43 insertions(+), 40 deletions(-) diff --git a/demo/index.html b/demo/index.html index c1038f7..d10bd9d 100644 --- a/demo/index.html +++ b/demo/index.html @@ -1,50 +1,53 @@ - + - + + -SlickNav Demo - Responsive Mobile Nav Plugin for jQuery + SlickNav Demo - Responsive Mobile Nav Plugin for jQuery - - + + - + -

Resize browser to view mobile menu

+

Resize browser to view mobile menu

-Original Menu hidden on mobile - + Original Menu hidden on mobile + - - - + + + - \ No newline at end of file +