bootstrap-switch.js 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468
  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. var addClasses;
  30. if (options == null) {
  31. options = {};
  32. }
  33. this.$element = $(element);
  34. this.options = $.extend({}, $.fn.bootstrapSwitch.defaults, options, {
  35. state: this.$element.is(":checked"),
  36. size: this.$element.data("size"),
  37. animate: this.$element.data("animate"),
  38. disabled: this.$element.is(":disabled"),
  39. readonly: this.$element.is("[readonly]"),
  40. onColor: this.$element.data("on-color"),
  41. offColor: this.$element.data("off-color"),
  42. onText: this.$element.data("on-text"),
  43. offText: this.$element.data("off-text"),
  44. labelText: this.$element.data("label-text")
  45. });
  46. this.$wrapper = $("<div>");
  47. this.$container = $("<div>");
  48. this.$on = $("<span>", {
  49. html: this.options.onText
  50. });
  51. this.$off = $("<span>", {
  52. html: this.options.offText
  53. });
  54. this.$label = $("<label>", {
  55. "for": this.$element.attr("id"),
  56. html: this.options.labelText
  57. });
  58. addClasses = (function(_this) {
  59. return function(cls) {
  60. var c, classes, _i, _len;
  61. if (!$.isArray(cls)) {
  62. return "" + _this.options.baseClass + "-" + cls;
  63. }
  64. classes = [];
  65. for (_i = 0, _len = cls.length; _i < _len; _i++) {
  66. c = cls[_i];
  67. classes.push("" + _this.options.baseClass + "-" + c);
  68. }
  69. return classes.join(" ");
  70. };
  71. })(this);
  72. this.$wrapper.addClass((function(_this) {
  73. return function() {
  74. var classes;
  75. classes = ["" + _this.options.baseClass, "" + _this.options.baseClass + "-" + _this.options.wrapperClass];
  76. classes.push(_this.options.state ? "" + _this.options.baseClass + "-" + _this.options.onModifierClass : "" + _this.options.baseClass + "-" + _this.options.offModifierClass);
  77. if (_this.options.size != null) {
  78. classes.push("" + _this.options.baseClass + "-" + _this.options.size);
  79. }
  80. if (_this.options.animate) {
  81. classes.push("" + _this.options.baseClass + "-" + _this.options.animateModifierClass);
  82. }
  83. if (_this.options.disabled) {
  84. classes.push("" + _this.options.baseClass + "-" + _this.options.disabledModifierClass);
  85. }
  86. if (_this.options.readonly) {
  87. classes.push("" + _this.options.baseClass + "-" + _this.options.readonlyModifierClass);
  88. }
  89. if (_this.$element.attr("id")) {
  90. classes.push("" + _this.options.baseClass + "-id-" + (_this.$element.attr("id")));
  91. }
  92. return classes.join(" ");
  93. };
  94. })(this));
  95. this.$container.addClass(addClasses(this.options.containerClass));
  96. this.$on.addClass("" + (addClasses(this.options.handleOnClass)) + " " + this.options.baseClass + "-" + this.options.onColor);
  97. this.$off.addClass("" + (addClasses(this.options.handleOffClass)) + " " + this.options.baseClass + "-" + this.options.offColor);
  98. this.$label.addClass(addClasses(this.options.labelClass));
  99. this.$element.on("init.bootstrapSwitch", (function(_this) {
  100. return function() {
  101. return _this.options.onInit.apply(element, arguments);
  102. };
  103. })(this));
  104. this.$element.on("switchChange.bootstrapSwitch", (function(_this) {
  105. return function() {
  106. return _this.options.onSwitchChange.apply(element, arguments);
  107. };
  108. })(this));
  109. this.$container = this.$element.wrap(this.$container).parent();
  110. this.$wrapper = this.$container.wrap(this.$wrapper).parent();
  111. this.$element.before(this.$on).before(this.$label).before(this.$off).trigger("init.bootstrapSwitch");
  112. this._elementHandlers();
  113. this._handleHandlers();
  114. this._labelHandlers();
  115. this._formHandler();
  116. }
  117. BootstrapSwitch.prototype._constructor = BootstrapSwitch;
  118. BootstrapSwitch.prototype.state = function(value, skip) {
  119. if (typeof value === "undefined") {
  120. return this.options.state;
  121. }
  122. if (this.options.disabled || this.options.readonly) {
  123. return this.$element;
  124. }
  125. value = !!value;
  126. this.$element.prop("checked", value).trigger("change.bootstrapSwitch", skip);
  127. return this.$element;
  128. };
  129. BootstrapSwitch.prototype.toggleState = function(skip) {
  130. if (this.options.disabled || this.options.readonly) {
  131. return this.$element;
  132. }
  133. return this.$element.prop("checked", !this.options.state).trigger("change.bootstrapSwitch", skip);
  134. };
  135. BootstrapSwitch.prototype.size = function(value) {
  136. if (typeof value === "undefined") {
  137. return this.options.size;
  138. }
  139. if (this.options.size != null) {
  140. this.$wrapper.removeClass("" + this.options.baseClass + "-" + this.options.size);
  141. }
  142. this.$wrapper.addClass("" + this.options.baseClass + "-" + value);
  143. this.options.size = value;
  144. return this.$element;
  145. };
  146. BootstrapSwitch.prototype.animate = function(value) {
  147. if (typeof value === "undefined") {
  148. return this.options.animate;
  149. }
  150. value = !!value;
  151. this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.baseClass + "-" + this.options.animateModifierClass);
  152. this.options.animate = value;
  153. return this.$element;
  154. };
  155. BootstrapSwitch.prototype.disabled = function(value) {
  156. if (typeof value === "undefined") {
  157. return this.options.disabled;
  158. }
  159. value = !!value;
  160. this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.baseClass + "-" + this.options.disabledModifierClass);
  161. this.$element.prop("disabled", value);
  162. this.options.disabled = value;
  163. return this.$element;
  164. };
  165. BootstrapSwitch.prototype.toggleDisabled = function() {
  166. this.$element.prop("disabled", !this.options.disabled);
  167. this.$wrapper.toggleClass("" + this.options.baseClass + "-" + this.options.disabledModifierClass);
  168. this.options.disabled = !this.options.disabled;
  169. return this.$element;
  170. };
  171. BootstrapSwitch.prototype.readonly = function(value) {
  172. if (typeof value === "undefined") {
  173. return this.options.readonly;
  174. }
  175. value = !!value;
  176. this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.baseClass + "-" + this.options.readonlyModifierClass);
  177. this.$element.prop("readonly", value);
  178. this.options.readonly = value;
  179. return this.$element;
  180. };
  181. BootstrapSwitch.prototype.toggleReadonly = function() {
  182. this.$element.prop("readonly", !this.options.readonly);
  183. this.$wrapper.toggleClass("" + this.options.baseClass + "-" + this.options.readonlyModifierClass);
  184. this.options.readonly = !this.options.readonly;
  185. return this.$element;
  186. };
  187. BootstrapSwitch.prototype.onColor = function(value) {
  188. var color;
  189. color = this.options.onColor;
  190. if (typeof value === "undefined") {
  191. return color;
  192. }
  193. if (color != null) {
  194. this.$on.removeClass("" + this.options.baseClass + "-" + color);
  195. }
  196. this.$on.addClass("" + this.options.baseClass + "-" + value);
  197. this.options.onColor = value;
  198. return this.$element;
  199. };
  200. BootstrapSwitch.prototype.offColor = function(value) {
  201. var color;
  202. color = this.options.offColor;
  203. if (typeof value === "undefined") {
  204. return color;
  205. }
  206. if (color != null) {
  207. this.$off.removeClass("" + this.options.baseClass + "-" + color);
  208. }
  209. this.$off.addClass("" + this.options.baseClass + "-" + value);
  210. this.options.offColor = value;
  211. return this.$element;
  212. };
  213. BootstrapSwitch.prototype.onText = function(value) {
  214. if (typeof value === "undefined") {
  215. return this.options.onText;
  216. }
  217. this.$on.html(value);
  218. this.options.onText = value;
  219. return this.$element;
  220. };
  221. BootstrapSwitch.prototype.offText = function(value) {
  222. if (typeof value === "undefined") {
  223. return this.options.offText;
  224. }
  225. this.$off.html(value);
  226. this.options.offText = value;
  227. return this.$element;
  228. };
  229. BootstrapSwitch.prototype.labelText = function(value) {
  230. if (typeof value === "undefined") {
  231. return this.options.labelText;
  232. }
  233. this.$label.html(value);
  234. this.options.labelText = value;
  235. return this.$element;
  236. };
  237. BootstrapSwitch.prototype.destroy = function() {
  238. var $form;
  239. $form = this.$element.closest("form");
  240. if ($form.length) {
  241. $form.off("reset.bootstrapSwitch").removeData("bootstrap-switch");
  242. }
  243. this.$container.children().not(this.$element).remove();
  244. this.$element.unwrap().unwrap().off(".bootstrapSwitch").removeData("bootstrap-switch");
  245. return this.$element;
  246. };
  247. BootstrapSwitch.prototype._elementHandlers = function() {
  248. return this.$element.on({
  249. "change.bootstrapSwitch": (function(_this) {
  250. return function(e, skip) {
  251. var checked;
  252. e.preventDefault();
  253. e.stopPropagation();
  254. e.stopImmediatePropagation();
  255. checked = _this.$element.is(":checked");
  256. if (checked === _this.options.state) {
  257. return;
  258. }
  259. _this.options.state = checked;
  260. _this.$wrapper.removeClass(checked ? "" + _this.options.baseClass + "-" + _this.options.offModifierClass : "" + _this.options.baseClass + "-" + _this.options.onModifierClass).addClass(checked ? "" + _this.options.baseClass + "-" + _this.options.onModifierClass : "" + _this.options.baseClass + "-" + _this.options.offModifierClass);
  261. if (!skip) {
  262. if (_this.$element.is(":radio")) {
  263. $("[name='" + (_this.$element.attr('name')) + "']").not(_this.$element).prop("checked", false).trigger("change.bootstrapSwitch", true);
  264. }
  265. return _this.$element.trigger("switchChange.bootstrapSwitch", [checked]);
  266. }
  267. };
  268. })(this),
  269. "focus.bootstrapSwitch": (function(_this) {
  270. return function(e) {
  271. e.preventDefault();
  272. e.stopPropagation();
  273. e.stopImmediatePropagation();
  274. return _this.$wrapper.addClass("" + _this.options.baseClass + "-" + _this.options.focusedModifierClass);
  275. };
  276. })(this),
  277. "blur.bootstrapSwitch": (function(_this) {
  278. return function(e) {
  279. e.preventDefault();
  280. e.stopPropagation();
  281. e.stopImmediatePropagation();
  282. return _this.$wrapper.removeClass("" + _this.options.baseClass + "-" + _this.options.focusedModifierClass);
  283. };
  284. })(this),
  285. "keydown.bootstrapSwitch": (function(_this) {
  286. return function(e) {
  287. if (!e.which || _this.options.disabled || _this.options.readonly) {
  288. return;
  289. }
  290. switch (e.which) {
  291. case 32:
  292. e.preventDefault();
  293. e.stopPropagation();
  294. e.stopImmediatePropagation();
  295. return _this.toggleState();
  296. case 37:
  297. e.preventDefault();
  298. e.stopPropagation();
  299. e.stopImmediatePropagation();
  300. return _this.state(false);
  301. case 39:
  302. e.preventDefault();
  303. e.stopPropagation();
  304. e.stopImmediatePropagation();
  305. return _this.state(true);
  306. }
  307. };
  308. })(this)
  309. });
  310. };
  311. BootstrapSwitch.prototype._handleHandlers = function() {
  312. this.$on.on("click.bootstrapSwitch", (function(_this) {
  313. return function(e) {
  314. _this.state(false);
  315. return _this.$element.trigger("focus.bootstrapSwitch");
  316. };
  317. })(this));
  318. return this.$off.on("click.bootstrapSwitch", (function(_this) {
  319. return function(e) {
  320. _this.state(true);
  321. return _this.$element.trigger("focus.bootstrapSwitch");
  322. };
  323. })(this));
  324. };
  325. BootstrapSwitch.prototype._labelHandlers = function() {
  326. return this.$label.on({
  327. "mousemove.bootstrapSwitch touchmove.bootstrapSwitch": (function(_this) {
  328. return function(e) {
  329. var left, percent, right;
  330. if (!_this.drag) {
  331. return;
  332. }
  333. e.preventDefault();
  334. percent = (((e.pageX || e.originalEvent.touches[0].pageX) - _this.$wrapper.offset().left) / _this.$wrapper.width()) * 100;
  335. left = 25;
  336. right = 75;
  337. if (percent < left) {
  338. percent = left;
  339. } else if (percent > right) {
  340. percent = right;
  341. }
  342. _this.$container.css("margin-left", "" + (percent - right) + "%");
  343. return _this.$element.trigger("focus.bootstrapSwitch");
  344. };
  345. })(this),
  346. "mousedown.bootstrapSwitch touchstart.bootstrapSwitch": (function(_this) {
  347. return function(e) {
  348. if (_this.drag || _this.options.disabled || _this.options.readonly) {
  349. return;
  350. }
  351. e.preventDefault();
  352. _this.drag = true;
  353. if (_this.options.animate) {
  354. _this.$wrapper.removeClass("" + _this.options.baseClass + "-" + _this.options.animateModifierClass);
  355. }
  356. return _this.$element.trigger("focus.bootstrapSwitch");
  357. };
  358. })(this),
  359. "mouseup.bootstrapSwitch touchend.bootstrapSwitch": (function(_this) {
  360. return function(e) {
  361. if (!_this.drag) {
  362. return;
  363. }
  364. e.preventDefault();
  365. _this.drag = false;
  366. _this.$element.prop("checked", parseInt(_this.$container.css("margin-left"), 10) > -(_this.$container.width() / 6)).trigger("change.bootstrapSwitch");
  367. _this.$container.css("margin-left", "");
  368. if (_this.options.animate) {
  369. return _this.$wrapper.addClass("" + _this.options.baseClass + "-" + _this.options.animateModifierClass);
  370. }
  371. };
  372. })(this),
  373. "mouseleave.bootstrapSwitch": (function(_this) {
  374. return function(e) {
  375. return _this.$label.trigger("mouseup.bootstrapSwitch");
  376. };
  377. })(this)
  378. });
  379. };
  380. BootstrapSwitch.prototype._formHandler = function() {
  381. var $form;
  382. $form = this.$element.closest("form");
  383. if ($form.data("bootstrap-switch")) {
  384. return;
  385. }
  386. return $form.on("reset.bootstrapSwitch", function() {
  387. return window.setTimeout(function() {
  388. return $form.find("input").filter(function() {
  389. return $(this).data("bootstrap-switch");
  390. }).each(function() {
  391. return $(this).bootstrapSwitch("state", false);
  392. });
  393. }, 1);
  394. }).data("bootstrap-switch", true);
  395. };
  396. return BootstrapSwitch;
  397. })();
  398. $.fn.bootstrapSwitch = function() {
  399. var args, option, ret;
  400. option = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
  401. ret = this;
  402. this.each(function() {
  403. var $this, data;
  404. $this = $(this);
  405. data = $this.data("bootstrap-switch");
  406. if (!data) {
  407. $this.data("bootstrap-switch", data = new BootstrapSwitch(this, option));
  408. }
  409. if (typeof option === "string") {
  410. return ret = data[option].apply(data, args);
  411. }
  412. });
  413. return ret;
  414. };
  415. $.fn.bootstrapSwitch.Constructor = BootstrapSwitch;
  416. return $.fn.bootstrapSwitch.defaults = {
  417. state: true,
  418. size: null,
  419. animate: true,
  420. disabled: false,
  421. readonly: false,
  422. onColor: "primary",
  423. offColor: "default",
  424. onText: "ON",
  425. offText: "OFF",
  426. labelText: "&nbsp;",
  427. baseClass: "bootstrap-switch",
  428. wrapperClass: "wrapper",
  429. containerClass: "container",
  430. handleOnClass: "handle-on",
  431. handleOffClass: "handle-off",
  432. labelClass: "label",
  433. onModifierClass: "on",
  434. offModifierClass: "off",
  435. focusedModifierClass: "focused",
  436. animateModifierClass: "animate",
  437. disabledModifierClass: "disabled",
  438. readonlyModifierClass: "readonly",
  439. onInit: function() {},
  440. onSwitchChange: function() {}
  441. };
  442. })(window.jQuery, window);
  443. }).call(this);