From 9b3665eb013d457a42e41843478ca4d855c23b03 Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 25 Jun 2015 13:44:33 -0400 Subject: [PATCH] Complete restructure of checkbox for comprehensivenesss, adds indeterminate state, new callbacks, #2440 --- src/definitions/modules/checkbox.js | 246 +++++++++++++----- src/definitions/modules/checkbox.less | 6 + src/themes/default/modules/checkbox.overrides | 1 + 3 files changed, 184 insertions(+), 69 deletions(-) diff --git a/src/definitions/modules/checkbox.js b/src/definitions/modules/checkbox.js index 863af1c02..00ce0e44e 100644 --- a/src/definitions/modules/checkbox.js +++ b/src/definitions/modules/checkbox.js @@ -57,9 +57,9 @@ $.fn.checkbox = function(parameters) { module.verbose('Initializing checkbox', settings); module.create.label(); - module.add.events(); + module.bind.events(); - module.set.tabbable(); + module.set.input.tabbable(); module.setup(); module.observeChanges(); @@ -76,7 +76,7 @@ $.fn.checkbox = function(parameters) { destroy: function() { module.verbose('Destroying module'); - module.remove.events(); + module.unbind.events(); $module .removeData(moduleNamespace) ; @@ -88,20 +88,22 @@ $.fn.checkbox = function(parameters) { module.set.checked(); if(settings.fireOnInit) { settings.onChecked.call($input[0]); + settings.onChange.call($input[0]); } } else { module.debug('Setting initial value to unchecked'); - module.remove.checked(); + module.set.unchecked(); if(settings.fireOnInit) { settings.onUnchecked.call($input[0]); + settings.onChange.call($input[0]); } } }, refresh: function() { - $label = $module.children(selector.label); - $input = $module.children(selector.input); + $label = $module.children(selector.label); + $input = $module.children(selector.input); }, observeChanges: function() { @@ -162,7 +164,10 @@ $.fn.checkbox = function(parameters) { get: { radios: function() { - return $('input[name="' + module.get.name() + '"]').closest(selector.checkbox); + var + name = module.get.name() + ; + return $('input[name="' + name + '"]').closest(selector.checkbox); }, name: function() { return $input.attr('name'); @@ -179,6 +184,15 @@ $.fn.checkbox = function(parameters) { checked: function() { return $input.prop('checked') !== undefined && $input.prop('checked'); }, + disabled: function() { + return $input.prop('disabled') !== undefined && $input.prop('disabled'); + }, + enabled: function() { + return !module.is.disabled(); + }, + determinate: function() { + return !module.is.indeterminate(); + }, unchecked: function() { return !module.is.checked(); } @@ -198,25 +212,108 @@ $.fn.checkbox = function(parameters) { set: { checked: function() { - var - $radios - ; + module.debug('Setting state to checked'); if( module.is.radio() ) { - $radios = module.get.radios(); - module.debug('Unchecking other radios', $radios); - $radios.removeClass(className.checked); + module.uncheckOthers(); } $module.addClass(className.checked); }, - tabbable: function() { - if( $input.attr('tabindex') === undefined) { - $input - .attr('tabindex', 0) - ; + unchecked: function() { + module.debug('Setting state to unchecked'); + $module.removeClass(className.checked); + }, + indeterminate: function() { + module.debug('Setting state to indeterminate'); + $module.addClass(className.indeterminate); + }, + determinate: function() { + module.debug('Setting state to determinate'); + $module.removeClass(className.indeterminate); + }, + disabled: function() { + module.debug('Setting state to disabled'); + $module.addClass(className.disabled); + }, + enabled: function() { + module.debug('Setting state to enabled'); + $module.removeClass(className.disabled); + }, + input: { + checked: function() { + if( !module.is.checked() ) { + module.verbose('Setting input state to checked', $input[0]); + $input + .prop('indeterminate', false) + .prop('checked', true) + .trigger('change') + ; + settings.onChecked.call($input[0]); + settings.onChange.call($input[0]); + } + }, + unchecked: function() { + if( !module.is.unchecked() ) { + module.verbose('Setting input state to unchecked', $input[0]); + $input + .prop('indeterminate', false) + .prop('checked', false) + .trigger('change') + ; + settings.onUnchecked.call($input[0]); + settings.onChange.call($input[0]); + } + }, + indeterminate: function() { + if( !module.is.indeterminate() ) { + module.verbose('Setting input state to indeterminate', $input[0]); + $input + .prop('indeterminate', true) + .trigger('change') + ; + settings.onIndeterminate.call($input[0]); + settings.onChange.call($input[0]); + } + }, + determinate: function() { + if( !module.is.determinate() ) { + module.verbose('Setting input state to determinate', $input[0]); + $input + .prop('indeterminate', false) + .trigger('change') + ; + settings.onDeterminate.call($input[0]); + settings.onChange.call($input[0]); + } + }, + disabled: function() { + if( module.is.disabled() ) { + module.verbose('Setting input state to disabled', $input[0]); + $input + .prop('disabled', 'disabled') + ; + settings.onDisabled.call($input[0]); + settings.onChange.call($input[0]); + } + }, + enabled: function() { + if( !module.is.enabled() ) { + module.verbose('Setting input state to enabled', $input[0]); + $input + .prop('disabled', false) + ; + settings.onEnabled.call($input[0]); + settings.onChange.call($input[0]); + } + }, + tabbable: function() { + if( $input.attr('tabindex') === undefined) { + $input.attr('tabindex', 0); + } } } }, + create: { label: function() { if($input.prevAll(selector.label).length > 0) { @@ -236,7 +333,7 @@ $.fn.checkbox = function(parameters) { } }, - add: { + bind: { events: function() { module.verbose('Attaching checkbox events'); $module @@ -246,10 +343,7 @@ $.fn.checkbox = function(parameters) { } }, - remove: { - checked: function() { - $module.removeClass(className.checked); - }, + unbind: { events: function() { module.debug('Removing events'); $module @@ -262,40 +356,48 @@ $.fn.checkbox = function(parameters) { } }, - enable: function() { - module.debug('Enabling checkbox functionality'); - $module.removeClass(className.disabled); - $input.prop('disabled', false); - settings.onEnabled.call($input[0]); - }, - - disable: function() { - module.debug('Disabling checkbox functionality'); - $module.addClass(className.disabled); - $input.prop('disabled', 'disabled'); - settings.onDisabled.call($input[0]); - }, - check: function() { module.debug('Enabling checkbox', $input); - $input - .prop('checked', true) - .trigger('change') - ; + module.set.input.checked(); module.set.checked(); - settings.onChange.call($input[0]); - settings.onChecked.call($input[0]); }, uncheck: function() { module.debug('Disabling checkbox'); - $input - .prop('checked', false) - .trigger('change') + module.set.input.unchecked(); + module.set.unchecked(); + }, + + indeterminate: function() { + module.debug('Making checkbox indeterminate'); + module.set.input.indeterminate(); + module.set.indeterminate(); + }, + + determinate: function() { + module.debug('Making checkbox determinate'); + module.set.input.determinate(); + module.set.determinate(); + }, + + enable: function() { + module.debug('Enabling checkbox'); + module.set.input.enabled(); + module.set.enabled(); + }, + + disable: function() { + module.debug('Disabling checkbox'); + module.set.input.disabled(); + module.set.disabled(); + }, + + uncheckOthers: function() { + var + $radios = module.get.radios() ; - module.remove.checked(); - settings.onChange.call($input[0]); - settings.onUnchecked.call($input[0]); + module.debug('Unchecking other radios', $radios); + $radios.removeClass(className.checked); }, toggle: function() { @@ -306,7 +408,7 @@ $.fn.checkbox = function(parameters) { return; } module.verbose('Determining new checkbox state'); - if( module.is.unchecked() ) { + if( module.is.indeterminate() || module.is.unchecked() ) { module.check(); } else if( module.is.checked() && module.can.uncheck() ) { @@ -492,28 +594,34 @@ $.fn.checkbox = function(parameters) { $.fn.checkbox.settings = { - name : 'Checkbox', - namespace : 'checkbox', + name : 'Checkbox', + namespace : 'checkbox', - debug : false, - verbose : true, - performance : true, + debug : false, + verbose : true, + performance : true, // delegated event context - uncheckable : 'auto', - fireOnInit : true, - - onChange : function(){}, - onChecked : function(){}, - onUnchecked : function(){}, - onEnabled : function(){}, - onDisabled : function(){}, - - className : { - checked : 'checked', - disabled : 'disabled', - radio : 'radio', - readOnly : 'read-only' + uncheckable : 'auto', + fireOnInit : true, + + onChange : function(){}, + + onChecked : function(){}, + onUnchecked : function(){}, + + onDeterminate : function() {}, + onIndeterminate : function() {}, + + onEnabled : function(){}, + onDisabled : function(){}, + + className : { + checked : 'checked', + indeterminate : 'indeterminate', + disabled : 'disabled', + radio : 'radio', + readOnly : 'read-only' }, error : { diff --git a/src/definitions/modules/checkbox.less b/src/definitions/modules/checkbox.less index 7818e68a9..3e1b2eb9c 100755 --- a/src/definitions/modules/checkbox.less +++ b/src/definitions/modules/checkbox.less @@ -187,12 +187,16 @@ Active ---------------*/ +.ui.checkbox input:indeterminate ~ .box:before, +.ui.checkbox input:indeterminate ~ label:before, .ui.checkbox input:checked ~ .box:before, .ui.checkbox input:checked ~ label:before { background: @checkboxActiveBackground; border-color: @checkboxActiveBorderColor; } +.ui.checkbox input:indeterminate ~ .box:after, +.ui.checkbox input:indeterminate ~ label:after, .ui.checkbox input:checked ~ .box:after, .ui.checkbox input:checked ~ label:after { opacity: 1; @@ -203,6 +207,8 @@ Active Focus ---------------*/ +.ui.checkbox input[type="radio"]:indeterminate:focus ~ .box:before, +.ui.checkbox input[type="radio"]:indeterminate:focus ~ label:before, .ui.checkbox input[type="radio"]:checked:focus ~ .box:before, .ui.checkbox input[type="radio"]:checked:focus ~ label:before { background: @checkboxFocusedBackground; diff --git a/src/themes/default/modules/checkbox.overrides b/src/themes/default/modules/checkbox.overrides index 3dbf0275f..11b70f537 100644 --- a/src/themes/default/modules/checkbox.overrides +++ b/src/themes/default/modules/checkbox.overrides @@ -25,6 +25,7 @@ .ui.checkbox input:indeterminate ~ .box:after, .ui.checkbox input:indeterminate ~ label:after { top: 1px; /* Rounding Error */ + font-size: 12px; /* Slightly Smaller */ content: '\e801'; }