bootstrap-switch.js 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583
  1. /** @license
  2. ========================================================================
  3. bootstrap-switch - v3.1.0
  4. http://www.bootstrap-switch.org
  5. Copyright 2012-2013 Mattia Larentis
  6. Licensed under the Apache License, Version 2.0 (the "License");
  7. you may not use this file except in compliance with the License.
  8. You may obtain a copy of the License at
  9. http://www.apache.org/licenses/LICENSE-2.0
  10. Unless required by applicable law or agreed to in writing, software
  11. distributed under the License is distributed on an "AS IS" BASIS,
  12. WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13. See the License for the specific language governing permissions and
  14. limitations under the License.
  15. */
  16. (function() {
  17. var __slice = [].slice;
  18. (function($, window) {
  19. "use strict";
  20. var BootstrapSwitch;
  21. BootstrapSwitch = (function() {
  22. function BootstrapSwitch(element, options) {
  23. if (options == null) {
  24. options = {};
  25. }
  26. this.$element = $(element);
  27. this.options = $.extend({}, $.fn.bootstrapSwitch.defaults, {
  28. state: this.$element.is(":checked"),
  29. size: this.$element.data("size"),
  30. animate: this.$element.data("animate"),
  31. disabled: this.$element.is(":disabled"),
  32. readonly: this.$element.is("[readonly]"),
  33. indeterminate: this.$element.data("indeterminate"),
  34. inverse: this.$element.data("inverse"),
  35. radioAllOff: this.$element.data("radio-all-off"),
  36. onColor: this.$element.data("on-color"),
  37. offColor: this.$element.data("off-color"),
  38. onText: this.$element.data("on-text"),
  39. offText: this.$element.data("off-text"),
  40. labelText: this.$element.data("label-text"),
  41. baseClass: this.$element.data("base-class"),
  42. wrapperClass: this.$element.data("wrapper-class")
  43. }, options);
  44. this.$wrapper = $("<div>", {
  45. "class": (function(_this) {
  46. return function() {
  47. var classes;
  48. classes = ["" + _this.options.baseClass].concat(_this._getClasses(_this.options.wrapperClass));
  49. classes.push(_this.options.state ? "" + _this.options.baseClass + "-on" : "" + _this.options.baseClass + "-off");
  50. if (_this.options.size != null) {
  51. classes.push("" + _this.options.baseClass + "-" + _this.options.size);
  52. }
  53. if (_this.options.animate) {
  54. classes.push("" + _this.options.baseClass + "-animate");
  55. }
  56. if (_this.options.disabled) {
  57. classes.push("" + _this.options.baseClass + "-disabled");
  58. }
  59. if (_this.options.readonly) {
  60. classes.push("" + _this.options.baseClass + "-readonly");
  61. }
  62. if (_this.options.indeterminate) {
  63. classes.push("" + _this.options.baseClass + "-indeterminate");
  64. }
  65. if (_this.options.inverse) {
  66. classes.push("" + _this.options.baseClass + "-inverse");
  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.options.inverse ? this.$off : this.$on).before(this.$label).before(this.options.inverse ? this.$on : 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) {
  117. return this.$element;
  118. }
  119. if (this.options.state && !this.options.radioAllOff && this.$element.is(':radio')) {
  120. return this.$element;
  121. }
  122. if (this.options.indeterminate) {
  123. this.indeterminate(false);
  124. value = true;
  125. } else {
  126. value = !!value;
  127. }
  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) {
  133. return this.$element;
  134. }
  135. if (this.options.indeterminate) {
  136. this.indeterminate(false);
  137. return this.state(true);
  138. } else {
  139. return this.$element.prop("checked", !this.options.state).trigger("change.bootstrapSwitch", skip);
  140. }
  141. };
  142. BootstrapSwitch.prototype.size = function(value) {
  143. if (typeof value === "undefined") {
  144. return this.options.size;
  145. }
  146. if (this.options.size != null) {
  147. this.$wrapper.removeClass("" + this.options.baseClass + "-" + this.options.size);
  148. }
  149. if (value) {
  150. this.$wrapper.addClass("" + this.options.baseClass + "-" + value);
  151. }
  152. this.options.size = value;
  153. return this.$element;
  154. };
  155. BootstrapSwitch.prototype.animate = function(value) {
  156. if (typeof value === "undefined") {
  157. return this.options.animate;
  158. }
  159. value = !!value;
  160. this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.baseClass + "-animate");
  161. this.options.animate = value;
  162. return this.$element;
  163. };
  164. BootstrapSwitch.prototype.toggleAnimate = function() {
  165. this.$wrapper.toggleClass("" + this.options.baseClass + "-animate");
  166. this.options.animate = !this.options.animate;
  167. return this.$element;
  168. };
  169. BootstrapSwitch.prototype.disabled = function(value) {
  170. if (typeof value === "undefined") {
  171. return this.options.disabled;
  172. }
  173. value = !!value;
  174. this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.baseClass + "-disabled");
  175. this.$element.prop("disabled", value);
  176. this.options.disabled = value;
  177. return this.$element;
  178. };
  179. BootstrapSwitch.prototype.toggleDisabled = function() {
  180. this.$element.prop("disabled", !this.options.disabled);
  181. this.$wrapper.toggleClass("" + this.options.baseClass + "-disabled");
  182. this.options.disabled = !this.options.disabled;
  183. return this.$element;
  184. };
  185. BootstrapSwitch.prototype.readonly = function(value) {
  186. if (typeof value === "undefined") {
  187. return this.options.readonly;
  188. }
  189. value = !!value;
  190. this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.baseClass + "-readonly");
  191. this.$element.prop("readonly", value);
  192. this.options.readonly = value;
  193. return this.$element;
  194. };
  195. BootstrapSwitch.prototype.toggleReadonly = function() {
  196. this.$element.prop("readonly", !this.options.readonly);
  197. this.$wrapper.toggleClass("" + this.options.baseClass + "-readonly");
  198. this.options.readonly = !this.options.readonly;
  199. return this.$element;
  200. };
  201. BootstrapSwitch.prototype.indeterminate = function(value) {
  202. if (typeof value === "undefined") {
  203. return this.options.indeterminate;
  204. }
  205. value = !!value;
  206. this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.baseClass + "-indeterminate");
  207. this.$element.prop("indeterminate", value);
  208. this.options.indeterminate = value;
  209. return this.$element;
  210. };
  211. BootstrapSwitch.prototype.toggleIndeterminate = function() {
  212. this.$element.prop("indeterminate", !this.options.indeterminate);
  213. this.$wrapper.toggleClass("" + this.options.baseClass + "-indeterminate");
  214. this.options.indeterminate = !this.options.indeterminate;
  215. return this.$element;
  216. };
  217. BootstrapSwitch.prototype.inverse = function(value) {
  218. var $off, $on;
  219. if (typeof value === "undefined") {
  220. return this.options.inverse;
  221. }
  222. value = !!value;
  223. this.$wrapper[value ? "addClass" : "removeClass"]("" + this.options.baseClass + "-inverse");
  224. $on = this.$on.clone(true);
  225. $off = this.$off.clone(true);
  226. this.$on.replaceWith($off);
  227. this.$off.replaceWith($on);
  228. this.$on = $off;
  229. this.$off = $on;
  230. this.options.inverse = value;
  231. return this.$element;
  232. };
  233. BootstrapSwitch.prototype.toggleInverse = function() {
  234. var $off, $on;
  235. this.$wrapper.toggleClass("" + this.options.baseClass + "-inverse");
  236. $on = this.$on.clone(true);
  237. $off = this.$off.clone(true);
  238. this.$on.replaceWith($off);
  239. this.$off.replaceWith($on);
  240. this.$on = $off;
  241. this.$off = $on;
  242. this.options.inverse = !this.options.inverse;
  243. return this.$element;
  244. };
  245. BootstrapSwitch.prototype.onColor = function(value) {
  246. var color;
  247. color = this.options.onColor;
  248. if (typeof value === "undefined") {
  249. return color;
  250. }
  251. if (color != null) {
  252. this.$on.removeClass("" + this.options.baseClass + "-" + color);
  253. }
  254. this.$on.addClass("" + this.options.baseClass + "-" + value);
  255. this.options.onColor = value;
  256. return this.$element;
  257. };
  258. BootstrapSwitch.prototype.offColor = function(value) {
  259. var color;
  260. color = this.options.offColor;
  261. if (typeof value === "undefined") {
  262. return color;
  263. }
  264. if (color != null) {
  265. this.$off.removeClass("" + this.options.baseClass + "-" + color);
  266. }
  267. this.$off.addClass("" + this.options.baseClass + "-" + value);
  268. this.options.offColor = value;
  269. return this.$element;
  270. };
  271. BootstrapSwitch.prototype.onText = function(value) {
  272. if (typeof value === "undefined") {
  273. return this.options.onText;
  274. }
  275. this.$on.html(value);
  276. this.options.onText = value;
  277. return this.$element;
  278. };
  279. BootstrapSwitch.prototype.offText = function(value) {
  280. if (typeof value === "undefined") {
  281. return this.options.offText;
  282. }
  283. this.$off.html(value);
  284. this.options.offText = value;
  285. return this.$element;
  286. };
  287. BootstrapSwitch.prototype.labelText = function(value) {
  288. if (typeof value === "undefined") {
  289. return this.options.labelText;
  290. }
  291. this.$label.html(value);
  292. this.options.labelText = value;
  293. return this.$element;
  294. };
  295. BootstrapSwitch.prototype.baseClass = function(value) {
  296. return this.options.baseClass;
  297. };
  298. BootstrapSwitch.prototype.wrapperClass = function(value) {
  299. if (typeof value === "undefined") {
  300. return this.options.wrapperClass;
  301. }
  302. if (!value) {
  303. value = $.fn.bootstrapSwitch.defaults.wrapperClass;
  304. }
  305. this.$wrapper.removeClass(this._getClasses(this.options.wrapperClass).join(" "));
  306. this.$wrapper.addClass(this._getClasses(value).join(" "));
  307. this.options.wrapperClass = value;
  308. return this.$element;
  309. };
  310. BootstrapSwitch.prototype.radioAllOff = function(value) {
  311. if (typeof value === "undefined") {
  312. return this.options.radioAllOff;
  313. }
  314. this.options.radioAllOff = value;
  315. return this.$element;
  316. };
  317. BootstrapSwitch.prototype.onInit = function(value) {
  318. if (typeof value === "undefined") {
  319. return this.options.onInit;
  320. }
  321. if (!value) {
  322. value = $.fn.bootstrapSwitch.defaults.onInit;
  323. }
  324. this.options.onInit = value;
  325. return this.$element;
  326. };
  327. BootstrapSwitch.prototype.onSwitchChange = function(value) {
  328. if (typeof value === "undefined") {
  329. return this.options.onSwitchChange;
  330. }
  331. if (!value) {
  332. value = $.fn.bootstrapSwitch.defaults.onSwitchChange;
  333. }
  334. this.options.onSwitchChange = value;
  335. return this.$element;
  336. };
  337. BootstrapSwitch.prototype.destroy = function() {
  338. var $form;
  339. $form = this.$element.closest("form");
  340. if ($form.length) {
  341. $form.off("reset.bootstrapSwitch").removeData("bootstrap-switch");
  342. }
  343. this.$container.children().not(this.$element).remove();
  344. this.$element.unwrap().unwrap().off(".bootstrapSwitch").removeData("bootstrap-switch");
  345. return this.$element;
  346. };
  347. BootstrapSwitch.prototype._elementHandlers = function() {
  348. return this.$element.on({
  349. "change.bootstrapSwitch": (function(_this) {
  350. return function(e, skip) {
  351. var checked;
  352. e.preventDefault();
  353. e.stopImmediatePropagation();
  354. checked = _this.$element.is(":checked");
  355. if (checked === _this.options.state) {
  356. return;
  357. }
  358. _this.options.state = checked;
  359. _this.$wrapper.removeClass(checked ? "" + _this.options.baseClass + "-off" : "" + _this.options.baseClass + "-on").addClass(checked ? "" + _this.options.baseClass + "-on" : "" + _this.options.baseClass + "-off");
  360. if (!skip) {
  361. if (_this.$element.is(":radio")) {
  362. $("[name='" + (_this.$element.attr('name')) + "']").not(_this.$element).prop("checked", false).trigger("change.bootstrapSwitch", true);
  363. }
  364. return _this.$element.trigger("switchChange.bootstrapSwitch", [checked]);
  365. }
  366. };
  367. })(this),
  368. "focus.bootstrapSwitch": (function(_this) {
  369. return function(e) {
  370. e.preventDefault();
  371. return _this.$wrapper.addClass("" + _this.options.baseClass + "-focused");
  372. };
  373. })(this),
  374. "blur.bootstrapSwitch": (function(_this) {
  375. return function(e) {
  376. e.preventDefault();
  377. return _this.$wrapper.removeClass("" + _this.options.baseClass + "-focused");
  378. };
  379. })(this),
  380. "keydown.bootstrapSwitch": (function(_this) {
  381. return function(e) {
  382. if (!e.which || _this.options.disabled || _this.options.readonly) {
  383. return;
  384. }
  385. switch (e.which) {
  386. case 37:
  387. e.preventDefault();
  388. e.stopImmediatePropagation();
  389. return _this.state(false);
  390. case 39:
  391. e.preventDefault();
  392. e.stopImmediatePropagation();
  393. return _this.state(true);
  394. }
  395. };
  396. })(this)
  397. });
  398. };
  399. BootstrapSwitch.prototype._handleHandlers = function() {
  400. this.$on.on("click.bootstrapSwitch", (function(_this) {
  401. return function(e) {
  402. _this.state(false);
  403. return _this.$element.trigger("focus.bootstrapSwitch");
  404. };
  405. })(this));
  406. return this.$off.on("click.bootstrapSwitch", (function(_this) {
  407. return function(e) {
  408. _this.state(true);
  409. return _this.$element.trigger("focus.bootstrapSwitch");
  410. };
  411. })(this));
  412. };
  413. BootstrapSwitch.prototype._labelHandlers = function() {
  414. return this.$label.on({
  415. "mousemove.bootstrapSwitch touchmove.bootstrapSwitch": (function(_this) {
  416. return function(e) {
  417. var left, pageX, percent, right;
  418. if (!_this.isLabelDragging) {
  419. return;
  420. }
  421. e.preventDefault();
  422. _this.isLabelDragged = true;
  423. pageX = e.pageX || e.originalEvent.touches[0].pageX;
  424. percent = ((pageX - _this.$wrapper.offset().left) / _this.$wrapper.width()) * 100;
  425. left = 25;
  426. right = 75;
  427. if (_this.options.animate) {
  428. _this.$wrapper.removeClass("" + _this.options.baseClass + "-animate");
  429. }
  430. if (percent < left) {
  431. percent = left;
  432. } else if (percent > right) {
  433. percent = right;
  434. }
  435. _this.$container.css("margin-left", "" + (percent - right) + "%");
  436. return _this.$element.trigger("focus.bootstrapSwitch");
  437. };
  438. })(this),
  439. "mousedown.bootstrapSwitch touchstart.bootstrapSwitch": (function(_this) {
  440. return function(e) {
  441. if (_this.isLabelDragging || _this.options.disabled || _this.options.readonly) {
  442. return;
  443. }
  444. e.preventDefault();
  445. _this.isLabelDragging = true;
  446. return _this.$element.trigger("focus.bootstrapSwitch");
  447. };
  448. })(this),
  449. "mouseup.bootstrapSwitch touchend.bootstrapSwitch": (function(_this) {
  450. return function(e) {
  451. var state;
  452. if (!_this.isLabelDragging) {
  453. return;
  454. }
  455. e.preventDefault();
  456. if (_this.isLabelDragged) {
  457. state = parseInt(_this.$container.css("margin-left"), 10) > -(_this.$container.width() / 6);
  458. _this.isLabelDragged = false;
  459. _this.state(_this.options.inverse ? !state : state);
  460. if (_this.options.animate) {
  461. _this.$wrapper.addClass("" + _this.options.baseClass + "-animate");
  462. }
  463. _this.$container.css("margin-left", "");
  464. } else {
  465. _this.state(!_this.options.state);
  466. }
  467. return _this.isLabelDragging = false;
  468. };
  469. })(this),
  470. "mouseleave.bootstrapSwitch": (function(_this) {
  471. return function(e) {
  472. return _this.$label.trigger("mouseup.bootstrapSwitch");
  473. };
  474. })(this)
  475. });
  476. };
  477. BootstrapSwitch.prototype._formHandler = function() {
  478. var $form;
  479. $form = this.$element.closest("form");
  480. if ($form.data("bootstrap-switch")) {
  481. return;
  482. }
  483. return $form.on("reset.bootstrapSwitch", function() {
  484. return window.setTimeout(function() {
  485. return $form.find("input").filter(function() {
  486. return $(this).data("bootstrap-switch");
  487. }).each(function() {
  488. return $(this).bootstrapSwitch("state", this.checked);
  489. });
  490. }, 1);
  491. }).data("bootstrap-switch", true);
  492. };
  493. BootstrapSwitch.prototype._getClasses = function(classes) {
  494. var c, cls, _i, _len;
  495. if (!$.isArray(classes)) {
  496. return ["" + this.options.baseClass + "-" + classes];
  497. }
  498. cls = [];
  499. for (_i = 0, _len = classes.length; _i < _len; _i++) {
  500. c = classes[_i];
  501. cls.push("" + this.options.baseClass + "-" + c);
  502. }
  503. return cls;
  504. };
  505. return BootstrapSwitch;
  506. })();
  507. $.fn.bootstrapSwitch = function() {
  508. var args, option, ret;
  509. option = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : [];
  510. ret = this;
  511. this.each(function() {
  512. var $this, data;
  513. $this = $(this);
  514. data = $this.data("bootstrap-switch");
  515. if (!data) {
  516. $this.data("bootstrap-switch", data = new BootstrapSwitch(this, option));
  517. }
  518. if (typeof option === "string") {
  519. return ret = data[option].apply(data, args);
  520. }
  521. });
  522. return ret;
  523. };
  524. $.fn.bootstrapSwitch.Constructor = BootstrapSwitch;
  525. return $.fn.bootstrapSwitch.defaults = {
  526. state: true,
  527. size: null,
  528. animate: true,
  529. disabled: false,
  530. readonly: false,
  531. indeterminate: false,
  532. inverse: false,
  533. radioAllOff: false,
  534. onColor: "primary",
  535. offColor: "default",
  536. onText: "ON",
  537. offText: "OFF",
  538. labelText: "&nbsp;",
  539. baseClass: "bootstrap-switch",
  540. wrapperClass: "wrapper",
  541. onInit: function() {},
  542. onSwitchChange: function() {}
  543. };
  544. })(window.jQuery, window);
  545. }).call(this);