Skip to content
This repository has been archived by the owner on Feb 12, 2022. It is now read-only.

Checkbox refactor #1185

Merged
merged 6 commits into from
Apr 22, 2015
Merged

Checkbox refactor #1185

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
bb68bc7
initial version of checkbox refactor
Mar 19, 2015
570d14e
additional changes
Mar 20, 2015
8681ab2
updated unit tests
Mar 20, 2015
a309602
changed toggle logic to avoid needed to trigger click event. this al…
Mar 24, 2015
26c6d29
added unit tests for destroy and checkbox container toggle. also cha…
Mar 25, 2015
708b2c9
fixed block level checkbox highlight
Apr 17, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 32 additions & 28 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
<script type="text/javascript">if(window.console && window.console.clear){ window.console.clear(); }</script>

<link href="index.css" rel="stylesheet" type="text/css">
<!--<link href="http://www.fuelcdn.com/fuelux-mctheme/1.4.0/css/fuelux-mctheme.css" rel="stylesheet" type="text/css" />-->

<script src="bower_components/requirejs/require.js"></script>
<script type="text/javascript">
Expand Down Expand Up @@ -52,97 +53,97 @@ <h2>Checkboxes</h2>
<div class="thin-box">

<section id="checkboxes-block">

<div class="checkbox">
<label class="checkbox-custom" data-initialize="checkbox" id="myCustomCheckbox1">
<input class="sr-only" type="checkbox" value="">
<span class="checkbox-label">Custom checkbox unchecked on page load</span>
<input type="checkbox" class="sr-only">
Custom checkbox unchecked on page load
</label>
</div>
<div class="checkbox">
<label class="checkbox-custom" data-initialize="checkbox" id="myCustomCheckbox2">
<input checked="checked" class="checked sr-only" type="checkbox" value="">
<span class="checkbox-label">Custom checkbox checked on page load</span>
<input type="checkbox" class="sr-only" checked="checked">
Highlight Custom checkbox checked on page load
</label>
</div>
<div class="checkbox">
<label class="checkbox-custom" data-initialize="checkbox" id="myCustomCheckbox3">
<input class="sr-only" disabled="disabled" type="checkbox" value="">
<span class="checkbox-label">Custom checkbox disabled and unchecked on page load</span>
<input type="checkbox" class="sr-only" disabled="disabled">
Custom checkbox disabled and unchecked on page load
</label>
</div>
<div class="checkbox">
<label class="checkbox-custom" data-initialize="checkbox" id="myCustomCheckbox4">
<input checked="checked" class="checked sr-only" disabled="disabled" type="checkbox" value="">
<span class="checkbox-label">Custom checkbox disabled and checked on page load</span>
<input type="checkbox" class="sr-only" checked="checked" disabled="disabled">
Custom checkbox disabled and checked on page load
</label>
</div>
</section>


<section id="checkboxes-inline">
<label class="checkbox-custom checkbox-inline" data-initialize="checkbox" id="myCustomInlineCheckbox1">
<input checked="checked" class="checked sr-only" type="checkbox" value=""> <span class="checkbox-label">1, 2, buckle my shoe</span>
<input type="checkbox" class="sr-only" checked="checked">1, 2, buckle my shoe
</label>
<label class="checkbox-custom checkbox-inline" data-initialize="checkbox" id="myCustomInlineCheckbox2">
<input class="sr-only" type="checkbox" value=""> <span class="checkbox-label">3, 4, shut the door</span>
<input type="checkbox" class="sr-only">3, 4, shut the door
</label>
<label class="checkbox-custom checkbox-inline" data-initialize="checkbox" id="myCustomInlineCheckbox3">
<input class="sr-only" disabled="disabled" type="checkbox" value=""> <span class="checkbox-label">5, 6, pick up sticks</span>
<input type="checkbox" class="sr-only" disabled="disabled">5, 6, pick up sticks
</label>
<label class="checkbox-custom checkbox-inline" data-initialize="checkbox" id="myCustomInlineCheckbox4">
<input checked="checked" class="checked sr-only" disabled="disabled" type="checkbox" value=""> <span class="checkbox-label">7, 8, lay them straight</span>
<input type="checkbox" class="checked sr-only" checked="checked" disabled="disabled">7, 8, lay them straight
</label>
</section>

