js-offcanvas - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

dist/_js/js-offcanvas.js

@@ -151,3 +151,5 @@ ;(function( w, $ ){
 
-			this.$element.attr( "aria-hidden", "false" ).addClass(utils.createModifierClass(options.baseClass,'opening'));
+			this.$element.attr( "aria-hidden", "false" )
+				.addClass(utils.createModifierClass(options.baseClass,'opening'))
+				.trigger( "opening." + name );
 			this.$content.addClass( this._contentOpenClasses.join( " " ));
@@ -170,3 +172,2 @@
 			// callback on open
-			//options.onOpen( this );
 			if( this.onOpen && typeof this.onOpen === 'function' ) {
@@ -182,4 +183,4 @@ this.onOpen.call(this.$element);
 	Offcanvas.prototype.close = function(){
-		var self = this;
-
+		var self = this,
+			options = self.options;
 		if( !this.isOpen ){
@@ -196,4 +197,7 @@ return;
 		}
-		this.$element.attr( "aria-hidden", "true" );
 
+		this.$element.attr( "aria-hidden", "true" )
+			.addClass(utils.createModifierClass(options.baseClass,'closing'))
+			.trigger( "closing." + name );
+
 		this.trapTabKey.unbindTrap();
@@ -214,2 +218,3 @@
 			self.$content.removeClass( self._contentOpenClasses.join( " " ) );
+			self.$element.removeClass(utils.createModifierClass(options.baseClass,'closing'));
 
@@ -223,3 +228,2 @@ $('body').removeClass(self._bodyOpenClasses.join(" "));
 		// callback onClose
-		//options.onClose( this );
 		if( this.onClose && typeof this.onClose === 'function' ) {
@@ -274,3 +278,5 @@ this.onClose.call(this.element);
 			self.$element.trigger( "resizing." + name );
-			self.close();
+			if (self.options.resize) {
+				self.close();
+			}
 		}
@@ -277,0 +283,0 @@ $(window).on('resize.' + name + ' orientationchange.' + name, onResize);

dist/_js/js-offcanvas.min.js

@@ -1,2 +0,2 @@
-/*! js-Offcanvas - v1.1.1 - 2017-09-23
+/*! js-Offcanvas - v1.2.1 - 2017-12-23
 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("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")),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;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"),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(" ")),b("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.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:!0,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=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("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("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:!0,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

@@ -597,3 +597,5 @@ /* global Modernizr:true */
 
-			this.$element.attr( "aria-hidden", "false" ).addClass(utils.createModifierClass(options.baseClass,'opening'));
+			this.$element.attr( "aria-hidden", "false" )
+				.addClass(utils.createModifierClass(options.baseClass,'opening'))
+				.trigger( "opening." + name );
 			this.$content.addClass( this._contentOpenClasses.join( " " ));
@@ -616,3 +618,2 @@
 			// callback on open
-			//options.onOpen( this );
 			if( this.onOpen && typeof this.onOpen === 'function' ) {
@@ -628,4 +629,4 @@ this.onOpen.call(this.$element);
 	Offcanvas.prototype.close = function(){
-		var self = this;
-
+		var self = this,
+			options = self.options;
 		if( !this.isOpen ){
@@ -642,4 +643,7 @@ return;
 		}
-		this.$element.attr( "aria-hidden", "true" );
 
+		this.$element.attr( "aria-hidden", "true" )
+			.addClass(utils.createModifierClass(options.baseClass,'closing'))
+			.trigger( "closing." + name );
+
 		this.trapTabKey.unbindTrap();
@@ -660,2 +664,3 @@
 			self.$content.removeClass( self._contentOpenClasses.join( " " ) );
+			self.$element.removeClass(utils.createModifierClass(options.baseClass,'closing'));
 
@@ -669,3 +674,2 @@ $('body').removeClass(self._bodyOpenClasses.join(" "));
 		// callback onClose
-		//options.onClose( this );
 		if( this.onClose && typeof this.onClose === 'function' ) {
@@ -720,3 +724,5 @@ this.onClose.call(this.element);
 			self.$element.trigger( "resizing." + name );
-			self.close();
+			if (self.options.resize) {
+				self.close();
+			}
 		}
@@ -723,0 +729,0 @@ $(window).on('resize.' + name + ' orientationchange.' + name, onResize);

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

@@ -1,2 +0,2 @@
-/*! js-Offcanvas - v1.1.1 - 2017-09-23
+/*! js-Offcanvas - v1.2.1 - 2017-12-23
 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("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")),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;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"),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(" ")),b("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.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:!0,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={};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("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("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:!0,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);

package.json

@@ -6,3 +6,3 @@ {
   "description": "jQuery Accesible Offcanvas Panels",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "homepage": "https://github.com/vmitsaras/js-offcanvas",
@@ -9,0 +9,0 @@ "license": "MIT",

README.md

@@ -29,7 +29,17 @@ # js-offcanvas
 ## Getting Started
+
+* Install with Bower: `bower install js-offcanvas --save`
+* Install with npm: `npm install js-offcanvas`
+* Install with yarn: `yarn add js-offcanvas`
+
 ##### JS & CSS
-Include the Offcanvas `.css` and `.js` files in your site.
+Include the `.css` and `.js` files in your site.
 ```html
 <script src="js-offcanvas.pkgd.min.js"></script>
 <link href="js-offcanvas.css" rel="stylesheet">
+````
+###### CDN
+```html
+<script src="https://unpkg.com/js-offcanvas/dist/_js/js-offcanvas.pkgd.min.js"></script> 
+<link href="https://unpkg.com/js-offcanvas/dist/_css/prefixed/js-offcanvas.css" rel="stylesheet">
 ```
@@ -40,11 +50,8 @@
 ```html
-<body>
     <div class="c-offcanvas-content-wrap">
-        ...
-        <a href="#off-canvas" data-offcanvas-trigger="off-canvas">Menu</a>
-        ...
+        <a href="#offCanvas" id="triggerButton">Menu</a>
+         <!-- Your Main Content goes here -->
     </div>
-    <aside class="js-offcanvas" id="off-canvas"></aside>
-</body>
-
+    
+    <aside id="offCanvas"></aside>
 ```
@@ -54,18 +61,68 @@ ##### Initialize
 
-$('#off-canvas').offcanvas({
-// options
+$('#offCanvas').offcanvas({
+    modifiers: 'left, overlay', // default options
+    triggerButton: '#triggerButton' // btn to open offcanvas
 });
-// or trigger enhance - Initialize with HTML 
-$( function(){
-    $(document).trigger("enhance");
-});
 ```
 
-#### Initialize with HTML     
-
+##### Initialize with HTML
+###### Trigger Button
+Include the CSS-Class `js-offcanvas-trigger`  and `data-offcanvas-trigger="id-of-your-offcanvas"`
 ```html
-<a class="js-offcanvas-trigger" data-offcanvas-trigger="off-canvas" href="#off-canvas">Menu</a>
-<aside class="js-offcanvas" data-offcanvas-options='{ "modifiers": "left,overlay" }' id="off-canvas"></aside>
+<a  class="js-offcanvas-trigger" 
+    data-offcanvas-trigger="off-canvas-id"
+    href="#off-canvas">Menu</a>
+````
+###### Offcanvas Element
+Include the CSS-Class `js-offcanvas`  and `data-offcanvas-options="{options}"`
+```html
+<aside class="js-offcanvas" 
+       data-offcanvas-options='{"modifiers": "left,overlay"}' 
+       id="off-canvas-id">...</aside>
 ```
+###### Trigger Enhance
+```js   
+  // you have to trigger enhance
+   $( function(){
+       $(document).trigger("enhance");
+   });
+   ```
 
+## Options
+```js   
+$('#offCanvas').offcanvas({    
+    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: true,
+    triggerButton: '#triggerButton' ,
+    modal: true,
+    onOpen: function() {},
+    onClose: function() {},
+    onInit: function() {}
+})
+.on( "create.offcanvas", function( e ){ } )
+.on( "open.offcanvas", function( e ){ } )
+.on( "opening.offcanvas", function( e ){ } )
+.on( "close.offcanvas", function( e ){ } )
+.on( "closing.offcanvas", function( e ){ } )
+.on( "resizing.offcanvas", function( e ){ } );
+   ```
+
+## Examples on Codepen
+* [Collection](https://codepen.io/collection/ArLPWW/)
+* [Codepen Template](https://codepen.io/vmitsaras/pen/jrGAOa)
+* [Demo Site Examples](https://codepen.io/vmitsaras/pen/gwGwJE)
+* [Full Width](https://codepen.io/vmitsaras/pen/ZpXAmA)
+* [Codrops  SVG Shape Overlays](https://codepen.io/vmitsaras/pen/MOQqmX)
+#### Bootstrap v4
+* [Dashboard](https://codepen.io/vmitsaras/full/pWNrEy/) 
+* [Starter](https://codepen.io/vmitsaras/full/veyJmv/)
+* [Boxed Layout](https://codepen.io/vmitsaras/pen/wrLePg)
+
 # Options
@@ -176,29 +233,6 @@ Set instance options by passing a valid object at initialization, or to the public defaults method. Custom options for a specific instance can also be set by attaching a data-offcanvas-options attribute to the target elment.
 ```
+  
+[http://offcanvas.vasilis.co](http://offcanvas.vasilis.co)
 
-## Examples
-#### Basic
-*With HTML*
-```html
-<button data-offcanvas-trigger="off-canvas-left">Left</button>
-<aside class="js-offcanvas" id="off-canvas-left"></aside>
-```
-*With jQuery*
-```js
-$('#off-canvas-left').offcanvas({
-    modifiers: 'left, overlay', // options
-    triggerButton: '.js-left' // btn to open offcanvas
-});
-```
-```html
-<button class="js-left">Left</button>
-<aside id="off-canvas-left"></aside>
-```
-#### Bootstrap
-check demo dashboard & starter
 
-## Package managers
-
-* Install with Bower: `bower install js-offcanvas --save`
-* Install with npm: `npm install js-offcanvas`
-
 ## Dependencies
@@ -210,12 +244,3 @@ * jQuery
 
-[View Demo](http://offcanvas.vasilis.co)
-
-Feel free to [let me know](http://www.twitter.com/vmitsaras) if you use js-offcanvas in one of your websites.
-
-## Release History
-
-* `v1.1.0`: Missing Options.
-* `v1.0.0`: Initial release.
-
 ## License
 Licensed under the MIT license.

src/js-offcanvas.js

@@ -152,3 +152,5 @@ /* global jQuery:true */
 
-			this.$element.attr( "aria-hidden", "false" ).addClass(utils.createModifierClass(options.baseClass,'opening'));
+			this.$element.attr( "aria-hidden", "false" )
+				.addClass(utils.createModifierClass(options.baseClass,'opening'))
+				.trigger( "opening." + name );
 			this.$content.addClass( this._contentOpenClasses.join( " " ));
@@ -171,3 +173,2 @@
 			// callback on open
-			//options.onOpen( this );
 			if( this.onOpen && typeof this.onOpen === 'function' ) {
@@ -183,4 +184,4 @@ this.onOpen.call(this.$element);
 	Offcanvas.prototype.close = function(){
-		var self = this;
-
+		var self = this,
+			options = self.options;
 		if( !this.isOpen ){
@@ -197,4 +198,7 @@ return;
 		}
-		this.$element.attr( "aria-hidden", "true" );
 
+		this.$element.attr( "aria-hidden", "true" )
+			.addClass(utils.createModifierClass(options.baseClass,'closing'))
+			.trigger( "closing." + name );
+
 		this.trapTabKey.unbindTrap();
@@ -215,2 +219,3 @@
 			self.$content.removeClass( self._contentOpenClasses.join( " " ) );
+			self.$element.removeClass(utils.createModifierClass(options.baseClass,'closing'));
 
@@ -224,3 +229,2 @@ $('body').removeClass(self._bodyOpenClasses.join(" "));
 		// callback onClose
-		//options.onClose( this );
 		if( this.onClose && typeof this.onClose === 'function' ) {
@@ -275,3 +279,5 @@ this.onClose.call(this.element);
 			self.$element.trigger( "resizing." + name );
-			self.close();
+			if (self.options.resize) {
+				self.close();
+			}
 		}
@@ -278,0 +284,0 @@ $(window).on('resize.' + name + ' orientationchange.' + name, onResize);

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

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

206340

increased by1.06%

Lines of code

3813

increased by0.32%

Number of lines in readme file

242

increased by11.52%

No dependency changes