/* =========================================================== * bootstrap-checkbox.js * =========================================================== * Copyright 2013 Roberto Montresor * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. * ========================================================== */ !function($) { var Checkbox = function(element, options, e) { if (e) { e.stopPropagation(); e.preventDefault(); } this.$element = $(element); this.$newElement = null; this.button = null; this.label = null; this.labelPrepend = null; this.options = $.extend({}, $.fn.checkbox.defaults, this.$element.data(), typeof options == 'object' && options); this.displayAsButton = this.options.displayAsButton; this.buttonStyle = this.options.buttonStyle; this.buttonStyleChecked = this.options.buttonStyleChecked; this.defaultState = this.options.defaultState; this.defaultEnabled = this.options.defaultEnabled; this.indeterminate = this.options.indeterminate; this.init(); }; Checkbox.prototype = { constructor: Checkbox, init: function (e) { this.$element.hide(); this.$element.attr('autocomplete', 'off'); var classList = this.$element.attr('class') !== undefined ? this.$element.attr('class').split(/\s+/) : ''; var template = this.getTemplate(); this.$element.after(template); this.$newElement = this.$element.next('.bootstrap-checkbox'); this.button = this.$newElement.find('button'); this.label = this.$newElement.find('span.label-checkbox'); this.labelPrepend = this.$newElement.find('span.label-prepend-checkbox'); for (var i = 0; i < classList.length; i++) { if(classList[i] != 'checkbox') { this.$newElement.addClass(classList[i]); } } this.button.addClass(this.buttonStyle); if (this.$element.data('default-state') != undefined){ this.defaultState = this.$element.data('default-state'); } if (this.$element.data('default-enabled') != undefined){ this.defaultEnabled = this.$element.data('default-enabled'); } if (this.$element.data('display-as-button') != undefined){ this.displayAsButton = this.$element.data('display-as-button'); } if (this.$element.data('indeterminate') != undefined){ this.indeterminate = this.$element.data('indeterminate'); } if (this.indeterminate) this.$element.prop('indeterminate', true); this.checkEnabled(); this.checkChecked(); this.checkTabIndex(); this.clickListener(); }, getTemplate: function() { var additionalButtonStyle = this.displayAsButton ? ' displayAsButton' : '', label = this.$element.data('label') ? ''+this.$element.data('label')+'' : '', labelPrepend = this.$element.data('label-prepend') ? ''+this.$element.data('label-prepend')+'' : ''; var template = '' + '' + ''; if (!this.displayAsButton && (this.$element.data('label') || this.$element.data('label-prepend'))) { template = ''; } return template; }, checkEnabled: function() { this.button.attr('disabled', this.$element.is(':disabled')); this.$newElement.toggleClass('disabled', this.$element.is(':disabled')); }, checkTabIndex: function() { if (this.$element.is('[tabindex]')) { var tabindex = this.$element.attr("tabindex"); this.button.attr('tabindex', tabindex); } }, checkChecked: function() { var whitePattern = /\s/g, replaceChar = '.'; if (this.$element.prop('indeterminate') == true){ this.button.find('span.'+this.options.checkedClass.replace(whitePattern, replaceChar)).hide(); this.button.find('span.'+this.options.uncheckedClass.replace(whitePattern, replaceChar)).hide(); this.button.find('span.'+this.options.indeterminateClass.replace(whitePattern, replaceChar)).show(); } else { if (this.$element.is(':checked')) { this.button.find('span.'+this.options.checkedClass.replace(whitePattern, replaceChar)).show(); this.button.find('span.'+this.options.uncheckedClass.replace(whitePattern, replaceChar)).hide(); } else { this.button.find('span.'+this.options.checkedClass.replace(whitePattern, replaceChar)).hide(); this.button.find('span.'+this.options.uncheckedClass.replace(whitePattern, replaceChar)).show(); } this.button.find('span.'+this.options.indeterminateClass.replace(whitePattern, replaceChar)).hide(); } if (this.$element.is(':checked')) { if (this.buttonStyleChecked){ this.button.removeClass(this.buttonStyle); this.button.addClass(this.buttonStyleChecked); } } else { if (this.buttonStyleChecked){ this.button.removeClass(this.buttonStyleChecked); this.button.addClass(this.buttonStyle); } } }, clickListener: function() { var _this = this; this.button.on('click', function(e){ e.preventDefault(); _this.$element.prop("indeterminate", false); _this.$element[0].click(); _this.checkChecked(); }); this.$element.on('change', function(e) { _this.checkChecked(); }); this.$element.parents('form').on('reset', function(e) { if (_this.defaultState == null){ _this.$element.prop('indeterminate', true); } else { _this.$element.prop('checked', _this.defaultState); } _this.$element.prop('disabled', !_this.defaultEnabled); _this.checkEnabled(); _this.checkChecked(); e.preventDefault(); }); }, setOptions: function(option, event){ if (option.checked != undefined) { this.setChecked(option.checked); } if (option.enabled != undefined) { this.setEnabled(option.enabled); } if (option.indeterminate != undefined) { this.setIndeterminate(option.indeterminate); } }, setChecked: function(checked){ this.$element.prop("checked", checked); this.$element.prop("indeterminate", false); this.checkChecked(); }, setIndeterminate: function(indeterminate){ this.$element.prop("indeterminate", indeterminate); this.checkChecked(); }, click: function(event){ this.$element.prop("indeterminate", false); this.$element[0].click(); this.checkChecked(); }, change: function(event){ this.$element.change(); }, setEnabled: function(enabled){ this.$element.attr('disabled', !enabled); this.checkEnabled(); }, toggleEnabled: function(event){ this.$element.attr('disabled', !this.$element.is(':disabled')); this.checkEnabled(); } }; $.fn.checkbox = function(option, event) { return this.each(function () { var $this = $(this), data = $this.data('checkbox'), options = typeof option == 'object' && option; if (!data) { $this.data('checkbox', (data = new Checkbox(this, options, event))); if (data.options.constructorCallback != undefined){ data.options.constructorCallback(data.$element, data.button, data.label, data.labelPrepend); } } else { if (typeof option == 'string') { data[option](event); } else { data.setOptions(option, event); } } }); }; $.fn.checkbox.defaults = { displayAsButton: false, indeterminate: false, buttonStyle: 'btn-link', buttonStyleChecked: null, checkedClass: 'cb-icon-check', uncheckedClass: 'cb-icon-check-empty', indeterminateClass: 'cb-icon-check-indeterminate', defaultState: false, defaultEnabled: true, constructorCallback: null }; }(window.jQuery);