richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Complete restructure of checkbox for comprehensivenesss, adds indeterminate state, new callbacks, #2440

flex-list
jlukic 9 years ago
parent
8a1ba16eef
commit
9b3665eb01
3 changed files with 184 additions and 69 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 246
      src/definitions/modules/checkbox.js
  2. 6
      src/definitions/modules/checkbox.less
  3. 1
      src/themes/default/modules/checkbox.overrides

246
src/definitions/modules/checkbox.js
View File

@ -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 : {

6
src/definitions/modules/checkbox.less
View File

@ -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;

1
src/themes/default/modules/checkbox.overrides
View File

@ -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';
}

Write Preview
Loading…
Cancel
Save