js-offcanvas - npm Package Compare versions

Comparing version 1.2.2 to 1.2.4

dist/_js/js-offcanvas.js

@@ -1,2 +0,2 @@
-;(function( w, $ ){
+;(function( window, $ ){
 	"use strict";
@@ -6,8 +6,8 @@
 		componentName = name + "-component",
-		utils = w.utils,
-		doc = w.document;
+		utils = window.utils,
+		doc = document;
 
-	w.componentNamespace = w.componentNamespace || {};
+	window.componentNamespace = window.componentNamespace || {};
 
-	var Offcanvas = w.componentNamespace.Offcanvas = function( element,options ){
+	var Offcanvas = window.componentNamespace.Offcanvas = function( element,options ){
 		if( !element ){
@@ -57,3 +57,3 @@ throw new Error( "Element required to initialize object" );
 		}
-		if(!w.utils.supportTransition){
+		if(!utils.supportTransition){
 			panelClasses.push( utils.createModifierClass(options.baseClass, options.supportNoTransitionsClass));
@@ -98,3 +98,3 @@ }
 	Offcanvas.prototype._trapTabKey = function() {
-		this.trapTabKey = new w.componentNamespace.TrapTabKey(this.element);
+		this.trapTabKey = new window.componentNamespace.TrapTabKey(this.element);
 		this.trapTabKey.init();
@@ -125,3 +125,3 @@ };
 		if( this.$closeBtn.length ){
-			this.closeBtn = new w.componentNamespace.Button(this.$closeBtn[0]);
+			this.closeBtn = new window.componentNamespace.Button(this.$closeBtn[0]);
 			this.closeBtn.init();
@@ -295,3 +295,3 @@ this.closeBtn.controls(this.$element.attr('id'));
 		}
-		new w.componentNamespace.OffcanvasTrigger( $triggerButton[0], { "offcanvas": offcanvasID } ).init();
+		new window.componentNamespace.OffcanvasTrigger( $triggerButton[0], { "offcanvas": offcanvasID } ).init();
 	};
@@ -298,0 +298,0 @@

dist/_js/js-offcanvas.min.js

@@ -1,2 +0,2 @@
-/*! js-Offcanvas - v1.2.1 - 2018-02-01
+/*! js-Offcanvas - v1.2.4 - 2018-05-09
 jQuery Accesible Offcanvas Panels
@@ -6,2 +6,2 @@ * https://github.com/vmitsaras/js-offcanvas
  * MIT License */
-!function(a,b){"use strict";var c="offcanvas",d=c+"-component",e=a.utils,f=a.document;a.componentNamespace=a.componentNamespace||{};var g=a.componentNamespace.Offcanvas=function(a,d){if(!a)throw new Error("Element required to initialize object");this.element=a,this.$element=b(a),this.options=d=d||{},this.metadata=e.getMetaOptions(this.element,c),this.options=b.extend({},this.defaults,this.metadata,d),this.isOpen=!1,this.onOpen=this.options.onOpen,this.onClose=this.options.onClose,this.onInit=this.options.onInit};g.prototype.init=function(){this.$element.data(d)||(this.$element.data(d,this),this.$element.trigger("beforecreate."+c),this._addAttributes(),this._initTrigger(),this._createModal(),this._trapTabKey(),this._closeButton(),this.onInit&&"function"==typeof this.onInit&&this.onInit.call(this.element),this.$element.trigger("create."+c))},g.prototype._addAttributes=function(){var c=this.options,d=[c.baseClass,e.classes.isClosed],f={tabindex:"-1","aria-hidden":!this.isOpen};c.role&&(f.role=c.role),a.utils.supportTransition||d.push(e.createModifierClass(c.baseClass,c.supportNoTransitionsClass)),e.cssModifiers(c.modifiers,d,c.baseClass),this.$element.attr(f).addClass(d.join(" ")),this.$content=b("."+c.contentClass),this._contentOpenClasses=[],e.cssModifiers(c.modifiers,this._contentOpenClasses,c.contentClass),this._modalOpenClasses=[c.modalClass,e.classes.isClosed],e.cssModifiers(c.modifiers,this._modalOpenClasses,c.modalClass),this._bodyOpenClasses=[c.bodyModifierClass+"--visible"],e.cssModifiers(c.modifiers,this._bodyOpenClasses,c.bodyModifierClass),c.modifiers.toLowerCase().indexOf("reveal")>=0?this.transitionElement=this.$content[0]:this.transitionElement=this.element},g.prototype._createModal=function(){var a=this,d=a.$element.parent();this.options.modal&&(this.$modal=b("<div></div>").on("mousedown."+c,function(){a.close()}).appendTo(d),this.$modal.addClass(this._modalOpenClasses.join(" ")))},g.prototype._trapTabKey=function(){this.trapTabKey=new a.componentNamespace.TrapTabKey(this.element),this.trapTabKey.init()},g.prototype._trapTabEscKey=function(){var a=this;b(f).on("keyup."+c,function(c){var d=c.keyCode||c.which;if(d===e.keyCodes.ESCAPE&&a.isOpen){if(b("input").is(":focus"))return;a.close()}})},g.prototype._closeButton=function(){function b(){d.close()}var d=this,f=d.options;this.$closeBtn=this.$element.find("."+f.closeButtonClass),this.$closeBtn.length&&(this.closeBtn=new a.componentNamespace.Button(this.$closeBtn[0]),this.closeBtn.init(),this.closeBtn.controls(this.$element.attr("id")),e.a11yclickBind(this.$closeBtn,b,c))},g.prototype.open=function(){var a=this,g=a.options;this.isOpen||(g.resize&&this.resize(),this.$trigger||(this.$trigger=this.$element.data(d+"-trigger")),f.activeElement&&(this.lastFocus=f.activeElement),this.isOpen=!0,b("html, body").addClass(this._bodyOpenClasses.join(" ")),this._addClasses(this.$element,this.isOpen,!0),this._addClasses(this.$content,this.isOpen,!0),g.modal&&this._addClasses(this.$modal,this.isOpen,!0),this.$element.attr("aria-hidden","false").addClass(e.createModifierClass(g.baseClass,"opening")).trigger("opening."+c),this.$content.addClass(this._contentOpenClasses.join(" ")),e.onEndTransition(this.transitionElement,function(){a.trapTabKey.giveFocus(),a.trapTabKey.bindTrap(),a._addClasses(a.$element,a.isOpen,!1),a._addClasses(a.$content,a.isOpen,!1),g.modal&&a._addClasses(a.$modal,a.isOpen,!1),a.$element.removeClass(e.createModifierClass(g.baseClass,"opening"))}),this.$trigger&&this.$trigger.button._isExpanded(!0),this.onOpen&&"function"==typeof this.onOpen&&this.onOpen.call(this.$element),this.$element.trigger("open."+c),this._trapTabEscKey())},g.prototype.close=function(){var a=this,d=a.options;this.isOpen&&(this.isOpen=!1,this._addClasses(this.$element,this.isOpen,!0),this._addClasses(this.$content,this.isOpen,!0),this.options.modal&&this._addClasses(this.$modal,this.isOpen,!0),this.$element.attr("aria-hidden","true").addClass(e.createModifierClass(d.baseClass,"closing")).trigger("closing."+c),this.trapTabKey.unbindTrap(),a.$trigger&&a.$trigger.button._isExpanded(!1),e.onEndTransition(this.transitionElement,function(){a._addClasses(a.$element,a.isOpen,!1),a._addClasses(a.$content,a.isOpen,!1),a.options.modal&&a._addClasses(a.$modal,a.isOpen,!1),a.$content.removeClass(a._contentOpenClasses.join(" ")),a.$element.removeClass(e.createModifierClass(d.baseClass,"closing")),b("html, body").removeClass(a._bodyOpenClasses.join(" ")),a.lastFocus&&a.lastFocus.focus()}),this.onClose&&"function"==typeof this.onClose&&this.onClose.call(this.element),this.$element.trigger("close."+c),b(f).off("keyup."+c),b(window).off("."+c))},g.prototype._addClasses=function(a,b,c){b?c?a.removeClass(e.classes.isClosed).addClass(e.classes.isAnimating).addClass(e.classes.isOpen):a.removeClass(e.classes.isAnimating):c?a.removeClass(e.classes.isOpen).addClass(e.classes.isAnimating):a.addClass(e.classes.isClosed).removeClass(e.classes.isAnimating)},g.prototype.toggle=function(){this[this.isOpen?"close":"open"]()},g.prototype.resize=function(){function a(){g=!1}function d(){g||e.raf(a),g=!0}function f(){d(),h.$element.trigger("resizing."+c),h.options.resize&&h.close()}var g,h=this;b(window).on("resize."+c+" orientationchange."+c,f)},g.prototype._initTrigger=function(){var c,d=this,e=d.options,f=this.$element.attr("id"),g="data-offcanvas-trigger";c=b(e.triggerButton?e.triggerButton:"["+g+"='"+f+"']"),new a.componentNamespace.OffcanvasTrigger(c[0],{offcanvas:f}).init()},g.prototype.setButton=function(a){this.$element.data(d+"-trigger",a)},g.prototype.defaults={role:"dialog",modifiers:"left,overlay",baseClass:"c-offcanvas",modalClass:"c-offcanvas-bg",contentClass:"c-offcanvas-content-wrap",closeButtonClass:"js-offcanvas-close",bodyModifierClass:"has-offcanvas",supportNoTransitionsClass:"support-no-transitions",resize:!1,triggerButton:null,modal:!0,onOpen:null,onClose:null,onInit:null},g.defaults=g.prototype.defaults}(this,jQuery),function(a,b){"use strict";var c="offcanvas",d=".js-"+c;b.fn[c]=function(b){return this.each(function(){new a.componentNamespace.Offcanvas(this,b).init()})},b(a.document).on("enhance",function(a){b(b(a.target).is(d)&&a.target).add(d,a.target).filter(d)[c]()})}(this,jQuery),function(a,b){"use strict";var c="offcanvas-trigger",d=c+"-component",e=a.utils;a.componentNamespace=a.componentNamespace||{};var f=a.componentNamespace.OffcanvasTrigger=function(a,c){if(!a)throw new Error("Element required to initialize object");this.element=a,this.$element=b(a),this.options=c=c||{},this.options=b.extend({},this.defaults,c)};f.prototype.init=function(){this.$element.data(d)||(this.$element.data(d,this),this._create())},f.prototype._create=function(){if(this.options.offcanvas=this.options.offcanvas||this.$element.attr("data-offcanvas-trigger"),this.$offcanvas=b("#"+this.options.offcanvas),this.offcanvas=this.$offcanvas.data("offcanvas-component"),!this.offcanvas)throw new Error("Offcanvas Element not found");this.button=new a.componentNamespace.Button(this.element),this.button.init(),this.button.controls(this.options.offcanvas),this.button._isExpanded(!1),this._bindbehavior()},f.prototype._bindbehavior=function(){function a(){b.offcanvas.toggle()}var b=this;this.offcanvas.setButton(b),e.a11yclickBind(this.$element,a,c)},f.prototype.defaults={offcanvas:null}}(this,jQuery),function(a,b){"use strict";var c="offcanvasTrigger",d="[data-offcanvas-trigger],.js-"+c;b.fn[c]=function(b){return this.each(function(){new a.componentNamespace.OffcanvasTrigger(this,b).init()})},b(a.document).on("enhance",function(a){b(b(a.target).is(d)&&a.target).add(d,a.target).filter(d)[c]()})}(this,jQuery);
+!function(a,b){"use strict";var c="offcanvas",d=c+"-component",e=a.utils,f=document;a.componentNamespace=a.componentNamespace||{};var g=a.componentNamespace.Offcanvas=function(a,d){if(!a)throw new Error("Element required to initialize object");this.element=a,this.$element=b(a),this.options=d=d||{},this.metadata=e.getMetaOptions(this.element,c),this.options=b.extend({},this.defaults,this.metadata,d),this.isOpen=!1,this.onOpen=this.options.onOpen,this.onClose=this.options.onClose,this.onInit=this.options.onInit};g.prototype.init=function(){this.$element.data(d)||(this.$element.data(d,this),this.$element.trigger("beforecreate."+c),this._addAttributes(),this._initTrigger(),this._createModal(),this._trapTabKey(),this._closeButton(),this.onInit&&"function"==typeof this.onInit&&this.onInit.call(this.element),this.$element.trigger("create."+c))},g.prototype._addAttributes=function(){var a=this.options,c=[a.baseClass,e.classes.isClosed],d={tabindex:"-1","aria-hidden":!this.isOpen};a.role&&(d.role=a.role),e.supportTransition||c.push(e.createModifierClass(a.baseClass,a.supportNoTransitionsClass)),e.cssModifiers(a.modifiers,c,a.baseClass),this.$element.attr(d).addClass(c.join(" ")),this.$content=b("."+a.contentClass),this._contentOpenClasses=[],e.cssModifiers(a.modifiers,this._contentOpenClasses,a.contentClass),this._modalOpenClasses=[a.modalClass,e.classes.isClosed],e.cssModifiers(a.modifiers,this._modalOpenClasses,a.modalClass),this._bodyOpenClasses=[a.bodyModifierClass+"--visible"],e.cssModifiers(a.modifiers,this._bodyOpenClasses,a.bodyModifierClass),a.modifiers.toLowerCase().indexOf("reveal")>=0?this.transitionElement=this.$content[0]:this.transitionElement=this.element},g.prototype._createModal=function(){var a=this,d=a.$element.parent();this.options.modal&&(this.$modal=b("<div></div>").on("mousedown."+c,function(){a.close()}).appendTo(d),this.$modal.addClass(this._modalOpenClasses.join(" ")))},g.prototype._trapTabKey=function(){this.trapTabKey=new a.componentNamespace.TrapTabKey(this.element),this.trapTabKey.init()},g.prototype._trapTabEscKey=function(){var a=this;b(f).on("keyup."+c,function(c){var d=c.keyCode||c.which;if(d===e.keyCodes.ESCAPE&&a.isOpen){if(b("input").is(":focus"))return;a.close()}})},g.prototype._closeButton=function(){function b(){d.close()}var d=this,f=d.options;this.$closeBtn=this.$element.find("."+f.closeButtonClass),this.$closeBtn.length&&(this.closeBtn=new a.componentNamespace.Button(this.$closeBtn[0]),this.closeBtn.init(),this.closeBtn.controls(this.$element.attr("id")),e.a11yclickBind(this.$closeBtn,b,c))},g.prototype.open=function(){var a=this,g=a.options;this.isOpen||(g.resize&&this.resize(),this.$trigger||(this.$trigger=this.$element.data(d+"-trigger")),f.activeElement&&(this.lastFocus=f.activeElement),this.isOpen=!0,b("html, body").addClass(this._bodyOpenClasses.join(" ")),this._addClasses(this.$element,this.isOpen,!0),this._addClasses(this.$content,this.isOpen,!0),g.modal&&this._addClasses(this.$modal,this.isOpen,!0),this.$element.attr("aria-hidden","false").addClass(e.createModifierClass(g.baseClass,"opening")).trigger("opening."+c),this.$content.addClass(this._contentOpenClasses.join(" ")),e.onEndTransition(this.transitionElement,function(){a.trapTabKey.giveFocus(),a.trapTabKey.bindTrap(),a._addClasses(a.$element,a.isOpen,!1),a._addClasses(a.$content,a.isOpen,!1),g.modal&&a._addClasses(a.$modal,a.isOpen,!1),a.$element.removeClass(e.createModifierClass(g.baseClass,"opening"))}),this.$trigger&&this.$trigger.button._isExpanded(!0),this.onOpen&&"function"==typeof this.onOpen&&this.onOpen.call(this.$element),this.$element.trigger("open."+c),this._trapTabEscKey())},g.prototype.close=function(){var d=this,g=d.options;this.isOpen&&(this.isOpen=!1,this._addClasses(this.$element,this.isOpen,!0),this._addClasses(this.$content,this.isOpen,!0),this.options.modal&&this._addClasses(this.$modal,this.isOpen,!0),this.$element.attr("aria-hidden","true").addClass(e.createModifierClass(g.baseClass,"closing")).trigger("closing."+c),this.trapTabKey.unbindTrap(),d.$trigger&&d.$trigger.button._isExpanded(!1),e.onEndTransition(this.transitionElement,function(){d._addClasses(d.$element,d.isOpen,!1),d._addClasses(d.$content,d.isOpen,!1),d.options.modal&&d._addClasses(d.$modal,d.isOpen,!1),d.$content.removeClass(d._contentOpenClasses.join(" ")),d.$element.removeClass(e.createModifierClass(g.baseClass,"closing")),b("html, body").removeClass(d._bodyOpenClasses.join(" ")),d.lastFocus&&d.lastFocus.focus()}),this.onClose&&"function"==typeof this.onClose&&this.onClose.call(this.element),this.$element.trigger("close."+c),b(f).off("keyup."+c),b(a).off("."+c))},g.prototype._addClasses=function(a,b,c){b?c?a.removeClass(e.classes.isClosed).addClass(e.classes.isAnimating).addClass(e.classes.isOpen):a.removeClass(e.classes.isAnimating):c?a.removeClass(e.classes.isOpen).addClass(e.classes.isAnimating):a.addClass(e.classes.isClosed).removeClass(e.classes.isAnimating)},g.prototype.toggle=function(){this[this.isOpen?"close":"open"]()},g.prototype.resize=function(){function d(){h=!1}function f(){h||e.raf(d),h=!0}function g(){f(),i.$element.trigger("resizing."+c),i.options.resize&&i.close()}var h,i=this;b(a).on("resize."+c+" orientationchange."+c,g)},g.prototype._initTrigger=function(){var c,d=this,e=d.options,f=this.$element.attr("id"),g="data-offcanvas-trigger";c=b(e.triggerButton?e.triggerButton:"["+g+"='"+f+"']"),new a.componentNamespace.OffcanvasTrigger(c[0],{offcanvas:f}).init()},g.prototype.setButton=function(a){this.$element.data(d+"-trigger",a)},g.prototype.defaults={role:"dialog",modifiers:"left,overlay",baseClass:"c-offcanvas",modalClass:"c-offcanvas-bg",contentClass:"c-offcanvas-content-wrap",closeButtonClass:"js-offcanvas-close",bodyModifierClass:"has-offcanvas",supportNoTransitionsClass:"support-no-transitions",resize:!1,triggerButton:null,modal:!0,onOpen:null,onClose:null,onInit:null},g.defaults=g.prototype.defaults}(this,jQuery),function(a,b){"use strict";var c="offcanvas",d=".js-"+c;b.fn[c]=function(b){return this.each(function(){new a.componentNamespace.Offcanvas(this,b).init()})},b(a.document).on("enhance",function(a){b(b(a.target).is(d)&&a.target).add(d,a.target).filter(d)[c]()})}(this,jQuery),function(a,b){"use strict";var c="offcanvas-trigger",d=c+"-component",e=a.utils;a.componentNamespace=a.componentNamespace||{};var f=a.componentNamespace.OffcanvasTrigger=function(a,c){if(!a)throw new Error("Element required to initialize object");this.element=a,this.$element=b(a),this.options=c=c||{},this.options=b.extend({},this.defaults,c)};f.prototype.init=function(){this.$element.data(d)||(this.$element.data(d,this),this._create())},f.prototype._create=function(){if(this.options.offcanvas=this.options.offcanvas||this.$element.attr("data-offcanvas-trigger"),this.$offcanvas=b("#"+this.options.offcanvas),this.offcanvas=this.$offcanvas.data("offcanvas-component"),!this.offcanvas)throw new Error("Offcanvas Element not found");this.button=new a.componentNamespace.Button(this.element),this.button.init(),this.button.controls(this.options.offcanvas),this.button._isExpanded(!1),this._bindbehavior()},f.prototype._bindbehavior=function(){function a(){b.offcanvas.toggle()}var b=this;this.offcanvas.setButton(b),e.a11yclickBind(this.$element,a,c)},f.prototype.defaults={offcanvas:null}}(this,jQuery),function(a,b){"use strict";var c="offcanvasTrigger",d="[data-offcanvas-trigger],.js-"+c;b.fn[c]=function(b){return this.each(function(){new a.componentNamespace.OffcanvasTrigger(this,b).init()})},b(a.document).on("enhance",function(a){b(b(a.target).is(d)&&a.target).add(d,a.target).filter(d)[c]()})}(this,jQuery);

dist/_js/js-offcanvas.pkgd.js

@@ -1,6 +0,5 @@
-/* global Modernizr:true */
-;(function( w ){
+;(function( window ){
 	"use strict";
 
-	var utils = {};
+	var utils = window.utils || {};
 
@@ -38,6 +37,2 @@ utils.classes = {
 
-	/**
-	 * a11yclick
-	 * Slightly modified from: http://www.karlgroves.com/2014/11/24/ridiculously-easy-trick-for-keyboard-accessibility/
-	 */
 	utils.a11yclick = function(event) {
@@ -57,5 +52,6 @@ var code = event.charCode || event.keyCode,
 	};
-	utils.a11yclickBind = function(el, callback,name) {
+
+	utils.a11yclickBind = function(el, callback, name) {
 		el.on("click." + name + " keydown." + name,function(event){
-			if ( w.utils.a11yclick(event)) {
+			if ( utils.a11yclick(event)) {
 				event.preventDefault(event);
@@ -68,21 +64,20 @@ if( callback && typeof callback === 'function' ) { callback.call(); }
 
-	utils.doc = w.document;
-	utils.supportTransition = Modernizr.csstransitions;
-	utils.supportAnimations = Modernizr.cssanimations;
-	utils.transEndEventNames = {
-		'WebkitTransition'	: 'webkitTransitionEnd',
-		'MozTransition'		: 'transitionend',
-		'OTransition'		: 'oTransitionEnd',
-		'msTransition'		: 'MSTransitionEnd',
-		'transition'		: 'transitionend'
+	utils.supportTransition = ('transition' in document.documentElement.style) || ('WebkitTransition' in document.documentElement.style);
+
+	utils.whichTransitionEvent = function () {
+		var el = document.createElement('fakeelement'),
+			transitions = {
+				'transition': 'transitionend',
+				'WebkitTransition': 'webkitTransitionEnd'
+			};
+
+		for (var t in transitions) {
+			if (el.style[t] !== undefined) {
+				return transitions[t];
+			}
+		}
 	};
-	utils.animEndEventNames = {
-		'WebkitAnimation' : 'webkitAnimationEnd',
-		'OAnimation' : 'oAnimationEnd',
-		'msAnimation' : 'MSAnimationEnd',
-		'animation' : 'animationend'
-	};
-	utils.transEndEventName = utils.transEndEventNames[Modernizr.prefixed('transition')];
-	utils.animEndEventName = utils.animEndEventNames[Modernizr.prefixed('animation')];
 
+	utils.transEndEventName = utils.whichTransitionEvent();
+
 	utils.onEndTransition = function( el, callback ) {
@@ -104,18 +99,2 @@ var onEndCallbackFn = function( ev ) {
 
-	utils.onEndAnimation = function( el, callback ) {
-		var onEndCallbackFn = function( ev ) {
-			if( utils.supportAnimations ) {
-				if( ev.target != this ) return;
-				this.removeEventListener( utils.animEndEventName, onEndCallbackFn );
-			}
-			if( callback && typeof callback === 'function' ) { callback.call(); }
-		};
-		if( utils.supportAnimations ) {
-			el.addEventListener( utils.animEndEventName, onEndCallbackFn );
-		}
-		else {
-			onEndCallbackFn();
-		}
-	};
-
 	utils.createModifierClass = function( cl, modifier ){
@@ -133,5 +112,5 @@ return cl + utils.classes.modifier + modifier
 	utils.getMetaOptions = function( el, name, metadata ){
-		var dataAttr = 'data-' + name;
-		var dataOptionsAttr = dataAttr + '-options';
-		var attr = el.getAttribute( dataAttr ) || el.getAttribute( dataOptionsAttr );
+		var dataAttr = 'data-' + name,
+			dataOptionsAttr = dataAttr + '-options',
+			attr = el.getAttribute( dataAttr ) || el.getAttribute( dataOptionsAttr );
 		try {
@@ -147,17 +126,4 @@ return attr && JSON.parse( attr ) || {};
 	};
-	// polyfill raf if needed
-	var raf = (function(callback){
-		return  window.requestAnimationFrame       ||
-			window.webkitRequestAnimationFrame ||
-			window.mozRequestAnimationFrame    ||
-			function( callback ){
-				window.setTimeout(callback, 1000 / 60);
-			};
-	})();
-	utils.raf = function(callback){
-		raf(callback);
-	};
 
-	// expose global utils
-	w.utils = utils;
+	window.utils = utils;
 
@@ -285,7 +251,7 @@ })(this);
 
-(function( w, $ ){
+(function( window, $ ){
 	"use strict";
 	var name = "button",
 		componentName = name + "-component",
-		utils = w.utils,
+		utils = window.utils,
 		cl = {
@@ -298,5 +264,5 @@ iconOnly: "icon-only",
 
-	w.componentNamespace = w.componentNamespace || {};
+	window.componentNamespace = window.componentNamespace || {};
 
-	var Button = w.componentNamespace.Button = function( element, options ){
+	var Button = window.componentNamespace.Button = function( element, options ){
 		if( !element ){
@@ -324,2 +290,3 @@ throw new Error( "Element required to initialize object" );
 		this.isPressed = false;
+		this.isExpanded = false;
 		this._create();
@@ -331,5 +298,5 @@
 		var options = this.options,
-			buttonClasses = [options.baseClass],
 			buttonTextClasses = [options.baseClass + '__text'];
 
+		this._buttonClasses = [options.baseClass];
 		if ( options.label === null ) {
@@ -346,3 +313,3 @@ options.label = this.$element.html();
 			this.$buttonIcon = $( "<span class='"+ options.iconFamily +' ' + utils.createModifierClass(options.iconFamily, options.icon)+"'></span>" ).prependTo(this.$element);
-			buttonClasses.push( utils.createModifierClass(options.baseClass,cl.withIcon) );
+			this._buttonClasses.push( utils.createModifierClass(options.baseClass,cl.withIcon) );
 
@@ -352,7 +319,7 @@ if ( options.iconActive ) {
 				this.$buttonIconActive = $( "<span class='"+ options.iconFamily  + ' ' + utils.createModifierClass(options.iconFamily, options.iconActive)+ ' ' +utils.createModifierClass(options.iconFamily, cl.showHide)+ "'></span>" ).insertAfter(this.$buttonIcon);
-				buttonClasses.push( utils.createModifierClass(options.baseClass,cl.toggleState) );
+				this._buttonClasses.push( utils.createModifierClass(options.baseClass,cl.toggleState) );
 			}
 			if ( options.hideText ) {
 				buttonTextClasses.push(utils.classes.hiddenVisually );
-				buttonClasses.push( utils.createModifierClass(options.baseClass,cl.iconOnly) );
+				this._buttonClasses.push( utils.createModifierClass(options.baseClass,cl.iconOnly) );
 			}
@@ -362,3 +329,3 @@ }
 		if ( options.modifiers ) {
-			utils.cssModifiers(options.modifiers,buttonClasses,options.baseClass);
+			utils.cssModifiers(options.modifiers,this._buttonClasses,options.baseClass);
 		}
@@ -372,3 +339,3 @@ if ( options.wrapText ) {
 			buttonTextClasses.push( utils.createModifierClass(options.baseClass+'__text',cl.showHide) );
-			buttonClasses.push( utils.createModifierClass(options.baseClass,cl.toggleState) );
+			this._buttonClasses.push( utils.createModifierClass(options.baseClass,cl.toggleState) );
 
@@ -382,3 +349,3 @@ this.$buttonTextActive = $( '<span></span>' )
 
-		this.$element.addClass( buttonClasses.join( " " ) );
+		this.$element.addClass( this._buttonClasses.join( " " ) );
 
@@ -401,5 +368,2 @@ if ( options.role) {
 		}
-		if ( options.ripple && w.componentNamespace.Ripple ) {
-			new w.componentNamespace.Ripple( this.element ).init();
-		}
 		this.$element.trigger( "create." + name );
@@ -414,4 +378,4 @@ };
 	Button.prototype._isExpanded = function(state){
-		this._isPressed(state);
-		this.$element.attr( "aria-expanded", state );
+		this.isExpanded = state;
+		this.$element.attr( "aria-expanded", state )[ state ? "addClass" : "removeClass" ](utils.classes.isActive);
 	};
@@ -423,2 +387,27 @@
 
+	Button.prototype.destroy = function(){
+		var options = this.options;
+
+		this.$element
+			.removeData(componentName)
+			.removeAttr('role')
+			.removeAttr('aria-pressed')
+			.removeAttr('aria-expanded')
+			.removeAttr('aria-controls')
+			.removeClass( this._buttonClasses.join( " " ) )
+			.removeClass( utils.classes.isActive)
+			.off("."+name);
+		if ( this.options.icon ) {
+			this.$element.find('[class^="'+this.options.iconFamily+'"]').remove();
+		}
+
+		if ( options.wrapText ) {
+			var btnHtml = this.$buttonText.html();
+			this.$element.empty().html(btnHtml);
+		}
+
+		this.element = null;
+		this.$element = null;
+	};
+
 	Button.prototype.defaults = {
@@ -439,4 +428,3 @@ baseClass:"c-button",
 		pressed: false,
-		expanded: false,
-		ripple: false
+		expanded: false
 	};
@@ -456,3 +444,3 @@
 		return this.each( function(){
-			new w.componentNamespace.Button( this ).init();
+			new window.componentNamespace.Button( this ).init();
 		});
@@ -467,3 +455,3 @@ };
 
-;(function( w, $ ){
+;(function( window, $ ){
 	"use strict";
@@ -473,8 +461,8 @@
 		componentName = name + "-component",
-		utils = w.utils,
-		doc = w.document;
+		utils = window.utils,
+		doc = document;
 
-	w.componentNamespace = w.componentNamespace || {};
+	window.componentNamespace = window.componentNamespace || {};
 
-	var Offcanvas = w.componentNamespace.Offcanvas = function( element,options ){
+	var Offcanvas = window.componentNamespace.Offcanvas = function( element,options ){
 		if( !element ){
@@ -524,3 +512,3 @@ throw new Error( "Element required to initialize object" );
 		}
-		if(!w.utils.supportTransition){
+		if(!utils.supportTransition){
 			panelClasses.push( utils.createModifierClass(options.baseClass, options.supportNoTransitionsClass));
@@ -565,3 +553,3 @@ }
 	Offcanvas.prototype._trapTabKey = function() {
-		this.trapTabKey = new w.componentNamespace.TrapTabKey(this.element);
+		this.trapTabKey = new window.componentNamespace.TrapTabKey(this.element);
 		this.trapTabKey.init();
@@ -592,3 +580,3 @@ };
 		if( this.$closeBtn.length ){
-			this.closeBtn = new w.componentNamespace.Button(this.$closeBtn[0]);
+			this.closeBtn = new window.componentNamespace.Button(this.$closeBtn[0]);
 			this.closeBtn.init();
@@ -762,3 +750,3 @@ this.closeBtn.controls(this.$element.attr('id'));
 		}
-		new w.componentNamespace.OffcanvasTrigger( $triggerButton[0], { "offcanvas": offcanvasID } ).init();
+		new window.componentNamespace.OffcanvasTrigger( $triggerButton[0], { "offcanvas": offcanvasID } ).init();
 	};
@@ -765,0 +753,0 @@

dist/_js/js-offcanvas.pkgd.min.js

@@ -1,2 +0,2 @@
-/*! js-Offcanvas - v1.2.1 - 2018-02-01
+/*! js-Offcanvas - v1.2.4 - 2018-05-09
 jQuery Accesible Offcanvas Panels
@@ -6,2 +6,2 @@ * https://github.com/vmitsaras/js-offcanvas
  * MIT License */
-!function(a){"use strict";var b={};b.classes={hiddenVisually:"u-hidden-visually",modifier:"--",isActive:"is-active",isClosed:"is-closed",isOpen:"is-open",isClicked:"is-clicked",isAnimating:"is-animating",isVisible:"is-visible",hidden:"u-hidden"},b.keyCodes={BACKSPACE:8,COMMA:188,DELETE:46,DOWN:40,END:35,ENTER:13,ESCAPE:27,HOME:36,LEFT:37,PAGE_DOWN:34,PAGE_UP:33,PERIOD:190,RIGHT:39,SPACE:32,TAB:9,UP:38},b.a11yclick=function(a){var c=a.charCode||a.keyCode,d=a.type;return"click"===d||"keydown"===d&&(c===b.keyCodes.SPACE||c===b.keyCodes.ENTER||void 0)},b.a11yclickBind=function(b,c,d){b.on("click."+d+" keydown."+d,function(e){a.utils.a11yclick(e)&&(e.preventDefault(e),c&&"function"==typeof c&&c.call(),b.trigger("clicked."+d))})},b.doc=a.document,b.supportTransition=Modernizr.csstransitions,b.supportAnimations=Modernizr.cssanimations,b.transEndEventNames={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd",msTransition:"MSTransitionEnd",transition:"transitionend"},b.animEndEventNames={WebkitAnimation:"webkitAnimationEnd",OAnimation:"oAnimationEnd",msAnimation:"MSAnimationEnd",animation:"animationend"},b.transEndEventName=b.transEndEventNames[Modernizr.prefixed("transition")],b.animEndEventName=b.animEndEventNames[Modernizr.prefixed("animation")],b.onEndTransition=function(a,c){var d=function(a){if(b.supportTransition){if(a.target!=this)return;this.removeEventListener(b.transEndEventName,d)}c&&"function"==typeof c&&c.call()};b.supportTransition?a.addEventListener(b.transEndEventName,d):d()},b.onEndAnimation=function(a,c){var d=function(a){if(b.supportAnimations){if(a.target!=this)return;this.removeEventListener(b.animEndEventName,d)}c&&"function"==typeof c&&c.call()};b.supportAnimations?a.addEventListener(b.animEndEventName,d):d()},b.createModifierClass=function(a,c){return a+b.classes.modifier+c},b.cssModifiers=function(a,c,d){for(var e=a.split(","),f=0,g=e.length;f<g;f++)c.push(b.createModifierClass(d,e[f]))},b.getMetaOptions=function(a,b,c){var d="data-"+b,e=d+"-options",f=a.getAttribute(d)||a.getAttribute(e);try{return f&&JSON.parse(f)||{}}catch(g){return void(console&&console.error("Error parsing "+d+" on "+a.className+": "+g))}};var c=function(a){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(a){window.setTimeout(a,1e3/60)}}();b.raf=function(a){c(a)},a.utils=b}(this),function(a,b){"use strict";var c="trab-tab",d=c+"-component";a.componentNamespace=a.componentNamespace||{};var e=a.componentNamespace.TrapTabKey=function(a,c){if(!a)throw new Error("Element required to initialize object");this.element=a,this.$element=b(a),c=c||{},this.options=b.extend({},this.defaults,c)};e.prototype.init=function(){this.$element.data(d)||this.$element.data(d,this)},e.prototype.bindTrap=function(){var a=this;this.$element.on("keydown."+c,function(b){a._trapTabKey(a.$element,b)})},e.prototype.unbindTrap=function(){this.$element.off("keydown."+c)},e.prototype.giveFocus=function(){var a=this,b=a.options,c=a.$element.find("*");c.filter(b.focusableElementsString).filter(":visible").first().focus()},e.prototype._trapTabKey=function(a,b){var c=this,d=c.options;if(9==b.which){var e,f=a.find("*");e=f.filter(d.focusableElementsString).filter(":visible");var g;g=jQuery(":focus");var h;h=e.length;var i;i=e.index(g),b.shiftKey?0==i&&(e.get(h-1).focus(),b.preventDefault()):i==h-1&&(e.get(0).focus(),b.preventDefault())}},e.prototype.defaults={focusableElementsString:"a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]"},e.defaults=e.prototype.defaults}(this,jQuery),function(a,b){"use strict";var c="button",d=c+"-component",e=a.utils,f={iconOnly:"icon-only",withIcon:"icon",toggleState:"toggle-state",showHide:"visible-on-active"};a.componentNamespace=a.componentNamespace||{};var g=a.componentNamespace.Button=function(a,d){if(!a)throw new Error("Element required to initialize object");this.element=a,this.$element=b(a),this.options=d=d||{},this.metadata=e.getMetaOptions(this.element,c),this.options=b.extend({},this.defaults,this.metadata,d)};g.prototype.init=function(){this.$element.data(d)||(this.$element.data(d,this),this.hasTitle=!!this.$element.attr("title"),this.$element.trigger("beforecreate."+c),this.isPressed=!1,this._create())},g.prototype._create=function(){var d=this.options,g=[d.baseClass],h=[d.baseClass+"__text"];null===d.label&&(d.label=this.$element.html()),d.wrapText&&(this.$buttonText=b("<span></span>").html(d.label).appendTo(this.$element.empty())),d.icon&&(this.$buttonIcon=b("<span class='"+d.iconFamily+" "+e.createModifierClass(d.iconFamily,d.icon)+"'></span>").prependTo(this.$element),g.push(e.createModifierClass(d.baseClass,f.withIcon)),d.iconActive&&(d.toggle=!0,this.$buttonIconActive=b("<span class='"+d.iconFamily+" "+e.createModifierClass(d.iconFamily,d.iconActive)+" "+e.createModifierClass(d.iconFamily,f.showHide)+"'></span>").insertAfter(this.$buttonIcon),g.push(e.createModifierClass(d.baseClass,f.toggleState))),d.hideText&&(h.push(e.classes.hiddenVisually),g.push(e.createModifierClass(d.baseClass,f.iconOnly)))),d.modifiers&&e.cssModifiers(d.modifiers,g,d.baseClass),d.wrapText&&this.$buttonText.addClass(h.join(" ")),d.textActive&&d.wrapText&&(d.toggle=!0,h.push(e.createModifierClass(d.baseClass+"__text",f.showHide)),g.push(e.createModifierClass(d.baseClass,f.toggleState)),this.$buttonTextActive=b("<span></span>").addClass(h.join(" ")).html(d.textActive).insertAfter(this.$buttonText),this.$element.attr("aria-live","polite")),this.$element.addClass(g.join(" ")),d.role&&this.$element.attr("role",d.role),d.controls&&this.controls(d.controls),d.pressed&&this._isPressed(d.pressed),d.expanded&&(this.isPressed=!0,this._isExpanded(d.expanded)),this.hasTitle||!d.hideText||d.hideTitle||this.$element.attr("title",this.$element.text()),d.ripple&&a.componentNamespace.Ripple&&new a.componentNamespace.Ripple(this.element).init(),this.$element.trigger("create."+c)},g.prototype._isPressed=function(a){this.isPressed=a,this.$element.attr("aria-pressed",a)[a?"addClass":"removeClass"](e.classes.isActive)},g.prototype._isExpanded=function(a){this._isPressed(a),this.$element.attr("aria-expanded",a)},g.prototype.controls=function(a){this.$element.attr("aria-controls",a)},g.prototype.defaults={baseClass:"c-button",role:"button",label:null,modifiers:null,controls:null,textActive:null,wrapText:!0,hideText:!1,hideTitle:!1,icon:null,iconActive:null,iconFamily:"o-icon",iconPosition:null,pressed:!1,expanded:!1,ripple:!1},g.defaults=g.prototype.defaults}(this,jQuery),function(a,b){"use strict";var c="jsButton",d=".js-button";b.fn[c]=function(){return this.each(function(){new a.componentNamespace.Button(this).init()})},b(document).bind("enhance",function(a){b(b(a.target).is(d)&&a.target).add(d,a.target).filter(d)[c]()})}(this,jQuery),function(a,b){"use strict";var c="offcanvas",d=c+"-component",e=a.utils,f=a.document;a.componentNamespace=a.componentNamespace||{};var g=a.componentNamespace.Offcanvas=function(a,d){if(!a)throw new Error("Element required to initialize object");this.element=a,this.$element=b(a),this.options=d=d||{},this.metadata=e.getMetaOptions(this.element,c),this.options=b.extend({},this.defaults,this.metadata,d),this.isOpen=!1,this.onOpen=this.options.onOpen,this.onClose=this.options.onClose,this.onInit=this.options.onInit};g.prototype.init=function(){this.$element.data(d)||(this.$element.data(d,this),this.$element.trigger("beforecreate."+c),this._addAttributes(),this._initTrigger(),this._createModal(),this._trapTabKey(),this._closeButton(),this.onInit&&"function"==typeof this.onInit&&this.onInit.call(this.element),this.$element.trigger("create."+c))},g.prototype._addAttributes=function(){var c=this.options,d=[c.baseClass,e.classes.isClosed],f={tabindex:"-1","aria-hidden":!this.isOpen};c.role&&(f.role=c.role),a.utils.supportTransition||d.push(e.createModifierClass(c.baseClass,c.supportNoTransitionsClass)),e.cssModifiers(c.modifiers,d,c.baseClass),this.$element.attr(f).addClass(d.join(" ")),this.$content=b("."+c.contentClass),this._contentOpenClasses=[],e.cssModifiers(c.modifiers,this._contentOpenClasses,c.contentClass),this._modalOpenClasses=[c.modalClass,e.classes.isClosed],e.cssModifiers(c.modifiers,this._modalOpenClasses,c.modalClass),this._bodyOpenClasses=[c.bodyModifierClass+"--visible"],e.cssModifiers(c.modifiers,this._bodyOpenClasses,c.bodyModifierClass),c.modifiers.toLowerCase().indexOf("reveal")>=0?this.transitionElement=this.$content[0]:this.transitionElement=this.element},g.prototype._createModal=function(){var a=this,d=a.$element.parent();this.options.modal&&(this.$modal=b("<div></div>").on("mousedown."+c,function(){a.close()}).appendTo(d),this.$modal.addClass(this._modalOpenClasses.join(" ")))},g.prototype._trapTabKey=function(){this.trapTabKey=new a.componentNamespace.TrapTabKey(this.element),this.trapTabKey.init()},g.prototype._trapTabEscKey=function(){var a=this;b(f).on("keyup."+c,function(c){var d=c.keyCode||c.which;if(d===e.keyCodes.ESCAPE&&a.isOpen){if(b("input").is(":focus"))return;a.close()}})},g.prototype._closeButton=function(){function b(){d.close()}var d=this,f=d.options;this.$closeBtn=this.$element.find("."+f.closeButtonClass),this.$closeBtn.length&&(this.closeBtn=new a.componentNamespace.Button(this.$closeBtn[0]),this.closeBtn.init(),this.closeBtn.controls(this.$element.attr("id")),e.a11yclickBind(this.$closeBtn,b,c))},g.prototype.open=function(){var a=this,g=a.options;this.isOpen||(g.resize&&this.resize(),this.$trigger||(this.$trigger=this.$element.data(d+"-trigger")),f.activeElement&&(this.lastFocus=f.activeElement),this.isOpen=!0,b("html, body").addClass(this._bodyOpenClasses.join(" ")),this._addClasses(this.$element,this.isOpen,!0),this._addClasses(this.$content,this.isOpen,!0),g.modal&&this._addClasses(this.$modal,this.isOpen,!0),this.$element.attr("aria-hidden","false").addClass(e.createModifierClass(g.baseClass,"opening")).trigger("opening."+c),this.$content.addClass(this._contentOpenClasses.join(" ")),e.onEndTransition(this.transitionElement,function(){a.trapTabKey.giveFocus(),a.trapTabKey.bindTrap(),a._addClasses(a.$element,a.isOpen,!1),a._addClasses(a.$content,a.isOpen,!1),g.modal&&a._addClasses(a.$modal,a.isOpen,!1),a.$element.removeClass(e.createModifierClass(g.baseClass,"opening"))}),this.$trigger&&this.$trigger.button._isExpanded(!0),this.onOpen&&"function"==typeof this.onOpen&&this.onOpen.call(this.$element),this.$element.trigger("open."+c),this._trapTabEscKey())},g.prototype.close=function(){var a=this,d=a.options;this.isOpen&&(this.isOpen=!1,this._addClasses(this.$element,this.isOpen,!0),this._addClasses(this.$content,this.isOpen,!0),this.options.modal&&this._addClasses(this.$modal,this.isOpen,!0),this.$element.attr("aria-hidden","true").addClass(e.createModifierClass(d.baseClass,"closing")).trigger("closing."+c),this.trapTabKey.unbindTrap(),a.$trigger&&a.$trigger.button._isExpanded(!1),e.onEndTransition(this.transitionElement,function(){a._addClasses(a.$element,a.isOpen,!1),a._addClasses(a.$content,a.isOpen,!1),a.options.modal&&a._addClasses(a.$modal,a.isOpen,!1),a.$content.removeClass(a._contentOpenClasses.join(" ")),a.$element.removeClass(e.createModifierClass(d.baseClass,"closing")),b("html, body").removeClass(a._bodyOpenClasses.join(" ")),a.lastFocus&&a.lastFocus.focus()}),this.onClose&&"function"==typeof this.onClose&&this.onClose.call(this.element),this.$element.trigger("close."+c),b(f).off("keyup."+c),b(window).off("."+c))},g.prototype._addClasses=function(a,b,c){b?c?a.removeClass(e.classes.isClosed).addClass(e.classes.isAnimating).addClass(e.classes.isOpen):a.removeClass(e.classes.isAnimating):c?a.removeClass(e.classes.isOpen).addClass(e.classes.isAnimating):a.addClass(e.classes.isClosed).removeClass(e.classes.isAnimating)},g.prototype.toggle=function(){this[this.isOpen?"close":"open"]()},g.prototype.resize=function(){function a(){g=!1}function d(){g||e.raf(a),g=!0}function f(){d(),h.$element.trigger("resizing."+c),h.options.resize&&h.close()}var g,h=this;b(window).on("resize."+c+" orientationchange."+c,f)},g.prototype._initTrigger=function(){var c,d=this,e=d.options,f=this.$element.attr("id"),g="data-offcanvas-trigger";c=b(e.triggerButton?e.triggerButton:"["+g+"='"+f+"']"),new a.componentNamespace.OffcanvasTrigger(c[0],{offcanvas:f}).init()},g.prototype.setButton=function(a){this.$element.data(d+"-trigger",a)},g.prototype.defaults={role:"dialog",modifiers:"left,overlay",baseClass:"c-offcanvas",modalClass:"c-offcanvas-bg",contentClass:"c-offcanvas-content-wrap",closeButtonClass:"js-offcanvas-close",bodyModifierClass:"has-offcanvas",supportNoTransitionsClass:"support-no-transitions",resize:!1,triggerButton:null,modal:!0,onOpen:null,onClose:null,onInit:null},g.defaults=g.prototype.defaults}(this,jQuery),function(a,b){"use strict";var c="offcanvas",d=".js-"+c;b.fn[c]=function(b){return this.each(function(){new a.componentNamespace.Offcanvas(this,b).init()})},b(a.document).on("enhance",function(a){b(b(a.target).is(d)&&a.target).add(d,a.target).filter(d)[c]()})}(this,jQuery),function(a,b){"use strict";var c="offcanvas-trigger",d=c+"-component",e=a.utils;a.componentNamespace=a.componentNamespace||{};var f=a.componentNamespace.OffcanvasTrigger=function(a,c){if(!a)throw new Error("Element required to initialize object");this.element=a,this.$element=b(a),this.options=c=c||{},this.options=b.extend({},this.defaults,c)};f.prototype.init=function(){this.$element.data(d)||(this.$element.data(d,this),this._create())},f.prototype._create=function(){if(this.options.offcanvas=this.options.offcanvas||this.$element.attr("data-offcanvas-trigger"),this.$offcanvas=b("#"+this.options.offcanvas),this.offcanvas=this.$offcanvas.data("offcanvas-component"),!this.offcanvas)throw new Error("Offcanvas Element not found");this.button=new a.componentNamespace.Button(this.element),this.button.init(),this.button.controls(this.options.offcanvas),this.button._isExpanded(!1),this._bindbehavior()},f.prototype._bindbehavior=function(){function a(){b.offcanvas.toggle()}var b=this;this.offcanvas.setButton(b),e.a11yclickBind(this.$element,a,c)},f.prototype.defaults={offcanvas:null}}(this,jQuery),function(a,b){"use strict";var c="offcanvasTrigger",d="[data-offcanvas-trigger],.js-"+c;b.fn[c]=function(b){return this.each(function(){new a.componentNamespace.OffcanvasTrigger(this,b).init()})},b(a.document).on("enhance",function(a){b(b(a.target).is(d)&&a.target).add(d,a.target).filter(d)[c]()})}(this,jQuery);
+!function(a){"use strict";var b=a.utils||{};b.classes={hiddenVisually:"u-hidden-visually",modifier:"--",isActive:"is-active",isClosed:"is-closed",isOpen:"is-open",isClicked:"is-clicked",isAnimating:"is-animating",isVisible:"is-visible",hidden:"u-hidden"},b.keyCodes={BACKSPACE:8,COMMA:188,DELETE:46,DOWN:40,END:35,ENTER:13,ESCAPE:27,HOME:36,LEFT:37,PAGE_DOWN:34,PAGE_UP:33,PERIOD:190,RIGHT:39,SPACE:32,TAB:9,UP:38},b.a11yclick=function(a){var c=a.charCode||a.keyCode,d=a.type;return"click"===d||"keydown"===d&&(c===b.keyCodes.SPACE||c===b.keyCodes.ENTER||void 0)},b.a11yclickBind=function(a,c,d){a.on("click."+d+" keydown."+d,function(e){b.a11yclick(e)&&(e.preventDefault(e),c&&"function"==typeof c&&c.call(),a.trigger("clicked."+d))})},b.supportTransition="transition"in document.documentElement.style||"WebkitTransition"in document.documentElement.style,b.whichTransitionEvent=function(){var a=document.createElement("fakeelement"),b={transition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(var c in b)if(void 0!==a.style[c])return b[c]},b.transEndEventName=b.whichTransitionEvent(),b.onEndTransition=function(a,c){var d=function(a){if(b.supportTransition){if(a.target!=this)return;this.removeEventListener(b.transEndEventName,d)}c&&"function"==typeof c&&c.call()};b.supportTransition?a.addEventListener(b.transEndEventName,d):d()},b.createModifierClass=function(a,c){return a+b.classes.modifier+c},b.cssModifiers=function(a,c,d){for(var e=a.split(","),f=0,g=e.length;f<g;f++)c.push(b.createModifierClass(d,e[f]))},b.getMetaOptions=function(a,b,c){var d="data-"+b,e=d+"-options",f=a.getAttribute(d)||a.getAttribute(e);try{return f&&JSON.parse(f)||{}}catch(g){return void(console&&console.error("Error parsing "+d+" on "+a.className+": "+g))}},a.utils=b}(this),function(a,b){"use strict";var c="trab-tab",d=c+"-component";a.componentNamespace=a.componentNamespace||{};var e=a.componentNamespace.TrapTabKey=function(a,c){if(!a)throw new Error("Element required to initialize object");this.element=a,this.$element=b(a),c=c||{},this.options=b.extend({},this.defaults,c)};e.prototype.init=function(){this.$element.data(d)||this.$element.data(d,this)},e.prototype.bindTrap=function(){var a=this;this.$element.on("keydown."+c,function(b){a._trapTabKey(a.$element,b)})},e.prototype.unbindTrap=function(){this.$element.off("keydown."+c)},e.prototype.giveFocus=function(){var a=this,b=a.options,c=a.$element.find("*");c.filter(b.focusableElementsString).filter(":visible").first().focus()},e.prototype._trapTabKey=function(a,b){var c=this,d=c.options;if(9==b.which){var e,f=a.find("*");e=f.filter(d.focusableElementsString).filter(":visible");var g;g=jQuery(":focus");var h;h=e.length;var i;i=e.index(g),b.shiftKey?0==i&&(e.get(h-1).focus(),b.preventDefault()):i==h-1&&(e.get(0).focus(),b.preventDefault())}},e.prototype.defaults={focusableElementsString:"a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]"},e.defaults=e.prototype.defaults}(this,jQuery),function(a,b){"use strict";var c="button",d=c+"-component",e=a.utils,f={iconOnly:"icon-only",withIcon:"icon",toggleState:"toggle-state",showHide:"visible-on-active"};a.componentNamespace=a.componentNamespace||{};var g=a.componentNamespace.Button=function(a,d){if(!a)throw new Error("Element required to initialize object");this.element=a,this.$element=b(a),this.options=d=d||{},this.metadata=e.getMetaOptions(this.element,c),this.options=b.extend({},this.defaults,this.metadata,d)};g.prototype.init=function(){this.$element.data(d)||(this.$element.data(d,this),this.hasTitle=!!this.$element.attr("title"),this.$element.trigger("beforecreate."+c),this.isPressed=!1,this.isExpanded=!1,this._create())},g.prototype._create=function(){var a=this.options,d=[a.baseClass+"__text"];this._buttonClasses=[a.baseClass],null===a.label&&(a.label=this.$element.html()),a.wrapText&&(this.$buttonText=b("<span></span>").html(a.label).appendTo(this.$element.empty())),a.icon&&(this.$buttonIcon=b("<span class='"+a.iconFamily+" "+e.createModifierClass(a.iconFamily,a.icon)+"'></span>").prependTo(this.$element),this._buttonClasses.push(e.createModifierClass(a.baseClass,f.withIcon)),a.iconActive&&(a.toggle=!0,this.$buttonIconActive=b("<span class='"+a.iconFamily+" "+e.createModifierClass(a.iconFamily,a.iconActive)+" "+e.createModifierClass(a.iconFamily,f.showHide)+"'></span>").insertAfter(this.$buttonIcon),this._buttonClasses.push(e.createModifierClass(a.baseClass,f.toggleState))),a.hideText&&(d.push(e.classes.hiddenVisually),this._buttonClasses.push(e.createModifierClass(a.baseClass,f.iconOnly)))),a.modifiers&&e.cssModifiers(a.modifiers,this._buttonClasses,a.baseClass),a.wrapText&&this.$buttonText.addClass(d.join(" ")),a.textActive&&a.wrapText&&(a.toggle=!0,d.push(e.createModifierClass(a.baseClass+"__text",f.showHide)),this._buttonClasses.push(e.createModifierClass(a.baseClass,f.toggleState)),this.$buttonTextActive=b("<span></span>").addClass(d.join(" ")).html(a.textActive).insertAfter(this.$buttonText),this.$element.attr("aria-live","polite")),this.$element.addClass(this._buttonClasses.join(" ")),a.role&&this.$element.attr("role",a.role),a.controls&&this.controls(a.controls),a.pressed&&this._isPressed(a.pressed),a.expanded&&(this.isPressed=!0,this._isExpanded(a.expanded)),this.hasTitle||!a.hideText||a.hideTitle||this.$element.attr("title",this.$element.text()),this.$element.trigger("create."+c)},g.prototype._isPressed=function(a){this.isPressed=a,this.$element.attr("aria-pressed",a)[a?"addClass":"removeClass"](e.classes.isActive)},g.prototype._isExpanded=function(a){this.isExpanded=a,this.$element.attr("aria-expanded",a)[a?"addClass":"removeClass"](e.classes.isActive)},g.prototype.controls=function(a){this.$element.attr("aria-controls",a)},g.prototype.destroy=function(){var a=this.options;if(this.$element.removeData(d).removeAttr("role").removeAttr("aria-pressed").removeAttr("aria-expanded").removeAttr("aria-controls").removeClass(this._buttonClasses.join(" ")).removeClass(e.classes.isActive).off("."+c),this.options.icon&&this.$element.find('[class^="'+this.options.iconFamily+'"]').remove(),a.wrapText){var b=this.$buttonText.html();this.$element.empty().html(b)}this.element=null,this.$element=null},g.prototype.defaults={baseClass:"c-button",role:"button",label:null,modifiers:null,controls:null,textActive:null,wrapText:!0,hideText:!1,hideTitle:!1,icon:null,iconActive:null,iconFamily:"o-icon",iconPosition:null,pressed:!1,expanded:!1},g.defaults=g.prototype.defaults}(this,jQuery),function(a,b){"use strict";var c="jsButton",d=".js-button";b.fn[c]=function(){return this.each(function(){new window.componentNamespace.Button(this).init()})},b(document).bind("enhance",function(a){b(b(a.target).is(d)&&a.target).add(d,a.target).filter(d)[c]()})}(this,jQuery),function(a,b){"use strict";var c="offcanvas",d=c+"-component",e=a.utils,f=document;a.componentNamespace=a.componentNamespace||{};var g=a.componentNamespace.Offcanvas=function(a,d){if(!a)throw new Error("Element required to initialize object");this.element=a,this.$element=b(a),this.options=d=d||{},this.metadata=e.getMetaOptions(this.element,c),this.options=b.extend({},this.defaults,this.metadata,d),this.isOpen=!1,this.onOpen=this.options.onOpen,this.onClose=this.options.onClose,this.onInit=this.options.onInit};g.prototype.init=function(){this.$element.data(d)||(this.$element.data(d,this),this.$element.trigger("beforecreate."+c),this._addAttributes(),this._initTrigger(),this._createModal(),this._trapTabKey(),this._closeButton(),this.onInit&&"function"==typeof this.onInit&&this.onInit.call(this.element),this.$element.trigger("create."+c))},g.prototype._addAttributes=function(){var a=this.options,c=[a.baseClass,e.classes.isClosed],d={tabindex:"-1","aria-hidden":!this.isOpen};a.role&&(d.role=a.role),e.supportTransition||c.push(e.createModifierClass(a.baseClass,a.supportNoTransitionsClass)),e.cssModifiers(a.modifiers,c,a.baseClass),this.$element.attr(d).addClass(c.join(" ")),this.$content=b("."+a.contentClass),this._contentOpenClasses=[],e.cssModifiers(a.modifiers,this._contentOpenClasses,a.contentClass),this._modalOpenClasses=[a.modalClass,e.classes.isClosed],e.cssModifiers(a.modifiers,this._modalOpenClasses,a.modalClass),this._bodyOpenClasses=[a.bodyModifierClass+"--visible"],e.cssModifiers(a.modifiers,this._bodyOpenClasses,a.bodyModifierClass),a.modifiers.toLowerCase().indexOf("reveal")>=0?this.transitionElement=this.$content[0]:this.transitionElement=this.element},g.prototype._createModal=function(){var a=this,d=a.$element.parent();this.options.modal&&(this.$modal=b("<div></div>").on("mousedown."+c,function(){a.close()}).appendTo(d),this.$modal.addClass(this._modalOpenClasses.join(" ")))},g.prototype._trapTabKey=function(){this.trapTabKey=new a.componentNamespace.TrapTabKey(this.element),this.trapTabKey.init()},g.prototype._trapTabEscKey=function(){var a=this;b(f).on("keyup."+c,function(c){var d=c.keyCode||c.which;if(d===e.keyCodes.ESCAPE&&a.isOpen){if(b("input").is(":focus"))return;a.close()}})},g.prototype._closeButton=function(){function b(){d.close()}var d=this,f=d.options;this.$closeBtn=this.$element.find("."+f.closeButtonClass),this.$closeBtn.length&&(this.closeBtn=new a.componentNamespace.Button(this.$closeBtn[0]),this.closeBtn.init(),this.closeBtn.controls(this.$element.attr("id")),e.a11yclickBind(this.$closeBtn,b,c))},g.prototype.open=function(){var a=this,g=a.options;this.isOpen||(g.resize&&this.resize(),this.$trigger||(this.$trigger=this.$element.data(d+"-trigger")),f.activeElement&&(this.lastFocus=f.activeElement),this.isOpen=!0,b("html, body").addClass(this._bodyOpenClasses.join(" ")),this._addClasses(this.$element,this.isOpen,!0),this._addClasses(this.$content,this.isOpen,!0),g.modal&&this._addClasses(this.$modal,this.isOpen,!0),this.$element.attr("aria-hidden","false").addClass(e.createModifierClass(g.baseClass,"opening")).trigger("opening."+c),this.$content.addClass(this._contentOpenClasses.join(" ")),e.onEndTransition(this.transitionElement,function(){a.trapTabKey.giveFocus(),a.trapTabKey.bindTrap(),a._addClasses(a.$element,a.isOpen,!1),a._addClasses(a.$content,a.isOpen,!1),g.modal&&a._addClasses(a.$modal,a.isOpen,!1),a.$element.removeClass(e.createModifierClass(g.baseClass,"opening"))}),this.$trigger&&this.$trigger.button._isExpanded(!0),this.onOpen&&"function"==typeof this.onOpen&&this.onOpen.call(this.$element),this.$element.trigger("open."+c),this._trapTabEscKey())},g.prototype.close=function(){var d=this,g=d.options;this.isOpen&&(this.isOpen=!1,this._addClasses(this.$element,this.isOpen,!0),this._addClasses(this.$content,this.isOpen,!0),this.options.modal&&this._addClasses(this.$modal,this.isOpen,!0),this.$element.attr("aria-hidden","true").addClass(e.createModifierClass(g.baseClass,"closing")).trigger("closing."+c),this.trapTabKey.unbindTrap(),d.$trigger&&d.$trigger.button._isExpanded(!1),e.onEndTransition(this.transitionElement,function(){d._addClasses(d.$element,d.isOpen,!1),d._addClasses(d.$content,d.isOpen,!1),d.options.modal&&d._addClasses(d.$modal,d.isOpen,!1),d.$content.removeClass(d._contentOpenClasses.join(" ")),d.$element.removeClass(e.createModifierClass(g.baseClass,"closing")),b("html, body").removeClass(d._bodyOpenClasses.join(" ")),d.lastFocus&&d.lastFocus.focus()}),this.onClose&&"function"==typeof this.onClose&&this.onClose.call(this.element),this.$element.trigger("close."+c),b(f).off("keyup."+c),b(a).off("."+c))},g.prototype._addClasses=function(a,b,c){b?c?a.removeClass(e.classes.isClosed).addClass(e.classes.isAnimating).addClass(e.classes.isOpen):a.removeClass(e.classes.isAnimating):c?a.removeClass(e.classes.isOpen).addClass(e.classes.isAnimating):a.addClass(e.classes.isClosed).removeClass(e.classes.isAnimating)},g.prototype.toggle=function(){this[this.isOpen?"close":"open"]()},g.prototype.resize=function(){function d(){h=!1}function f(){h||e.raf(d),h=!0}function g(){f(),i.$element.trigger("resizing."+c),i.options.resize&&i.close()}var h,i=this;b(a).on("resize."+c+" orientationchange."+c,g)},g.prototype._initTrigger=function(){var c,d=this,e=d.options,f=this.$element.attr("id"),g="data-offcanvas-trigger";c=b(e.triggerButton?e.triggerButton:"["+g+"='"+f+"']"),new a.componentNamespace.OffcanvasTrigger(c[0],{offcanvas:f}).init()},g.prototype.setButton=function(a){this.$element.data(d+"-trigger",a)},g.prototype.defaults={role:"dialog",modifiers:"left,overlay",baseClass:"c-offcanvas",modalClass:"c-offcanvas-bg",contentClass:"c-offcanvas-content-wrap",closeButtonClass:"js-offcanvas-close",bodyModifierClass:"has-offcanvas",supportNoTransitionsClass:"support-no-transitions",resize:!1,triggerButton:null,modal:!0,onOpen:null,onClose:null,onInit:null},g.defaults=g.prototype.defaults}(this,jQuery),function(a,b){"use strict";var c="offcanvas",d=".js-"+c;b.fn[c]=function(b){return this.each(function(){new a.componentNamespace.Offcanvas(this,b).init()})},b(a.document).on("enhance",function(a){b(b(a.target).is(d)&&a.target).add(d,a.target).filter(d)[c]()})}(this,jQuery),function(a,b){"use strict";var c="offcanvas-trigger",d=c+"-component",e=a.utils;a.componentNamespace=a.componentNamespace||{};var f=a.componentNamespace.OffcanvasTrigger=function(a,c){if(!a)throw new Error("Element required to initialize object");this.element=a,this.$element=b(a),this.options=c=c||{},this.options=b.extend({},this.defaults,c)};f.prototype.init=function(){this.$element.data(d)||(this.$element.data(d,this),this._create())},f.prototype._create=function(){if(this.options.offcanvas=this.options.offcanvas||this.$element.attr("data-offcanvas-trigger"),this.$offcanvas=b("#"+this.options.offcanvas),this.offcanvas=this.$offcanvas.data("offcanvas-component"),!this.offcanvas)throw new Error("Offcanvas Element not found");this.button=new a.componentNamespace.Button(this.element),this.button.init(),this.button.controls(this.options.offcanvas),this.button._isExpanded(!1),this._bindbehavior()},f.prototype._bindbehavior=function(){function a(){b.offcanvas.toggle()}var b=this;this.offcanvas.setButton(b),e.a11yclickBind(this.$element,a,c)},f.prototype.defaults={offcanvas:null}}(this,jQuery),function(a,b){"use strict";var c="offcanvasTrigger",d="[data-offcanvas-trigger],.js-"+c;b.fn[c]=function(b){return this.each(function(){new a.componentNamespace.OffcanvasTrigger(this,b).init()})},b(a.document).on("enhance",function(a){b(b(a.target).is(d)&&a.target).add(d,a.target).filter(d)[c]()})}(this,jQuery);

grunt/config-lib/postcss.js

@@ -0,0 +0,0 @@ module.exports = {

grunt/config/concat.js

@@ -12,5 +12,5 @@ module.exports = {
 		src: [
-			"bower_components/js-utilities/utils.js",
-			"bower_components/js-trap-tab/trap-tab.js",
-			"bower_components/js-button/dist/_js/js-button.js",
+			"node_modules/js-utilities/utils.js",
+			"node_modules/js-trap-tab/trap-tab.js",
+			"node_modules/js-button/dist/_js/js-button.js",
 			"src/<%= pkg.name %>.js",
@@ -17,0 +17,0 @@ "src/<%= pkg.name %>-init.js",

package.json

@@ -6,3 +6,3 @@ {
   "description": "jQuery Accesible Offcanvas Panels",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "homepage": "https://github.com/vmitsaras/js-offcanvas",
@@ -52,5 +52,12 @@ "license": "MIT",
   },
+  "dependencies": {
+    "js-utilities": "*",
+    "js-trap-tab": "*",
+    "js-ripple": "*",
+    "js-button": "*"
+  },
   "engines": {
     "node": ">=0.8.0",
-    "npm": ">=1.2.10"
+    "npm": ">=1.2.10",
+    "yarn": ">= 1.0.0"
   },
@@ -57,0 +64,0 @@ "config": {

README.md

@@ -30,3 +30,2 @@ # js-offcanvas
 
-* Install with Bower: `bower install js-offcanvas --save`
 * Install with npm: `npm install js-offcanvas`
@@ -237,3 +236,2 @@ * Install with yarn: `yarn add js-offcanvas`
 * jQuery
-* Modernizr
 
@@ -240,0 +238,0 @@ ---

src/js-offcanvas.js

 /* global jQuery:true */
-;(function( w, $ ){
+;(function( window, $ ){
 	"use strict";
@@ -7,8 +7,8 @@
 		componentName = name + "-component",
-		utils = w.utils,
-		doc = w.document;
+		utils = window.utils,
+		doc = document;
 
-	w.componentNamespace = w.componentNamespace || {};
+	window.componentNamespace = window.componentNamespace || {};
 
-	var Offcanvas = w.componentNamespace.Offcanvas = function( element,options ){
+	var Offcanvas = window.componentNamespace.Offcanvas = function( element,options ){
 		if( !element ){
@@ -58,3 +58,3 @@ throw new Error( "Element required to initialize object" );
 		}
-		if(!w.utils.supportTransition){
+		if(!utils.supportTransition){
 			panelClasses.push( utils.createModifierClass(options.baseClass, options.supportNoTransitionsClass));
@@ -99,3 +99,3 @@ }
 	Offcanvas.prototype._trapTabKey = function() {
-		this.trapTabKey = new w.componentNamespace.TrapTabKey(this.element);
+		this.trapTabKey = new window.componentNamespace.TrapTabKey(this.element);
 		this.trapTabKey.init();
@@ -126,3 +126,3 @@ };
 		if( this.$closeBtn.length ){
-			this.closeBtn = new w.componentNamespace.Button(this.$closeBtn[0]);
+			this.closeBtn = new window.componentNamespace.Button(this.$closeBtn[0]);
 			this.closeBtn.init();
@@ -296,3 +296,3 @@ this.closeBtn.controls(this.$element.attr('id'));
 		}
-		new w.componentNamespace.OffcanvasTrigger( $triggerButton[0], { "offcanvas": offcanvasID } ).init();
+		new window.componentNamespace.OffcanvasTrigger( $triggerButton[0], { "offcanvas": offcanvasID } ).init();
 	};
@@ -299,0 +299,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Wildcard dependency

Quality

Package has a dependency with a floating version range. This can cause issues if the dependency publishes a new major version.

Found 4 instances in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

349439

increased by67.35%

Lines of code

7987

increased by108.27%

Worsened metrics

Dependency count

4

increased byInfinity%

Number of medium quality alerts

4

increased byInfinity%

Number of lines in readme file

240

decreased by-0.83%

Dependency changes

• + Addedjs-button@*

• + Addedjs-ripple@*

• + Addedjs-trap-tab@*

• + Addedjs-utilities@*

• + Addedjs-button@1.2.1(transitive)

• + Addedjs-ripple@1.0.0(transitive)

• + Addedjs-trap-tab@1.0.3(transitive)

• + Addedjs-utilities@1.0.2(transitive)