bootstrap-checkbox.js 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
  1. /* ===========================================================
  2. * bootstrap-checkbox - v.1.0.1
  3. * ===========================================================
  4. * Copyright 2014 Roberto Montresor
  5. *
  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. *
  10. * http://www.apache.org/licenses/LICENSE-2.0
  11. *
  12. * Unless required by applicable law or agreed to in writing, software
  13. * distributed under the License is distributed on an "AS IS" BASIS,
  14. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15. * See the License for the specific language governing permissions and
  16. * limitations under the License.
  17. * ========================================================== */
  18. !function($) {
  19. var Checkbox = function(element, options, e) {
  20. if (e) {
  21. e.stopPropagation();
  22. e.preventDefault();
  23. }
  24. this.$element = $(element);
  25. this.$newElement = null;
  26. this.button = null;
  27. this.label = null;
  28. this.labelPrepend = null;
  29. this.options = $.extend({}, $.fn.checkbox.defaults, this.$element.data(), typeof options == 'object' && options);
  30. this.init();
  31. };
  32. Checkbox.prototype = {
  33. constructor: Checkbox,
  34. init: function (e) {
  35. this.$element.hide();
  36. this.$element.attr('autocomplete', 'off');
  37. this._createButtons();
  38. },
  39. _createButtons: function(){
  40. var classList = this.$element.attr('class') !== undefined ? this.$element.attr('class').split(/\s+/) : '';
  41. var template = this.getTemplate();
  42. this.$element.after(template);
  43. this.$newElement = this.$element.next('.bootstrap-checkbox');
  44. this.button = this.$newElement.find('button');
  45. this.label = this.$newElement.find('span.label-checkbox');
  46. this.labelPrepend = this.$newElement.find('span.label-prepend-checkbox');
  47. for (var i = 0; i < classList.length; i++) {
  48. if(classList[i] != 'checkbox') {
  49. this.$newElement.addClass(classList[i]);
  50. }
  51. }
  52. this.button.addClass(this.options.buttonStyle);
  53. if (this.$element.data('default-state') != undefined){
  54. this.options.defaultState = this.$element.data('default-state');
  55. }
  56. if (this.$element.data('default-enabled') != undefined){
  57. this.options.defaultEnabled = this.$element.data('default-enabled');
  58. }
  59. if (this.$element.data('display-as-button') != undefined){
  60. this.options.displayAsButton = this.$element.data('display-as-button');
  61. }
  62. if (this.options.indeterminate)
  63. this.$element.prop('indeterminate', true);
  64. this.checkEnabled();
  65. this.checkChecked();
  66. this.checkTabIndex();
  67. this.clickListener();
  68. },
  69. getTemplate: function() {
  70. var additionalButtonStyle = this.options.displayAsButton ? ' displayAsButton' : '',
  71. label = this.$element.data('label') ? '<span class="label-checkbox">'+this.$element.data('label')+'</span>' : '',
  72. labelPrepend = this.$element.data('label-prepend') ? '<span class="label-prepend-checkbox">'+this.$element.data('label-prepend')+'</span>' : '';
  73. var template =
  74. '<span class="button-checkbox bootstrap-checkbox">' +
  75. '<button type="button" class="btn clearfix'+additionalButtonStyle+'">' +
  76. ((this.$element.data('label-prepend') && this.options.displayAsButton) ? labelPrepend : '')+
  77. '<span class="icon '+this.options.checkedClass+'" style="display:none;"></span>' +
  78. '<span class="icon '+this.options.uncheckedClass+'"></span>' +
  79. '<span class="icon '+this.options.indeterminateClass+'" style="display:none;"></span>' +
  80. ((this.$element.data('label') && this.options.displayAsButton) ? label : '')+
  81. '</button>' +
  82. '</span>';
  83. if (!this.options.displayAsButton && (this.$element.data('label') || this.$element.data('label-prepend'))) {
  84. template =
  85. '<label class="'+this.options.labelClass+'">' +
  86. labelPrepend + template + label+
  87. '</label>';
  88. }
  89. return template;
  90. },
  91. checkEnabled: function() {
  92. this.button.attr('disabled', this.$element.is(':disabled'));
  93. this.$newElement.toggleClass('disabled', this.$element.is(':disabled'));
  94. },
  95. checkTabIndex: function() {
  96. if (this.$element.is('[tabindex]')) {
  97. var tabindex = this.$element.attr("tabindex");
  98. this.button.attr('tabindex', tabindex);
  99. }
  100. },
  101. checkChecked: function() {
  102. var whitePattern = /\s/g, replaceChar = '.';
  103. if (this.$element.prop('indeterminate') == true){
  104. this.button.find('span.'+this.options.checkedClass.replace(whitePattern, replaceChar)).hide();
  105. this.button.find('span.'+this.options.uncheckedClass.replace(whitePattern, replaceChar)).hide();
  106. this.button.find('span.'+this.options.indeterminateClass.replace(whitePattern, replaceChar)).show();
  107. } else {
  108. if (this.$element.is(':checked')) {
  109. this.button.find('span.'+this.options.checkedClass.replace(whitePattern, replaceChar)).show();
  110. this.button.find('span.'+this.options.uncheckedClass.replace(whitePattern, replaceChar)).hide();
  111. } else {
  112. this.button.find('span.'+this.options.checkedClass.replace(whitePattern, replaceChar)).hide();
  113. this.button.find('span.'+this.options.uncheckedClass.replace(whitePattern, replaceChar)).show();
  114. }
  115. this.button.find('span.'+this.options.indeterminateClass.replace(whitePattern, replaceChar)).hide();
  116. }
  117. if (this.$element.is(':checked')) {
  118. if (this.options.buttonStyleChecked){
  119. this.button.removeClass(this.options.buttonStyle);
  120. this.button.addClass(this.options.buttonStyleChecked);
  121. }
  122. } else {
  123. if (this.options.buttonStyleChecked){
  124. this.button.removeClass(this.options.buttonStyleChecked);
  125. this.button.addClass(this.options.buttonStyle);
  126. }
  127. }
  128. if (this.$element.is(':checked')) {
  129. if (this.options.labelClassChecked){
  130. $(this.$element).next("label").addClass(this.options.labelClassChecked);
  131. }
  132. } else {
  133. if (this.options.labelClassChecked){
  134. $(this.$element).next("label").removeClass(this.options.labelClassChecked);
  135. }
  136. }
  137. },
  138. clickListener: function() {
  139. var _this = this;
  140. this.button.on('click', function(e){
  141. e.preventDefault();
  142. _this.$element.prop("indeterminate", false);
  143. _this.$element[0].click();
  144. _this.checkChecked();
  145. });
  146. this.$element.on('change', function(e) {
  147. _this.checkChecked();
  148. });
  149. this.$element.parents('form').on('reset', function(e) {
  150. if (_this.options.defaultState == null){
  151. _this.$element.prop('indeterminate', true);
  152. } else {
  153. _this.$element.prop('checked', _this.options.defaultState);
  154. }
  155. _this.$element.prop('disabled', !_this.options.defaultEnabled);
  156. _this.checkEnabled();
  157. _this.checkChecked();
  158. e.preventDefault();
  159. });
  160. },
  161. setOptions: function(option, event){
  162. if (option.checked != undefined) {
  163. this.setChecked(option.checked);
  164. }
  165. if (option.enabled != undefined) {
  166. this.setEnabled(option.enabled);
  167. }
  168. if (option.indeterminate != undefined) {
  169. this.setIndeterminate(option.indeterminate);
  170. }
  171. },
  172. setChecked: function(checked){
  173. this.$element.prop("checked", checked);
  174. this.$element.prop("indeterminate", false);
  175. this.checkChecked();
  176. },
  177. setIndeterminate: function(indeterminate){
  178. this.$element.prop("indeterminate", indeterminate);
  179. this.checkChecked();
  180. },
  181. click: function(event){
  182. this.$element.prop("indeterminate", false);
  183. this.$element[0].click();
  184. this.checkChecked();
  185. },
  186. change: function(event){
  187. this.$element.change();
  188. },
  189. setEnabled: function(enabled){
  190. this.$element.attr('disabled', !enabled);
  191. this.checkEnabled();
  192. },
  193. toggleEnabled: function(event){
  194. this.$element.attr('disabled', !this.$element.is(':disabled'));
  195. this.checkEnabled();
  196. },
  197. refresh: function(event){
  198. this.checkEnabled();
  199. this.checkChecked();
  200. },
  201. update: function(options){
  202. if (!this.$element.next().find('.bootstrap-checkbox'))
  203. return;
  204. this.options = $.extend({}, this.options, options);
  205. this.$element.next().remove();
  206. this._createButtons();
  207. }
  208. };
  209. $.fn.checkbox = function(option, event) {
  210. return this.each(function () {
  211. var $this = $(this),
  212. data = $this.data('checkbox'),
  213. options = typeof option == 'object' && option;
  214. if (!data) {
  215. $this.data('checkbox', (data = new Checkbox(this, options, event)));
  216. if (data.options.constructorCallback != undefined){
  217. data.options.constructorCallback(data.$element, data.button, data.label, data.labelPrepend);
  218. }
  219. } else {
  220. if (typeof option == 'string') {
  221. data[option](event);
  222. } else if (typeof option != 'undefined') {
  223. data.setOptions(option, event);
  224. }
  225. }
  226. });
  227. };
  228. $.fn.checkbox.defaults = {
  229. displayAsButton: false,
  230. indeterminate: false,
  231. buttonStyle: 'btn-link',
  232. buttonStyleChecked: null,
  233. checkedClass: 'cb-icon-check',
  234. uncheckedClass: 'cb-icon-check-empty',
  235. indeterminateClass: 'cb-icon-check-indeterminate',
  236. defaultState: false,
  237. defaultEnabled: true,
  238. constructorCallback: null,
  239. labelClass: "checkbox bootstrap-checkbox",
  240. labelClassChecked: "active"
  241. };
  242. }(window.jQuery);