Permalink
Browse files

Widget: Add classes option and _add/_remove/_toggleClass methods

Fixes #7053
Closes gh-1411
  • Loading branch information...
arschmitz committed Dec 3, 2014
1 parent 4959c81 commit c192d4086d9bbaf09d5f870857af30c60a427e22
@@ -2,6 +2,7 @@ TestHelpers.commonWidgetTests( "accordion", {
defaults: {
active: 0,
animate: {},
classes: {},
collapsible: false,
disabled: false,
event: "click",
@@ -2,6 +2,7 @@ TestHelpers.commonWidgetTests( "autocomplete", {
defaults: {
appendTo: null,
autoFocus: false,
classes: {},
delay: 300,
disabled: false,
messages: {
@@ -1,5 +1,6 @@
TestHelpers.commonWidgetTests( "button", {
defaults: {
classes: {},
disabled: null,
icons: {
primary: null,
@@ -3,6 +3,7 @@ TestHelpers.commonWidgetTests( "dialog", {
appendTo: "body",
autoOpen: true,
buttons: [],
classes: {},
closeOnEscape: true,
closeText: "Close",
disabled: false,
@@ -3,6 +3,7 @@ TestHelpers.commonWidgetTests( "draggable", {
appendTo: "parent",
axis: false,
cancel: "input,textarea,button,select,option",
classes: {},
connectToSortable: false,
containment: false,
cursor: "auto",
@@ -3,6 +3,7 @@ TestHelpers.commonWidgetTests( "droppable", {
accept: "*",
activeClass: false,
addClasses: true,
classes: {},
disabled: false,
greedy: false,
hoverClass: false,
@@ -1,5 +1,6 @@
TestHelpers.commonWidgetTests( "menu", {
defaults: {
classes: {},
disabled: false,
icons: {
submenu: "ui-icon-caret-1-e"
@@ -1,5 +1,6 @@
TestHelpers.commonWidgetTests( "progressbar", {
defaults: {
classes: {},
disabled: false,
max: 100,
value: 0,
@@ -7,6 +7,7 @@ TestHelpers.commonWidgetTests( "resizable", {
aspectRatio: false,
autoHide: false,
cancel: "input,textarea,button,select,option",
classes: {},
containment: false,
delay: 0,
disabled: false,
@@ -3,6 +3,7 @@ TestHelpers.commonWidgetTests("selectable", {
appendTo: "body",
autoRefresh: true,
cancel: "input,textarea,button,select,option",
classes: {},
delay: 0,
disabled: false,
distance: 0,
@@ -1,6 +1,7 @@
TestHelpers.commonWidgetTests( "selectmenu", {
defaults: {
appendTo: null,
classes: {},
disabled: null,
icons: {
button: "ui-icon-triangle-1-s"
@@ -2,6 +2,7 @@ TestHelpers.commonWidgetTests( "slider", {
defaults: {
animate: false,
cancel: "input,textarea,button,select,option",
classes: {},
delay: 0,
disabled: false,
distance: 0,
@@ -3,6 +3,7 @@ TestHelpers.commonWidgetTests( "sortable", {
appendTo: "parent",
axis: false,
cancel: "input,textarea,button,select,option",
classes: {},
connectWith: false,
containment: false,
cursor: "auto",
@@ -1,5 +1,6 @@
TestHelpers.commonWidgetTests( "spinner", {
defaults: {
classes: {},
culture: null,
disabled: false,
icons: {
@@ -1,6 +1,7 @@
TestHelpers.commonWidgetTests( "tabs", {
defaults: {
active: null,
classes: {},
collapsible: false,
disabled: false,
event: "click",
@@ -1,5 +1,6 @@
TestHelpers.commonWidgetTests( "tooltip", {
defaults: {
classes: {},
content: function() {},
disabled: false,
hide: true,
@@ -9,6 +9,7 @@
<script src="../../../external/qunit/qunit.js"></script>
<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
<script src="../testsuite.js"></script>
<script src="../../../external/qunit-assert-classes/qunit-assert-classes.js"></script>
<script>
TestHelpers.loadResources({
css: [ "core" ],
@@ -21,6 +22,7 @@
<script src="widget_core.js"></script>
<script src="widget_extend.js"></script>
<script src="widget_animation.js"></script>
<script src="widget_classes.js"></script>
<script src="../swarminject.js"></script>
</head>
@@ -0,0 +1,143 @@
(function( $ ) {
module( "widget factory classes", {
setup: function() {
$.widget( "ui.classesWidget", {
options: {
classes: {
"ui-classes-widget": "ui-theme-widget",
"ui-classes-element": "ui-theme-element ui-theme-element-2"
}
},
_create: function() {
this.span = $( "<span>" )
.appendTo( this.element );
this.element.wrap( "<div>" );
this.wrapper = this.element.parent();
this._addClass( "ui-classes-element", "ui-core-element" )
._addClass( "ui-classes-element-2" )
._addClass( null, "ui-core-element-null" )
._addClass( this.span, null, "ui-core-span-null" )
._addClass( this.span, "ui-classes-span", "ui-core-span" )
._addClass( this.wrapper, "ui-classes-widget" );
},
toggleClasses: function( bool ) {
this._toggleClass( "ui-classes-element", "ui-core-element", bool )
._toggleClass( "ui-classes-element-2", null, bool )
._toggleClass( null, "ui-core-element-null", bool )
._toggleClass( this.span, null, "ui-core-span-null", bool )
._toggleClass( this.span, "ui-classes-span", "ui-core-span", bool )
._toggleClass( this.wrapper, "ui-classes-widget", null, bool );
},
removeClasses: function() {
this._removeClass( "ui-classes-element", "ui-core-element" )
._removeClass( "ui-classes-element-2" )
._removeClass( null, "ui-core-element-null" )
._removeClass( this.span, null, "ui-core-span-null" )
._removeClass( this.span, "ui-classes-span", "ui-core-span" )
._removeClass( this.wrapper, "ui-classes-widget" );
},
_destroy: function() {
this.span.remove();
this.element.unwrap();
}
});
},
teardown: function() {
delete $.ui.classesWidget;
delete $.fn.classesWidget;
}
});
function elementHasClasses( widget, method, assert ) {
var toggle = method === "toggle" ? ( ", true" ) : "";
assert.hasClasses( widget, "ui-classes-element ui-theme-element ui-theme-element-2",
"_" + method + "Class works with ( keys, extra" + toggle + " )" );
assert.hasClasses( widget, "ui-classes-element-2",
"_" + method + "Class works with ( keys, null" + toggle + " )" );
assert.hasClasses( widget, "ui-core-element-null",
"_" + method + "Class works with ( null, extra" + toggle + " )" );
assert.hasClasses( widget.parent(), "ui-classes-widget ui-theme-widget",
"_" + method + "Class works with ( element, null, extra" + toggle + " )" );
assert.hasClasses( widget.find( "span" ), "ui-classes-span ui-core-span",
"_" + method + "Class works with ( element, keys, extra" + toggle + " )" );
assert.hasClasses( widget.find( "span" ), "ui-core-span-null",
"_" + method + "Class works with ( element, keys, null" + toggle + " )" );
}
function elementLacksClasses( widget, method, assert ) {
var toggle = method === "toggle" ? ( ", false" ) : "";
assert.lacksClasses( widget, "ui-classes-element ui-theme-element ui-theme-element-2",
"_" + method + "Class works with ( keys, extra" + toggle + " )" );
assert.lacksClasses( widget, "ui-classes-element-2",
"_" + method + "Class works with ( keys, null" + toggle + " )" );
assert.lacksClasses( widget, "ui-core-element-null",
"_" + method + "Class works with ( null, extra" + toggle + " )" );
assert.lacksClasses( widget.parent(), "ui-classes-widget ui-theme-widget",
"_" + method + "Class works with ( element, null, extra" + toggle + " )" );
assert.lacksClasses( widget.find( "span" ), "ui-classes-span ui-core-span",
"_" + method + "Class works with ( element, keys, extra" + toggle + " )" );
assert.lacksClasses( widget.find( "span" ), "ui-core-span-null",
"_" + method + "Class works with ( element, keys, null" + toggle + " )" );
}
test( ".option() - classes setter", function( assert ) {
expect( 11 );
var testWidget = $.ui.classesWidget();
elementHasClasses( testWidget.element, "add", assert );
testWidget.option({
classes: {
"ui-classes-span": "custom-theme-span",
"ui-classes-widget": "ui-theme-widget custom-theme-widget",
"ui-classes-element": "ui-theme-element-2"
}
});
assert.lacksClasses( testWidget.element, "ui-theme-element",
"Removing a class from the value removes the class" );
testWidget.option( "classes.ui-classes-element", "" );
assert.hasClasses( testWidget.element, "ui-classes-element",
"Setting to empty value leaves structure class" );
assert.lacksClasses( testWidget.element, "ui-theme-element-2",
"Setting empty value removes previous value classes" );
assert.hasClasses( testWidget.span, "ui-classes-span custom-theme-span",
"Adding a class to an empty value works as expected" );
assert.hasClasses( testWidget.wrapper, "ui-classes-widget custom-theme-widget",
"Appending a class to the current value works as expected" );
});
test( ".destroy() - class removal", function() {
expect( 1 );
domEqual( "#widget", function() {
$( "#widget" ).classesWidget().classesWidget( "destroy" );
});
});
test( "._add/_remove/_toggleClass()", function( assert ) {
expect( 24 );
var widget = $( "#widget" ).classesWidget();
elementHasClasses( widget, "add", assert );
widget.classesWidget( "toggleClasses", false );
elementLacksClasses( widget, "toggle", assert );
widget.classesWidget( "toggleClasses", true );
elementHasClasses( widget, "toggle", assert );
widget.classesWidget( "removeClasses" );
elementLacksClasses( widget, "remove", assert );
});
}( jQuery ) );
@@ -227,6 +227,7 @@ test( "merge multiple option arguments", function() {
$.widget( "ui.testWidget", {
_create: function() {
deepEqual( this.options, {
classes: {},
create: null,
disabled: false,
option1: "value1",
@@ -281,6 +282,7 @@ test( "._getCreateOptions()", function() {
},
_create: function() {
deepEqual( this.options, {
classes: {},
create: null,
disabled: false,
option1: "override1",
@@ -485,10 +487,11 @@ test( ".option() - getter", function() {
options = div.testWidget( "option" );
deepEqual( options, {
baz: 5,
classes: {},
create: null,
disabled: false,
foo: "bar",
baz: 5,
qux: [ "quux", "quuux" ]
}, "full options hash returned" );
options.foo = "notbar";
Oops, something went wrong.

0 comments on commit c192d40

Please sign in to comment.