Permalink
Browse files

Flipswitch: Implement Classes Option

Fixes gh-7715
Closes gh-8118
  • Loading branch information...
cgack authored and arschmitz committed Apr 17, 2015
1 parent 8e1c765 commit 22c2c2ba611094caa399bf6b34546663d9537bbc
@@ -20,6 +20,9 @@ module.exports = {
"js/widgets/forms/button.backcompat.js",
"js/widgets/forms/checkboxradio.js",
"js/widgets/forms/checkboxradio.backcompat.js",
"js/widgets/forms/flipswitch.js",
"js/widgets/forms/flipswitch.backcompat.js",
"tests/unit/flipswitch/*.js",
"js/widgets/controlgroup.js",
"js/widgets/controlgroup.backcompat.js",
"js/widgets/tabs.ajax.js",
View
@@ -70,6 +70,7 @@
'widgets/forms/checkboxradio.js',
'widgets/forms/checkboxradio.backcompat.js',
'widgets/forms/flipswitch.js',
'widgets/forms/flipswitch.backcompat.js',
'widgets/forms/slider.js',
'widgets/forms/slider.tooltip.js',
'widgets/forms/rangeslider.js',
View
@@ -42,6 +42,7 @@
"./widgets/forms/slider",
"./widgets/forms/slider.tooltip",
"./widgets/forms/flipswitch",
"./widgets/forms/flipswitch.backcompat",
"./widgets/forms/rangeslider",
"./widgets/forms/textinput",
"./widgets/forms/textinput.backcompat",
@@ -0,0 +1,46 @@
/*!
* jQuery Mobile Flipswitch Backcompat @VERSION
* http://jquerymobile.com
*
* Copyright jQuery Foundation and other contributors
* Released under the MIT license.
* http://jquery.org/license
*/
//>>label: Flipswitch
//>>group: Forms
//>>description: Deprecated rangeslider features
( function( factory ) {
if ( typeof define === "function" && define.amd ) {
// AMD. Register as an anonymous module.
define( [
"jquery",
"../widget.backcompat",
"./flipswitch" ], factory );
} else {
// Browser globals
factory( jQuery );
}
} )( function( $ ) {
if ( $.mobileBackcompat !== false ) {
$.widget( "mobile.flipswitch", $.mobile.flipswitch, {
options: {
corners: true,
mini: false,
wrapperClass: null
},
classProp: "ui-flipswitch"
} );
$.widget( "mobile.flipswitch", $.mobile.flipswitch, $.mobile.widget.backcompat );
}
return $.mobile.flipswitch;
} );
@@ -42,9 +42,10 @@ return $.widget( "mobile.flipswitch", $.extend( {
offText: "Off",
theme: null,
enhanced: false,
wrapperClass: null,
corners: true,
mini: false
classes: {
"ui-flipswitch": "ui-shadow-inset ui-corner-all",
"ui-flipswitch-on": "ui-shadow"
}
},
_create: function() {
@@ -129,7 +130,7 @@ return $.widget( "mobile.flipswitch", $.extend( {
},
_right: function() {
this.flipswitch.addClass( "ui-flipswitch-active" );
this._addClass( this.flipswitch, "ui-flipswitch-active" );
if ( this.type === "select" ) {
this.element.get( 0 ).selectedIndex = 1;
} else {
@@ -154,31 +155,23 @@ return $.widget( "mobile.flipswitch", $.extend( {
offText = ( this.type === "input" ) ?
options.offText : element.find( "option" ).eq( 0 ).text();
on
.addClass( "ui-flipswitch-on ui-button ui-shadow ui-button-inherit" )
.text( onText );
off
.addClass( "ui-flipswitch-off" )
.text( offText );
flipswitch
.addClass( "ui-flipswitch ui-shadow-inset " +
"ui-bar-" + theme + " " +
( options.wrapperClass ? options.wrapperClass : "" ) + " " +
this._addClass( on, "ui-flipswitch-on", "ui-button ui-button-inherit" );
on.text( onText );
this._addClass( off, "ui-flipswitch-off" );
off.text( offText );
this._addClass( flipswitch, "ui-flipswitch", "ui-bar-" + theme + " " +
( ( element.is( ":checked" ) ||
element
.find( "option" )
.eq( 1 )
.is( ":selected" ) ) ? "ui-flipswitch-active" : "" ) +
( element.is( ":disabled" ) ? " ui-state-disabled" : "" ) +
( options.corners ? " ui-corner-all" : "" ) +
( options.mini ? " ui-mini" : "" ) )
.append( on, off );
( element.is( ":disabled" ) ? " ui-state-disabled" : "" ) );
flipswitch.append( on, off );
element
.addClass( "ui-flipswitch-input" )
.after( flipswitch )
.appendTo( flipswitch );
this._addClass( "ui-flipswitch-input" );
element.after( flipswitch ).appendTo( flipswitch );
$.extend( this, {
flipswitch: flipswitch,
@@ -193,7 +186,8 @@ return $.widget( "mobile.flipswitch", $.extend( {
refresh: function() {
var direction,
existingDirection = this.flipswitch.hasClass( "ui-flipswitch-active" ) ? "_right" : "_left";
existingDirection = this.flipswitch
.hasClass( "ui-flipswitch-active" ) ? "_right" : "_left";
if ( this.type === "select" ) {
direction = ( this.element.get( 0 ).selectedIndex > 0 ) ? "_right" : "_left";
@@ -248,12 +242,11 @@ return $.widget( "mobile.flipswitch", $.extend( {
_setOptions: function( options ) {
if ( options.theme !== undefined ) {
var currentTheme = options.theme ? options.theme : "inherit",
var currentTheme = this.options.theme ? this.options.theme : "inherit",
newTheme = options.theme ? options.theme : "inherit";
this.widget()
.removeClass( "ui-bar-" + currentTheme )
.addClass( "ui-bar-" + newTheme );
this._removeClass( this.flipswitch, null, "ui-bar-" + currentTheme );
this._addClass( this.flipswitch, null, "ui-bar-" + newTheme );
}
if ( options.onText !== undefined ) {
this.on.text( options.onText );
@@ -262,13 +255,7 @@ return $.widget( "mobile.flipswitch", $.extend( {
this.off.text( options.offText );
}
if ( options.disabled !== undefined ) {
this.widget().toggleClass( "ui-state-disabled", options.disabled );
}
if ( options.mini !== undefined ) {
this.widget().toggleClass( "ui-mini", options.mini );
}
if ( options.corners !== undefined ) {
this.widget().toggleClass( "ui-corner-all", options.corners );
this._toggleClass( this.flipswitch, null, "ui-state-disabled", options.disabled );
}
this._super( options );
@@ -287,7 +274,6 @@ return $.widget( "mobile.flipswitch", $.extend( {
this.off.remove();
this.element.unwrap();
this.flipswitch.remove();
this.removeClass( "ui-flipswitch-input" );
}
}, $.mobile.behaviors.formReset ) );
@@ -0,0 +1,73 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Flipswitch Backcompat Test Suite</title>
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../js/requirejs.config.js"></script>
<script src="../../../js/jquery.tag.inserter.js"></script>
<script src="../../jquery.setNameSpace.js"></script>
<script src="../../../tests/jquery.testHelper.js"></script>
<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css"/>
<link rel="stylesheet" href="../../../external/qunit/qunit.css"/>
<link rel="stylesheet" href="../../jqm-tests.css"/>
<script src="../../../external/qunit/qunit.js"></script>
<script src="../../../external/qunit-assert-classes/qunit-assert-classes.js"></script>
<script>
$.testHelper.asyncLoad([
[ "widgets/page" ],
[
"widgets/forms/flipswitch",
"widgets/forms/flipswitch.backcompat"
],
[ "init" ],
[
"flipswitch_core.js",
"flipswitch_backcompat.js"
]
]);
</script>
</head>
<body>
<div id="qunit"></div>
<div data-nstest-role="page" data-nstest-theme="a">
<div data-nstest-role="content" data-nstest-theme="b">
<input type="checkbox" data-nstest-role="flipswitch" name="flip-checkbox" id="flip-checkbox"/>
<input type="checkbox" data-nstest-role="flipswitch" name="flip-checkbox" id="flip-checkbox-disabled" disabled/>
<input type="checkbox" data-nstest-role="flipswitch" name="flip-checkbox" id="flip-checkbox-active" checked/>
<select id="flip-select" name="flip-select" data-nstest-role="flipswitch">
<option>On</option>
<option>Off</option>
</select>
<select id="flip-select-disabled" name="flip-select" data-nstest-role="flipswitch" disabled>
<option>On</option>
<option>Off</option>
</select>
<select id="flip-select-second-option" name="flip-select" data-nstest-role="flipswitch">
<option>On</option>
<option selected>Off</option>
</select>
<select id="flip-select-mini" data-nstest-mini="true" name="flip-select" data-nstest-role="flipswitch">
<option>On</option>
<option selected>Off</option>
</select>
<input type="checkbox" data-nstest-mini="true" data-nstest-role="flipswitch" name="flip-checkbox" id="flip-checkbox-mini" checked/>
<select id="flip-select-corners" data-nstest-role="flipswitch" data-nstest-corners="false">
<option value="off">Off</option>
<option value="on">On</option>
</select>
<input type="checkbox" data-nstest-corners="false" data-nstest-role="flipswitch" name="flip-checkbox" id="flip-checkbox-corners" checked/>
<select id="flip-select-wrapperclass" data-nstest-role="flipswitch" data-nstest-wrapper-class="select-custom-class">
<option value="off">Off</option>
<option value="on">On</option>
</select>
<input type="checkbox" data-nstest-wrapper-class="checkbox-custom-class" data-nstest-role="flipswitch" name="flip-checkbox" id="flip-checkbox-wrapperclass" checked/>
</div>
</div>
</body>
</html>
@@ -0,0 +1,21 @@
/*
* mobile flipswitch unit tests
*/
( function( $ ) {
test( "checkbox based flipswitch backcompat tests", function( assert ) {
assert.hasClasses( $( "#flip-checkbox-mini" ).parent(), "ui-mini", "is mini" );
assert.lacksClasses( $( "#flip-checkbox-corners" ).parent(), "ui-corner-all",
"does not get ui-corner-all when set to false" );
assert.hasClasses( $( "#flip-checkbox-wrapperclass" ).parent(), "checkbox-custom-class",
"has wrapper class" );
} );
test( "select based flipswitch backcompat tests", function( assert ) {
assert.hasClasses( $( "#flip-select-mini" ).parent(), "ui-mini", "is mini" );
assert.lacksClasses( $( "#flip-select-corners" ).parent(), "ui-corner-all",
"does not get ui-corner-all when set to false" );
assert.hasClasses( $( "#flip-select-wrapperclass" ).parent(), "select-custom-class",
"has wrapper class" );
} );
} )( jQuery );
@@ -3,68 +3,48 @@
*/
( function( $ ) {
test( "checkbox based flipswitch is enhanced", function() {
ok( $( "#flip-checkbox" ).parent().hasClass( "ui-flipswitch" ), "should be enhanced" );
} );
test( "select based flipswitch is enhanced", function() {
ok( $( "#flip-select" ).parent().hasClass( "ui-flipswitch" ), "should be enhanced" );
} );
test( "checkbox based flipswitch is disabled", function() {
ok( $( "#flip-checkbox-disabled" ).parent().hasClass( "ui-state-disabled" ), "should be disabled" );
} );
test( "select based flipswitch is disabled", function() {
ok( $( "#flip-select-disabled" ).parent().hasClass( "ui-state-disabled" ), "should be disabled" );
} );
test( "checkbox based flipswitch is active", function() {
ok( $( "#flip-checkbox-active" ).parent().hasClass( "ui-flipswitch-active" ), "should be active" );
} );
test( "select based flipswitch is active", function() {
ok( $( "#flip-select-second-option" ).parent().hasClass( "ui-flipswitch-active" ), "should be active" );
} );
test( "checkbox based flipswitch is mini", function() {
ok( $( "#flip-checkbox-mini" ).parent().hasClass( "ui-mini" ), "should be mini" );
} );
test( "select based flipswitch is mini", function() {
ok( $( "#flip-select-mini" ).parent().hasClass( "ui-mini" ), "should be mini" );
} );
test( "checkbox based flipswitch should have theme inherit", function() {
ok( $( "#flip-checkbox-active" ).parent().hasClass( "ui-bar-inherit" ), "should be inherit theme" );
} );
test( "select based flipswitch should have theme inherit", function() {
ok( $( "#flip-select-second-option" ).parent().hasClass( "ui-bar-inherit" ), "should be inherit theme" );
} );
test( "checkbox based flipswitch is toggled on click", function() {
ok( !$( "#flip-checkbox" ).parent().hasClass( "ui-flipswitch-active" ), "should not be active" );
$( "#flip-checkbox" ).parent().click()
ok( $( "#flip-checkbox" ).parent().hasClass( "ui-flipswitch-active" ), "should be active" );
} );
test( "select based flipswitch is toggled on click", function() {
$( "#flip-select" ).click();
ok( $( "#flip-select" ).parent().hasClass( "ui-flipswitch-active" ), "should be active" );
} );
test( "checkbox based flipswitch is not active after left swipe", function() {
test( "checkbox based flipswitch", function( assert ) {
assert.hasClasses( $( "#flip-checkbox" ).parent(), "ui-flipswitch", "is enhanced" );
assert.hasClasses( $( "#flip-checkbox-disabled" ).parent(), "ui-state-disabled",
"is disabled" );
assert.hasClasses( $( "#flip-checkbox-active" ).parent(), "ui-flipswitch-active",
"is active" );
assert.hasClasses( $( "#flip-checkbox-active" ).parent(), "ui-bar-inherit",
"has theme inherit" );
assert.lacksClasses( $( "#flip-checkbox" ).parent(), "ui-flipswitch-active",
"initial checkbox is inactive" );
$( "#flip-checkbox" ).parent().click();
assert.hasClasses( $( "#flip-checkbox" ).parent(), "ui-flipswitch-active",
" is toggled to active on click" );
$( "#flip-checkbox" ).trigger( "swipeleft" );
ok( !$( "#flip-checkbox" ).parent().hasClass( "ui-flipswitch-active" ), "should be active" );
} );
test( "select based flipswitch is not active after left swipe", function() {
$( "#flip-select" ).trigger( "swipeleft" );
ok( !$( "#flip-select" ).parent().hasClass( "ui-flipswitch-active" ), "should be active" );
} );
test( "checkbox based flipswitch is active after right swipe", function() {
assert.lacksClasses( $( "#flip-checkbox" ).parent(), "ui-flipswitch-active",
"is not active after left swipe" );
$( "#flip-checkbox" ).trigger( "swiperight" );
ok( $( "#flip-checkbox" ).parent().hasClass( "ui-flipswitch-active" ), "should not be active" );
} );
test( "select based flipswitch is active after right swipe", function() {
$( "#flip-select" ).trigger( "swiperight" );
ok( $( "#flip-select" ).parent().hasClass( "ui-flipswitch-active" ), "should not be active" );
} );
test( "checkbox based flipswitch is untabbable", function() {
assert.hasClasses( $( "#flip-checkbox" ).parent(), "ui-flipswitch-active",
"is active after right swipe" );
deepEqual( parseInt( $( "#flip-checkbox" ).attr( "tabindex" ) ), -1,
"tabindex is set to -1" );
"is untabbable - tabindex is set to -1" );
} );
test( "select based flipswitch is untabbable", function() {
test( "select based flipswitch", function( assert ) {
assert.hasClasses( $( "#flip-select" ).parent(), "ui-flipswitch", "is enhanced" );
assert.hasClasses( $( "#flip-select-disabled" ).parent(), "ui-state-disabled",
"is diabled" );
assert.hasClasses( $( "#flip-select-second-option" ).parent(), "ui-flipswitch-active",
"is active" );
assert.hasClasses( $( "#flip-select-second-option" ).parent(), "ui-bar-inherit",
"has theme inherit" );
$( "#flip-select" ).click();
assert.hasClasses( $( "#flip-select" ).parent(), "ui-flipswitch-active",
"is toggled to active on click" );
$( "#flip-select" ).trigger( "swipeleft" );
assert.lacksClasses( $( "#flip-select" ).parent(), "ui-flipswitch-active",
"is not active after left swipe" );
$( "#flip-select" ).trigger( "swiperight" );
assert.hasClasses( $( "#flip-select" ).parent(), "ui-flipswitch-active",
"is active after right swipe" );
deepEqual( parseInt( $( "#flip-select" ).attr( "tabindex" ) ), -1,
"tabindex is set to -1" );
"is untabbable - tabindex is set to -1" );
} );
} )( jQuery );
Oops, something went wrong.

0 comments on commit 22c2c2b

Please sign in to comment.