github/fuelux
1
1
Fork 0
mirror of https://github.com/ExactTarget/fuelux.git synced 2026-04-26 03:00:10 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #538 from ExactTarget/aria-support

Browse Source 
WAI-ARIA support
This commit is contained in:
Kevin Parkerson
2014-05-29 16:37:39 -04:00
parent 1053db5564 8b926bea2a
commit bd2950146c
28 changed files with 650 additions and 516 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
dist/css/fuelux.css vendored
View File

@@ -127,11 +127,6 @@
background: #e9e9e9;
border-radius: 4px;
}
.fuelux .checkbox-custom input[type=checkbox] {
/* IE cannot fire events if display none or visibility hidden */
position: relative;
left: -99999px;
}
.fuelux .checkbox-custom input[type="checkbox"]:focus + .checkbox-label {
color: #999999;
}
@@ -680,11 +675,6 @@
background: #e9e9e9;
border-radius: 4px;
}
.fuelux .radio-custom input[type=radio] {
/* IE cannot fire events if display none or visibility hidden */
position: relative;
left: -99999px;
}
.fuelux .radio-custom input[type="radio"]:focus + .radio-label {
color: #999999;
}
@@ -752,6 +742,9 @@
min-height: 80px;
position: relative;
}
.fuelux .repeater-pagination label {
font-weight: normal;
}
.fuelux .repeater-pagination .repeater-primaryPaging {
display: none;
vertical-align: middle;
@@ -1002,11 +995,10 @@ END
overflow: auto;
}
.fuelux .scheduler .repeat-panel {
display: none;
margin-left: 0;
}
.fuelux .scheduler .repeat-panel.panel-open {
display: block;
.fuelux .scheduler .repeat-panel label {
font-weight: normal;
}
.fuelux .scheduler .repeat-panel .radio {
margin-right: 10px;
@@ -1144,9 +1136,6 @@ END
.fuelux .scheduler label.radio input {
margin-top: 8px;
}
.fuelux .scheduler .repeat-end {
display: none;
}
.fuelux .scheduler .repeat-end .end-after {
float: left;
display: inline-block;
@@ -1154,9 +1143,6 @@ END
.fuelux .scheduler .repeat-end .form-group {
margin-left: 0;
}
.fuelux .scheduler .repeat-end .end-option-panel {
display: none;
}
.fuelux .selectlist-sizer {
display: inline-block;
position: absolute;

2
dist/css/fuelux.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/fuelux.min.css vendored
View File

File diff suppressed because one or more lines are too long

109
dist/js/fuelux.js vendored
View File

@@ -122,9 +122,11 @@
toggleContainer: function() {
if ( this.$toggleContainer ) {
if ( this.isChecked() ) {
this.$toggleContainer.show();
this.$toggleContainer.removeClass( 'hide' );
this.$toggleContainer.attr( 'aria-hidden', 'false' );
} else {
this.$toggleContainer.hide();
this.$toggleContainer.addClass( 'hide' );
this.$toggleContainer.attr( 'aria-hidden', 'true' );
}
}
},
@@ -2014,11 +2016,14 @@
group = $( 'input[name="' + this.groupName + '"]' );
group.each( function() {
var selector = $( this ).attr( 'data-toggle' );
$( selector ).hide();
$( selector ).addClass( 'hide' );
$( selector ).attr( 'aria-hidden', 'true' );
} );
this.$toggleContainer.show();
this.$toggleContainer.removeClass( 'hide' );
this.$toggleContainer.attr( 'aria-hidden', 'false' );
} else {
this.$toggleContainer.hide();
this.$toggleContainer.addClass( 'hide' );
this.$toggleContainer.attr( 'aria-hidden', 'true' );
}
}
@@ -2269,7 +2274,7 @@
var data = this.selectedItem();
// trigger changed event
this.$element.trigger( 'changed', data );
this.$element.trigger( 'changed.fu.selectlist', data );
e.preventDefault();
},
@@ -2391,7 +2396,7 @@
// SELECTLIST DATA-API
$( 'body' ).on( 'mousedown.select.data-api', '.selectlist', function() {
$( 'body' ).on( 'mousedown.fu.selectlist.data-api', '.selectlist', function() {
var $this = $( this );
if ( $this.data( 'selectlist' ) ) {
return;
@@ -5298,6 +5303,7 @@
this.$startTime = this.$element.find( '.start-datetime .start-time' );
this.$timeZone = this.$element.find( '.timezone-container .timezone' );
this.$timeZone.selectlist();
this.$repeatIntervalPanel = this.$element.find( '.repeat-every-panel' );
this.$repeatIntervalSelect = this.$element.find( '.repeat-options' );
@@ -5313,29 +5319,29 @@
// panels
this.$recurrencePanels = this.$element.find( '.repeat-panel' );
// bind events
this.$element.find( '.repeat-days-of-the-week .btn-group .btn' ).on( 'mouseup', function( e, data ) {
console.log( $( self ).find( '.repeat-days-of-the-week .btn-group button' ) );
self.changed( e, data, true );
} );
this.$element.find( '.combobox' ).on( 'changed', $.proxy( this.changed, this ) );
this.$element.find( '.datepicker' ).on( 'changed', $.proxy( this.changed, this ) );
this.$element.find( '.selectlist' ).on( 'changed', $.proxy( this.changed, this ) );
this.$element.find( '.spinbox' ).on( 'changed', $.proxy( this.changed, this ) );
this.$element.find( '.repeat-monthly .radio, .repeat-yearly .radio' ).on( 'mouseup', $.proxy( this.changed, this ) );
//initialize sub-controls
this.$repeatIntervalSelect.on( 'changed', $.proxy( this.repeatIntervalSelectChanged, this ) );
this.$endSelect.on( 'changed', $.proxy( this.endSelectChanged, this ) );
//initialize sub-controls
this.$repeatIntervalSelect.on( 'changed.fu.selectlist', $.proxy( this.repeatIntervalSelectChanged, this ) );
this.$endSelect.on( 'changed.fu.selectlist', $.proxy( this.endSelectChanged, this ) );
this.$startDate.datepicker();
this.$startTime.combobox();
// init start time
if ( this.$startTime.find( 'input' ).val() === '' ) {
this.$startTime.combobox( 'selectByIndex', 0 );
}
this.$repeatIntervalSpinbox.spinbox();
this.$endAfter.spinbox();
this.$endDate.datepicker();
// bind events: 'change' is a Bootstrap JS fired event
this.$element.find( '.repeat-days-of-the-week .btn-group .btn' ).on( 'change', function( e, data ) {
self.changed( e, data, true );
} );
this.$element.find( '.combobox' ).on( 'changed', $.proxy( this.changed, this ) );
this.$element.find( '.datepicker' ).on( 'changed', $.proxy( this.changed, this ) );
this.$element.find( '.selectlist' ).on( 'changed.fu.selectlist', $.proxy( this.changed, this ) );
this.$element.find( '.spinbox' ).on( 'changed', $.proxy( this.changed, this ) );
this.$element.find( '.repeat-monthly .radio, .repeat-yearly .radio' ).on( 'change', $.proxy( this.changed, this ) );
};
Scheduler.prototype = {
@@ -5345,7 +5351,7 @@
if ( !propagate ) {
e.stopPropagation();
}
this.$element.trigger( 'changed', {
this.$element.trigger( 'changed.fu.scheduler', {
data: ( data !== undefined ) ? data : $( e.currentTarget ).data(),
originalEvent: e,
value: this.getValue()
@@ -5373,13 +5379,18 @@
}
// hide all panels
this.$endAfter.parent().hide();
this.$endDate.parent().hide();
this.$endAfter.parent().addClass( 'hide' );
this.$endAfter.parent().attr( 'aria-hidden', 'true' );
this.$endDate.parent().addClass( 'hide' );
this.$endDate.parent().attr( 'aria-hidden', 'true' );
if ( val === 'after' ) {
this.$endAfter.parent().show();
this.$endAfter.parent().removeClass( 'hide' );
this.$endAfter.parent().attr( 'aria-hidden', 'false' );
} else if ( val === 'date' ) {
this.$endDate.parent().show();
this.$endDate.parent().removeClass( 'hide' );
this.$endDate.parent().attr( 'aria-hidden', 'false' );
}
},
@@ -5395,8 +5406,9 @@
var repeat = this.$repeatIntervalSelect.selectlist( 'selectedItem' ).value;
var startTime = this.$startTime.combobox( 'selectedItem' ).text.toLowerCase();
var timeZone = this.$timeZone.selectlist( 'selectedItem' );
var getFormattedDate;
var getFormattedDate = function( dateObj, dash ) {
getFormattedDate = function( dateObj, dash ) {
var fdate = '';
var item;
@@ -5410,6 +5422,7 @@
return fdate;
};
var day, days, hasAm, hasPm, month, pos, startDateTime, type;
startDateTime = '' + getFormattedDate( this.$startDate.datepicker( 'getDate' ), '-' );
@@ -5445,11 +5458,9 @@
pattern += 'INTERVAL=1;';
} else if ( repeat === 'weekly' ) {
days = [];
console.log( this.$element.find( '.repeat-days-of-the-week .btn-group button.active' ) );
this.$element.find( '.repeat-days-of-the-week .btn-group button.active' ).each( function() {
this.$element.find( '.repeat-days-of-the-week .btn-group input:checked' ).each( function() {
days.push( $( this ).data().value );
} );
console.log( days );
pattern += 'FREQ=WEEKLY;';
pattern += 'BYDAY=' + days.join( ',' ) + ';';
@@ -5457,29 +5468,28 @@
} else if ( repeat === 'monthly' ) {
pattern += 'FREQ=MONTHLY;';
pattern += 'INTERVAL=' + interval + ';';
type = this.$element.find( 'input[name=repeat-monthly]:checked' ).val();
type = parseInt( this.$element.find( 'input[name=scheduler-month]:checked' ).val(), 10 );
if ( type === 1 ) {
if ( type === 'bymonthday' ) {
day = parseInt( this.$element.find( '.repeat-monthly-date .selectlist' ).selectlist( 'selectedItem' ).text, 10 );
pattern += 'BYMONTHDAY=' + day + ';';
} else if ( type === 2 ) {
} else if ( type === 'bysetpos' ) {
days = this.$element.find( '.month-days' ).selectlist( 'selectedItem' ).value;
pos = this.$element.find( '.month-day-pos' ).selectlist( 'selectedItem' ).value;
pattern += 'BYDAY=' + days + ';';
pattern += 'BYSETPOS=' + pos + ';';
}
} else if ( repeat === 'yearly' ) {
pattern += 'FREQ=YEARLY;';
type = this.$element.find( 'input[name=repeat-yearly]:checked' ).val();
type = parseInt( this.$element.find( 'input[name=scheduler-year]:checked' ).val(), 10 );
if ( type === 1 ) {
if ( type === 'bymonthday' ) {
month = this.$element.find( '.repeat-yearly-date .year-month' ).selectlist( 'selectedItem' ).value;
day = this.$element.find( '.year-month-day' ).selectlist( 'selectedItem' ).text;
pattern += 'BYMONTH=' + month + ';';
pattern += 'BYMONTHDAY=' + day + ';';
} else if ( type === 2 ) {
} else if ( type === 'bysetpos' ) {
days = this.$element.find( '.year-month-days' ).selectlist( 'selectedItem' ).value;
pos = this.$element.find( '.year-month-day-pos' ).selectlist( 'selectedItem' ).value;
month = this.$element.find( '.repeat-yearly-day .year-month' ).selectlist( 'selectedItem' ).value;
@@ -5488,6 +5498,7 @@
pattern += 'BYSETPOS=' + pos + ';';
pattern += 'BYMONTH=' + month + ';';
}
}
var end = this.$endSelect.selectlist( 'selectedItem' ).value;
@@ -5539,25 +5550,31 @@
case 'daily':
case 'weekly':
case 'monthly':
this.$repeatIntervalPanel.show();
this.$repeatIntervalPanel.removeClass( 'hide' );
this.$repeatIntervalPanel.attr( 'aria-hidden', 'false' );
break;
default:
this.$repeatIntervalPanel.hide();
this.$repeatIntervalPanel.addClass( 'hide' );
this.$repeatIntervalPanel.attr( 'aria-hidden', 'true' );
break;
}
// hide all panels
this.$recurrencePanels.hide();
this.$recurrencePanels.addClass( 'hide' );
this.$recurrencePanels.attr( 'aria-hidden', 'true' );
// show panel for current selection
this.$element.find( '.repeat-' + val ).show();
this.$element.find( '.repeat-' + val ).removeClass( 'hide' );
this.$element.find( '.repeat-' + val ).attr( 'aria-hidden', 'false' );
// the end selection should only be shown when
// the repeat interval is not "None (run once)"
if ( val === 'none' ) {
this.$end.hide();
this.$end.addClass( 'hide' );
this.$end.attr( 'aria-hidden', 'true' );
} else {
this.$end.show();
this.$end.removeClass( 'hide' );
this.$end.attr( 'aria-hidden', 'false' );
}
},
@@ -5642,10 +5659,10 @@
} else if ( recur.FREQ === 'WEEKLY' ) {
if ( recur.BYDAY ) {
item = this.$element.find( '.repeat-days-of-the-week .btn-group' );
item.find( 'button' ).removeClass( 'active' );
item.find( 'label' ).removeClass( 'active' );
temp = recur.BYDAY.split( ',' );
for ( i = 0, l = temp.length; i < l; i++ ) {
item.find( 'button[data-value="' + temp[ i ] + '"]' ).addClass( 'active' );
item.find( 'input[data-value="' + temp[ i ] + '"]' ).parent().addClass( 'active' );
}
}
item = 'weekly';

6
dist/js/fuelux.min.js vendored
View File

File diff suppressed because one or more lines are too long

11
index.css
View File

@@ -37,6 +37,9 @@ body {
margin-bottom: 0;
}
#MyComboboxContainer, #MyDatepickerContainer {
max-width: 300px;
}
/* Example schedulers */
.bs-example.fu-example-scheduler {
@@ -51,9 +54,9 @@ body {
.fu-example-scheduler .scheduler .repeat-panel {
display: block !important;
}
.fu-example-scheduler .scheduler .scheduler-end {
display: block;
.fu-example-scheduler .scheduler .repeat-end {
display: block !important;
}
.fu-example-scheduler .scheduler .scheduler-end .end-option-panel {
display: block;
.fu-example-scheduler .scheduler .repeat-end .end-option-panel {
display: block !important;
}

480
index.html
View File

@@ -60,35 +60,39 @@
<h2>Checkbox</h2>
<div class="checkbox">
<label class="checkbox-custom">
<input id="chk1" checked="checked" class="checked" type="checkbox" value="">
<span class="checkbox-label">Custom appearance checkbox checked at page load (#chk1)</span>
</label>
</div>
<div class="checkbox">
<label class="checkbox-custom">
<input checked="checked" data-toggle="#checkboxToggle1" class="checked" type="checkbox" value="">
<span class="checkbox-label">Custom appearance checkbox checked at page load with linked element visibility toggle by id </span>
</label>
</div>
<div class="checkbox">
<label class="checkbox-custom">
<input class="checkbox" data-toggle=".checkboxToggle2" type="checkbox" value="">
<span class="checkbox-label">Custom appearance checkbox unchecked on page load <i>with linked element visibility toggle by class</i></span>
</label>
</div>
<div class="checkbox">
<label class="checkbox-custom">
<input checked="checked" disabled="disabled" class="checkbox" type="checkbox" value="">
<span class="checkbox-label">Disabled custom appearance checkbox <i>checked on page load</i></span>
</label>
</div>
<div class="checkbox">
<label class="checkbox-custom">
<input class="checkbox" disabled="disabled" type="checkbox" value="">
<span class="checkbox-label">Disabled custom appearance checkbox <i>unchecked on page load</i></span>
</label>
<div id="MyCheckboxContainer">
<div id="CheckboxWrapper1" class="checkbox">
<label class="checkbox-custom">
<input id="Checkbox1" class="sr-only checked" type="checkbox" value="" checked="checked">
<span class="checkbox-label">Custom appearance checkbox checked at page load (#chk1)</span>
</label>
</div>
<div id="CheckboxWrapper2" class="checkbox">
<label class="checkbox-custom">
<input id="Checkbox2" class="sr-only checked" type="checkbox" value="" checked="checked" data-toggle="#checkboxToggle1">
<span class="checkbox-label">Custom appearance checkbox checked at page load with linked element visibility toggle by id </span>
</label>
</div>
<div id="CheckboxWrapper3" class="checkbox">
<label class="checkbox-custom">
<input id="Checkbox3" class="sr-only checkbox" type="checkbox" value="" data-toggle=".checkboxToggle2">
<span class="checkbox-label">Custom appearance checkbox unchecked on page load <i>with linked element visibility toggle by class</i></span>
</label>
</div>
<div id="CheckboxWrapper4" class="checkbox">
<label class="checkbox-custom">
<input id="Checkbox4" class="sr-only checkbox" type="checkbox" value="" checked="checked" disabled="disabled">
<span class="checkbox-label">Disabled custom appearance checkbox <i>checked on page load</i></span>
</label>
</div>
<div id="CheckboxWrapper5" class="checkbox">
<label class="checkbox-custom">
<input id="Checkbox5" class="sr-only checkbox" type="checkbox" value="" disabled="disabled">
<span class="checkbox-label">Disabled custom appearance checkbox <i>unchecked on page load</i></span>
</label>
</div>
</div>
<div class="checkbox">
@@ -118,9 +122,9 @@
<br/>
<h5>Sample element visibility toggle bound to checkboxes</h5>
<div id="checkboxToggle1" class="alert bg-info" style="display: none;">This message's visibility toggles by id with a checkbox above.</div>
<div class="checkboxToggle2 alert bg-warning" style="display: none;">This message's visibility toggles by class with a checkbox above.</div>
<div class="checkboxToggle2 alert bg-success" style="display: none;">This message's visibility toggles by class with a checkbox above.</div>
<div id="checkboxToggle1" class="alert bg-info hide" aria-hidden="true">This message's visibility toggles by id with a checkbox above.</div>
<div class="checkboxToggle2 alert bg-warning hide" aria-hidden="true">This message's visibility toggles by class with a checkbox above.</div>
<div class="checkboxToggle2 alert bg-success hide" aria-hidden="true">This message's visibility toggles by class with a checkbox above.</div>
<br/>
<h5>Sample Methods</h5>
@@ -138,40 +142,54 @@
<h2>Combobox</h2>
<h5>Has selected item</h5>
<div style="max-width: 300px;">
<div id="MyComboboxWithSelected" class="input-group input-append dropdown combobox">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li data-value="1"><a href="#">One</a></li>
<li data-value="2"><a href="#">Two</a></li>
<li data-value="3" data-selected="true"><a href="#">Three</a></li>
<li data-value="4" ><a href="#">Four</a></li>
<li data-value="Item Five"><a href="#">Item Five</a></li>
<li data-value="6" data-foo="bar" data-fizz="buzz"><a href="#">Six</a></li>
</ul>
</div>
</div>
</div>
<div id="MyComboboxContainer">
<h5>No selected item</h5>
<div style="max-width: 300px;">
<div id="MyCombobox" class="input-group input-append dropdown combobox">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li data-value="1"><a href="#">One</a></li>
<li data-value="2"><a href="#">Two</a></li>
<li data-value="3"><a href="#">Three</a></li>
<li data-value="4" ><a href="#">Four</a></li>
<li data-value="Item Five"><a href="#">Item Five</a></li>
<li data-value="6" data-foo="bar" data-fizz="buzz"><a href="#">Six</a></li>
</ul>
<div class="form-group">
<label class="control-label" for="MyComboBoxWithSelectedInput">Has selected item</label>
<div id="MyComboboxWithSelected" class="input-group input-append dropdown combobox">
<input id="MyComboBoxWithSelectedInput" type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li data-value="1"><a href="#">One</a></li>
<li data-value="2"><a href="#">Two</a></li>
<li data-value="3" data-selected="true"><a href="#">Three</a></li>
<li data-value="4" ><a href="#">Four</a></li>
<li data-value="Item Five"><a href="#">Item Five</a></li>
<li data-value="6" data-foo="bar" data-fizz="buzz"><a href="#">Six</a></li>
</ul>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label" for="MyComboBoxInput">No selected item</label>
<div id="MyCombobox" class="input-group input-append dropdown combobox">
<input id="MyComboBoxInput" type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li data-value="1"><a href="#">One</a></li>
<li data-value="2"><a href="#">Two</a></li>
<li data-value="3"><a href="#">Three</a></li>
<li data-value="4" ><a href="#">Four</a></li>
<li data-value="Item Five"><a href="#">Item Five</a></li>
<li data-value="6" data-foo="bar" data-fizz="buzz"><a href="#">Six</a></li>
</ul>
</div>
</div>
</div>
</div>
<br/>
@@ -195,21 +213,31 @@
<div class="clearfix">
<h2>Datepicker</h2>
<div class="row">
<div class="col-lg-4">
<div class="datepicker input-group dropdown" id="datepicker1">
<input type="text" class="form-control" data-toggle="dropdown" />
<!-- this must go aver the input. if button is present, it must go in between or the input group will not look right -->
<div class="dropdown-menu dropdown-menu-right"></div>
<span class="input-group-btn" data-toggle="dropdown">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-calendar"></span>
</button>
</span>
<div id="MyDatepickerContainer">
<div class="form-group">
<label class="control-label" for="MyDatepickerInput">Choose a date</label>
<div class="row">
<div class="col-lg-4">
<div class="datepicker input-group dropdown" id="datepicker1">
<input id="MyDatepickerInput" type="text" class="form-control" data-toggle="dropdown" />
<!-- this must go aver the input. if button is present, it must go in between or the input group will not look right -->
<div class="dropdown-menu dropdown-menu-right"></div>
<span class="input-group-btn" data-toggle="dropdown">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-calendar"></span>
<span class="sr-only">Toggle Calendar</span>
</button>
</span>
</div>
</div>
</div>
</div>
</div>
<br/>
<h5>Sample Methods</h5>
<div class="btn-group">
@@ -336,7 +364,7 @@
<div class="placard">
<div class="placard-popup"></div>
<input class="form-control placard-field" readonly="readonly" type="text"/>
<input class="form-control placard-field" readonly="readonly" type="text" placeholder="[Placeholder]"/>
</div>
<br/>
@@ -344,7 +372,7 @@
<div class="placard" data-ellipsis="true">
<div class="placard-popup"></div>
<div class="placard-header"><h5>Header</h5></div>
<input class="form-control placard-field" readonly="readonly" type="text"/>
<input class="form-control placard-field" readonly="readonly" type="text" placeholder="[Placeholder]"/>
<div class="placard-footer">
<button class="btn btn-primary btn-xs placard-accept" type="button">Save</button>
<a class="placard-cancel" href="#">Cancel</a>
@@ -356,7 +384,7 @@
<div class="placard" data-ellipsis="true">
<div class="placard-popup"></div>
<div class="placard-header"><h5>Header</h5></div>
<textarea class="form-control placard-field glass"></textarea>
<textarea class="form-control placard-field glass" placeholder="[Placeholder]"></textarea>
<div class="placard-footer">
<button class="btn btn-primary btn-xs placard-accept" type="button">Save</button>
<a class="placard-cancel" href="#">Cancel</a>
@@ -369,35 +397,35 @@
<h2>Radio</h2>
<div>
<div id="MyRadioContainer">
<div class="radio">
<label class="radio-custom" id="lbl1">
<input id="radio1" checked="checked" data-toggle="#radioToggle1" name="radio1a" type="radio">
<span class="radio-label">Custom appearance radio selected on page load <i>with linked element visibility toggle by id</i></span>
</label>
</div>
<div class="radio">
<label id="lbl1" class="radio-custom">
<input id="radio1" class="sr-only" checked="checked" data-toggle="#radioToggle1" name="radio1a" type="radio">
<span class="radio-label">Custom appearance radio selected on page load <i>with linked element visibility toggle by id</i></span>
</label>
</div>
<div class="radio">
<label class="radio-custom" id="lbl2">
<input id="radio2" data-toggle=".radioToggle2" name="radio1a" type="radio">
<span class="radio-label">Custom appearance radio not selected on page load <i>with linked element visibility toggle by class</i></span>
</label>
</div>
<div class="radio">
<label id="lbl2" class="radio-custom">
<input id="radio2" class="sr-only" data-toggle=".radioToggle2" name="radio1a" type="radio">
<span class="radio-label">Custom appearance radio not selected on page load <i>with linked element visibility toggle by class</i></span>
</label>
</div>
<div class="radio">
<label class="radio-custom" id="lbl3">
<input id="radio3" checked="checked" disabled="disabled" name="radio1b" type="radio">
<span class="radio-label">Disabled custom appearance radio selected on page load</span>
</label>
</div>
<div class="radio">
<label id="lbl3" class="radio-custom">
<input id="radio3" class="sr-only" checked="checked" disabled="disabled" name="radio1b" type="radio">
<span class="radio-label">Disabled custom appearance radio selected on page load</span>
</label>
</div>
<div class="radio">
<label class="radio-custom" id="lbl4">
<input id="radio4" disabled="disabled" name="radio1b" type="radio">
<span class="radio-label">Disabled custom appearance radio not selected on page load</span>
</label>
</div>
<div class="radio">
<label id="lbl4" class="radio-custom">
<input id="radio4" class="sr-only" disabled="disabled" name="radio1b" type="radio">
<span class="radio-label">Disabled custom appearance radio not selected on page load</span>
</label>
</div>
</div>
@@ -428,9 +456,9 @@
<br/>
<h5>Sample element visibility toggle bound to radios</h5>
<div id="radioToggle1" class="alert bg-info" style="display: none;">This message's visibility toggles by id with a radio above.</div>
<div class="radioToggle2 alert bg-warning" style="display: none;">This message's visibility toggles by class with a radio above.</div>
<div class="radioToggle2 alert bg-success" style="display: none;">This message's visibility toggles by class with a radio above.</div>
<div id="radioToggle1" class="alert bg-info hide">This message's visibility toggles by id with a radio above.</div>
<div class="radioToggle2 alert bg-warning hide">This message's visibility toggles by class with a radio above.</div>
<div class="radioToggle2 alert bg-success hide">This message's visibility toggles by class with a radio above.</div>
<br/>
<h5>Sample Methods</h5>
@@ -448,125 +476,140 @@
<h2>Repeater</h2>
<div class="repeater" data-staticheight="500px" id="MyRepeater">
<div class="repeater-header">
<div class="repeater-header-left">
<span class="repeater-title">Awesome Repeater</span>
<div class="repeater-search">
<div class="search input-group">
<input type="search" class="form-control" placeholder="Search"/>
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
<span class="sr-only">Search</span>
</button>
</span>
<div id="MyRepeaterContainer">
<div class="repeater" data-staticheight="500px" id="MyRepeater">
<div class="repeater-header">
<div class="repeater-header-left">
<span class="repeater-title">Awesome Repeater</span>
<div class="repeater-search">
<div class="search input-group">
<input type="search" class="form-control" placeholder="Search"/>
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
<span class="sr-only">Search</span>
</button>
</span>
</div>
</div>
</div>
</div>
<div class="repeater-header-right">
<div class="btn-group selectlist repeater-filters" data-resize="auto">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="selected-label">&nbsp;</span>
<span class="caret"></span>
<span class="sr-only">Toggle Filters</span>
</button>
<ul class="dropdown-menu" role="menu">
<li data-value="all" data-selected="true"><a href="#">All</a></li>
<li data-value="some"><a href="#">Some</a></li>
<li data-value="others"><a href="#">Others</a></li>
</ul>
<input class="hidden hidden-field" name="filterSelection" readonly="readonly" aria-hidden="true" type="text"/>
</div>
<div class="btn-group repeater-views" data-toggle="buttons">
<label class="btn btn-default active">
<input name="repeaterViews" type="radio" value="list"><span class="glyphicon glyphicon-list"></span>
</label>
<label class="btn btn-default">
<input name="repeaterViews" type="radio" value="thumbnail"><span class="glyphicon glyphicon-th"></span>
</label>
</div>
</div>
</div>
<div class="repeater-viewport">
<div class="repeater-canvas"></div>
<div class="loader repeater-loader"></div>
</div>
<div class="repeater-footer">
<div class="repeater-footer-left">
<div class="repeater-itemization">
<span><span class="repeater-start"></span> - <span class="repeater-end"></span> of <span class="repeater-count"></span> items</span>
<div class="btn-group selectlist" data-resize="auto">
<div class="repeater-header-right">
<div class="btn-group selectlist repeater-filters" data-resize="auto">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="selected-label">&nbsp;</span>
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
<span class="sr-only">Toggle Filters</span>
</button>
<ul class="dropdown-menu" role="menu">
<li data-value="5"><a href="#">5</a></li>
<li data-value="10" data-selected="true"><a href="#">10</a></li>
<li data-value="20"><a href="#">20</a></li>
<li data-value="50" data-foo="bar" data-fizz="buzz"><a href="#">50</a></li>
<li data-value="100"><a href="#">100</a></li>
<li data-value="all" data-selected="true"><a href="#">All</a></li>
<li data-value="some"><a href="#">Some</a></li>
<li data-value="others"><a href="#">Others</a></li>
</ul>
<input class="hidden hidden-field" name="itemsPerPage" readonly="readonly" aria-hidden="true" type="text"/>
<input class="hidden hidden-field" name="filterSelection" readonly="readonly" aria-hidden="true" type="text"/>
</div>
<div class="btn-group repeater-views" data-toggle="buttons">
<label class="btn btn-default active">
<input name="repeaterViews" type="radio" value="list"><span class="glyphicon glyphicon-list"></span>
</label>
<label class="btn btn-default">
<input name="repeaterViews" type="radio" value="thumbnail"><span class="glyphicon glyphicon-th"></span>
</label>
</div>
<span>Per Page</span>
</div>
</div>
<div class="repeater-footer-right">
<div class="repeater-pagination">
<button type="button" class="btn btn-default btn-sm repeater-prev"><span class="glyphicon glyphicon-chevron-left"></span></button>
<span>Page</span>
<div class="repeater-primaryPaging active">
<div class="input-group input-append dropdown combobox">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu pull-right"></ul>
<div class="repeater-viewport">
<div class="repeater-canvas"></div>
<div class="loader repeater-loader"></div>
</div>
<div class="repeater-footer">
<div class="repeater-footer-left">
<div class="repeater-itemization">
<span><span class="repeater-start"></span> - <span class="repeater-end"></span> of <span class="repeater-count"></span> items</span>
<div class="btn-group selectlist" data-resize="auto">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="selected-label">&nbsp;</span>
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li data-value="5"><a href="#">5</a></li>
<li data-value="10" data-selected="true"><a href="#">10</a></li>
<li data-value="20"><a href="#">20</a></li>
<li data-value="50" data-foo="bar" data-fizz="buzz"><a href="#">50</a></li>
<li data-value="100"><a href="#">100</a></li>
</ul>
<input class="hidden hidden-field" name="itemsPerPage" readonly="readonly" aria-hidden="true" type="text"/>
</div>
<span>Per Page</span>
</div>
</div>
<div class="repeater-footer-right">
<div class="repeater-pagination">
<button type="button" class="btn btn-default btn-sm repeater-prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous Page</span>
</button>
<label id="MyPageLabel" class="page-label">Page</label>
<div class="repeater-primaryPaging active">
<div class="input-group input-append dropdown combobox">
<input type="text" class="form-control" aria-labelledby="MyPageLabel">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-right"></ul>
</div>
</div>
</div>
<input type="text" class="form-control repeater-secondaryPaging" aria-labelledby="MyPageLabel">
<span>of <span class="repeater-pages"></span></span>
<button type="button" class="btn btn-default btn-sm repeater-next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next Page</span>
</button>
</div>
<input type="text" class="form-control repeater-secondaryPaging">
<span>of <span class="repeater-pages"></span></span>
<button type="button" class="btn btn-default btn-sm repeater-next"><span class="glyphicon glyphicon-chevron-right"></span></button>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix">
<h2>Scheduler</h2>
<h2>Scheduler</h2>
<div><!-- <div class="bs-example fu-example-scheduler"> -->
<div id="MyScheduler" class="form-horizontal container-fluid scheduler" role="form">
<div class="form-group start-datetime">
<label class="col-sm-2 control-label scheduler-label">Start Date</label>
<label class="col-sm-2 control-label scheduler-label" for="MyStartDate">Start Date</label>
<div class="row col-sm-10">
<div class="col-sm-8 form-group">
<div class="input-group datepicker start-date">
<input type="text" class="form-control" />
<input id="MyStartDate" type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-calendar"><span class="sr-only">View Calendar</span></span>
</button>
<div class="dropdown-menu pull-right" role="menu"></div>
<div class="dropdown-menu dropdown-menu-right" role="menu"></div>
</div>
</div>
</div>
<div class="col-sm-4 form-group">
<label class="sr-only" for="MyStartTime">Start Time</label>
<div class="input-group combobox start-time">
<input type="text" class="form-control" />
<input id="MyStartTime" type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu pull-right" role="menu">
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a href="#">12:00 AM</a></li>
<li><a href="#">12:30 AM</a></li>
<li><a href="#">1:00 AM</a></li>
@@ -753,11 +796,11 @@
<input type="text" aria-hidden="true" readonly="readonly" name="intervalSelectlist" class="hidden hidden-field">
</div>
<div class="repeat-panel repeat-every-panel repeat-hourly repeat-daily repeat-weekly">
<div class="inline-form-text repeat-every-pretext">every</div>
<div class="repeat-panel repeat-every-panel repeat-hourly repeat-daily repeat-weekly hide" aria-hidden="true">
<label id="MySchedulerEveryLabel" class="inline-form-text repeat-every-pretext">every</label>
<div class="spinbox repeat-every">
<input type="number" class="form-control input-mini spinbox-input">
<input type="number" class="form-control input-mini spinbox-input" aria-labelledby="MySchedulerEveryLabel">
<div class="spinbox-buttons btn-group btn-group-vertical">
<button type="button" class="btn btn-default spinbox-up btn-xs">
@@ -769,11 +812,11 @@
</div>
</div>
<div class="inline-form-text repeat-every-text">day(s)</div>
<div class="inline-form-text repeat-every-text"></div>
</div>
</div>
<div class="form-group repeat-panel repeat-weekly repeat-days-of-the-week">
<div class="form-group repeat-panel repeat-weekly repeat-days-of-the-week hide" aria-hidden="true">
<fieldset class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="checkbox" data-value="SU">Sun
@@ -800,7 +843,7 @@
</div>
<div class="repeat-panel repeat-monthly">
<div class="repeat-panel repeat-monthly hide" aria-hidden="true">
<div class="form-group repeat-monthly-date">
<div class="radio pull-left">
<label class="radio-custom">
@@ -897,7 +940,8 @@
</div>
</div>
<div class="repeat-panel repeat-yearly">
<div class="repeat-panel repeat-yearly hide" aria-hidden="true">
<div class="form-group repeat-yearly-date">
<div class="radio pull-left">
@@ -1041,7 +1085,7 @@
</div>
</div>
<div class="form-group repeat-end">
<div class="form-group repeat-end hide" aria-hidden="true">
<label class="col-sm-2 control-label scheduler-label">End</label>
<div class="col-sm-10 row">
<div class="col-sm-3 form-group">
@@ -1060,10 +1104,10 @@
</div>
</div>
<div class="col-sm-6 form-group end-option-panel end-after-panel pull-left">
<div class="col-sm-6 form-group end-option-panel end-after-panel pull-left hide" aria-hidden="true">
<div class="spinbox end-after">
<span class="sr-only">End After</span>
<input type="number" class="form-control input-mini spinbox-input">
<label id="MyEndAfter" class="sr-only">End After</label>
<input type="number" class="form-control input-mini spinbox-input" aria-labelledby="MyEndAfter">
<div class="spinbox-buttons btn-group btn-group-vertical">
<button type="button" class="btn btn-default spinbox-up btn-xs">
@@ -1077,14 +1121,15 @@
<div class="inline-form-text end-after-text">occurance(s)</div>
</div>
<div class="col-sm-8 form-group end-option-panel end-on-date-panel pull-left">
<div class="col-sm-8 form-group end-option-panel end-on-date-panel pull-left hide" aria-hidden="true">
<div class="input-group datepicker end-on-date">
<input type="text" class="form-control" />
<label class="sr-only" for="MySchedulerEndDate">Choose a date</label>
<input id="MySchedulerEndDate" type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-calendar"><span class="sr-only">View Calendar</span></span>
</button>
<div class="dropdown-menu pull-right" role="menu"></div>
<div class="dropdown-menu dropdown-menu-right" role="menu"></div>
</div>
</div>
</div>
@@ -1148,10 +1193,13 @@ recurrencePattern: 'FREQ=MONTHLY;INTERVAL=6;BYDAY=WE;BYSETPOS=3;UNTIL=20140919;'
<h2>Spinbox</h2>
<h5>With Default</h5>
<div id="MySpinboxContainer">
<div id="MySpinboxWithDefault" class="spinbox">
<input type="text" value="3" class="form-control input-mini spinbox-input">
<div class="form-group">
<label class="control-label" for="MySpinboxInput">Without Default</label>
<div id="MySpinbox" class="spinbox">
<input id="MySpinboxInput" type="text" class="form-control input-mini spinbox-input">
<div class="spinbox-buttons btn-group btn-group-vertical">
<button type="button" class="btn btn-default spinbox-up btn-xs">
@@ -1160,7 +1208,29 @@ recurrencePattern: 'FREQ=MONTHLY;INTERVAL=6;BYDAY=WE;BYSETPOS=3;UNTIL=20140919;'
<button type="button" class="btn btn-default spinbox-down btn-xs">
<span class="glyphicon glyphicon-chevron-down"></span><span class="sr-only">Decrease</span>
</button>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label" for="MySpinboxWithDefaultInput">With Default</label>
<div id="MySpinboxWithDefault" class="spinbox">
<input id="MySpinboxWithDefaultInput" type="text" value="3" class="form-control input-mini spinbox-input">
<div class="spinbox-buttons btn-group btn-group-vertical">
<button type="button" class="btn btn-default spinbox-up btn-xs">
<span class="glyphicon glyphicon-chevron-up"></span><span class="sr-only">Increase</span>
</button>
<button type="button" class="btn btn-default spinbox-down btn-xs">
<span class="glyphicon glyphicon-chevron-down"></span><span class="sr-only">Decrease</span>
</button>
</div>
</div>
</div>
</div>
<h5>Sample Methods</h5>
@@ -1169,22 +1239,6 @@ recurrencePattern: 'FREQ=MONTHLY;INTERVAL=6;BYDAY=WE;BYSETPOS=3;UNTIL=20140919;'
<input id="disableSpinbox" type="button" class="btn btn-default" value="disable"/>
</div>
<h5>Without Default</h5>
<div id="MySpinbox" class="spinbox">
<input type="text" class="form-control input-mini spinbox-input">
<div class="spinbox-buttons btn-group btn-group-vertical">
<button type="button" class="btn btn-default spinbox-up btn-xs">
<span class="glyphicon glyphicon-chevron-up"></span><span class="sr-only">Increase</span>
</button>
<button type="button" class="btn btn-default spinbox-down btn-xs">
<span class="glyphicon glyphicon-chevron-down"></span><span class="sr-only">Decrease</span>
</button>
</div>
</div>
<hr/>
</div>
<div class="clearfix">

2
index.js
View File

@@ -52,7 +52,7 @@ define(function(require){
// DATEPICKER
$('#datepicker1').datepicker({
restrictDateSelection: false
//restrictDateSelection: false
});
$('#datepicker1').on('changed', function( event, data ) {

6
js/checkbox.js
View File

@@ -110,9 +110,11 @@
toggleContainer: function(){
if(this.$toggleContainer) {
if(this.isChecked()) {
this.$toggleContainer.show();
this.$toggleContainer.removeClass('hide');
this.$toggleContainer.attr('aria-hidden', 'false');
}else {
this.$toggleContainer.hide();
this.$toggleContainer.addClass('hide');
this.$toggleContainer.attr('aria-hidden', 'true');
}
}
},

9
js/radio.js
View File

@@ -135,11 +135,14 @@
group = $('input[name="' + this.groupName + '"]');
group.each(function(){
var selector = $(this).attr('data-toggle');
$(selector).hide();
$(selector).addClass('hide');
$(selector).attr('aria-hidden', 'true');
});
this.$toggleContainer.show();
this.$toggleContainer.removeClass('hide');
this.$toggleContainer.attr('aria-hidden', 'false');
}else {
this.$toggleContainer.hide();
this.$toggleContainer.addClass('hide');
this.$toggleContainer.attr('aria-hidden', 'true');
}
}

31
js/scheduler.js
View File

@@ -116,13 +116,18 @@
}
// hide all panels
this.$endAfter.parent().removeClass('panel-open');
this.$endDate.parent().removeClass('panel-open');
this.$endAfter.parent().addClass('hide');
this.$endAfter.parent().attr('aria-hidden', 'true');
this.$endDate.parent().addClass('hide');
this.$endDate.parent().attr('aria-hidden', 'true');
if(val==='after'){
this.$endAfter.parent().addClass('panel-open');
this.$endAfter.parent().removeClass('hide');
this.$endAfter.parent().attr('aria-hidden', 'false');
}else if(val==='date'){
this.$endDate.parent().addClass('panel-open');
this.$endDate.parent().removeClass('hide');
this.$endDate.parent().attr('aria-hidden', 'false');
}
},
@@ -291,26 +296,32 @@
case 'daily':
case 'weekly':
case 'monthly':
this.$repeatIntervalPanel.removeClass('panel-open');
this.$repeatIntervalPanel.removeClass('hide');
this.$repeatIntervalPanel.attr('aria-hidden', 'false');
break;
default:
this.$repeatIntervalPanel.removeClass('panel-open');
this.$repeatIntervalPanel.addClass('hide');
this.$repeatIntervalPanel.attr('aria-hidden', 'true');
break;
}
// hide all panels
this.$recurrencePanels.removeClass('panel-open');
this.$recurrencePanels.addClass('hide');
this.$recurrencePanels.attr('aria-hidden', 'true');
// show panel for current selection
this.$element.find('.repeat-' + val).addClass('panel-open');
this.$element.find('.repeat-' + val).removeClass('hide');
this.$element.find('.repeat-' + val).attr('aria-hidden', 'false');
// the end selection should only be shown when
// the repeat interval is not "None (run once)"
if(val === 'none') {
this.$end.removeClass('panel-open');
this.$end.addClass('hide');
this.$end.attr('aria-hidden', 'true');
}
else {
this.$end.addClass('panel-open');
this.$end.removeClass('hide');
this.$end.attr('aria-hidden', 'false');
}
},

7
less/checkbox.less
View File

@@ -1,4 +1,5 @@
.checkbox {
&.highlight {
padding: 4px 4px 4px 24px;
@@ -70,12 +71,6 @@
}
}
input[type=checkbox] {
/* IE cannot fire events if display none or visibility hidden */
position: relative;
left: -99999px;
}
/* for keyboard tabbing */
input[type="checkbox"]:focus + .checkbox-label {
color: @grayLight;

6
less/radio.less
View File

@@ -89,12 +89,6 @@
}
}
input[type=radio] {
/* IE cannot fire events if display none or visibility hidden */
position: relative;
left: -99999px;
}
/* for keyboard tabbing */
input[type="radio"]:focus + .radio-label {
color: @grayLight;

5
less/repeater.less
View File

@@ -62,6 +62,11 @@
}
&-pagination {
label {
font-weight: normal;
}
.repeater-primaryPaging {
display: none;
vertical-align: middle;

12
less/scheduler.less
View File

@@ -70,13 +70,12 @@
------------------------------- */
.repeat-panel {
display: none;
margin-left: 0;
&.panel-open {
display: block;
}
label {
font-weight: normal;
}
.radio {
margin-right: 10px;
}
@@ -226,7 +225,6 @@ END
------------------------------- */
.repeat-end {
display: none;
.end-after {
float: left;
@@ -238,7 +236,7 @@ END
}
.end-option-panel {
display: none;
}
}

39
test/checkbox-test.js
View File

@@ -5,6 +5,9 @@
define(function(require){
var $ = require('jquery');
var html = require('text!test/markup/checkbox-markup.html');
/* FOR DEV TESTING - uncomment to test against index.html */
//html = require('text!index.html!strip');
html = $('<div>'+html+'<div>').find('#MyCheckboxContainer');
require('bootstrap');
require('fuelux/checkbox');
@@ -25,28 +28,28 @@ define(function(require){
$list.find('input').checkbox();
// checked/enabled
var lbl1 = $list.find('#lbl1');
equal(lbl1.hasClass('checked'), true, 'lbl1 has checked class');
equal(lbl1.hasClass('disabled'), false, 'lbl1 does not have disabled class');
var wrapper1 = $list.find('#CheckboxWrapper1');
equal(wrapper1.hasClass('checked'), true, 'wrapper1 has checked class');
equal(wrapper1.hasClass('disabled'), false, 'wrapper1 does not have disabled class');
// unchecked/enabled
var lbl3 = $list.find('#lbl3');
equal(lbl3.hasClass('checked'), false, 'lbl3 does not have checked class');
equal(lbl3.hasClass('disabled'), false, 'lbl3 does not have disabled class');
var wrapper3 = $list.find('#CheckboxWrapper3');
equal(wrapper3.hasClass('checked'), false, 'wrapper3 does not have checked class');
equal(wrapper3.hasClass('disabled'), false, 'wrapper3 does not have disabled class');
// checked/disabled
var lbl4 = $list.find('#lbl4');
equal(lbl4.hasClass('checked'), true, 'lbl4 has checked class');
equal(lbl4.hasClass('disabled'), true, 'lbl4 has disabled class');
var wrapper4 = $list.find('#CheckboxWrapper4');
equal(wrapper4.hasClass('checked'), true, 'wrapper4 has checked class');
equal(wrapper4.hasClass('disabled'), true, 'wrapper4 has disabled class');
// checked/disabled
var lbl5 = $list.find('#lbl5');
equal(lbl5.hasClass('checked'), false, 'lbl5 does not have checked class');
equal(lbl5.hasClass('disabled'), true, 'lbl5 has disabled class');
var wrapper5 = $list.find('#CheckboxWrapper5');
equal(wrapper5.hasClass('checked'), false, 'wrapper5 does not have checked class');
equal(wrapper5.hasClass('disabled'), true, 'wrapper5 has disabled class');
});
test("should disable/enable checkbox", function () {
var $chk1 = $(html).find('#chk1');
var $chk1 = $(html).find('#Checkbox1');
equal($chk1.is(':disabled'), false, 'enabled - default state');
$chk1.checkbox('disable');
@@ -57,7 +60,7 @@ define(function(require){
test("should check/uncheck checkbox", function () {
var $fixture = $(html).appendTo('#qunit-fixture');
var $chk1 = $fixture.find('#chk1');
var $chk1 = $fixture.find('#Checkbox1');
equal($chk1.is(':checked'), true, 'checked');
$chk1.checkbox('toggle');
@@ -70,8 +73,8 @@ define(function(require){
test("test check/uncheck/isChecked convenience methods", function () {
var $fixture = $(html).appendTo('#qunit-fixture');
var $chk5 = $fixture.find('#chk5');
var $l5 = $fixture.find('#lbl5');
var $chk5 = $fixture.find('#Checkbox5');
var $wrapper5 = $fixture.find('#CheckboxWrapper5');
$chk5.checkbox();
@@ -79,12 +82,12 @@ define(function(require){
$chk5.checkbox('check');
equal($chk5.is(':checked'), true, 'checked - confirmation by is(:checked)');
equal($l5.hasClass('checked'), true, 'checked - confirmation by css class');
equal($wrapper5.hasClass('checked'), true, 'checked - confirmation by css class');
equal($chk5.checkbox('isChecked'), true, 'checked - confirmation by isChecked method');
$chk5.checkbox('uncheck');
equal($chk5.is(':checked'), false, 'unchecked - confirmation by is(:checked)');
equal($l5.hasClass('checked'), false, 'unchecked - confirmation by css class');
equal($wrapper5.hasClass('checked'), false, 'unchecked - confirmation by css class');
equal($chk5.checkbox('isChecked'), false, 'unchecked - confirmation by isChecked method');
$fixture.remove();

7
test/combobox-test.js
View File

@@ -5,6 +5,9 @@
define(function(require){
var $ = require('jquery');
var html = require('text!test/markup/combobox-markup.html');
/* FOR DEV TESTING - uncomment to test against index.html */
//html = require('text!index.html!strip');
html = $('<div>'+html+'<div>').find('#MyComboboxContainer');
require('bootstrap');
require('fuelux/combobox');
@@ -34,14 +37,14 @@ define(function(require){
test("should set default selection", function () {
// should be "Three" based on the data-selected attribute
var $combobox = $(html).find("#MyCombobox").combobox();
var $combobox = $(html).find("#MyComboboxWithSelected").combobox();
var item = $combobox.combobox('selectedItem');
var expectedItem = { text: 'Three', value: 3 };
deepEqual(item, expectedItem, 'default item selected');
});
test("should not autoselect when no default selection", function () {
var $combobox = $(html).find("#MyComboboxNoDefault").combobox();
var $combobox = $(html).find("#MyCombobox").combobox();
var item = $combobox.combobox('selectedItem');
var expectedItem = { text: '' };
deepEqual(item, expectedItem, 'no item selected');

32
test/datepicker-test.js
View File

@@ -5,6 +5,8 @@
define(function(require){
var $ = require('jquery');
var html = require('text!test/markup/datepicker-markup.html');
/* FOR DEV TESTING - uncomment to test against index.html */
//html = require('text!index.html!strip');
require('bootstrap');
require('fuelux/datepicker');
@@ -57,7 +59,7 @@ define(function(require){
today = todaysMonth + '-' + todaysDate + '-' + today.getFullYear();
// markup already there
var $sample = $( html ).datepicker();
var $sample = $(html).find('#datepicker1').datepicker();
var pickerDate = $sample.datepicker( 'getFormattedDate' );
equal( pickerDate, today, 'w/ markup - initialized with todays date' );
@@ -67,7 +69,7 @@ define(function(require){
});
test( 'should initialize with date other than now', function() {
var $sample = $( html );
var $sample = $(html).find('#datepicker1');
var futureDate = new Date(+new Date() + ( 7 * 24 * 60 * 60 * 1000 ) ).getTime(); // 7 days in the future
$sample.datepicker({
@@ -79,7 +81,7 @@ define(function(require){
});
test( 'should initialize with null date', function() {
var $sample = $( html ).datepicker({ date: null });
var $sample = $(html).find('#datepicker1').datepicker({ date: null });
var initializedDate = $sample.datepicker( 'getDate' );
var inputValue = $sample.find( 'input[type="text"]' ).val();
@@ -88,7 +90,7 @@ define(function(require){
});
test( 'should return date using getDate method', function() {
var $sample = $( html ).datepicker();
var $sample = $(html).find('#datepicker1').datepicker();
var dateFormatted = new Date( $sample.datepicker( 'getFormattedDate' ) );
var dateObject = new Date( $sample.datepicker( 'getDate' ) );
var dateUnix = $sample.datepicker( 'getDate', { unix: true } );
@@ -108,7 +110,7 @@ define(function(require){
});
test( 'should set new date using setDate method', function() {
var $sample = $( html ).datepicker();
var $sample = $(html).find('#datepicker1').datepicker();
var newDate = new Date().getTime();
$sample.datepicker( 'setDate', newDate );
@@ -119,7 +121,7 @@ define(function(require){
});
test( 'should enable/disable datepicker', function() {
var $sample = $( html ).datepicker();
var $sample = $(html).find('#datepicker1').datepicker();
var $sampleInput = $sample.find( 'input' );
// enabled
@@ -138,7 +140,7 @@ define(function(require){
});
test( 'should restrict dates when using custom blackoutDates() default', function() {
var $sample = $( html );
var $sample = $(html).find('#datepicker1');
var blackoutDate = new Date(+new Date() + ( 1 * 24 * 60 * 60 * 1000 ) ).getTime(); // 1 day in the future;
$sample.datepicker({
@@ -163,7 +165,7 @@ define(function(require){
});
test( "should not restrict past dates when overriding restrictDateSelection to false", function() {
var $sample = $( html );
var $sample = $(html).find('#datepicker1');
$sample.datepicker({
restrictDateSelection: false
});
@@ -177,7 +179,7 @@ define(function(require){
var eventsLogged = 0;
var validDateOnEventTrigger = false;
var $sample = $( html ).datepicker().on( 'changed', function( event, date ) {
var $sample = $(html).find('#datepicker1').datepicker().on( 'changed', function( event, date ) {
eventsLogged++;
if( new Date( date ) !== 'Invalid Date' ) {
validDateOnEventTrigger = true;
@@ -191,7 +193,7 @@ define(function(require){
});
test( 'should create dropdown with custom dropdown', function() {
var $markup = $( html );
var $markup = $(html).find('#datepicker1');
var customWidth2 = 240;
$markup.datepicker({
@@ -217,14 +219,14 @@ define(function(require){
});
test( 'should not use momentjs if not available', function() {
var $sample = $( html ).datepicker();
var $sample = $(html).find('#datepicker1').datepicker();
var momentBoolean = $sample.datepicker( '_checkForMomentJS' );
equal( momentBoolean, false, "not using moment if it's not there" );
});
test( 'should not be able to use any extra features if momentjs is not loaded', function() {
var $sample = $( html ).datepicker();
var $sample = $(html).find('#datepicker1').datepicker();
var momentBoolean = $sample.datepicker( '_checkForMomentJS' );
var defaultErrorReturned = "moment.js is not available so you cannot use this function";
var getCultureError, setCultureError, getFormatCodeError, setFormatCodeError;
@@ -270,7 +272,7 @@ define(function(require){
date: new Date( currentYear, 0, 10 ), // January 10th
restrictToYear: currentYear
};
var $sample = $( html ).datepicker( options );
var $sample = $(html).find('#datepicker1').datepicker( options );
var disabledLeftArrow = $sample.find('.left.disabled').length;
var previousMonthDaysVisible = $sample.find('.lastmonth div').length;
var disabledDaysVisible = $sample.find('.lastmonth .restrict').length;
@@ -284,7 +286,7 @@ define(function(require){
date: new Date( currentYear, 11, 10 ), // December 10th
restrictToYear: currentYear
};
var $sample = $( html ).datepicker( options );
var $sample = $(html).find('#datepicker1').datepicker( options );
var disabledLeftArrow = $sample.find('.right.disabled').length;
var nextMonthDaysVisible = $sample.find('.nextmonth div').length;
var disabledDaysVisible = $sample.find('.nextmonth .restrict').length;
@@ -297,7 +299,7 @@ define(function(require){
date: new Date( 2010, 11, 10 ),
restrictToYear: 2014
};
var $sample = $( html ).datepicker( options );
var $sample = $(html).find('#datepicker1').datepicker( options );
var daysDisplayed = $sample.find( '.thismonth .weekday' ).length;
var daysDisplayedDisabled = $sample.find( '.thismonth .weekday.restrict' ).length;
ok( daysDisplayedDisabled > 0, 'some days are disabled' );

66
test/markup/checkbox-markup.html
View File

@@ -1,32 +1,34 @@
<div>
<div class="checkbox">
<label id="lbl1" class="checkbox-custom">
<input id="chk1" checked="checked" class="checked" type="checkbox" value="">
<span class="checkbox-label">Custom appearance checkbox checked at page load (#chk1)</span>
</label>
</div>
<div class="checkbox">
<label id="lbl2" class="checkbox-custom">
<input id="chk2" checked="checked" data-toggle="#checkboxToggle1" class="checked" type="checkbox" value="">
<span class="checkbox-label">Custom appearance checkbox checked at page load with linked element visibility toggle by id </span>
</label>
</div>
<div id="lbl3" class="checkbox">
<label id="chk3" class="checkbox-custom">
<input class="checkbox" data-toggle=".checkboxToggle2" type="checkbox" value="">
<span class="checkbox-label">Custom appearance checkbox unchecked on page load <i>with linked element visibility toggle by class</i></span>
</label>
</div>
<div id="lbl4" class="checkbox">
<label class="checkbox-custom">
<input id="chk4" checked="checked" disabled="disabled" class="checkbox" type="checkbox" value="">
<span class="checkbox-label">Disabled custom appearance checkbox <i>checked on page load</i></span>
</label>
</div>
<div id="lbl5" class="checkbox">
<label class="checkbox-custom">
<input id="chk5" class="checkbox" disabled="disabled" type="checkbox" value="">
<span class="checkbox-label">Disabled custom appearance checkbox <i>unchecked on page load</i></span>
</label>
</div>
</div>
<div id="MyCheckboxContainer">
<div id="CheckboxWrapper1" class="checkbox">
<label class="checkbox-custom">
<input id="Checkbox1" class="sr-only checked" type="checkbox" value="" checked="checked">
<span class="checkbox-label">Custom appearance checkbox checked at page load (#chk1)</span>
</label>
</div>
<div id="CheckboxWrapper2" class="checkbox">
<label class="checkbox-custom">
<input id="Checkbox2" class="sr-only checked" type="checkbox" value="" checked="checked" data-toggle="#checkboxToggle1">
<span class="checkbox-label">Custom appearance checkbox checked at page load with linked element visibility toggle by id </span>
</label>
</div>
<div id="CheckboxWrapper3" class="checkbox">
<label class="checkbox-custom">
<input id="Checkbox3" class="sr-only checkbox" type="checkbox" value="" data-toggle=".checkboxToggle2">
<span class="checkbox-label">Custom appearance checkbox unchecked on page load <i>with linked element visibility toggle by class</i></span>
</label>
</div>
<div id="CheckboxWrapper4" class="checkbox">
<label class="checkbox-custom">
<input id="Checkbox4" class="sr-only checkbox" type="checkbox" value="" checked="checked" disabled="disabled">
<span class="checkbox-label">Disabled custom appearance checkbox <i>checked on page load</i></span>
</label>
</div>
<div id="CheckboxWrapper5" class="checkbox">
<label class="checkbox-custom">
<input id="Checkbox5" class="sr-only checkbox" type="checkbox" value="" disabled="disabled">
<span class="checkbox-label">Disabled custom appearance checkbox <i>unchecked on page load</i></span>
</label>
</div>
</div>

73
test/markup/combobox-markup.html
View File

@@ -1,30 +1,53 @@
<div>
<div id="MyCombobox" class="input-group input-append dropdown combobox">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<li data-value="1"><a href="#">One</a></li>
<li data-value="2"><a href="#">Two</a></li>
<li data-value="3" data-selected="true"><a href="#">Three</a></li>
<li data-value="4" ><a href="#">Four</a></li>
<li data-value="Item Five"><a href="#">Item Five</a></li>
<li data-value="6" data-foo="bar" data-fizz="buzz"><a href="#">Six</a></li>
</ul>
<div id="MyComboboxContainer">
<div class="form-group">
<label class="col-sm-2 control-label" for="MyComboBoxWithSelectedInput">Has selected item</label>
<div class="col-sm-10">
<div id="MyComboboxWithSelected" class="input-group input-append dropdown combobox">
<input id="MyComboBoxWithSelectedInput" type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-hidden="true" role="menu">
<li data-value="1"><a href="#">One</a></li>
<li data-value="2"><a href="#">Two</a></li>
<li data-value="3" data-selected="true"><a href="#">Three</a></li>
<li data-value="4" ><a href="#">Four</a></li>
<li data-value="Item Five"><a href="#">Item Five</a></li>
<li data-value="6" data-foo="bar" data-fizz="buzz"><a href="#">Six</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="MyComboboxNoDefault" class="input-group input-append dropdown combobox">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<li data-value="1"><a href="#">One</a></li>
<li data-value="2"><a href="#">Two</a></li>
<li data-value="3"><a href="#">Three</a></li>
<li data-value="4" ><a href="#">Four</a></li>
<li data-value="Item Five"><a href="#">Item Five</a></li>
<li data-value="6" data-foo="bar" data-fizz="buzz"><a href="#">Six</a></li>
</ul>
<div class="form-group">
<label class="col-sm-2 control-label" for="MyComboBoxInput">No selected item</label>
<div class="col-sm-10">
<div id="MyCombobox" class="input-group input-append dropdown combobox">
<input id="MyComboBoxInput" type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-hidden="true" role="menu">
<li data-value="1"><a href="#">One</a></li>
<li data-value="2"><a href="#">Two</a></li>
<li data-value="3"><a href="#">Three</a></li>
<li data-value="4" ><a href="#">Four</a></li>
<li data-value="Item Five"><a href="#">Item Five</a></li>
<li data-value="6" data-foo="bar" data-fizz="buzz"><a href="#">Six</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>

32
test/markup/datepicker-markup.html
View File

@@ -1,14 +1,24 @@
<div class="row">
<div class="col-lg-4">
<div class="datepicker input-group dropdown" id="datepicker1">
<input type="text" class="form-control" data-toggle="dropdown" />
<!-- this must go aver the input. if button is present, it must go in between or the input group will not look right -->
<div class="dropdown-menu dropdown-menu-right"></div>
<span class="input-group-btn" data-toggle="dropdown">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-calendar"></span>
</button>
</span>
<div id="MyDatepickerContainer">
<div class="form-group">
<label class="col-sm-2 control-label" for="MyDatepickerInput">Choose a date</label>
<div class="row col-sm-10">
<div class="col-lg-4">
<div class="datepicker input-group dropdown" id="datepicker1">
<input id="MyDatepickerInput" type="text" class="form-control" data-toggle="dropdown" />
<!-- this must go aver the input. if button is present, it must go in between or the input group will not look right -->
<div class="dropdown-menu dropdown-menu-right"></div>
<span class="input-group-btn" data-toggle="dropdown">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-calendar"></span>
</button>
</span>
</div>
</div>
</div>
</div>
</div>

52
test/markup/radio-markup.html
View File

@@ -1,31 +1,31 @@
<div>
<div id="MyRadioContainer">
<div class="radio">
<label class="radio-custom" id="lbl1">
<input id="radio1" checked="checked" data-toggle="#radioToggle1" name="radio1a" type="radio">
<span class="radio-label">Custom appearance radio selected on page load <i>with linked element visibility toggle by id</i></span>
</label>
</div>
<div id="RadioWrapper1" class="radio">
<label class="radio-custom" id="lbl1">
<input id="radio1" checked="checked" data-toggle="#radioToggle1" name="radio1a" type="radio">
<span class="radio-label">Custom appearance radio selected on page load <i>with linked element visibility toggle by id</i></span>
</label>
</div>
<div class="radio">
<label class="radio-custom" id="lbl2">
<input id="radio2" data-toggle=".radioToggle2" name="radio1a" type="radio">
<span class="radio-label">Custom appearance radio not selected on page load <i>with linked element visibility toggle by class</i></span>
</label>
</div>
<div id="RadioWrapper2" class="radio">
<label class="radio-custom" id="lbl2">
<input id="radio2" data-toggle=".radioToggle2" name="radio1a" type="radio">
<span class="radio-label">Custom appearance radio not selected on page load <i>with linked element visibility toggle by class</i></span>
</label>
</div>
<div class="radio">
<label class="radio-custom" id="lbl3">
<input id="radio3" checked="checked" disabled="disabled" name="radio1b" type="radio">
<span class="radio-label">Disabled custom appearance radio selected on page load</span>
</label>
</div>
<div id="RadioWrapper3" class="radio">
<label class="radio-custom" id="lbl3">
<input id="radio3" checked="checked" disabled="disabled" name="radio1b" type="radio">
<span class="radio-label">Disabled custom appearance radio selected on page load</span>
</label>
</div>
<div class="radio">
<label class="radio-custom" id="lbl4">
<input id="radio4" disabled="disabled" name="radio1b" type="radio">
<span class="radio-label">Disabled custom appearance radio not selected on page load</span>
</label>
</div>
<div id="RadioWrapper4" class="radio">
<label class="radio-custom" id="lbl4">
<input id="radio4" disabled="disabled" name="radio1b" type="radio">
<span class="radio-label">Disabled custom appearance radio not selected on page load</span>
</label>
</div>
</div>
</div>

38
test/markup/scheduler-markup.html
View File

@@ -1,10 +1,10 @@
<div id="MyScheduler" class="form-horizontal container-fluid scheduler" role="form">
<div class="form-group start-datetime">
<label class="col-sm-2 control-label scheduler-label">Start Date</label>
<label class="col-sm-2 control-label scheduler-label" for="MyStartDate">Start Date</label>
<div class="row col-sm-10">
<div class="col-sm-8 form-group">
<div class="input-group datepicker start-date">
<input type="text" class="form-control" />
<input id="MyStartDate" type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-calendar"><span class="sr-only">View Calendar</span></span>
@@ -15,11 +15,13 @@
</div>
<div class="col-sm-4 form-group">
<label class="sr-only" for="MyStartTime">Start Time</label>
<div class="input-group combobox start-time">
<input type="text" class="form-control" />
<input id="MyStartTime" type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu pull-right" role="menu">
<li><a href="#">12:00 AM</a></li>
@@ -208,11 +210,11 @@
<input type="text" aria-hidden="true" readonly="readonly" name="intervalSelectlist" class="hidden hidden-field">
</div>
<div class="repeat-panel repeat-every-panel repeat-hourly repeat-daily repeat-weekly">
<div class="inline-form-text repeat-every-pretext">every</div>
<div class="repeat-panel repeat-every-panel repeat-hourly repeat-daily repeat-weekly hide">
<label id="MySchedulerEveryLabel" class="inline-form-text repeat-every-pretext">every</label>
<div class="spinbox repeat-every">
<input type="number" class="form-control input-mini spinbox-input">
<input type="number" class="form-control input-mini spinbox-input" aria-labelledby="MySchedulerEveryLabel">
<div class="spinbox-buttons btn-group btn-group-vertical">
<button class="btn btn-default spinbox-up btn-xs">
@@ -224,11 +226,11 @@
</div>
</div>
<div class="inline-form-text repeat-every-text">day(s)</div>
<div class="inline-form-text repeat-every-text"></div>
</div>
</div>
<div class="form-group repeat-panel repeat-weekly repeat-days-of-the-week">
<div class="form-group repeat-panel repeat-weekly repeat-days-of-the-week hide">
<fieldset class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="checkbox" data-value="SU">Sun
@@ -255,7 +257,7 @@
</div>
<div class="repeat-panel repeat-monthly">
<div class="repeat-panel repeat-monthly hide">
<div class="form-group repeat-monthly-date">
<div class="radio pull-left">
<label class="radio-custom">
@@ -352,7 +354,8 @@
</div>
</div>
<div class="repeat-panel repeat-yearly">
<div class="repeat-panel repeat-yearly hide">
<div class="form-group repeat-yearly-date">
<div class="radio pull-left">
@@ -496,7 +499,7 @@
</div>
</div>
<div class="form-group repeat-end">
<div class="form-group repeat-end hide">
<label class="col-sm-2 control-label scheduler-label">End</label>
<div class="col-sm-10 row">
<div class="col-sm-3 form-group">
@@ -515,10 +518,10 @@
</div>
</div>
<div class="col-sm-6 form-group end-option-panel end-after-panel pull-left">
<div class="col-sm-6 form-group end-option-panel end-after-panel pull-left hide">
<div class="spinbox end-after">
<span class="sr-only">End After</span>
<input type="number" class="form-control input-mini spinbox-input">
<label id="MyEndAfter" class="sr-only">End After</label>
<input type="number" class="form-control input-mini spinbox-input" aria-labelledby="MyEndAfter">
<div class="spinbox-buttons btn-group btn-group-vertical">
<button class="btn btn-default spinbox-up btn-xs">
@@ -532,9 +535,10 @@
<div class="inline-form-text end-after-text">occurance(s)</div>
</div>
<div class="col-sm-8 form-group end-option-panel end-on-date-panel pull-left">
<div class="col-sm-8 form-group end-option-panel end-on-date-panel pull-left hide">
<div class="input-group datepicker end-on-date">
<input type="text" class="form-control" />
<label class="sr-only" for="MySchedulerEndDate">Choose a date</label>
<input id="MySchedulerEndDate" type="text" class="form-control" />
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-calendar"><span class="sr-only">View Calendar</span></span>
@@ -545,4 +549,4 @@
</div>
</div>
</div>
</div>
</div>

48
test/markup/spinbox-markup.html
View File

@@ -1,29 +1,39 @@
<div>
<div id="MySpinboxContainer">
<div id="MySpinbox" class="spinbox">
<input type="text" class="form-control input-mini spinbox-input">
<div class="form-group">
<label class="control-label" for="MySpinbox">Without Default</label>
<div id="MySpinbox" class="spinbox">
<input id="MySpinboxWithDefaultInput" type="text" class="form-control input-mini spinbox-input">
<div class="spinbox-buttons btn-group btn-group-vertical">
<button class="btn btn-default spinbox-up btn-xs">
<span class="glyphicon glyphicon-chevron-up"></span><span class="sr-only">Increase</span>
</button>
<button class="btn btn-default spinbox-down btn-xs">
<span class="glyphicon glyphicon-chevron-down"></span><span class="sr-only">Decrease</span>
</button>
<div class="spinbox-buttons btn-group btn-group-vertical">
<button class="btn btn-default spinbox-up btn-xs">
<span class="glyphicon glyphicon-chevron-up"></span><span class="sr-only">Increase</span>
</button>
<button class="btn btn-default spinbox-down btn-xs">
<span class="glyphicon glyphicon-chevron-down"></span><span class="sr-only">Decrease</span>
</button>
</div>
</div>
</div>
<div id="MySpinboxWithDefault" class="spinbox">
<input type="text" value="3" class="form-control input-mini spinbox-input">
<div class="form-group">
<label class="control-label" for="MySpinboxWithDefaultInput">With Default</label>
<div id="MySpinboxWithDefault" class="spinbox">
<input id="MySpinboxWithDefaultInput" type="text" value="3" class="form-control input-mini spinbox-input">
<div class="spinbox-buttons btn-group btn-group-vertical">
<button class="btn btn-default spinbox-up btn-xs">
<span class="glyphicon glyphicon-chevron-up"></span><span class="sr-only">Increase</span>
</button>
<button class="btn btn-default spinbox-down btn-xs">
<span class="glyphicon glyphicon-chevron-down"></span><span class="sr-only">Decrease</span>
</button>
<div class="spinbox-buttons btn-group btn-group-vertical">
<button class="btn btn-default spinbox-up btn-xs">
<span class="glyphicon glyphicon-chevron-up"></span><span class="sr-only">Increase</span>
</button>
<button class="btn btn-default spinbox-down btn-xs">
<span class="glyphicon glyphicon-chevron-down"></span><span class="sr-only">Decrease</span>
</button>
</div>
</div>
</div>
</div>

59
test/radio-test.js
View File

@@ -5,6 +5,9 @@
define(function(require){
var $ = require('jquery');
var html = require('text!test/markup/radio-markup.html');
/* FOR DEV TESTING - uncomment to test against index.html */
//html = require('text!index.html!strip');
html = $('<div>'+html+'<div>').find('#MyRadioContainer');
require('bootstrap');
require('fuelux/radio');
@@ -20,27 +23,27 @@ define(function(require){
});
test("should set initial state", function () {
var $list = $(html);
$list.find('input').radio();
// init radios
$(html).find('input').radio();
// checked/enabled
var l1 = $list.find('#lbl1');
var l1 = $(html).find('#lbl1');
equal(l1.hasClass('checked'), true, 'radio1 has checked class');
equal(l1.hasClass('disabled'), false, 'radio1 does not have disabled class');
// unchecked/enabled
var l2 = $list.find('#lbl2');
var l2 = $(html).find('#lbl2');
equal(l2.hasClass('checked'), false, 'radio2 does not have checked class');
equal(l2.hasClass('disabled'), false, 'radio2 does not have disabled class');
// checked/disabled
var l3 = $list.find('#lbl3');
var l3 = $(html).find('#lbl3');
equal(l3.hasClass('checked'), true, 'radio3 has checked class');
equal(l3.hasClass('disabled'), true, 'radio3 has disabled class');
// unchecked/disabled
var l4 = $list.find('#lbl4');
var l4 = $(html).find('#lbl4');
equal(l4.hasClass('checked'), false, 'radio4 does not have checked class');
equal(l4.hasClass('disabled'), true, 'radio4 has disabled class');
});
@@ -55,29 +58,29 @@ define(function(require){
equal($radio1.is(':disabled'), false, 're-enabled');
});
test("should check/uncheck radio group", function () {
var $fixture = $(html).appendTo('#qunit-fixture');
var $radio1 = $fixture.find('#radio1');
var $l1 = $fixture.find('#lbl1');
var $radio2 = $fixture.find('#radio2');
var $l2 = $fixture.find('#lbl2');
$fixture.find('input').radio();
equal($l1.hasClass('checked'), true, 'checked - default state radio 1');
equal($l2.hasClass('checked'), false, 'unchecked - default state radio 2');
test("should check/uncheck radio group", function () {
var $fixture = $(html).appendTo('#qunit-fixture');
var $radio1 = $fixture.find('#radio1');
var $l1 = $fixture.find('#lbl1');
var $radio2 = $fixture.find('#radio2');
var $l2 = $fixture.find('#lbl2');
$fixture.find('input').radio();
equal($l1.hasClass('checked'), true, 'checked - default state radio 1');
equal($l2.hasClass('checked'), false, 'unchecked - default state radio 2');
$radio2.radio('check');
equal($l1.hasClass('checked'), false, 'unchecked - radio 1 confirmation by css class');
equal($radio1.is(':checked'), false, 'unchecked - radio 1 confirmation by is(:checked)');
equal($radio1.radio('isChecked'), false, 'unchecked - radio 1 confirmation by isChecked method');
equal($l2.hasClass('checked'), true, 'checked - radio 2 confirmation by css class');
equal($radio2.is(':checked'), true, 'checked - radio 2 confirmation by is(:checked)');
equal($radio2.radio('isChecked'), true, 'checked - radio 2 confirmation by isChecked method');
$radio2.radio('check');
equal($l1.hasClass('checked'), false, 'unchecked - radio 1 confirmation by css class');
equal($radio1.is(':checked'), false, 'unchecked - radio 1 confirmation by is(:checked)');
equal($radio1.radio('isChecked'), false, 'unchecked - radio 1 confirmation by isChecked method');
equal($l2.hasClass('checked'), true, 'checked - radio 2 confirmation by css class');
equal($radio2.is(':checked'), true, 'checked - radio 2 confirmation by is(:checked)');
equal($radio2.radio('isChecked'), true, 'checked - radio 2 confirmation by isChecked method');
$radio1.radio('check');
$radio1.radio('check');
$fixture.remove();
});
$fixture.remove();
});
});

3
test/repeater-test.js
View File

@@ -5,6 +5,9 @@
define(function(require){
var $ = require('jquery');
var html = require('text!test/markup/repeater-markup.html');
/* FOR DEV TESTING - uncomment to test against index.html */
//html = require('text!index.html!strip');
//html = $('<div>'+html+'<div>').find('#MyRepeaterContainer');
require('bootstrap');
require('fuelux/repeater');

2
test/scheduler-test.js
View File

@@ -6,7 +6,7 @@ define(function(require){
var $ = require('jquery');
var html = require('text!test/markup/scheduler-markup.html');
/* FOR DEV TESTING */
//var html = require('text!dev.html!strip');
// html = require('text!index.html!strip');
html = $('<div>'+html+'<div>').find('#MyScheduler');
require('bootstrap');

3
test/spinbox-test.js
View File

@@ -5,6 +5,9 @@
define(function(require){
var $ = require('jquery');
var html = require('text!test/markup/spinbox-markup.html');
/* FOR DEV TESTING - uncomment to test against index.html */
//html = require('text!index.html!strip');
require('bootstrap');
require('fuelux/spinbox');