bootstrap-switch.js 21 KB

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