src/main/resources/META-INF/resources/designer/lib/bootstrap-toggle.js

   1 /*! ========================================================================
   2  * Bootstrap Toggle: bootstrap-toggle.js v2.0.0
   3  * http://www.bootstraptoggle.com
   4  * ========================================================================
   5  * Copyright 2014 Min Hur, The New York Times Company
   6  * Licensed under MIT
   7  * ======================================================================== */
   8
   9
  10  +function ($) {
  11         'use strict';
  12
  13         // TOGGLE PUBLIC CLASS DEFINITION
  14         // ==============================
  15
  16         var Toggle = function (element, options) {
  17                 this.$element  = $(element)
  18                 this.options   = $.extend({}, this.defaults(), options)
  19                 this.render()
  20         }
  21
  22         Toggle.VERSION  = '3.0.0'
  23
  24         Toggle.DEFAULTS = {
  25                 on: 'On',
  26                 off: 'Off',
  27                 onstyle: 'primary',
  28                 offstyle: 'default',
  29                 size: 'normal',
  30                 style: ''
  31         }
  32
  33         Toggle.prototype.defaults = function() {
  34                 return {
  35                         on: this.$element.attr('data-on') || Toggle.DEFAULTS.on,
  36                         off: this.$element.attr('data-off') || Toggle.DEFAULTS.off,
  37                         onstyle: this.$element.attr('data-onstyle') || Toggle.DEFAULTS.onstyle,
  38                         offstyle: this.$element.attr('data-offstyle') || Toggle.DEFAULTS.offstyle,
  39                         size: this.$element.attr('data-size') || Toggle.DEFAULTS.size,
  40                         style: this.$element.attr('data-style') || Toggle.DEFAULTS.style
  41                 }
  42         }
  43
  44         Toggle.prototype.render = function () {
  45                 this._onstyle = 'btn-' + this.options.onstyle
  46                 this._offstyle = 'btn-' + this.options.offstyle
  47                 var size = this.options.size === 'large' ? 'btn-lg'
  48                         : this.options.size === 'small' ? 'btn-sm'
  49                         : this.options.size === 'mini' ? 'btn-xs'
  50                         : ''
  51                 var $toggleOn = $('<label class="btn">').html(this.options.on)
  52                         .addClass(this._onstyle + ' ' + size)
  53                 var $toggleOff = $('<label class="btn">').html(this.options.off)
  54                         .addClass(this._offstyle + ' ' + size + ' active')
  55                 var $toggleHandle = $('<span class="toggle-handle btn btn-default">')
  56                         .addClass(size)
  57                 var $toggleGroup = $('<div class="toggle-group">')
  58                         .append($toggleOn, $toggleOff, $toggleHandle)
  59                 var $toggle = $('<div class="toggle btn" data-toggle="toggle">')
  60                         .addClass( this.$element.prop('checked') ? this._onstyle : this._offstyle+' off' )
  61                         .addClass(size).addClass(this.options.style)
  62
  63                 this.$element.wrap($toggle)
  64                 $.extend(this, {
  65                         $toggle: this.$element.parent(),
  66                         $toggleOn: $toggleOn,
  67                         $toggleOff: $toggleOff,
  68                         $toggleGroup: $toggleGroup
  69                 })
  70                 this.$toggle.append($toggleGroup)
  71
  72                 var width = Math.max($toggleOn.outerWidth(), $toggleOff.outerWidth())+($toggleHandle.outerWidth()/2)
  73                 var height = Math.max($toggleOn.outerHeight(), $toggleOff.outerHeight())
  74                 $toggleOn.addClass('toggle-on')
  75                 $toggleOff.addClass('toggle-off')
  76                 this.$toggle.css({ width: width, height: height })
  77                 this.update()
  78                 this.trigger(true)
  79         }
  80
  81         Toggle.prototype.toggle = function () {
  82                 if (this.$element.prop('checked')) this.off()
  83                 else this.on()
  84         }
  85
  86         Toggle.prototype.on = function () {
  87                 if (this.$element.prop('disabled')) return false
  88                 this.$toggle.removeClass(this._offstyle + ' off').addClass(this._onstyle)
  89                 this.$element.prop('checked', true)
  90                 this.trigger()
  91         }
  92
  93         Toggle.prototype.off = function () {
  94                 if (this.$element.prop('disabled')) return false
  95                 this.$toggle.removeClass(this._onstyle).addClass(this._offstyle + ' off')
  96                 this.$element.prop('checked', false)
  97                 this.trigger()
  98         }
  99
 100         Toggle.prototype.enable = function () {
 101                 this.$toggle.removeAttr('disabled')
 102                 this.$element.prop('disabled', false)
 103         }
 104
 105         Toggle.prototype.disable = function () {
 106                 this.$toggle.attr('disabled', 'disabled')
 107                 this.$element.prop('disabled', true)
 108         }
 109
 110         Toggle.prototype.update = function () {
 111                 if (this.$element.prop('disabled')) this.disable()
 112                 else this.enable()
 113                 if (this.$element.prop('checked')) this.on()
 114                 else this.off()
 115         }
 116
 117         Toggle.prototype.trigger = function (silent) {
 118                 this.$element.off('change.bs.toggle')
 119                 if (!silent) this.$element.change()
 120                 this.$element.on('change.bs.toggle', $.proxy(function() {
 121                         this.update()
 122                 }, this))
 123         }
 124
 125         Toggle.prototype.destroy = function() {
 126                 this.$element.off('change.bs.toggle')
 127                 this.$toggleGroup.remove()
 128                 this.$element.removeData('bs.toggle')
 129                 this.$element.unwrap()
 130         }
 131
 132         // TOGGLE PLUGIN DEFINITION
 133         // ========================
 134
 135         function Plugin(option) {
 136                 return this.each(function () {
 137                         var $this   = $(this)
 138                         var data    = $this.data('bs.toggle')
 139                         var options = typeof option == 'object' && option
 140
 141                         if (!data) $this.data('bs.toggle', (data = new Toggle(this, options)))
 142                         if (typeof option == 'string' && data[option]) data[option]()
 143                 })
 144         }
 145
 146         var old = $.fn.bootstrapToggle
 147
 148         $.fn.bootstrapToggle             = Plugin
 149         $.fn.bootstrapToggle.Constructor = Toggle
 150
 151         // TOGGLE NO CONFLICT
 152         // ==================
 153
 154         $.fn.toggle.noConflict = function () {
 155                 $.fn.bootstrapToggle = old
 156                 return this
 157         }
 158
 159         // TOGGLE DATA-API
 160         // ===============
 161
 162         $(function() {
 163                 $('input[type=checkbox][data-toggle^=toggle]').bootstrapToggle()
 164         })
 165
 166         $(document).on('click.bs.toggle', 'div[data-toggle^=toggle]', function(e) {
 167                 var $checkbox = $(this).find('input[type=checkbox]')
 168                 $checkbox.bootstrapToggle('toggle')
 169                 e.preventDefault()
 170         })
 171
 172 }(jQuery);