Team:William and Mary/gsdk-bootstrapswitch.js

/* ============================================================

* bootstrapSwitch v1.3 by Larentis Mattia @spiritualGuru
* http://www.larentis.eu/switch/
* ============================================================
* Licensed under the Apache License, Version 2.0
* http://www.apache.org/licenses/LICENSE-2.0
* ============================================================ */

!function ($) {

 "use strict";
 $.fn['bootstrapSwitch'] = function (method) {
   var methods = {
     init: function () {
       return this.each(function () {
           var $element = $(this)
             , $div
             , $switchLeft
             , $switchRight
             , $label
             , myClasses = ""
             , classes = $element.attr('class')
             , color
             , moving
             , onLabel = "ON"
             , offLabel = "OFF"
             , icon = false;
           $.each(['switch-mini', 'switch-small', 'switch-large'], function (i, el) {
             if (classes.indexOf(el) >= 0)
               myClasses = el;
           });
           $element.addClass('has-switch');
           if ($element.data('on') !== undefined)
             color = "switch-" + $element.data('on');
           if ($element.data('on-label') !== undefined)
             onLabel = $element.data('on-label');
           if ($element.data('off-label') !== undefined)
             offLabel = $element.data('off-label');
           if ($element.data('icon') !== undefined)
             icon = $element.data('icon');
           $switchLeft = $('')
             .addClass("switch-left")
             .addClass(myClasses)
             .addClass(color)
             .html(onLabel);
           color = ;
           if ($element.data('off') !== undefined)
             color = "switch-" + $element.data('off');
           $switchRight = $('')
             .addClass("switch-right")
             .addClass(myClasses)
             .addClass(color)
             .html(offLabel);
           $label = $('<label>')
             .html(" ")
             .addClass(myClasses)
             .attr('for', $element.find('input').attr('id'));
           if (icon) {
             $label.html('');
           }
$div = $element.find(':checkbox').wrap($('
')).parent().data('animated', false);
           if ($element.data('animated') !== false)
             $div.addClass('switch-animate').data('animated', true);
           $div
             .append($switchLeft)
             .append($label)
             .append($switchRight);
           $element.find('>div').addClass(
             $element.find('input').is(':checked') ? 'switch-on' : 'switch-off'
           );
           if ($element.find('input').is(':disabled'))
             $(this).addClass('deactivate');
           var changeStatus = function ($this) {
             $this.siblings('label').trigger('mousedown').trigger('mouseup').trigger('click');
           };
           $element.on('keydown', function (e) {
             if (e.keyCode === 32) {
               e.stopImmediatePropagation();
               e.preventDefault();
               changeStatus($(e.target).find('span:first'));
             }
           });
           $switchLeft.on('click', function (e) {
             changeStatus($(this));
           });
           $switchRight.on('click', function (e) {
             changeStatus($(this));
           });
           $element.find('input').on('change', function (e) {
             var $this = $(this)
               , $element = $this.parent()
               , thisState = $this.is(':checked')
               , state = $element.is('.switch-off');
             e.preventDefault();
             $element.css('left', );
             if (state === thisState) {
               if (thisState)
                 $element.removeClass('switch-off').addClass('switch-on');
               else $element.removeClass('switch-on').addClass('switch-off');
               if ($element.data('animated') !== false)
                 $element.addClass("switch-animate");
               $element.parent().trigger('switch-change', {'el': $this, 'value': thisState})
             }
           });
           $element.find('label').on('mousedown touchstart', function (e) {
             var $this = $(this);
             moving = false;
             e.preventDefault();
             e.stopImmediatePropagation();
             $this.closest('div').removeClass('switch-animate');
             if ($this.closest('.has-switch').is('.deactivate'))
               $this.unbind('click');
             else {
               $this.on('mousemove touchmove', function (e) {
                 var $element = $(this).closest('.switch')
                   , relativeX = (e.pageX || e.originalEvent.targetTouches[0].pageX) - $element.offset().left
                   , percent = (relativeX / $element.width()) * 100
                   , left = 25
                   , right = 75;
                 moving = true;
                 if (percent < left)
                   percent = left;
                 else if (percent > right)
                   percent = right;
                 $element.find('>div').css('left', (percent - right) + "%")
               });
               $this.on('click touchend', function (e) {
                 var $this = $(this)
                   , $target = $(e.target)
                   , $myCheckBox = $target.siblings('input');
                 e.stopImmediatePropagation();
                 e.preventDefault();
                 $this.unbind('mouseleave');
                 if (moving)
                   $myCheckBox.prop('checked', !(parseInt($this.parent().css('left')) < -25));
                 else $myCheckBox.prop("checked", !$myCheckBox.is(":checked"));
                 moving = false;
                 $myCheckBox.trigger('change');
               });
               $this.on('mouseleave', function (e) {
                 var $this = $(this)
                   , $myCheckBox = $this.siblings('input');
                 e.preventDefault();
                 e.stopImmediatePropagation();
                 $this.unbind('mouseleave');
                 $this.trigger('mouseup');
                 $myCheckBox.prop('checked', !(parseInt($this.parent().css('left')) < -25)).trigger('change');
               });
               $this.on('mouseup', function (e) {
                 e.stopImmediatePropagation();
                 e.preventDefault();
                 $(this).unbind('mousemove');
               });
             }
           });
         }
       );
     },
     toggleActivation: function () {
       $(this).toggleClass('deactivate');
     },
     isActive: function () {
       return !$(this).hasClass('deactivate');
     },
     setActive: function (active) {
       if (active)
         $(this).removeClass('deactivate');
       else $(this).addClass('deactivate');
     },
     toggleState: function (skipOnChange) {
       var $input = $(this).find('input:checkbox');
       $input.prop('checked', !$input.is(':checked')).trigger('change', skipOnChange);
     },
     setState: function (value, skipOnChange) {
       $(this).find('input:checkbox').prop('checked', value).trigger('change', skipOnChange);
     },
     status: function () {
       return $(this).find('input:checkbox').is(':checked');
     },
     destroy: function () {
       var $div = $(this).find('div')
         , $checkbox;
       $div.find(':not(input:checkbox)').remove();
       $checkbox = $div.children();
       $checkbox.unwrap().unwrap();
       $checkbox.unbind('change');
       return $checkbox;
     }
   };
   if (methods[method])
     return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
   else if (typeof method === 'object' || !method)
     return methods.init.apply(this, arguments);
   else
     $.error('Method ' + method + ' does not exist!');
 };
}(jQuery);