bootstrap-switch.js 13 KB

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