bootstrap-switch.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448
  1. /* ========================================================================
  2. * bootstrap-switch - v3.0.0
  3. * http://www.bootstrap-switch.org
  4. * ========================================================================
  5. * Copyright 2012-2013 Mattia Larentis
  6. *
  7. * ========================================================================
  8. * Licensed under the Apache License, Version 2.0 (the "License");
  9. * you may not use this file except in compliance with the License.
  10. * You may obtain a copy of the License at
  11. *
  12. * http://www.apache.org/licenses/LICENSE-2.0
  13. *
  14. * Unless required by applicable law or agreed to in writing, software
  15. * distributed under the License is distributed on an "AS IS" BASIS,
  16. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  17. * See the License for the specific language governing permissions and
  18. * limitations under the License.
  19. * ========================================================================
  20. */
  21. (function() {
  22. var __slice = [].slice;
  23. (function($, window) {
  24. "use strict";
  25. var BootstrapSwitch;
  26. BootstrapSwitch = (function() {
  27. BootstrapSwitch.prototype.name = "bootstrap-switch";
  28. function BootstrapSwitch(element, options) {
  29. if (options == null) {
  30. options = {};
  31. }
  32. this.$element = $(element);
  33. this.options = $.extend({}, $.fn.bootstrapSwitch.defaults, options, {
  34. state: this.$element.is(":checked"),
  35. size: this.$element.data("size"),
  36. animate: this.$element.data("animate"),
  37. disabled: this.$element.is(":disabled"),
  38. readonly: this.$element.is("[readonly]"),
  39. onColor: this.$element.data("on-color"),
  40. offColor: this.$element.data("off-color"),
  41. onText: this.$element.data("on-text"),
  42. offText: this.$element.data("off-text"),
  43. labelText: this.$element.data("label-text")
  44. });
  45. this.$on = $("<span>", {
  46. "class": "" + this.name + "-handle-on " + this.name + "-" + this.options.onColor,
  47. html: this.options.onText
  48. });
  49. this.$off = $("<span>", {
  50. "class": "" + this.name + "-handle-off " + this.name + "-" + this.options.offColor,
  51. html: this.options.offText
  52. });
  53. this.$label = $("<label>", {
  54. "for": this.$element.attr("id"),
  55. html: this.options.labelText
  56. });
  57. this.$wrapper = $("<div>");
  58. this.$wrapper.addClass((function(_this) {
  59. return function() {
  60. var classes;
  61. classes = ["" + _this.name];
  62. classes.push(_this.options.state ? "" + _this.name + "-on" : "" + _this.name + "-off");
  63. if (_this.options.size != null) {
  64. classes.push("" + _this.name + "-" + _this.options.size);
  65. }
  66. if (_this.options.animate) {
  67. classes.push("" + _this.name + "-animate");
  68. }
  69. if (_this.options.disabled) {
  70. classes.push("" + _this.name + "-disabled");
  71. }
  72. if (_this.options.readonly) {
  73. classes.push("" + _this.name + "-readonly");
  74. }
  75. if (_this.$element.attr("id")) {
  76. classes.push("" + _this.name + "-id-" + (_this.$element.attr("id")));
  77. }
  78. return classes.join(" ");
  79. };
  80. })(this));
  81. this.$element.on("init", (function(_this) {
  82. return function() {
  83. return _this.options.on.init.call();
  84. };
  85. })(this));
  86. this.$element.on("switchChange", (function(_this) {
  87. return function() {
  88. return _this.options.on.switchChange.call();
  89. };
  90. })(this));
  91. this.$div = this.$element.wrap($("<div>")).parent();
  92. this.$wrapper = this.$div.wrap(this.$wrapper).parent();
  93. this.$element.before(this.$on).before(this.$label).before(this.$off).trigger("init");
  94. this._elementHandlers();
  95. this._handleHandlers();
  96. this._labelHandlers();
  97. this._formHandler();
  98. }
  99. BootstrapSwitch.prototype._constructor = BootstrapSwitch;
  100. BootstrapSwitch.prototype.state = function(value, skip) {
  101. if (typeof value === "undefined") {
  102. return this.options.state;
  103. }
  104. if (this.options.disabled || this.options.readonly) {
  105. return this.$element;
  106. }
  107. value = !!value;
  108. this.$element.prop("checked", value).trigger("change.bootstrapSwitch", skip);
  109. return this.$element;
  110. };
  111. BootstrapSwitch.prototype.toggleState = function(skip) {
  112. if (this.options.disabled || this.options.readonly) {
  113. return this.$element;
  114. }
  115. return this.$element.prop("checked", !this.options.state).trigger("change.bootstrapSwitch", skip);
  116. };
  117. BootstrapSwitch.prototype.size = function(value) {
  118. if (typeof value === "undefined") {
  119. return this.options.size;
  120. }
  121. if (this.options.size != null) {
  122. this.$wrapper.removeClass("" + this.name + "-" + this.options.size);
  123. }
  124. this.$wrapper.addClass("" + this.name + "-" + value);
  125. this.options.size = value;
  126. return this.$element;
  127. };
  128. BootstrapSwitch.prototype.animate = function(value) {
  129. if (typeof value === "undefined") {
  130. return this.options.animate;
  131. }
  132. value = !!value;
  133. this.$wrapper[value ? "addClass" : "removeClass"]("" + this.name + "-animate");
  134. this.options.animate = value;
  135. return this.$element;
  136. };
  137. BootstrapSwitch.prototype.disabled = function(value) {
  138. if (typeof value === "undefined") {
  139. return this.options.disabled;
  140. }
  141. value = !!value;
  142. this.$wrapper[value ? "addClass" : "removeClass"]("" + this.name + "-disabled");
  143. this.$element.prop("disabled", value);
  144. this.options.disabled = value;
  145. return this.$element;
  146. };
  147. BootstrapSwitch.prototype.toggleDisabled = function() {
  148. this.$element.prop("disabled", !this.options.disabled);
  149. this.$wrapper.toggleClass("" + this.name + "-disabled");
  150. this.options.disabled = !this.options.disabled;
  151. return this.$element;
  152. };
  153. BootstrapSwitch.prototype.readonly = function(value) {
  154. if (typeof value === "undefined") {
  155. return this.options.readonly;
  156. }
  157. value = !!value;
  158. this.$wrapper[value ? "addClass" : "removeClass"]("" + this.name + "-readonly");
  159. this.$element.prop("readonly", value);
  160. this.options.readonly = value;
  161. return this.$element;
  162. };
  163. BootstrapSwitch.prototype.toggleReadonly = function() {
  164. this.$element.prop("readonly", !this.options.readonly);
  165. this.$wrapper.toggleClass("" + this.name + "-readonly");
  166. this.options.readonly = !this.options.readonly;
  167. return this.$element;
  168. };
  169. BootstrapSwitch.prototype.onColor = function(value) {
  170. var color;
  171. color = this.options.onColor;
  172. if (typeof value === "undefined") {
  173. return color;
  174. }
  175. if (color != null) {
  176. this.$on.removeClass("" + this.name + "-" + color);
  177. }
  178. this.$on.addClass("" + this.name + "-" + value);
  179. this.options.onColor = value;
  180. return this.$element;
  181. };
  182. BootstrapSwitch.prototype.offColor = function(value) {
  183. var color;
  184. color = this.options.offColor;
  185. if (typeof value === "undefined") {
  186. return color;
  187. }
  188. if (color != null) {
  189. this.$off.removeClass("" + this.name + "-" + color);
  190. }
  191. this.$off.addClass("" + this.name + "-" + value);
  192. this.options.offColor = value;
  193. return this.$element;
  194. };
  195. BootstrapSwitch.prototype.onText = function(value) {
  196. if (typeof value === "undefined") {
  197. return this.options.onText;
  198. }
  199. this.$on.html(value);
  200. this.options.onText = value;
  201. return this.$element;
  202. };
  203. BootstrapSwitch.prototype.offText = function(value) {
  204. if (typeof value === "undefined") {
  205. return this.options.offText;
  206. }
  207. this.$off.html(value);
  208. this.options.offText = value;
  209. return this.$element;
  210. };
  211. BootstrapSwitch.prototype.labelText = function(value) {
  212. if (typeof value === "undefined") {
  213. return this.options.labelText;
  214. }
  215. this.$label.html(value);
  216. this.options.labelText = value;
  217. return this.$element;
  218. };
  219. BootstrapSwitch.prototype.destroy = function() {
  220. var $form;
  221. $form = this.$element.closest("form");
  222. if ($form.length) {
  223. $form.off("reset.bootstrapSwitch").removeData("bootstrap-switch");
  224. }
  225. this.$div.children().not(this.$element).remove();
  226. this.$element.unwrap().unwrap().off(".bootstrapSwitch").removeData("bootstrap-switch");
  227. return this.$element;
  228. };
  229. BootstrapSwitch.prototype._elementHandlers = function() {
  230. return this.$element.on({
  231. "change.bootstrapSwitch": (function(_this) {
  232. return function(e, skip) {
  233. var checked;
  234. e.preventDefault();
  235. e.stopPropagation();
  236. e.stopImmediatePropagation();
  237. checked = _this.$element.is(":checked");
  238. if (checked === _this.options.state) {
  239. return;
  240. }
  241. _this.options.state = checked;
  242. _this.$wrapper.removeClass(checked ? "" + _this.name + "-off" : "" + _this.name + "-on").addClass(checked ? "" + _this.name + "-on" : "" + _this.name + "-off");
  243. if (!skip) {
  244. if (_this.$element.is(":radio")) {
  245. $("[name='" + (_this.$element.attr('name')) + "']").not(_this.$element).prop("checked", false).trigger("change.bootstrapSwitch", true);
  246. }
  247. return _this.$element.trigger("switchChange", {
  248. el: _this.$element,
  249. value: checked
  250. });
  251. }
  252. };
  253. })(this),
  254. "focus.bootstrapSwitch": (function(_this) {
  255. return function(e) {
  256. e.preventDefault();
  257. e.stopPropagation();
  258. e.stopImmediatePropagation();
  259. return _this.$wrapper.addClass("" + _this.name + "-focused");
  260. };
  261. })(this),
  262. "blur.bootstrapSwitch": (function(_this) {
  263. return function(e) {
  264. e.preventDefault();
  265. e.stopPropagation();
  266. e.stopImmediatePropagation();
  267. return _this.$wrapper.removeClass("" + _this.name + "-focused");
  268. };
  269. })(this),
  270. "keydown.bootstrapSwitch": (function(_this) {
  271. return function(e) {
  272. if (!e.which || _this.options.disabled || _this.options.readonly) {
  273. return;
  274. }
  275. switch (e.which) {
  276. case 32:
  277. e.preventDefault();
  278. e.stopPropagation();
  279. e.stopImmediatePropagation();
  280. return _this.toggleState();
  281. case 37:
  282. e.preventDefault();
  283. e.stopPropagation();
  284. e.stopImmediatePropagation();
  285. return _this.state(false);
  286. case 39:
  287. e.preventDefault();
  288. e.stopPropagation();
  289. e.stopImmediatePropagation();
  290. return _this.state(true);
  291. }
  292. };
  293. })(this)
  294. });
  295. };
  296. BootstrapSwitch.prototype._handleHandlers = function() {
  297. this.$on.on("click.bootstrapSwitch", (function(_this) {
  298. return function(e) {
  299. _this.state(false);
  300. return _this.$element.trigger("focus.bootstrapSwitch");
  301. };
  302. })(this));
  303. return this.$off.on("click.bootstrapSwitch", (function(_this) {
  304. return function(e) {
  305. _this.state(true);
  306. return _this.$element.trigger("focus.bootstrapSwitch");
  307. };
  308. })(this));
  309. };
  310. BootstrapSwitch.prototype._labelHandlers = function() {
  311. return this.$label.on({
  312. "mousemove.bootstrapSwitch": (function(_this) {
  313. return function(e) {
  314. var left, percent, right;
  315. if (!_this.drag) {
  316. return;
  317. }
  318. percent = ((e.pageX - _this.$wrapper.offset().left) / _this.$wrapper.width()) * 100;
  319. left = 25;
  320. right = 75;
  321. if (percent < left) {
  322. percent = left;
  323. } else if (percent > right) {
  324. percent = right;
  325. }
  326. _this.$div.css("margin-left", "" + (percent - right) + "%");
  327. return _this.$element.trigger("focus.bootstrapSwitch");
  328. };
  329. })(this),
  330. "mousedown.bootstrapSwitch": (function(_this) {
  331. return function(e) {
  332. if (_this.drag || _this.options.disabled || _this.options.readonly) {
  333. return;
  334. }
  335. _this.drag = true;
  336. if (_this.options.animate) {
  337. _this.$wrapper.removeClass("" + _this.name + "-animate");
  338. }
  339. return _this.$element.trigger("focus.bootstrapSwitch");
  340. };
  341. })(this),
  342. "mouseup.bootstrapSwitch": (function(_this) {
  343. return function(e) {
  344. if (!_this.drag) {
  345. return;
  346. }
  347. _this.drag = false;
  348. _this.$element.prop("checked", parseInt(_this.$div.css("margin-left"), 10) > -25).trigger("change.bootstrapSwitch");
  349. _this.$div.css("margin-left", "");
  350. if (_this.options.animate) {
  351. return _this.$wrapper.addClass("" + _this.name + "-animate");
  352. }
  353. };
  354. })(this),
  355. "mouseleave.bootstrapSwitch": (function(_this) {
  356. return function(e) {
  357. return _this.$label.trigger("mouseup.bootstrapSwitch");
  358. };
  359. })(this),
  360. "click.bootstrapSwitch": (function(_this) {
  361. return function(e) {
  362. e.preventDefault();
  363. e.stopImmediatePropagation();
  364. _this.toggleState();
  365. return _this.$element.trigger("focus.bootstrapSwitch");
  366. };
  367. })(this)
  368. });
  369. };
  370. BootstrapSwitch.prototype._formHandler = function() {
  371. var $form;
  372. $form = this.$element.closest("form");
  373. if ($form.data("bootstrap-switch")) {
  374. return;
  375. }
  376. return $form.on("reset.bootstrapSwitch", function() {
  377. return window.setTimeout(function() {
  378. return $form.find("input").filter(function() {
  379. return $(this).data("bootstrap-switch");
  380. }).each(function() {
  381. return $(this).bootstrapSwitch("state", false);
  382. });
  383. }, 1);
  384. }).data("bootstrap-switch", true);
  385. };
  386. return BootstrapSwitch;
  387. })();
  388. $.fn.bootstrapSwitch = function() {
  389. var args, option, ret;
  390. option = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
  391. ret = this;
  392. this.each(function() {
  393. var $this, data;
  394. $this = $(this);
  395. data = $this.data("bootstrap-switch");
  396. if (!data) {
  397. $this.data("bootstrap-switch", data = new BootstrapSwitch(this, option));
  398. }
  399. if (typeof option === "string") {
  400. return ret = data[option].apply(data, args);
  401. }
  402. });
  403. return ret;
  404. };
  405. $.fn.bootstrapSwitch.Constructor = BootstrapSwitch;
  406. return $.fn.bootstrapSwitch.defaults = {
  407. state: true,
  408. size: null,
  409. animate: true,
  410. disabled: false,
  411. readonly: false,
  412. onColor: "primary",
  413. offColor: "default",
  414. onText: "ON",
  415. offText: "OFF",
  416. labelText: "&nbsp;",
  417. on: {
  418. init: function() {},
  419. switchChange: function() {}
  420. }
  421. };
  422. })(window.jQuery, window);
  423. }).call(this);