File indexing completed on 2024-05-19 06:00:16

0001 /* ============================================================
0002  * bootstrapSwitch v1.3 by Larentis Mattia @spiritualGuru
0003  * http://www.larentis.eu/switch/
0004  * ============================================================
0005  * Licensed under the Apache License, Version 2.0
0006  * http://www.apache.org/licenses/LICENSE-2.0
0007  * ============================================================ */
0008 
0009 !function ($) {
0010   "use strict";
0011 
0012   $.fn['bootstrapSwitch'] = function (method) {
0013     var methods = {
0014       init: function () {
0015         return this.each(function () {
0016             var $element = $(this)
0017               , $div
0018               , $switchLeft
0019               , $switchRight
0020               , $label
0021               , myClasses = ""
0022               , classes = $element.attr('class')
0023               , color
0024               , moving
0025               , onLabel = "ON"
0026               , offLabel = "OFF"
0027               , icon = false;
0028 
0029             $.each(['switch-mini', 'switch-small', 'switch-large'], function (i, el) {
0030               if (classes.indexOf(el) >= 0)
0031                 myClasses = el;
0032             });
0033 
0034             $element.addClass('has-switch');
0035 
0036             if ($element.data('on') !== undefined)
0037               color = "switch-" + $element.data('on');
0038 
0039             if ($element.data('on-label') !== undefined)
0040               onLabel = $element.data('on-label');
0041 
0042             if ($element.data('off-label') !== undefined)
0043               offLabel = $element.data('off-label');
0044 
0045             if ($element.data('icon') !== undefined)
0046               icon = $element.data('icon');
0047 
0048             $switchLeft = $('<span>')
0049               .addClass("switch-left")
0050               .addClass(myClasses)
0051               .addClass(color)
0052               .html(onLabel);
0053 
0054             color = '';
0055             if ($element.data('off') !== undefined)
0056               color = "switch-" + $element.data('off');
0057 
0058             $switchRight = $('<span>')
0059               .addClass("switch-right")
0060               .addClass(myClasses)
0061               .addClass(color)
0062               .html(offLabel);
0063 
0064             $label = $('<label>')
0065               .html("&nbsp;")
0066               .addClass(myClasses)
0067               .attr('for', $element.find('input').attr('id'));
0068 
0069             if (icon) {
0070               $label.html('<i class="' + icon + '"></i>');
0071             }
0072 
0073             $div = $element.find(':checkbox').wrap($('<div>')).parent().data('animated', false);
0074 
0075             if ($element.data('animated') !== false)
0076               $div.addClass('switch-animate').data('animated', true);
0077 
0078             $div
0079               .append($switchLeft)
0080               .append($label)
0081               .append($switchRight);
0082 
0083             $element.find('>div').addClass(
0084               $element.find('input').is(':checked') ? 'switch-on' : 'switch-off'
0085             );
0086 
0087             if ($element.find('input').is(':disabled'))
0088               $(this).addClass('deactivate');
0089 
0090             var changeStatus = function ($this) {
0091               $this.siblings('label').trigger('mousedown').trigger('mouseup').trigger('click');
0092             };
0093 
0094             $element.on('keydown', function (e) {
0095               if (e.keyCode === 32) {
0096                 e.stopImmediatePropagation();
0097                 e.preventDefault();
0098                 changeStatus($(e.target).find('span:first'));
0099               }
0100             });
0101 
0102             $switchLeft.on('click', function (e) {
0103               changeStatus($(this));
0104             });
0105 
0106             $switchRight.on('click', function (e) {
0107               changeStatus($(this));
0108             });
0109 
0110             $element.find('input').on('change', function (e) {
0111               var $this = $(this)
0112                 , $element = $this.parent()
0113                 , thisState = $this.is(':checked')
0114                 , state = $element.is('.switch-off');
0115 
0116               e.preventDefault();
0117 
0118               $element.css('left', '');
0119 
0120               if (state === thisState) {
0121 
0122                 if (thisState)
0123                   $element.removeClass('switch-off').addClass('switch-on');
0124                 else $element.removeClass('switch-on').addClass('switch-off');
0125 
0126                 if ($element.data('animated') !== false)
0127                   $element.addClass("switch-animate");
0128 
0129                 $element.parent().trigger('switch-change', {'el': $this, 'value': thisState})
0130               }
0131             });
0132 
0133             $element.find('label').on('mousedown touchstart', function (e) {
0134               var $this = $(this);
0135               moving = false;
0136 
0137               e.preventDefault();
0138               e.stopImmediatePropagation();
0139 
0140               $this.closest('div').removeClass('switch-animate');
0141 
0142               if ($this.closest('.has-switch').is('.deactivate'))
0143                 $this.unbind('click');
0144               else {
0145                 $this.on('mousemove touchmove', function (e) {
0146                   var $element = $(this).closest('.switch')
0147                     , relativeX = (e.pageX || e.originalEvent.targetTouches[0].pageX) - $element.offset().left
0148                     , percent = (relativeX / $element.width()) * 100
0149                     , left = 25
0150                     , right = 75;
0151 
0152                   moving = true;
0153 
0154                   if (percent < left)
0155                     percent = left;
0156                   else if (percent > right)
0157                     percent = right;
0158 
0159                   $element.find('>div').css('left', (percent - right) + "%")
0160                 });
0161 
0162                 $this.on('click touchend', function (e) {
0163                   var $this = $(this)
0164                     , $target = $(e.target)
0165                     , $myCheckBox = $target.siblings('input');
0166 
0167                   e.stopImmediatePropagation();
0168                   e.preventDefault();
0169 
0170                   $this.unbind('mouseleave');
0171 
0172                   if (moving)
0173                     $myCheckBox.prop('checked', !(parseInt($this.parent().css('left')) < -25));
0174                   else $myCheckBox.prop("checked", !$myCheckBox.is(":checked"));
0175 
0176                   moving = false;
0177                   $myCheckBox.trigger('change');
0178                 });
0179 
0180                 $this.on('mouseleave', function (e) {
0181                   var $this = $(this)
0182                     , $myCheckBox = $this.siblings('input');
0183 
0184                   e.preventDefault();
0185                   e.stopImmediatePropagation();
0186 
0187                   $this.unbind('mouseleave');
0188                   $this.trigger('mouseup');
0189 
0190                   $myCheckBox.prop('checked', !(parseInt($this.parent().css('left')) < -25)).trigger('change');
0191                 });
0192 
0193                 $this.on('mouseup', function (e) {
0194                   e.stopImmediatePropagation();
0195                   e.preventDefault();
0196 
0197                   $(this).unbind('mousemove');
0198                 });
0199               }
0200             });
0201           }
0202         );
0203       },
0204       toggleActivation: function () {
0205         $(this).toggleClass('deactivate');
0206       },
0207       isActive: function () {
0208         return !$(this).hasClass('deactivate');
0209       },
0210       setActive: function (active) {
0211         if (active)
0212           $(this).removeClass('deactivate');
0213         else $(this).addClass('deactivate');
0214       },
0215       toggleState: function (skipOnChange) {
0216         var $input = $(this).find('input:checkbox');
0217         $input.prop('checked', !$input.is(':checked')).trigger('change', skipOnChange);
0218       },
0219       setState: function (value, skipOnChange) {
0220         $(this).find('input:checkbox').prop('checked', value).trigger('change', skipOnChange);
0221       },
0222       status: function () {
0223         return $(this).find('input:checkbox').is(':checked');
0224       },
0225       destroy: function () {
0226         var $div = $(this).find('div')
0227           , $checkbox;
0228 
0229         $div.find(':not(input:checkbox)').remove();
0230 
0231         $checkbox = $div.children();
0232         $checkbox.unwrap().unwrap();
0233 
0234         $checkbox.unbind('change');
0235 
0236         return $checkbox;
0237       }
0238     };
0239 
0240     if (methods[method])
0241       return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
0242     else if (typeof method === 'object' || !method)
0243       return methods.init.apply(this, arguments);
0244     else
0245       $.error('Method ' + method + ' does not exist!');
0246   };
0247 }(jQuery);
0248 
0249 $(function () {
0250   $('.switch')['bootstrapSwitch']();
0251 });