xp-dev.com Git - namibia/blob - public/js/vendor/bootstrap-switch.js

   1 /*! ============================================================
   2  * bootstrapSwitch v1.8 by Larentis Mattia @SpiritualGuru
   3  * http://www.larentis.eu/
   4  *
   5  * Enhanced for radiobuttons by Stein, Peter @BdMdesigN
   6  * http://www.bdmdesign.org/
   7  *
   8  * Project site:
   9  * http://www.larentis.eu/switch/
  10  * ============================================================
  11  * Licensed under the Apache License, Version 2.0
  12  * http://www.apache.org/licenses/LICENSE-2.0
  13  * ============================================================ */
  14
  15 !function ($) {
  16   "use strict";
  17
  18   $.fn['bootstrapSwitch'] = function (method) {
  19     var inputSelector = 'input[type!="hidden"]';
  20     var methods = {
  21       init: function () {
  22         return this.each(function () {
  23             var $element = $(this)
  24               , $div
  25               , $switchLeft
  26               , $switchRight
  27               , $label
  28               , $form = $element.closest('form')
  29               , myClasses = ""
  30               , classes = $element.attr('class')
  31               , color
  32               , moving
  33               , onLabel = "ON"
  34               , offLabel = "OFF"
  35               , icon = false
  36               , textLabel = false;
  37
  38             $.each(['switch-mini', 'switch-small', 'switch-large'], function (i, el) {
  39               if (classes.indexOf(el) >= 0)
  40                 myClasses = el;
  41             });
  42
  43             $element.addClass('has-switch');
  44
  45             if ($element.data('on') !== undefined)
  46               color = "switch-" + $element.data('on');
  47
  48             if ($element.data('on-label') !== undefined)
  49               onLabel = $element.data('on-label');
  50
  51             if ($element.data('off-label') !== undefined)
  52               offLabel = $element.data('off-label');
  53
  54             if ($element.data('label-icon') !== undefined)
  55               icon = $element.data('label-icon');
  56
  57             if ($element.data('text-label') !== undefined)
  58               textLabel = $element.data('text-label');
  59
  60             $switchLeft = $('<span>')
  61               .addClass("switch-left")
  62               .addClass(myClasses)
  63               .addClass(color)
  64               .html(onLabel);
  65
  66             color = '';
  67             if ($element.data('off') !== undefined)
  68               color = "switch-" + $element.data('off');
  69
  70             $switchRight = $('<span>')
  71               .addClass("switch-right")
  72               .addClass(myClasses)
  73               .addClass(color)
  74               .html(offLabel);
  75
  76             $label = $('<label>')
  77               .html("&nbsp;")
  78               .addClass(myClasses)
  79               .attr('for', $element.find(inputSelector).attr('id'));
  80
  81             if (icon) {
  82               $label.html('<i class="icon ' + icon + '"></i>');
  83             }
  84
  85             if (textLabel) {
  86               $label.html('' + textLabel + '');
  87             }
  88
  89             $div = $element.find(inputSelector).wrap($('<div>')).parent().data('animated', false);
  90
  91             if ($element.data('animated') !== false)
  92               $div.addClass('switch-animate').data('animated', true);
  93
  94             $div
  95               .append($switchLeft)
  96               .append($label)
  97               .append($switchRight);
  98
  99             $element.find('>div').addClass(
 100               $element.find(inputSelector).is(':checked') ? 'switch-on' : 'switch-off'
 101             );
 102
 103             if ($element.find(inputSelector).is(':disabled'))
 104               $(this).addClass('deactivate');
 105
 106             var changeStatus = function ($this) {
 107               if ($element.parent('label').is('.label-change-switch')) {
 108
 109               } else {
 110                 $this.siblings('label').trigger('mousedown').trigger('mouseup').trigger('click');
 111               }
 112             };
 113
 114             $element.on('keydown', function (e) {
 115               if (e.keyCode === 32) {
 116                 e.stopImmediatePropagation();
 117                 e.preventDefault();
 118                 changeStatus($(e.target).find('span:first'));
 119               }
 120             });
 121
 122             $switchLeft.on('click', function (e) {
 123               changeStatus($(this));
 124             });
 125
 126             $switchRight.on('click', function (e) {
 127               changeStatus($(this));
 128             });
 129
 130             $element.find(inputSelector).on('change', function (e, skipOnChange) {
 131               var $this = $(this)
 132                 , $element = $this.parent()
 133                 , thisState = $this.is(':checked')
 134                 , state = $element.is('.switch-off');
 135
 136               e.preventDefault();
 137
 138               $element.css('left', '');
 139
 140               if (state === thisState) {
 141
 142                 if (thisState)
 143                   $element.removeClass('switch-off').addClass('switch-on');
 144                 else $element.removeClass('switch-on').addClass('switch-off');
 145
 146                 if ($element.data('animated') !== false)
 147                   $element.addClass("switch-animate");
 148
 149                 if (typeof skipOnChange === 'boolean' && skipOnChange)
 150                   return;
 151
 152                 $element.parent().trigger('switch-change', {'el': $this, 'value': thisState})
 153               }
 154             });
 155
 156             $element.find('label').on('mousedown touchstart', function (e) {
 157               var $this = $(this);
 158               moving = false;
 159
 160               e.preventDefault();
 161               e.stopImmediatePropagation();
 162
 163               $this.closest('div').removeClass('switch-animate');
 164
 165               if ($this.closest('.has-switch').is('.deactivate')) {
 166                 $this.unbind('click');
 167               } else if ($this.closest('.switch-on').parent().is('.radio-no-uncheck')) {
 168                 $this.unbind('click');
 169               } else {
 170                 $this.on('mousemove touchmove', function (e) {
 171                   var $element = $(this).closest('.make-switch')
 172                     , relativeX = (e.pageX || e.originalEvent.targetTouches[0].pageX) - $element.offset().left
 173                     , percent = (relativeX / $element.width()) * 100
 174                     , left = 25
 175                     , right = 75;
 176
 177                   moving = true;
 178
 179                   if (percent < left)
 180                     percent = left;
 181                   else if (percent > right)
 182                     percent = right;
 183
 184                   $element.find('>div').css('left', (percent - right) + "%")
 185                 });
 186
 187                 $this.on('click touchend', function (e) {
 188                   var $this = $(this)
 189                     , $myInputBox = $this.siblings('input');
 190
 191                   e.stopImmediatePropagation();
 192                   e.preventDefault();
 193
 194                   $this.unbind('mouseleave');
 195
 196                   if (moving)
 197                     $myInputBox.prop('checked', !(parseInt($this.parent().css('left')) < -25));
 198                   else
 199                     $myInputBox.prop("checked", !$myInputBox.is(":checked"));
 200
 201                   moving = false;
 202                   $myInputBox.trigger('change');
 203                 });
 204
 205                 $this.on('mouseleave', function (e) {
 206                   var $this = $(this)
 207                     , $myInputBox = $this.siblings('input');
 208
 209                   e.preventDefault();
 210                   e.stopImmediatePropagation();
 211
 212                   $this.unbind('mouseleave mousemove');
 213                   $this.trigger('mouseup');
 214
 215                   $myInputBox.prop('checked', !(parseInt($this.parent().css('left')) < -25)).trigger('change');
 216                 });
 217
 218                 $this.on('mouseup', function (e) {
 219                   e.stopImmediatePropagation();
 220                   e.preventDefault();
 221
 222                   $(this).trigger('mouseleave');
 223                 });
 224               }
 225             });
 226
 227             if ($form.data('bootstrapSwitch') !== 'injected') {
 228               $form.bind('reset', function () {
 229                 setTimeout(function () {
 230                   $form.find('.make-switch').each(function () {
 231                     var $input = $(this).find(inputSelector);
 232
 233                     $input.prop('checked', $input.is(':checked')).trigger('change');
 234                   });
 235                 }, 1);
 236               });
 237               $form.data('bootstrapSwitch', 'injected');
 238             }
 239           }
 240         );
 241       },
 242       toggleActivation: function () {
 243         var $this = $(this);
 244
 245         $this.toggleClass('deactivate');
 246         $this.find(inputSelector).prop('disabled', $this.is('.deactivate'));
 247       },
 248       isActive: function () {
 249         return !$(this).hasClass('deactivate');
 250       },
 251       setActive: function (active) {
 252         var $this = $(this);
 253
 254         if (active) {
 255           $this.removeClass('deactivate');
 256           $this.find(inputSelector).removeAttr('disabled');
 257         }
 258         else {
 259           $this.addClass('deactivate');
 260           $this.find(inputSelector).attr('disabled', 'disabled');
 261         }
 262       },
 263       toggleState: function (skipOnChange) {
 264         var $input = $(this).find(':checkbox');
 265         $input.prop('checked', !$input.is(':checked')).trigger('change', skipOnChange);
 266       },
 267       toggleRadioState: function (skipOnChange) {
 268         var $radioinput = $(this).find(':radio');
 269         $radioinput.not(':checked').prop('checked', !$radioinput.is(':checked')).trigger('change', skipOnChange);
 270       },
 271       toggleRadioStateAllowUncheck: function (uncheck, skipOnChange) {
 272         var $radioinput = $(this).find(':radio');
 273         if (uncheck) {
 274           $radioinput.not(':checked').trigger('change', skipOnChange);
 275         }
 276         else {
 277           $radioinput.not(':checked').prop('checked', !$radioinput.is(':checked')).trigger('change', skipOnChange);
 278         }
 279       },
 280       setState: function (value, skipOnChange) {
 281         $(this).find(inputSelector).prop('checked', value).trigger('change', skipOnChange);
 282       },
 283       setOnLabel: function (value) {
 284         var $switchLeft = $(this).find(".switch-left");
 285         $switchLeft.html(value);
 286       },
 287       setOffLabel: function (value) {
 288         var $switchRight = $(this).find(".switch-right");
 289         $switchRight.html(value);
 290       },
 291       setOnClass: function (value) {
 292         var $switchLeft = $(this).find(".switch-left");
 293         var color = '';
 294         if (value !== undefined) {
 295           if ($(this).attr('data-on') !== undefined) {
 296             color = "switch-" + $(this).attr('data-on')
 297           }
 298           $switchLeft.removeClass(color);
 299           color = "switch-" + value;
 300           $switchLeft.addClass(color);
 301         }
 302       },
 303       setOffClass: function (value) {
 304         var $switchRight = $(this).find(".switch-right");
 305         var color = '';
 306         if (value !== undefined) {
 307           if ($(this).attr('data-off') !== undefined) {
 308             color = "switch-" + $(this).attr('data-off')
 309           }
 310           $switchRight.removeClass(color);
 311           color = "switch-" + value;
 312           $switchRight.addClass(color);
 313         }
 314       },
 315       setAnimated: function (value) {
 316         var $element = $(this).find(inputSelector).parent();
 317         if (value === undefined) value = false;
 318         $element.data('animated', value);
 319         $element.attr('data-animated', value);
 320
 321         if ($element.data('animated') !== false) {
 322           $element.addClass("switch-animate");
 323         } else {
 324           $element.removeClass("switch-animate");
 325         }
 326       },
 327       setSizeClass: function (value) {
 328         var $element = $(this);
 329         var $switchLeft = $element.find(".switch-left");
 330         var $switchRight = $element.find(".switch-right");
 331         var $label = $element.find("label");
 332         $.each(['switch-mini', 'switch-small', 'switch-large'], function (i, el) {
 333           if (el !== value) {
 334             $switchLeft.removeClass(el);
 335             $switchRight.removeClass(el);
 336             $label.removeClass(el);
 337           } else {
 338             $switchLeft.addClass(el);
 339             $switchRight.addClass(el);
 340             $label.addClass(el);
 341           }
 342         });
 343       },
 344       status: function () {
 345         return $(this).find(inputSelector).is(':checked');
 346       },
 347       destroy: function () {
 348         var $element = $(this)
 349           , $div = $element.find('div')
 350           , $form = $element.closest('form')
 351           , $inputbox;
 352
 353         $div.find(':not(input)').remove();
 354
 355         $inputbox = $div.children();
 356         $inputbox.unwrap().unwrap();
 357
 358         $inputbox.unbind('change');
 359
 360         if ($form) {
 361           $form.unbind('reset');
 362           $form.removeData('bootstrapSwitch');
 363         }
 364
 365         return $inputbox;
 366       }
 367     };
 368
 369     if (methods[method])
 370       return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
 371     else if (typeof method === 'object' || !method)
 372       return methods.init.apply(this, arguments);
 373     else
 374       $.error('Method ' + method + ' does not exist!');
 375   };
 376 }(jQuery);
 377
 378 (function ($) {
 379   $(function () {
 380     $('.make-switch')['bootstrapSwitch']();
 381   });
 382 })(jQuery);