Big upgrades to checkbox, attach events, read-only, disabled, dom mutations

server/documents/elements/header.html.eco

@@ -9,7 +9,7 @@ title       : 'Header'
 description : 'A header provides a short summary of content'
 type        : 'UI Element'
 
-themes      : ['Default', 'Bookish', 'Chubby']
+themes      : ['Default', 'Classic', 'Bookish', 'Chubby']
 ---
 
 <%- @partial('header') %>
@@ -139,24 +139,24 @@ themes      : ['Default', 'Bookish', 'Chubby']
 
   <div class="example">
     <h4 class="ui header">Attached</h4>
-    <p>A header can be attached to other content, like a <a href="elements/segment.html">segment</a></p>
-    <h3 class="ui top attached header">
+    <p>A header can be attached to other content, like a <a href="/elements/segment.html">segment</a></p>
+    <h5 class="ui top attached header">
       Bulldog
-    </h3>
+    </h5>
     <div class="ui attached segment">
       <p>Bulldog is the name for a breed of dog commonly referred to as the English Bulldog. Other Bulldog breeds include the American Bulldog, Old English Bulldog (now extinct), Olde English Bulldogge, and the French Bulldog. The Bulldog is a muscular, heavy dog with a wrinkled face and a distinctive pushed-in nose.</p>
       <p>The American Kennel Club (AKC), The Kennel Club (UK), and the United Kennel Club (UKC) oversee breeding standards. Bulldogs are the 5th most popular purebreed in the United States in 2013 according to the American Kennel Club.</p>
     </div>
-    <h3 class="ui attached header">
+    <h5 class="ui attached header">
       Catahoula Cur
-    </h3>
+    </h5>
     <div class="ui attached segment">
     <p>The Catahoula Cur is an American dog breed named after Catahoula Parish, in the state of Louisiana, in the United States. After becoming the state dog of Louisiana in 1979, its name was officially changed to Louisiana Catahoula Leopard Dog. The Catahoula is believed to be the first dog breed developed in North America.</p>
     <p>The breed is sometimes referred to as the "Catahoula Hound" or "Catahoula Leopard Hound", although it is not a true hound, but a cur. It is also called the "Catahoula Hog Dog", reflecting its traditional use in hunting wild boar.</p>
     </div>
-    <h3 class="ui bottom attached header">
+    <h5 class="ui bottom attached header">
       Thanks for reading
-    </h3>
+    </h5>
   </div>
 
   <div class="example">

server/documents/elements/segment.html.eco

@@ -45,7 +45,7 @@ themes      : ['default', 'GitHub']
     <h4 class="ui header">Horizontal Segment</h4>
     <p>A vertical segment formats content to be aligned as part of a horizontal group</p>
     <div class="ui ignored info message">
-      <h3 class="ui header">When to Use Horizontal Segments</h3>
+      <div class="header">When to Use Horizontal Segments</div>
       <p>Horizontal segments are most effectively used with grids, to allow for text groups that are aligned across grid rows.</p>
       <p>A <code>horizontal segment</code> adds horizontal padding and a horizontal border, while a <code>basic horizontal segment</code> adds only the padding <b>but not the border</b>.</p>
     </div>

server/documents/modules/checkbox.html.eco

@@ -84,6 +84,34 @@ themes      : ['Default']
       </div>
     </div>
 
+    <h2 class="ui dividing header">States</h2>
+
+    <div class="example">
+      <h4 class="ui header">Read-only</h4>
+      <p>A checkbox can be read-only and unable to change states</p>
+      <div class="ui read-only checkbox">
+        <input type="checkbox" />
+        <label>Read Only</label>
+      </div>
+    </div>
+
+    <div class="example">
+      <h4 class="ui header">Disabled</h4>
+      <p>A checkbox can be read-only and unable to change states</p>
+      <div class="ui info message">
+        A checkbox can be disabled by either setting disabled on the hidden input, or class <code>disabled</code> on the <code>ui checkbox</code>
+      </div>
+      <div class="ui disabled checkbox">
+        <input type="checkbox" disabled="disabled" />
+        <label>Disabled</label>
+      </div>
+      <br>
+      <br>
+      <div class="ui toggle checkbox">
+        <input type="checkbox" disabled="disabled" />
+        <label>Disabled</label>
+      </div>
+    </div>
 
   </div>
 
@@ -104,7 +132,7 @@ themes      : ['Default']
       </div>
     </div>
 
