From 028853cc78858cea8948367248dd26e95c325a8c Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Wed, 3 Dec 2014 11:20:20 -0500 Subject: [PATCH 01/11] Widget: add _addClass and _removeClass methods --- ui/widget.js | 51 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) diff --git a/ui/widget.js b/ui/widget.js index 41425b1a9d3..f05f8c5b2e1 100644 --- a/ui/widget.js +++ b/ui/widget.js @@ -258,6 +258,7 @@ $.Widget.prototype = { this.bindings = $(); this.hoverable = $(); this.focusable = $(); + this.classObject = {}; if ( element !== this ) { $.data( element, this.widgetFullName, this ); @@ -367,6 +368,15 @@ $.Widget.prototype = { return this; }, _setOption: function( key, value ) { + if ( key === "classes" ) { + for ( var classKey in value ) { + if ( value[ classKey ] !== this.options.classes[ classKey ] ) { + this._removeClass( this.classObject[ classKey ], classKey ) + ._addClass( this.classObject[ classKey ], classKey, "", value ); + } + } + } + this.options[ key ] = value; if ( key === "disabled" ) { @@ -390,6 +400,47 @@ $.Widget.prototype = { return this._setOptions({ disabled: true }); }, + _constructClasses: function( element, keys, add, object ) { + var i, + full = [], + keyArray = keys.split( " " ); + + object = object || this.options.classes; + + for ( i = 0; i < keyArray.length; i++ ) { + this.classObject[ keyArray[ i ] ] = this.classObject[ keyArray[ i ] ] || $(); + this.classObject[ keyArray[ i ] ][ add ? "add" : "filter" ]( element ); + + full.push( keyArray[ i ] ); + + if ( this.options.classes[ keyArray[ i ] ] ) { + full.push( this.options.classes[ keyArray[ i ] ] ); + } + } + return full.join( " " ); + }, + + _removeClass: function( element, keys, extra ) { + if ( typeof element === "string" ) { + extra = keys; + keys = element; + element = this.element; + } + extra = ( " " + extra ) || ""; + return element.removeClass( this._constructClasses( element, keys ) + extra ); + }, + + _addClass: function( element, keys, extra, update ) { + if ( typeof element === "string" ) { + update = extra; + extra = keys; + keys = element; + element = this.element; + } + extra = extra ? ( " " + extra ) : ""; + return element.addClass( this._constructClasses( element, keys, true, update ) + extra ); + }, + _on: function( suppressDisabledCheck, element, handlers ) { var delegateElement, instance = this; From 03c108720ad3f11ae5c1629709f4211886d0eef8 Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Wed, 3 Dec 2014 11:22:16 -0500 Subject: [PATCH 02/11] Autocomplete: Add classes option --- demos/autocomplete/combobox.html | 4 +++- .../unit/autocomplete/autocomplete_common.js | 5 +++++ tests/unit/autocomplete/autocomplete_core.js | 9 +++++++++ ui/autocomplete.js | 19 +++++++++++-------- 4 files changed, 28 insertions(+), 9 deletions(-) diff --git a/demos/autocomplete/combobox.html b/demos/autocomplete/combobox.html index 437e52ab1d2..f8898094dc8 100644 --- a/demos/autocomplete/combobox.html +++ b/demos/autocomplete/combobox.html @@ -58,7 +58,9 @@ source: $.proxy( this, "_source" ) }) .tooltip({ - tooltipClass: "ui-state-highlight" + classes: { + "ui-tooltip": "ui-state-highlight" + } }); this._on( this.input, { diff --git a/tests/unit/autocomplete/autocomplete_common.js b/tests/unit/autocomplete/autocomplete_common.js index 63b24d384b9..4e3fbb7c7d1 100644 --- a/tests/unit/autocomplete/autocomplete_common.js +++ b/tests/unit/autocomplete/autocomplete_common.js @@ -2,6 +2,11 @@ TestHelpers.commonWidgetTests( "autocomplete", { defaults: { appendTo: null, autoFocus: false, + classes: { + "ui-autocomplete": "", + "ui-autocomplete-input": "", + "ui-autocomplete-loading": "" + }, delay: 300, disabled: false, messages: { diff --git a/tests/unit/autocomplete/autocomplete_core.js b/tests/unit/autocomplete/autocomplete_core.js index fa3f9abb072..ffdc737acee 100644 --- a/tests/unit/autocomplete/autocomplete_core.js +++ b/tests/unit/autocomplete/autocomplete_core.js @@ -2,6 +2,15 @@ module( "autocomplete: core" ); +test( "markup structure", function() { + expect( 2 ); + var element = $( "#autocomplete" ).autocomplete(), + menu = element.autocomplete( "widget" ); + + ok( element.hasClass( "ui-autocomplete-input" ), "main element is .ui-autocomplete-input" ); + ok( menu.hasClass( "ui-autocomplete" ), "menu is .ui-autocomplete" ); +}); + test( "prevent form submit on enter when menu is active", function() { expect( 2 ); var event, diff --git a/ui/autocomplete.js b/ui/autocomplete.js index aa0e546334e..14a4c2e42b4 100644 --- a/ui/autocomplete.js +++ b/ui/autocomplete.js @@ -32,6 +32,11 @@ $.widget( "ui.autocomplete", { options: { appendTo: null, autoFocus: false, + classes: { + "ui-autocomplete": "", + "ui-autocomplete-input": "", + "ui-autocomplete-loading": "" + }, delay: 300, minLength: 1, position: { @@ -79,9 +84,8 @@ $.widget( "ui.autocomplete", { this.valueMethod = this.element[ isTextarea || isInput ? "val" : "text" ]; this.isNewMenu = true; - this.element - .addClass( "ui-autocomplete-input" ) - .attr( "autocomplete", "off" ); + this._addClass( "ui-autocomplete-input" ); + this.element.attr( "autocomplete", "off" ); this._on( this.element, { keydown: function( event ) { @@ -201,9 +205,7 @@ $.widget( "ui.autocomplete", { }); this._initSource(); - this.menu = $( "