bootstrap-switch.js 19 KB

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