Permalink
Browse files

Add support for Velocity.js animations and stop animation queue befor…

…e animating.
  • Loading branch information...
1 parent 163e93a commit 3ed928000ad00e97d613a0f0b376ee010d9c24a3 @ComputerWolf committed Sep 18, 2016
Showing with 126 additions and 67 deletions.
  1. +7 −2 README.md
  2. +1 −1 bower.json
  3. +57 −30 dist/jquery.slicknav.js
  4. +2 −2 dist/jquery.slicknav.min.js
  5. +1 −1 dist/slicknav.css
  6. +1 −1 dist/slicknav.min.css
  7. +56 −29 jquery.slicknav.js
  8. +1 −1 package.json
View
@@ -1,4 +1,4 @@
-# SlickNav v1.0.7
+# SlickNav v1.0.8
## Responsive Mobile Menu jQuery Plugin
[![Join the chat at https://gitter.im/ComputerWolf/SlickNav](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ComputerWolf/SlickNav?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
@@ -56,6 +56,7 @@ slicknav.css can be modified to fit website design
'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.
+ 'animations': 'jquery' // Animation library. Currently supports "jquery" and "velocity".
### Callbacks
'init': function(){}, // Called after SlickNav creation
@@ -68,7 +69,11 @@ slicknav.css can be modified to fit website design
$('.menu').slicknav('toggle'); // Method to toggle the menu
$('.menu').slicknav('open'); // Method to open the menu
$('.menu').slicknav('close'); // Method to close the menu
+
+### Animations
+SlickNav will use jQuery for animations by default. If you wish to use Velocity.js for animating, be sure to include the library in your code before including SlickNav.
+### Menu Display
Without any additional configuration, both the original and mobile menus will be displayed. It is recommended to use media queries to hide the original menu and display the mobile menu when appropriate. Modernizr or similar can be used for graceful degradation.
For example:
@@ -97,4 +102,4 @@ More examples at [SlickNav.com](http://slicknav.com)
* Opera
* IE7+
* Android Browser
-* iOS Safari
+* iOS Safari
View
@@ -1,6 +1,6 @@
{
"name": "slicknav",
- "version": "1.0.7",
+ "version": "1.0.8",
"authors": [
"Josh Cope"
],
@@ -1,5 +1,5 @@
/*!
- * SlickNav Responsive Mobile Menu v1.0.7
+ * SlickNav Responsive Mobile Menu v1.0.8
* (c) 2016 Josh Cope
* licensed under MIT
*/
@@ -25,6 +25,7 @@
removeClasses: false,
removeStyles: false,
brand: '',
+ animations: 'jquery',
init: function () {},
beforeOpen: function () {},
beforeClose: function () {},
@@ -333,23 +334,52 @@
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);
- }
- el.slideDown(duration, settings.easingOpen, function(){
-
- $(trigger).removeClass(prefix+'_animating');
- $(parent).removeClass(prefix+'_animating');
-
- //Fire afterOpen callback
- if (!init) {
- settings.afterOpen(trigger);
- }
- });
+ 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", {
+ easing: settings.easingOpen,
+ complete: function() {
+ afterOpen(trigger, parent);
+ }
+ });
+ }
el.attr('aria-hidden','false');
items.attr('tabindex', '0');
$this._setVisAttr(el, false);
@@ -361,22 +391,19 @@
settings.beforeClose(trigger);
}
- 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');
- $(parent).removeClass(prefix+'_animating');
-
- //Fire init or afterClose callback
- if (!init){
- settings.afterClose(trigger);
- } else if (trigger == 'init'){
- settings.init();
- }
- });
+ 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", {
+ easing: settings.easingClose,
+ complete: function() {
+ afterClose(trigger, parent);
+ }
+ });
+ }
}
};
@@ -1,6 +1,6 @@
/*!
- * SlickNav Responsive Mobile Menu v1.0.7
+ * SlickNav Responsive Mobile Menu v1.0.8
* (c) 2016 Josh Cope
* licensed under MIT
*/
-!function(e,n,t){function a(n,t){this.element=n,this.settings=e.extend({},i,t),this.settings.duplicate||t.hasOwnProperty("removeIds")||(this.settings.removeIds=!1),this._defaults=i,this._name=s,this.init()}var i={label:"MENU",duplicate:!0,duration:200,easingOpen:"swing",easingClose:"swing",closedSymbol:"&#9658;",openedSymbol:"&#9660;",prependTo:"body",appendTo:"",parentTag:"a",closeOnClick:!1,allowParentLinks:!1,nestedParentLinks:!0,showChildren:!1,removeIds:!0,removeClasses:!1,removeStyles:!1,brand:"",init:function(){},beforeOpen:function(){},beforeClose:function(){},afterOpen:function(){},afterClose:function(){}},s="slicknav",l="slicknav";a.prototype.init=function(){var t,a,i=this,s=e(this.element),o=this.settings;if(o.duplicate?i.mobileNav=s.clone():i.mobileNav=s,o.removeIds&&(i.mobileNav.removeAttr("id"),i.mobileNav.find("*").each(function(n,t){e(t).removeAttr("id")})),o.removeClasses&&(i.mobileNav.removeAttr("class"),i.mobileNav.find("*").each(function(n,t){e(t).removeAttr("class")})),o.removeStyles&&(i.mobileNav.removeAttr("style"),i.mobileNav.find("*").each(function(n,t){e(t).removeAttr("style")})),t=l+"_icon",""===o.label&&(t+=" "+l+"_no-text"),"a"==o.parentTag&&(o.parentTag='a href="#"'),i.mobileNav.attr("class",l+"_nav"),a=e('<div class="'+l+'_menu"></div>'),""!==o.brand){var r=e('<div class="'+l+'_brand">'+o.brand+"</div>");e(a).append(r)}i.btn=e(["<"+o.parentTag+' aria-haspopup="true" tabindex="0" class="'+l+"_btn "+l+'_collapsed">','<span class="'+l+'_menutxt">'+o.label+"</span>",'<span class="'+t+'">','<span class="'+l+'_icon-bar"></span>','<span class="'+l+'_icon-bar"></span>','<span class="'+l+'_icon-bar"></span>',"</span>","</"+o.parentTag+">"].join("")),e(a).append(i.btn),""!==o.appendTo?e(o.appendTo).append(a):e(o.prependTo).prepend(a),a.append(i.mobileNav);var d=i.mobileNav.find("li");e(d).each(function(){var n=e(this),t={};if(t.children=n.children("ul").attr("role","menu"),n.data("menu",t),t.children.length>0){var a=n.contents(),s=!1,r=[];e(a).each(function(){return e(this).is("ul")?!1:(r.push(this),void(e(this).is("a")&&(s=!0)))});var d=e("<"+o.parentTag+' role="menuitem" aria-haspopup="true" tabindex="-1" class="'+l+'_item"/>');if(o.allowParentLinks&&!o.nestedParentLinks&&s)e(r).wrapAll('<span class="'+l+"_parent-link "+l+'_row"/>').parent();else{var p=e(r).wrapAll(d).parent();p.addClass(l+"_row")}o.showChildren?n.addClass(l+"_open"):n.addClass(l+"_collapsed"),n.addClass(l+"_parent");var c=e('<span class="'+l+'_arrow">'+(o.showChildren?o.openedSymbol:o.closedSymbol)+"</span>");o.allowParentLinks&&!o.nestedParentLinks&&s&&(c=c.wrap(d).parent()),e(r).last().after(c)}else 0===n.children().length&&n.addClass(l+"_txtnode");n.children("a").attr("role","menuitem").click(function(n){o.closeOnClick&&!e(n.target).parent().closest("li").hasClass(l+"_parent")&&e(i.btn).click()}),o.closeOnClick&&o.allowParentLinks&&(n.children("a").children("a").click(function(n){e(i.btn).click()}),n.find("."+l+"_parent-link a:not(."+l+"_item)").click(function(n){e(i.btn).click()}))}),e(d).each(function(){var n=e(this).data("menu");o.showChildren||i._visibilityToggle(n.children,null,!1,null,!0)}),i._visibilityToggle(i.mobileNav,null,!1,"init",!0),i.mobileNav.attr("role","menu"),e(n).mousedown(function(){i._outlines(!1)}),e(n).keyup(function(){i._outlines(!0)}),e(i.btn).click(function(e){e.preventDefault(),i._menuToggle()}),i.mobileNav.on("click","."+l+"_item",function(n){n.preventDefault(),i._itemClick(e(this))}),e(i.btn).keydown(function(e){var n=e||event;13==n.keyCode&&(e.preventDefault(),i._menuToggle())}),i.mobileNav.on("keydown","."+l+"_item",function(n){var t=n||event;13==t.keyCode&&(n.preventDefault(),i._itemClick(e(n.target)))}),o.allowParentLinks&&o.nestedParentLinks&&e("."+l+"_item a").click(function(e){e.stopImmediatePropagation()})},a.prototype._menuToggle=function(e){var n=this,t=n.btn,a=n.mobileNav;t.hasClass(l+"_collapsed")?(t.removeClass(l+"_collapsed"),t.addClass(l+"_open")):(t.removeClass(l+"_open"),t.addClass(l+"_collapsed")),t.addClass(l+"_animating"),n._visibilityToggle(a,t.parent(),!0,t)},a.prototype._itemClick=function(e){var n=this,t=n.settings,a=e.data("menu");a||(a={},a.arrow=e.children("."+l+"_arrow"),a.ul=e.next("ul"),a.parent=e.parent(),a.parent.hasClass(l+"_parent-link")&&(a.parent=e.parent().parent(),a.ul=e.parent().next("ul")),e.data("menu",a)),a.parent.hasClass(l+"_collapsed")?(a.arrow.html(t.openedSymbol),a.parent.removeClass(l+"_collapsed"),a.parent.addClass(l+"_open"),a.parent.addClass(l+"_animating"),n._visibilityToggle(a.ul,a.parent,!0,e)):(a.arrow.html(t.closedSymbol),a.parent.addClass(l+"_collapsed"),a.parent.removeClass(l+"_open"),a.parent.addClass(l+"_animating"),n._visibilityToggle(a.ul,a.parent,!0,e))},a.prototype._visibilityToggle=function(n,t,a,i,s){var o=this,r=o.settings,d=o._getActionItems(n),p=0;a&&(p=r.duration),n.hasClass(l+"_hidden")?(n.removeClass(l+"_hidden"),s||r.beforeOpen(i),n.slideDown(p,r.easingOpen,function(){e(i).removeClass(l+"_animating"),e(t).removeClass(l+"_animating"),s||r.afterOpen(i)}),n.attr("aria-hidden","false"),d.attr("tabindex","0"),o._setVisAttr(n,!1)):(n.addClass(l+"_hidden"),s||r.beforeClose(i),n.slideUp(p,this.settings.easingClose,function(){n.attr("aria-hidden","true"),d.attr("tabindex","-1"),o._setVisAttr(n,!0),n.hide(),e(i).removeClass(l+"_animating"),e(t).removeClass(l+"_animating"),s?"init"==i&&r.init():r.afterClose(i)}))},a.prototype._setVisAttr=function(n,t){var a=this,i=n.children("li").children("ul").not("."+l+"_hidden");t?i.each(function(){var n=e(this);n.attr("aria-hidden","true");var i=a._getActionItems(n);i.attr("tabindex","-1"),a._setVisAttr(n,t)}):i.each(function(){var n=e(this);n.attr("aria-hidden","false");var i=a._getActionItems(n);i.attr("tabindex","0"),a._setVisAttr(n,t)})},a.prototype._getActionItems=function(e){var n=e.data("menu");if(!n){n={};var t=e.children("li"),a=t.find("a");n.links=a.add(t.find("."+l+"_item")),e.data("menu",n)}return n.links},a.prototype._outlines=function(n){n?e("."+l+"_item, ."+l+"_btn").css("outline",""):e("."+l+"_item, ."+l+"_btn").css("outline","none")},a.prototype.toggle=function(){var e=this;e._menuToggle()},a.prototype.open=function(){var e=this;e.btn.hasClass(l+"_collapsed")&&e._menuToggle()},a.prototype.close=function(){var e=this;e.btn.hasClass(l+"_open")&&e._menuToggle()},e.fn[s]=function(n){var t=arguments;if(void 0===n||"object"==typeof n)return this.each(function(){e.data(this,"plugin_"+s)||e.data(this,"plugin_"+s,new a(this,n))});if("string"==typeof n&&"_"!==n[0]&&"init"!==n){var i;return this.each(function(){var l=e.data(this,"plugin_"+s);l instanceof a&&"function"==typeof l[n]&&(i=l[n].apply(l,Array.prototype.slice.call(t,1)))}),void 0!==i?i:this}}}(jQuery,document,window);
+!function(e,n,t){function a(n,t){this.element=n,this.settings=e.extend({},i,t),this.settings.duplicate||t.hasOwnProperty("removeIds")||(this.settings.removeIds=!1),this._defaults=i,this._name=s,this.init()}var i={label:"MENU",duplicate:!0,duration:200,easingOpen:"swing",easingClose:"swing",closedSymbol:"&#9658;",openedSymbol:"&#9660;",prependTo:"body",appendTo:"",parentTag:"a",closeOnClick:!1,allowParentLinks:!1,nestedParentLinks:!0,showChildren:!1,removeIds:!0,removeClasses:!1,removeStyles:!1,brand:"",animations:"jquery",init:function(){},beforeOpen:function(){},beforeClose:function(){},afterOpen:function(){},afterClose:function(){}},s="slicknav",o="slicknav";a.prototype.init=function(){var t,a,i=this,s=e(this.element),l=this.settings;if(l.duplicate?i.mobileNav=s.clone():i.mobileNav=s,l.removeIds&&(i.mobileNav.removeAttr("id"),i.mobileNav.find("*").each(function(n,t){e(t).removeAttr("id")})),l.removeClasses&&(i.mobileNav.removeAttr("class"),i.mobileNav.find("*").each(function(n,t){e(t).removeAttr("class")})),l.removeStyles&&(i.mobileNav.removeAttr("style"),i.mobileNav.find("*").each(function(n,t){e(t).removeAttr("style")})),t=o+"_icon",""===l.label&&(t+=" "+o+"_no-text"),"a"==l.parentTag&&(l.parentTag='a href="#"'),i.mobileNav.attr("class",o+"_nav"),a=e('<div class="'+o+'_menu"></div>'),""!==l.brand){var r=e('<div class="'+o+'_brand">'+l.brand+"</div>");e(a).append(r)}i.btn=e(["<"+l.parentTag+' aria-haspopup="true" tabindex="0" class="'+o+"_btn "+o+'_collapsed">','<span class="'+o+'_menutxt">'+l.label+"</span>",'<span class="'+t+'">','<span class="'+o+'_icon-bar"></span>','<span class="'+o+'_icon-bar"></span>','<span class="'+o+'_icon-bar"></span>',"</span>","</"+l.parentTag+">"].join("")),e(a).append(i.btn),""!==l.appendTo?e(l.appendTo).append(a):e(l.prependTo).prepend(a),a.append(i.mobileNav);var c=i.mobileNav.find("li");e(c).each(function(){var n=e(this),t={};if(t.children=n.children("ul").attr("role","menu"),n.data("menu",t),t.children.length>0){var a=n.contents(),s=!1,r=[];e(a).each(function(){return!e(this).is("ul")&&(r.push(this),void(e(this).is("a")&&(s=!0)))});var c=e("<"+l.parentTag+' role="menuitem" aria-haspopup="true" tabindex="-1" class="'+o+'_item"/>');if(l.allowParentLinks&&!l.nestedParentLinks&&s)e(r).wrapAll('<span class="'+o+"_parent-link "+o+'_row"/>').parent();else{var d=e(r).wrapAll(c).parent();d.addClass(o+"_row")}l.showChildren?n.addClass(o+"_open"):n.addClass(o+"_collapsed"),n.addClass(o+"_parent");var p=e('<span class="'+o+'_arrow">'+(l.showChildren?l.openedSymbol:l.closedSymbol)+"</span>");l.allowParentLinks&&!l.nestedParentLinks&&s&&(p=p.wrap(c).parent()),e(r).last().after(p)}else 0===n.children().length&&n.addClass(o+"_txtnode");n.children("a").attr("role","menuitem").click(function(n){l.closeOnClick&&!e(n.target).parent().closest("li").hasClass(o+"_parent")&&e(i.btn).click()}),l.closeOnClick&&l.allowParentLinks&&(n.children("a").children("a").click(function(n){e(i.btn).click()}),n.find("."+o+"_parent-link a:not(."+o+"_item)").click(function(n){e(i.btn).click()}))}),e(c).each(function(){var n=e(this).data("menu");l.showChildren||i._visibilityToggle(n.children,null,!1,null,!0)}),i._visibilityToggle(i.mobileNav,null,!1,"init",!0),i.mobileNav.attr("role","menu"),e(n).mousedown(function(){i._outlines(!1)}),e(n).keyup(function(){i._outlines(!0)}),e(i.btn).click(function(e){e.preventDefault(),i._menuToggle()}),i.mobileNav.on("click","."+o+"_item",function(n){n.preventDefault(),i._itemClick(e(this))}),e(i.btn).keydown(function(e){var n=e||event;13==n.keyCode&&(e.preventDefault(),i._menuToggle())}),i.mobileNav.on("keydown","."+o+"_item",function(n){var t=n||event;13==t.keyCode&&(n.preventDefault(),i._itemClick(e(n.target)))}),l.allowParentLinks&&l.nestedParentLinks&&e("."+o+"_item a").click(function(e){e.stopImmediatePropagation()})},a.prototype._menuToggle=function(e){var n=this,t=n.btn,a=n.mobileNav;t.hasClass(o+"_collapsed")?(t.removeClass(o+"_collapsed"),t.addClass(o+"_open")):(t.removeClass(o+"_open"),t.addClass(o+"_collapsed")),t.addClass(o+"_animating"),n._visibilityToggle(a,t.parent(),!0,t)},a.prototype._itemClick=function(e){var n=this,t=n.settings,a=e.data("menu");a||(a={},a.arrow=e.children("."+o+"_arrow"),a.ul=e.next("ul"),a.parent=e.parent(),a.parent.hasClass(o+"_parent-link")&&(a.parent=e.parent().parent(),a.ul=e.parent().next("ul")),e.data("menu",a)),a.parent.hasClass(o+"_collapsed")?(a.arrow.html(t.openedSymbol),a.parent.removeClass(o+"_collapsed"),a.parent.addClass(o+"_open"),a.parent.addClass(o+"_animating"),n._visibilityToggle(a.ul,a.parent,!0,e)):(a.arrow.html(t.closedSymbol),a.parent.addClass(o+"_collapsed"),a.parent.removeClass(o+"_open"),a.parent.addClass(o+"_animating"),n._visibilityToggle(a.ul,a.parent,!0,e))},a.prototype._visibilityToggle=function(n,t,a,i,s){function l(n,t){e(n).removeClass(o+"_animating"),e(t).removeClass(o+"_animating"),s||d.afterOpen(n)}function r(t,a){n.attr("aria-hidden","true"),p.attr("tabindex","-1"),c._setVisAttr(n,!0),n.hide(),e(t).removeClass(o+"_animating"),e(a).removeClass(o+"_animating"),s?"init"==t&&d.init():d.afterClose(t)}var c=this,d=c.settings,p=c._getActionItems(n),u=0;a&&(u=d.duration),n.hasClass(o+"_hidden")?(n.removeClass(o+"_hidden"),s||d.beforeOpen(i),"jquery"===d.animations?n.stop(!0,!0).slideDown(u,d.easingOpen,function(){l(i,t)}):"velocity"===d.animations&&n.velocity("finish").velocity("slideDown",{easing:d.easingOpen,complete:function(){l(i,t)}}),n.attr("aria-hidden","false"),p.attr("tabindex","0"),c._setVisAttr(n,!1)):(n.addClass(o+"_hidden"),s||d.beforeClose(i),"jquery"===d.animations?n.stop(!0,!0).slideUp(u,this.settings.easingClose,function(){r(i,t)}):"velocity"===d.animations&&n.velocity("finish").velocity("slideUp",{easing:d.easingClose,complete:function(){r(i,t)}}))},a.prototype._setVisAttr=function(n,t){var a=this,i=n.children("li").children("ul").not("."+o+"_hidden");t?i.each(function(){var n=e(this);n.attr("aria-hidden","true");var i=a._getActionItems(n);i.attr("tabindex","-1"),a._setVisAttr(n,t)}):i.each(function(){var n=e(this);n.attr("aria-hidden","false");var i=a._getActionItems(n);i.attr("tabindex","0"),a._setVisAttr(n,t)})},a.prototype._getActionItems=function(e){var n=e.data("menu");if(!n){n={};var t=e.children("li"),a=t.find("a");n.links=a.add(t.find("."+o+"_item")),e.data("menu",n)}return n.links},a.prototype._outlines=function(n){n?e("."+o+"_item, ."+o+"_btn").css("outline",""):e("."+o+"_item, ."+o+"_btn").css("outline","none")},a.prototype.toggle=function(){var e=this;e._menuToggle()},a.prototype.open=function(){var e=this;e.btn.hasClass(o+"_collapsed")&&e._menuToggle()},a.prototype.close=function(){var e=this;e.btn.hasClass(o+"_open")&&e._menuToggle()},e.fn[s]=function(n){var t=arguments;if(void 0===n||"object"==typeof n)return this.each(function(){e.data(this,"plugin_"+s)||e.data(this,"plugin_"+s,new a(this,n))});if("string"==typeof n&&"_"!==n[0]&&"init"!==n){var i;return this.each(function(){var o=e.data(this,"plugin_"+s);o instanceof a&&"function"==typeof o[n]&&(i=o[n].apply(o,Array.prototype.slice.call(t,1)))}),void 0!==i?i:this}}}(jQuery,document,window);
View
@@ -1,5 +1,5 @@
/*!
- * SlickNav Responsive Mobile Menu v1.0.7
+ * SlickNav Responsive Mobile Menu v1.0.8
* (c) 2016 Josh Cope
* licensed under MIT
*/
Oops, something went wrong.

0 comments on commit 3ed9280

Please sign in to comment.