<section id="checkboxes-toggling">
<div class="checkbox">
<label class="checkbox-custom" data-initialize="checkbox" id="myCustomTogglingCheckbox1">
<input class="sr-only" data-toggle=".checkboxToggle" type="checkbox" value="">
<span class="checkbox-label">Custom checkbox toggles by class</span>
<input type="checkbox" class="sr-only" data-toggle=".checkboxToggle">
Custom checkbox toggles by class
</label>
</div>
<div class="checkbox">
<label class="checkbox-custom" data-initialize="checkbox" id="myCustomTogglingCheckbox2">
<input class="sr-only" data-toggle="#checkboxToggle" type="checkbox" value="">
<span class="checkbox-label">Custom checkbox toggles by id</span>
<input type="checkbox" class="sr-only" data-toggle="#checkboxToggle">
Custom checkbox toggles by id
</label>
</div>
<div aria-hidden="true" class="checkboxToggle alert alert-warning hide">This message's visibility toggles by class with a checkbox above.</div>
<div aria-hidden="true" class="checkboxToggle alert alert-success hide">This message's visibility toggles by class with a checkbox above.</div>
<div aria-hidden="true" class="alert alert-info hide" id="checkboxToggle">This message's visibility toggles by id with a checkbox above.</div>
</section>
<section id="checkboxes-highlighting-block">
<section id="checkboxes-highlighting-block"><!-- why duplicate the highlight classes on div.checkbox and label?, why span.checkbox-label vs. text node, why does checked input require 'checked' class too? -->
<div class="checkbox highlight">
<label class="checkbox-custom highlight" data-initialize="checkbox" id="myCustomHighlightCheckbox1">
<input class="sr-only" type="checkbox" value="">
<span class="checkbox-label">Custom block-level highlight checkbox</span>
<input type="checkbox" class="sr-only">
Custom block-level highlight checkbox
</label>
</div>
<div class="checkbox highlight">
<label class="checkbox-custom highlight" data-initialize="checkbox" id="myCustomHighlightCheckbox2">
<input class="sr-only" type="checkbox" value="">
<span class="checkbox-label">Custom block-level highlight checkbox</span>
<input type="checkbox" class="sr-only">
Custom block-level highlight checkbox
</label>
</div>
<div class="checkbox highlight">
<label class="checkbox-custom highlight" data-initialize="checkbox" id="myCustomHighlightCheckbox3">
<input class="sr-only" type="checkbox" value="">
<span class="checkbox-label">Custom block-level highlight checkbox</span>
<input type="checkbox" class="sr-only">
Custom block-level highlight checkbox
</label>
</div>
<div class="checkbox highlight">
<label class="checkbox-custom highlight" data-initialize="checkbox" id="myCustomHighlightCheckbox4">
<input class="sr-only" type="checkbox" value="">
<span class="checkbox-label">Custom block-level highlight checkbox</span>
<input type="checkbox" class="sr-only">
Custom block-level highlight checkbox
</label>
</div>
</section>
<section id="checkboxes-highlighting-inline">
<label class="checkbox-custom checkbox-inline highlight" data-initialize="checkbox" id="myCustomHighlightCheckbox5">
<input class="sr-only" type="checkbox" value=""> <span class="checkbox-label">Custom inline highlight checkbox</span>
<input type="checkbox" class="sr-only">Custom inline highlight checkbox
</label>
<label class="checkbox-custom checkbox-inline highlight" data-initialize="checkbox" id="myCustomHighlightCheckbox6">
<input class="sr-only" type="checkbox" value=""> <span class="checkbox-label">Custom inline highlight checkbox</span>
<input type="checkbox" class="sr-only">Custom inline highlight checkbox
</label>
</section>
</div>
Expand All @@ -151,6 +152,9 @@ <h2>Checkboxes</h2>
<button type="button" class="btn btn-default" id="btnCheckboxDisable">disable #myCustomCheckbox1</button>
<button type="button" class="btn btn-default" id="btnCheckboxEnable">enable #myCustomCheckbox1</button>
<button type="button" class="btn btn-default" id="btnCheckboxDestroy">destroy and append #myCustomCheckbox1</button>
<button type="button" class="btn btn-default" id="btnCheckboxIsChecked">is #myCustomCheckbox1 checked?</button>
<button type="button" class="btn btn-default" id="btnCheckboxCheck">check #myCustomCheckbox1</button>
<button type="button" class="btn btn-default" id="btnCheckboxUncheck">uncheck #myCustomCheckbox1</button>
</div>
</section>

Expand Down
26 changes: 21 additions & 5 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,17 +35,33 @@ define(function (require) {
$('#myCustomCheckbox1').checkbox('enable');
});
$('#btnCheckboxDestroy').on('click', function () {
var $container = $('#myCustomCheckbox1').parents('.thin-box:first');
var $container = $('#myCustomCheckbox1').parent();
var markup = $('#myCustomCheckbox1').checkbox('destroy');
log(markup);
$container.append(markup);
});
$('#btnCheckboxIsChecked').on('click', function () {
var checked = $('#myCustomCheckbox1').checkbox('isChecked');
log(checked);
});
$('#btnCheckboxCheck').on('click', function () {
$('#myCustomCheckbox1').checkbox('check');
});
$('#btnCheckboxUncheck').on('click', function () {
$('#myCustomCheckbox1').checkbox('uncheck');
});

$('#myCustomCheckbox1').on('changed.fu.checkbox', function(evt, data) {
log('changed', data);
});
$('#myCustomCheckbox1').on('checked.fu.checkbox', function(evt, data) {
log('checked');
});
$('#myCustomCheckbox1').on('unchecked.fu.checkbox', function(evt, data) {
log('unchecked');
});

// $('#myCustomCheckbox1 > input').on('change', function(){
// console.log('changed');
// });

// $('#myCustomCheckbox1').trigger('click');
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
COMBOBOX
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
Expand Down
Loading