-    <h3 class="ui header">Checkbox without Javascript</h3>
+    <h3 class="ui header">Basic Checkbox</h3>
     <p>A checkbox can also be used without using javascript by matching the <code>id</code> attribute of the input field to the <code>for</code> attribute of the accompanying label</p>
     <div class="code" data-type="html">
       <div class="ui checkbox">
@@ -135,76 +163,89 @@ themes      : ['Default']
   <div class="ui tab" data-tab="examples">
 
     <h2>Examples</h2>
+    <div class="example">
+      <h4 class="ui header">Disabled / Read Only / Forced</h4>
+      <p>To disable a checkbox, add the property <code>disabled</code> to your input.</p>
+      <p>To make a checkbox read-only do not initialize it, or include the <code>read-only</code> class which will not allow events even if initialized.</p>
+      <p>To make a user able to check a box, but unable to uncheck it, use the <code>uncheckable</code> setting.</p>
+      <div class="evaluated code" data-type="javascript">
+        $('#demo3')
+          .checkbox({
+            uncheckable: true
+          })
+        ;
+      </div>
+      <div class="ui form">
+        <div class="field">
+          <div class="ui checkbox" id="demo1">
+            <input type="checkbox" disabled="disabled" checked="checked" />
+            <label> Disabled</label>
+          </div>
+        </div>
+        <div class="field">
+          <div class="ui read-only checkbox" id="demo2">
+            <input type="checkbox" checked="checked" />
+            <label> Read Only</label>
+          </div>
+        </div>
+        <div class="field">
+          <div class="ui checkbox" id="demo3">
+            <input type="checkbox" />
+            <label> Cannot Be Unchecked</label>
+          </div>
+        </div>
+      </div>
+    </div>
 
     <div class="example">
-      <p>Example of using checkbox states to alter multiple checkboxes</p>
+      <h4 class="ui header">Attaching Events to other Elements</h4>
+      <p>Checkbox can use the <code>attach events</code> behavior to attach events easily to other activating elements. This defaults to toggling, but other behaviors can be used as well.</p>
       <div class="evaluated code">
-      $('.check.button')
-        .on('click', function() {
-          $(this)
-            .nextAll('.checkbox')
-              .checkbox('check')
-          ;
-        })
-      ;
-      $('.uncheck.button')
-        .on('click', function() {
-          $(this)
-            .nextAll('.checkbox')
-              .checkbox('uncheck')
-          ;
-        })
-      ;
-      $('.toggle.button')
-        .on('click', function() {
-          $(this)
-            .nextAll('.checkbox')
-              .checkbox('toggle')
-          ;
-        })
-      ;
+        $('.test.checkbox').checkbox('attach events', '.toggle.button');
+        $('.test.checkbox').checkbox('attach events', '.check.button', 'check');
+        $('.test.checkbox').checkbox('attach events', '.uncheck.button', 'uncheck');
       </div>
       <div class="ui toggle button">Toggle</div>
       <div class="ui positive check button">Check</div>
       <div class="ui negative uncheck button">Uncheck</div>
       <br><br>
-      <div class="ui slider checkbox">
+      <div class="ui test slider checkbox">
         <input type="checkbox" />
         <div class="box"></div>
       </div>
-      <div class="ui slider checkbox">
+      <div class="ui test slider checkbox">
         <input type="checkbox" checked="checked" />
         <div class="box"></div>
       </div>
-      <div class="ui slider checkbox">
+      <div class="ui test slider checkbox">
         <input type="checkbox" />
         <div class="box"></div>
       </div>
-      <div class="ui slider checkbox">
+      <div class="ui test slider checkbox">
         <input type="checkbox" checked="checked" />
         <div class="box"></div>
       </div>
-      <div class="ui slider checkbox">
+      <div class="ui test slider checkbox">
         <input type="checkbox" />
         <div class="box"></div>
       </div>
-      <div class="ui slider checkbox">
+      <div class="ui test slider checkbox">
         <input type="checkbox" />
         <div class="box"></div>
       </div>
-      <div class="ui slider checkbox">
+      <div class="ui test slider checkbox">
         <input type="checkbox" checked="checked" />
         <div class="box"></div>
       </div>
-      <div class="ui slider checkbox">
+      <div class="ui test slider checkbox">
         <input type="checkbox" />
         <div class="box"></div>
       </div>
-      <div class="ui slider checkbox">
+      <div class="ui test slider checkbox">
         <input type="checkbox" checked="checked" />
         <div class="box"></div>
       </div>
-      <div class="ui slider checkbox">
+      <div class="ui test slider checkbox">
         <input type="checkbox" />
         <div class="box"></div>
       </div>

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()
   ;
-  
+
 };
 
 

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

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'
-  },
+  }
 
 };
 

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