/*! ======================================================================== * Bootstrap Toggle: bootstrap-toggle.js v2.2.0 * http://www.bootstraptoggle.com * ======================================================================== * Copyright 2014 Min Hur, The New York Times Company * Licensed under MIT * ======================================================================== */ +function ($) { 'use strict'; // TOGGLE PUBLIC CLASS DEFINITION // ============================== var Toggle = function (element, options) { this.$element = $(element) this.options = $.extend({}, this.defaults(), options) this.render() } Toggle.VERSION = '2.2.0' Toggle.DEFAULTS = { on: 'On', off: 'Off', onstyle: 'primary', offstyle: 'default', size: 'normal', style: '', width: null, height: null } Toggle.prototype.defaults = function() { return { on: this.$element.attr('data-on') || Toggle.DEFAULTS.on, off: this.$element.attr('data-off') || Toggle.DEFAULTS.off, onstyle: this.$element.attr('data-onstyle') || Toggle.DEFAULTS.onstyle, offstyle: this.$element.attr('data-offstyle') || Toggle.DEFAULTS.offstyle, size: this.$element.attr('data-size') || Toggle.DEFAULTS.size, style: this.$element.attr('data-style') || Toggle.DEFAULTS.style, width: this.$element.attr('data-width') || Toggle.DEFAULTS.width, height: this.$element.attr('data-height') || Toggle.DEFAULTS.height } } Toggle.prototype.render = function () { this._onstyle = 'btn-' + this.options.onstyle this._offstyle = 'btn-' + this.options.offstyle var size = this.options.size === 'large' ? 'btn-lg' : this.options.size === 'small' ? 'btn-sm' : this.options.size === 'mini' ? 'btn-xs' : '' var $toggleOn = $('<label class="btn">').html(this.options.on) .addClass(this._onstyle + ' ' + size) var $toggleOff = $('<label class="btn">').html(this.options.off) .addClass(this._offstyle + ' ' + size + ' active') var $toggleHandle = $('<span class="toggle-handle btn btn-default">') .addClass(size) var $toggleGroup = $('<div class="toggle-group">') .append($toggleOn, $toggleOff, $toggleHandle) var $toggle = $('<div class="toggle btn" data-toggle="toggle">') .addClass( this.$element.prop('checked') ? this._onstyle : this._offstyle+' off' ) .addClass(size).addClass(this.options.style) this.$element.wrap($toggle) $.extend(this, { $toggle: this.$element.parent(), $toggleOn: $toggleOn, $toggleOff: $toggleOff, $toggleGroup: $toggleGroup }) this.$toggle.append($toggleGroup) var width = this.options.width || Math.max($toggleOn.outerWidth(), $toggleOff.outerWidth())+($toggleHandle.outerWidth()/2) var height = this.options.height || Math.max($toggleOn.outerHeight(), $toggleOff.outerHeight()) $toggleOn.addClass('toggle-on') $toggleOff.addClass('toggle-off') this.$toggle.css({ width: width, height: height }) if (this.options.height) { $toggleOn.css('line-height', $toggleOn.height() + 'px') $toggleOff.css('line-height', $toggleOff.height() + 'px') } this.update(true) this.trigger(true) } Toggle.prototype.toggle = function () { if (this.$element.prop('checked')) this.off() else this.on() } Toggle.prototype.on = function (silent) { if (this.$element.prop('disabled')) return false this.$toggle.removeClass(this._offstyle + ' off').addClass(this._onstyle) this.$element.prop('checked', true) if (!silent) this.trigger() } Toggle.prototype.off = function (silent) { if (this.$element.prop('disabled')) return false this.$toggle.removeClass(this._onstyle).addClass(this._offstyle + ' off') this.$element.prop('checked', false) if (!silent) this.trigger() } Toggle.prototype.enable = function () { this.$toggle.removeAttr('disabled') this.$element.prop('disabled', false) } Toggle.prototype.disable = function () { this.$toggle.attr('disabled', 'disabled') this.$element.prop('disabled', true) } Toggle.prototype.update = function (silent) { if (this.$element.prop('disabled')) this.disable() else this.enable() if (this.$element.prop('checked')) this.on(silent) else this.off(silent) } Toggle.prototype.trigger = function (silent) { this.$element.off('change.bs.toggle') if (!silent) this.$element.change() this.$element.on('change.bs.toggle', $.proxy(function() { this.update() }, this)) } Toggle.prototype.destroy = function() { this.$element.off('change.bs.toggle') this.$toggleGroup.remove() this.$element.removeData('bs.toggle') this.$element.unwrap() } // TOGGLE PLUGIN DEFINITION // ======================== function Plugin(option) { return this.each(function () { var $this = $(this) var data = $this.data('bs.toggle') var options = typeof option == 'object' && option if (!data) $this.data('bs.toggle', (data = new Toggle(this, options))) if (typeof option == 'string' && data[option]) data[option]() }) } var old = $.fn.bootstrapToggle $.fn.bootstrapToggle = Plugin $.fn.bootstrapToggle.Constructor = Toggle // TOGGLE NO CONFLICT // ================== $.fn.toggle.noConflict = function () { $.fn.bootstrapToggle = old return this } // TOGGLE DATA-API // =============== $(function() { $('input[type=checkbox][data-toggle^=toggle]').bootstrapToggle() }) $(document).on('click.bs.toggle', 'div[data-toggle^=toggle]', function(e) { var $checkbox = $(this).find('input[type=checkbox]') $checkbox.bootstrapToggle('toggle') e.preventDefault() }) }(jQuery);