Comparing version 1.1.0 to 1.2.1
@@ -1,6 +0,6 @@ | ||
(function( w, $ ){ | ||
(function( window, $ ){ | ||
"use strict"; | ||
var name = "button", | ||
componentName = name + "-component", | ||
utils = w.utils, | ||
utils = window.utils, | ||
cl = { | ||
@@ -13,5 +13,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 ){ | ||
@@ -39,2 +39,3 @@ throw new Error( "Element required to initialize object" ); | ||
this.isPressed = false; | ||
this.isExpanded = false; | ||
this._create(); | ||
@@ -46,5 +47,5 @@ | ||
var options = this.options, | ||
buttonClasses = [options.baseClass], | ||
buttonTextClasses = [options.baseClass + '__text']; | ||
this._buttonClasses = [options.baseClass]; | ||
if ( options.label === null ) { | ||
@@ -61,3 +62,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) ); | ||
@@ -67,7 +68,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) ); | ||
} | ||
@@ -77,3 +78,3 @@ } | ||
if ( options.modifiers ) { | ||
utils.cssModifiers(options.modifiers,buttonClasses,options.baseClass); | ||
utils.cssModifiers(options.modifiers,this._buttonClasses,options.baseClass); | ||
} | ||
@@ -87,3 +88,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) ); | ||
@@ -97,3 +98,3 @@ this.$buttonTextActive = $( '<span></span>' ) | ||
this.$element.addClass( buttonClasses.join( " " ) ); | ||
this.$element.addClass( this._buttonClasses.join( " " ) ); | ||
@@ -116,5 +117,2 @@ if ( options.role) { | ||
} | ||
if ( options.ripple && w.componentNamespace.Ripple ) { | ||
new w.componentNamespace.Ripple( this.element ).init(); | ||
} | ||
this.$element.trigger( "create." + name ); | ||
@@ -129,4 +127,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); | ||
}; | ||
@@ -138,2 +136,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 = { | ||
@@ -154,4 +177,3 @@ baseClass:"c-button", | ||
pressed: false, | ||
expanded: false, | ||
ripple: false | ||
expanded: false | ||
}; | ||
@@ -171,3 +193,3 @@ | ||
return this.each( function(){ | ||
new w.componentNamespace.Button( this ).init(); | ||
new window.componentNamespace.Button( this ).init(); | ||
}); | ||
@@ -174,0 +196,0 @@ }; |
@@ -1,6 +0,6 @@ | ||
/*! js-Button - v1.0.0 - 2017-09-23 | ||
/*! js-Button - v1.2.1 - 2018-05-03 | ||
jQuery Plugin for progressively enhanced Buttons | ||
* https://github.com/vmitsaras/js-button | ||
* Copyright (c) 2017 Vasileios Mitsaras (@vmitsaras) | ||
* Copyright (c) 2018 Vasileios Mitsaras (@vmitsaras) | ||
* License */ | ||
!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="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); |
@@ -1,6 +0,5 @@ | ||
/* global Modernizr:true */ | ||
;(function( w ){ | ||
;(function( window ){ | ||
"use strict"; | ||
var utils = {}; | ||
var utils = window.utils || {}; | ||
@@ -15,2 +14,3 @@ utils.classes = { | ||
isAnimating: "is-animating", | ||
isVisible: "is-visible", | ||
hidden: "u-hidden" | ||
@@ -38,6 +38,2 @@ }; | ||
/** | ||
* a11yclick | ||
* Slightly modified from: http://www.karlgroves.com/2014/11/24/ridiculously-easy-trick-for-keyboard-accessibility/ | ||
*/ | ||
utils.a11yclick = function(event) { | ||
@@ -58,21 +54,30 @@ var code = event.charCode || event.keyCode, | ||
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.a11yclickBind = function(el, callback, name) { | ||
el.on("click." + name + " keydown." + name,function(event){ | ||
if ( utils.a11yclick(event)) { | ||
event.preventDefault(event); | ||
if( callback && typeof callback === 'function' ) { callback.call(); } | ||
el.trigger('clicked.'+name); | ||
} | ||
}); | ||
}; | ||
utils.animEndEventNames = { | ||
'WebkitAnimation' : 'webkitAnimationEnd', | ||
'OAnimation' : 'oAnimationEnd', | ||
'msAnimation' : 'MSAnimationEnd', | ||
'animation' : 'animationend' | ||
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.transEndEventName = utils.transEndEventNames[Modernizr.prefixed('transition')]; | ||
utils.animEndEventName = utils.animEndEventNames[Modernizr.prefixed('animation')]; | ||
utils.transEndEventName = utils.whichTransitionEvent(); | ||
utils.onEndTransition = function( el, callback ) { | ||
@@ -94,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 ){ | ||
@@ -123,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 { | ||
@@ -138,4 +127,3 @@ return attr && JSON.parse( attr ) || {}; | ||
// expose global utils | ||
w.utils = utils; | ||
window.utils = utils; | ||
@@ -145,137 +133,7 @@ })(this); | ||
(function( w, $ ){ | ||
(function( window, $ ){ | ||
"use strict"; | ||
var name = "ripple", | ||
componentName = name + "-component", | ||
utils = w.utils; | ||
w.componentNamespace = w.componentNamespace || {}; | ||
var Ripple = w.componentNamespace.Ripple = function( element, options ){ | ||
if( !element ){ | ||
throw new Error( "Element required to initialize object" ); | ||
} | ||
// assign element for method events | ||
this.element = element; | ||
this.$element = $( element ); | ||
// Options | ||
this.options = options = options || {}; | ||
this.metadata = utils.getMetaOptions( this.element, name ); | ||
this.options = $.extend( {}, this.defaults, this.metadata, options ); | ||
}; | ||
Ripple.prototype.init = function(){ | ||
if ( this.$element.data( componentName ) ) { | ||
return; | ||
} | ||
this.$element.data( componentName, this ); | ||
if( !utils.supportAnimations ) { | ||
return; | ||
} | ||
this.isAnimating = false; | ||
this.$element.trigger( "beforecreate." + name ); | ||
this._create(); | ||
this.$element.bind('mousedown', this._animate.bind(this) ); | ||
}; | ||
Ripple.prototype.refresh = function(){ | ||
var self = this, | ||
d = Math.max(self.$element.outerWidth(), self.$element.outerHeight())/this.options.widthDivider; | ||
this.$ripple.css({height: d, width: d}); | ||
this.$element.trigger( "refreshed." + name ); | ||
}; | ||
Ripple.prototype._create = function(){ | ||
var self = this, | ||
options = this.options, | ||
rippleClasses = [options.baseClass]; | ||
if ( options.modifiers ) { | ||
utils.cssModifiers(options.modifiers,rippleClasses,options.baseClass); | ||
} | ||
this.$ripple = $( '<span></span>' ).addClass( rippleClasses.join( " " ) ).appendTo(this.$element); | ||
this.refresh(); | ||
this.$element.trigger( "create." + name ); | ||
$( w.document ).on( "refresh." + name, function(){ | ||
self.refresh(); | ||
}); | ||
}; | ||
Ripple.prototype._animate = function(){ | ||
var self = this,x,y,point; | ||
if( this.isAnimating ) { | ||
return; | ||
} | ||
this.isAnimating = true; | ||
// record the x for threshold calculations | ||
point = this._getPoint( event ); | ||
this.downX = point.x; | ||
this.downY = point.y; | ||
x = this.downX - this.$element.offset().left - this.$ripple.width()/2; | ||
y = this.downY - this.$element.offset().top - this.$ripple.height()/2; | ||
this.$ripple.css({top: y+'px', left: x+'px'}).addClass(utils.classes.isAnimating); | ||
this.$element.addClass(utils.classes.isClicked); | ||
utils.onEndAnimation( this.$ripple[0], function() { | ||
self.$element.removeClass(utils.classes.isClicked); | ||
self.$ripple.removeClass(utils.classes.isAnimating); | ||
self.isAnimating = false; | ||
} ); | ||
}; | ||
Ripple.prototype._getPoint = function( event ) { | ||
var touch = event.touches || (event.originalEvent && event.originalEvent.touches); | ||
if( touch ){ | ||
return { | ||
x: touch[0].pageX, | ||
y: touch[0].pageY | ||
}; | ||
} | ||
return { | ||
x: event.pageX || event.clientX, | ||
y: event.pageY || event.clientY | ||
}; | ||
}; | ||
Ripple.prototype.defaults = { | ||
baseClass:"o-ripple", | ||
modifiers: null, | ||
widthDivider: 4 | ||
}; | ||
Ripple.defaults = Ripple.prototype.defaults; | ||
})(this, jQuery); | ||
(function( w, $ ){ | ||
"use strict"; | ||
var pluginName = "ripple", | ||
initSelector = ".js-" + pluginName; | ||
$.fn[ pluginName ] = function(){ | ||
return this.each( function(){ | ||
new w.componentNamespace.Ripple( this ).init(); | ||
}); | ||
}; | ||
// auto-init on enhance (which is called on domready) | ||
$( document ).bind( "enhance", function( e ){ | ||
$( $( e.target ).is( initSelector ) && e.target ).add( initSelector, e.target ).filter( initSelector )[ pluginName ](); | ||
}); | ||
})(this, jQuery); | ||
(function( w, $ ){ | ||
"use strict"; | ||
var name = "button", | ||
componentName = name + "-component", | ||
utils = w.utils, | ||
utils = window.utils, | ||
cl = { | ||
@@ -288,5 +146,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 ){ | ||
@@ -314,2 +172,3 @@ throw new Error( "Element required to initialize object" ); | ||
this.isPressed = false; | ||
this.isExpanded = false; | ||
this._create(); | ||
@@ -321,5 +180,5 @@ | ||
var options = this.options, | ||
buttonClasses = [options.baseClass], | ||
buttonTextClasses = [options.baseClass + '__text']; | ||
this._buttonClasses = [options.baseClass]; | ||
if ( options.label === null ) { | ||
@@ -336,3 +195,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) ); | ||
@@ -342,7 +201,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) ); | ||
} | ||
@@ -352,3 +211,3 @@ } | ||
if ( options.modifiers ) { | ||
utils.cssModifiers(options.modifiers,buttonClasses,options.baseClass); | ||
utils.cssModifiers(options.modifiers,this._buttonClasses,options.baseClass); | ||
} | ||
@@ -362,3 +221,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) ); | ||
@@ -372,3 +231,3 @@ this.$buttonTextActive = $( '<span></span>' ) | ||
this.$element.addClass( buttonClasses.join( " " ) ); | ||
this.$element.addClass( this._buttonClasses.join( " " ) ); | ||
@@ -391,5 +250,2 @@ if ( options.role) { | ||
} | ||
if ( options.ripple && w.componentNamespace.Ripple ) { | ||
new w.componentNamespace.Ripple( this.element ).init(); | ||
} | ||
this.$element.trigger( "create." + name ); | ||
@@ -404,4 +260,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); | ||
}; | ||
@@ -413,2 +269,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 = { | ||
@@ -429,4 +310,3 @@ baseClass:"c-button", | ||
pressed: false, | ||
expanded: false, | ||
ripple: false | ||
expanded: false | ||
}; | ||
@@ -446,3 +326,3 @@ | ||
return this.each( function(){ | ||
new w.componentNamespace.Button( this ).init(); | ||
new window.componentNamespace.Button( this ).init(); | ||
}); | ||
@@ -449,0 +329,0 @@ }; |
@@ -1,6 +0,6 @@ | ||
/*! js-Button - v1.0.0 - 2017-09-23 | ||
/*! js-Button - v1.2.1 - 2018-05-03 | ||
jQuery Plugin for progressively enhanced Buttons | ||
* https://github.com/vmitsaras/js-button | ||
* Copyright (c) 2017 Vasileios Mitsaras (@vmitsaras) | ||
* Copyright (c) 2018 Vasileios Mitsaras (@vmitsaras) | ||
* 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",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.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))}},a.utils=b}(this),function(a,b){"use strict";var c="ripple",d=c+"-component",e=a.utils;a.componentNamespace=a.componentNamespace||{};var f=a.componentNamespace.Ripple=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)};f.prototype.init=function(){this.$element.data(d)||(this.$element.data(d,this),e.supportAnimations&&(this.isAnimating=!1,this.$element.trigger("beforecreate."+c),this._create(),this.$element.bind("mousedown",this._animate.bind(this))))},f.prototype.refresh=function(){var a=this,b=Math.max(a.$element.outerWidth(),a.$element.outerHeight())/this.options.widthDivider;this.$ripple.css({height:b,width:b}),this.$element.trigger("refreshed."+c)},f.prototype._create=function(){var d=this,f=this.options,g=[f.baseClass];f.modifiers&&e.cssModifiers(f.modifiers,g,f.baseClass),this.$ripple=b("<span></span>").addClass(g.join(" ")).appendTo(this.$element),this.refresh(),this.$element.trigger("create."+c),b(a.document).on("refresh."+c,function(){d.refresh()})},f.prototype._animate=function(){var a,b,c,d=this;this.isAnimating||(this.isAnimating=!0,c=this._getPoint(event),this.downX=c.x,this.downY=c.y,a=this.downX-this.$element.offset().left-this.$ripple.width()/2,b=this.downY-this.$element.offset().top-this.$ripple.height()/2,this.$ripple.css({top:b+"px",left:a+"px"}).addClass(e.classes.isAnimating),this.$element.addClass(e.classes.isClicked),e.onEndAnimation(this.$ripple[0],function(){d.$element.removeClass(e.classes.isClicked),d.$ripple.removeClass(e.classes.isAnimating),d.isAnimating=!1}))},f.prototype._getPoint=function(a){var b=a.touches||a.originalEvent&&a.originalEvent.touches;return b?{x:b[0].pageX,y:b[0].pageY}:{x:a.pageX||a.clientX,y:a.pageY||a.clientY}},f.prototype.defaults={baseClass:"o-ripple",modifiers:null,widthDivider:4},f.defaults=f.prototype.defaults}(this,jQuery),function(a,b){"use strict";var c="ripple",d=".js-"+c;b.fn[c]=function(){return this.each(function(){new a.componentNamespace.Ripple(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="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){"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="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); |
@@ -0,0 +0,0 @@ /*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - <%= grunt.template.today("yyyy-mm-dd") %> |
@@ -0,0 +0,0 @@ module.exports = { |
module.exports = { | ||
files: ["<%= pkg.config.dist %>/"] | ||
}; |
@@ -0,0 +0,0 @@ module.exports = { |
@@ -0,0 +0,0 @@ module.exports = { |
@@ -0,0 +0,0 @@ module.exports = { |
@@ -0,0 +0,0 @@ module.exports = { |
@@ -0,0 +0,0 @@ module.exports = { |
@@ -0,0 +0,0 @@ module.exports = { |
@@ -0,0 +0,0 @@ module.exports = { |
@@ -0,0 +0,0 @@ module.exports = { |
module.exports = { | ||
all: ["<%= pkg.config.test %>/**/*.html"] | ||
}; |
@@ -0,0 +0,0 @@ module.exports = { |
@@ -0,0 +0,0 @@ module.exports = { |
@@ -0,0 +0,0 @@ module.exports = { |
@@ -0,0 +0,0 @@ module.exports = { |
@@ -9,4 +9,3 @@ module.exports = { | ||
src: [ | ||
"bower_components/js-utilities/utils.js", | ||
"bower_components/js-ripple/dist/_js/js-ripple.js", | ||
"node_modules/js-utilities/utils.js", | ||
"src/<%= pkg.name %>.js" | ||
@@ -13,0 +12,0 @@ ] |
@@ -0,0 +0,0 @@ module.exports = function(grunt) { |
@@ -0,0 +0,0 @@ module.exports = function( grunt ) { |
@@ -6,3 +6,3 @@ { | ||
"description": "jQuery Plugin for progressively enhanced Buttons", | ||
"version": "1.1.0", | ||
"version": "1.2.1", | ||
"homepage": "https://github.com/vmitsaras/js-button", | ||
@@ -49,5 +49,9 @@ "license": "MIT", | ||
}, | ||
"dependencies": { | ||
"js-utilities": "*" | ||
}, | ||
"engines": { | ||
"node": ">=0.8.0", | ||
"npm": ">=1.2.10" | ||
"npm": ">=1.2.10", | ||
"yarn": ">= 1.0.0" | ||
}, | ||
@@ -54,0 +58,0 @@ "config": { |
@@ -0,0 +0,0 @@ # js-button |
/* global jQuery:true */ | ||
(function( w, $ ){ | ||
(function( window, $ ){ | ||
"use strict"; | ||
var name = "button", | ||
componentName = name + "-component", | ||
utils = w.utils, | ||
utils = window.utils, | ||
cl = { | ||
@@ -15,5 +15,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 ){ | ||
@@ -41,2 +41,3 @@ throw new Error( "Element required to initialize object" ); | ||
this.isPressed = false; | ||
this.isExpanded = false; | ||
this._create(); | ||
@@ -48,5 +49,5 @@ | ||
var options = this.options, | ||
buttonClasses = [options.baseClass], | ||
buttonTextClasses = [options.baseClass + '__text']; | ||
this._buttonClasses = [options.baseClass]; | ||
if ( options.label === null ) { | ||
@@ -63,3 +64,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) ); | ||
@@ -69,7 +70,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) ); | ||
} | ||
@@ -79,3 +80,3 @@ } | ||
if ( options.modifiers ) { | ||
utils.cssModifiers(options.modifiers,buttonClasses,options.baseClass); | ||
utils.cssModifiers(options.modifiers,this._buttonClasses,options.baseClass); | ||
} | ||
@@ -89,3 +90,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) ); | ||
@@ -99,3 +100,3 @@ this.$buttonTextActive = $( '<span></span>' ) | ||
this.$element.addClass( buttonClasses.join( " " ) ); | ||
this.$element.addClass( this._buttonClasses.join( " " ) ); | ||
@@ -118,5 +119,2 @@ if ( options.role) { | ||
} | ||
if ( options.ripple && w.componentNamespace.Ripple ) { | ||
new w.componentNamespace.Ripple( this.element ).init(); | ||
} | ||
this.$element.trigger( "create." + name ); | ||
@@ -131,4 +129,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); | ||
}; | ||
@@ -140,2 +138,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 = { | ||
@@ -156,4 +179,3 @@ baseClass:"c-button", | ||
pressed: false, | ||
expanded: false, | ||
ripple: false | ||
expanded: false | ||
}; | ||
@@ -173,3 +195,3 @@ | ||
return this.each( function(){ | ||
new w.componentNamespace.Button( this ).init(); | ||
new window.componentNamespace.Button( this ).init(); | ||
}); | ||
@@ -176,0 +198,0 @@ }; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Wildcard dependency
QualityPackage has a dependency with a floating version range. This can cause issues if the dependency publishes a new major version.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
114322
1
2605
2
+ Addedjs-utilities@*
+ Addedjs-utilities@1.0.2(transitive)