+
diff --git a/server/files/javascript/checkbox.js b/server/files/javascript/checkbox.js
index 781dfe5d9..a22fc51be 100755
--- a/server/files/javascript/checkbox.js
+++ b/server/files/javascript/checkbox.js
@@ -4,7 +4,7 @@ semantic.dropdown = {};
semantic.dropdown.ready = function() {
// selector cache
- var
+ var
$checkbox = $('.example').not('.static').find('.ui.checkbox'),
// alias
handler
@@ -12,13 +12,13 @@ semantic.dropdown.ready = function() {
// event handlers
handler = {
-
+
};
$checkbox
.checkbox()
;
-
+
};
diff --git a/server/files/stylesheets/semantic.css b/server/files/stylesheets/semantic.css
index 6512f6790..20056643f 100755
--- a/server/files/stylesheets/semantic.css
+++ b/server/files/stylesheets/semantic.css
@@ -110,7 +110,7 @@ code {
background-color: rgba(0, 0, 0, 0.02);
border-radius: 0.2em;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
- color: #333333;
+ color: rgba(0, 0, 0, 0.75);
font-weight: bold;
display: inline-block;
font-family: "Monaco","Menlo","Ubuntu Mono","Consolas","source-code-pro",monospace;
@@ -1290,6 +1290,7 @@ body.progress.animated .ui.progress .bar {
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.05);
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
+ border-bottom: 1px solid #DDDDDD;
padding: 2em 3em 2em;
z-index: 1;
}
diff --git a/src/definitions/modules/checkbox.js b/src/definitions/modules/checkbox.js
index d7bb78767..bc798455f 100755
--- a/src/definitions/modules/checkbox.js
+++ b/src/definitions/modules/checkbox.js
@@ -34,18 +34,19 @@ $.fn.checkbox = function(parameters) {
className = settings.className,
namespace = settings.namespace,
+ selector = settings.selector,
error = settings.error,
eventNamespace = '.' + namespace,
moduleNamespace = 'module-' + namespace,
$module = $(this),
- $label = $(this).next(settings.selector.label).first(),
- $input = $(this).find(settings.selector.input),
+ $label = $(this).next(selector.label).first(),
+ $input = $(this).find(selector.input),
- selector = $module.selector || '',
instance = $module.data(moduleNamespace),
+ observer,
element = this,
module
;
@@ -54,24 +55,10 @@ $.fn.checkbox = function(parameters) {
initialize: function() {
module.verbose('Initializing checkbox', settings);
- if(settings.context && selector !== '') {
- module.verbose('Adding delegated events');
- $(element, settings.context)
- .on(selector, 'click' + eventNamespace, module.toggle)
- .on(selector + ' + ' + settings.selector.label, 'click' + eventNamespace, module.toggle)
- ;
- }
- else {
- $module
- .on('click' + eventNamespace, module.toggle)
- ;
- $input
- .on('keydown' + eventNamespace, module.event.keydown)
- ;
- $label
- .on('click' + eventNamespace, module.toggle)
- ;
- }
+ $module
+ .on('click' + eventNamespace, module.toggle)
+ .on('keydown' + eventNamespace, selector.input, module.event.keydown)
+ ;
if( module.is.checked() ) {
module.set.checked();
if(settings.fireOnInit) {
@@ -84,6 +71,8 @@ $.fn.checkbox = function(parameters) {
$.proxy(settings.onUnchecked, $input.get())();
}
}
+ module.observeChanges();
+
module.instantiate();
},
@@ -109,6 +98,45 @@ $.fn.checkbox = function(parameters) {
;
},
+ refresh: function() {
+ $module = $(this);
+ $label = $(this).next(selector.label).first();
+ $input = $(this).find(selector.input);
+ },
+
+ observeChanges: function() {
+ if(MutationObserver !== undefined) {
+ observer = new MutationObserver(function(mutations) {
+ module.debug('DOM tree modified, updating selector cache');
+ module.refresh();
+ });
+ observer.observe(element, {
+ childList : true,
+ subtree : true
+ });
+ module.debug('Setting up mutation observer', observer);
+ }
+ },
+
+ attachEvents: function(selector, event) {
+ var
+ $toggle = $(selector)
+ ;
+ event = $.isFunction(module[event])
+ ? module[event]
+ : module.toggle
+ ;
+ if($toggle.size() > 0) {
+ module.debug('Attaching checkbox events to element', selector, event);
+ $toggle
+ .on('click' + eventNamespace, event)
+ ;
+ }
+ else {
+ module.error(error.notFound);
+ }
+ },
+
event: {
keydown: function(event) {
var
@@ -145,9 +173,12 @@ $.fn.checkbox = function(parameters) {
},
can: {
+ change: function() {
+ return !( $module.hasClass(className.disabled) || $module.hasClass(className.readOnly) || $input.prop('disabled') );
+ },
uncheck: function() {
- return (typeof settings.required === 'boolean')
- ? settings.required
+ return (typeof settings.uncheckable === 'boolean')
+ ? !settings.uncheckable
: !module.is.radio()
;
}
@@ -165,6 +196,15 @@ $.fn.checkbox = function(parameters) {
}
},
+ disable: function() {
+ module.debug('Enabling checkbox functionality');
+ $module.addClass(className.disabled);
+ },
+ enable: function() {
+ module.debug('Disabling checkbox functionality');
+ $module.removeClass(className.disabled);
+ },
+
check: function() {
module.debug('Enabling checkbox', $input);
$input
@@ -188,6 +228,11 @@ $.fn.checkbox = function(parameters) {
},
toggle: function(event) {
+ if( !module.can.change() ) {
+ console.log(module.can.change());
+ module.debug('Checkbox is read-only or disabled, ignoring toggle');
+ return;
+ }
module.verbose('Determining new checkbox state');
if( module.is.unchecked() ) {
module.check();
@@ -258,9 +303,9 @@ $.fn.checkbox = function(parameters) {
executionTime = currentTime - previousTime;
time = currentTime;
performance.push({
- 'Element' : element,
'Name' : message[0],
'Arguments' : [].slice.call(message, 1) || '',
+ 'Element' : element,
'Execution Time' : executionTime
});
}
@@ -383,13 +428,15 @@ $.fn.checkbox.settings = {
// delegated event context
context : false,
- required : 'auto',
+ uncheckable : 'auto',
fireOnInit : true,
- className: {
- checked : 'checked',
- radio : 'radio'
+ className : {
+ checked : 'checked',
+ radio : 'radio',
+ disabled : 'disabled',
+ readOnly : 'read-only'
},
onChange : function(){},
@@ -403,7 +450,7 @@ $.fn.checkbox.settings = {
selector : {
input : 'input[type=checkbox], input[type=radio]',
label : 'label'
- },
+ }
};
diff --git a/src/definitions/modules/checkbox.less b/src/definitions/modules/checkbox.less
index a575c6ce9..f59661be7 100755
--- a/src/definitions/modules/checkbox.less
+++ b/src/definitions/modules/checkbox.less
@@ -46,7 +46,7 @@
position: absolute;
top: 0px;
left: 0px;
- opacity: 0;
+ opacity: 0 !important;
outline: none;
z-index: -1;
}
@@ -178,6 +178,16 @@
opacity: 1;
}
+/*--------------
+ Read-Only
+---------------*/
+
+.ui.read-only.checkbox,
+.ui.read-only.checkbox label {
+ cursor: default;
+}
+
+
/*--------------
Disabled
---------------*/
@@ -186,6 +196,7 @@
.ui.disabled.checkbox label,
.ui.checkbox input[disabled] ~ .box:after,
.ui.checkbox input[disabled] ~ label {
+ cursor: default;
opacity: @disabledCheckboxOpacity;
color: @disabledCheckboxLabelColor;
}