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(" ") 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 });