// 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