bootstrap-switch.js 13 KB

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