bootstrap-switch.js 20 KB

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