// from: https://raw.githubusercontent.com/umdjs/umd/master/jqueryPlugin.js
// Uses AMD or browser globals to create a jQuery plugin.
(function (factory) {
if (typeof define === 'function' && define.amd) {
//TODO: So...this turns out to be an all or nothing thing. If I load jQuery in the define below, it will
// (of course) wipe the old jquery *and all the plugins loaded into it*. So the define below *is still
// relying on jquery being loaded globally* in order to preserve plugins.
define([], factory);
} else {
// Browser globals
factory(jQuery);
}
}(function () {
/** Multi 'mode' button (or any element really) that changes the html
* contents of itself when clicked. Pass in an ordered list of
* objects with 'html' and (optional) onclick functions.
*
* When clicked in a particular node, the onclick function will
* be called (with the element as this) and the element will
* switch to the next mode, replacing its html content with
* that mode's html.
*
* If there is no next mode, the element will switch back to
* the first mode.
* @example:
* $( '.myElement' ).modeButton({
* modes : [
* {
* mode: 'bler',
* html: '
Bler
',
* onclick : function(){
* $( 'body' ).css( 'background-color', 'red' );
* }
* },
* {
* mode: 'bloo',
* html: 'Bloo
',
* onclick : function(){
* $( 'body' ).css( 'background-color', 'blue' );
* }
* },
* {
* mode: 'blah',
* html: 'Blah
',
* onclick : function(){
* $( 'body' ).css( 'background-color', 'grey' );
* }
* },
* ]
* });
* $( '.myElement' ).modeButton( 'callModeFn', 'bler' );
*/
/** constructor */
function ModeButton( element, options ){
this.currModeIndex = 0;
return this._init( element, options );
}
/** html5 data key to store this object inside an element */
ModeButton.prototype.DATA_KEY = 'mode-button';
/** default options */
ModeButton.prototype.defaults = {
switchModesOnClick : true
};
// ---- private interface
/** set up options, intial mode, and the click handler */
ModeButton.prototype._init = function _init( element, options ){
//console.debug( 'ModeButton._init:', element, options );
options = options || {};
this.$element = $( element );
this.options = $.extend( true, {}, this.defaults, options );
if( !options.modes ){
throw new Error( 'ModeButton requires a "modes" array' );
}
var modeButton = this;
this.$element.click( function _ModeButtonClick( event ){
// call the curr mode fn
modeButton.callModeFn();
// inc the curr mode index
if( modeButton.options.switchModesOnClick ){ modeButton._incModeIndex(); }
// set the element html
$( this ).html( modeButton.options.modes[ modeButton.currModeIndex ].html );
});
return this.reset();
};
/** increment the mode index to the next in the array, looping back to zero if at the last */
ModeButton.prototype._incModeIndex = function _incModeIndex(){
this.currModeIndex += 1;
if( this.currModeIndex >= this.options.modes.length ){
this.currModeIndex = 0;
}
return this;
};
/** get the mode index in the modes array for the given key (mode name) */
ModeButton.prototype._getModeIndex = function _getModeIndex( modeKey ){
for( var i=0; i