Skip to content
Permalink
Browse files

Widget: Style updates

Ref #14246
Ref gh-1588
  • Loading branch information
arschmitz committed Aug 21, 2015
1 parent 1f71646 commit b5f0fae57a138d0cddd15819f222704064233a7a
Showing with 54 additions and 37 deletions.
  1. +13 −13 demos/widget/default.html
  2. +41 −24 ui/widget.js
@@ -30,12 +30,12 @@
green: 0,
blue: 0,

// callbacks
// Callbacks
change: null,
random: null
},

// the constructor
// The constructor
_create: function() {
this.element
// add a class for theming
@@ -50,27 +50,27 @@
.appendTo( this.element )
.button();

// bind click events on the changer button to the random method
// Bind click events on the changer button to the random method
this._on( this.changer, {
// _on won't call random when widget is disabled
click: "random"
});
this._refresh();
},

// called when created, and later when changing options
// Called when created, and later when changing options
_refresh: function() {
this.element.css( "background-color", "rgb(" +
this.options.red +"," +
this.options.green + "," +
this.options.blue + ")"
);

// trigger a callback/event
// Trigger a callback/event
this._trigger( "change" );
},

// a public method to change the color to a random value
// A public method to change the color to a random value
// can be called directly via .colorize( "random" )
random: function( event ) {
var colors = {
@@ -79,13 +79,13 @@
blue: Math.floor( Math.random() * 256 )
};

// trigger an event, check if it's canceled
// Trigger an event, check if it's canceled
if ( this._trigger( "random", event, colors ) !== false ) {
this.option( colors );
}
},

// events bound via _on are removed automatically
// Events bound via _on are removed automatically
// revert other modifications here
_destroy: function() {
// remove generated elements
@@ -115,16 +115,16 @@
}
});

// initialize with default options
// Initialize with default options
$( "#my-widget1" ).colorize();

// initialize with two customized options
// Initialize with two customized options
$( "#my-widget2" ).colorize({
red: 60,
blue: 60
});

// initialize with custom green value
// Initialize with custom green value
// and a random callback to allow only colors with enough green
$( "#my-widget3" ).colorize( {
green: 128,
@@ -133,7 +133,7 @@
}
});

// click to toggle enabled/disabled
// Click to toggle enabled/disabled
$( "#disable" ).on( "click", function() {
// use the custom selector created for each widget to find all instances
// all instances are toggled together, so we can check the state from the first
@@ -144,7 +144,7 @@
}
});

// click to set options after initialization
// Click to set options after initialization
$( "#green" ).on( "click", function() {
$( ":custom-colorize" ).colorize( "option", {
red: 64,
@@ -40,7 +40,7 @@ $.cleanData = ( function( orig ) {
$( elem ).triggerHandler( "remove" );
}

// http://bugs.jquery.com/ticket/8235
// Http://bugs.jquery.com/ticket/8235
} catch ( e ) {}
}
orig( elems );
@@ -49,7 +49,8 @@ $.cleanData = ( function( orig ) {

$.widget = function( name, base, prototype ) {
var fullName, existingConstructor, constructor, basePrototype,
// proxiedPrototype allows the provided prototype to remain unmodified

// ProxiedPrototype allows the provided prototype to remain unmodified
// so that it can be used as a mixin for multiple widgets (#8876)
proxiedPrototype = {},
namespace = name.split( "." )[ 0 ];
@@ -66,38 +67,43 @@ $.widget = function( name, base, prototype ) {
prototype = $.extend.apply( null, [ {} ].concat( prototype ) );
}

// create selector for plugin
// Create selector for plugin
$.expr[ ":" ][ fullName.toLowerCase() ] = function( elem ) {
return !!$.data( elem, fullName );
};

$[ namespace ] = $[ namespace ] || {};
existingConstructor = $[ namespace ][ name ];
constructor = $[ namespace ][ name ] = function( options, element ) {
// allow instantiation without "new" keyword

// Allow instantiation without "new" keyword
if ( !this._createWidget ) {
return new constructor( options, element );
}

// allow instantiation without initializing for simple inheritance
// Allow instantiation without initializing for simple inheritance
// must use "new" keyword (the code above always passes args)
if ( arguments.length ) {
this._createWidget( options, element );
}
};
// extend with the existing constructor to carry over any static properties

// Extend with the existing constructor to carry over any static properties
$.extend( constructor, existingConstructor, {
version: prototype.version,
// copy the object used to create the prototype in case we need to

// Copy the object used to create the prototype in case we need to
// redefine the widget later
_proto: $.extend( {}, prototype ),
// track widgets that inherit from this widget in case this widget is

// Track widgets that inherit from this widget in case this widget is
// redefined after a widget inherits from it
_childConstructors: []
} );

basePrototype = new base();
// we need to make the options hash a property directly on the new instance

// We need to make the options hash a property directly on the new instance
// otherwise we'll modify the options hash on the prototype that we're
// inheriting from
basePrototype.options = $.widget.extend( {}, basePrototype.options );
@@ -131,6 +137,7 @@ $.widget = function( name, base, prototype ) {
} )();
} );
constructor.prototype = $.widget.extend( basePrototype, {

// TODO: remove support for widgetEventPrefix
// always use the name + a colon as the prefix, e.g., draggable:start
// don't prefix for widgets that aren't DOM-based
@@ -150,11 +157,12 @@ $.widget = function( name, base, prototype ) {
$.each( existingConstructor._childConstructors, function( i, child ) {
var childPrototype = child.prototype;

// redefine the child widget using the same prototype that was
// Redefine the child widget using the same prototype that was
// originally used, but inherit from the new version of the base
$.widget( childPrototype.namespace + "." + childPrototype.widgetName, constructor, child._proto );
} );
// remove the list of existing child constructors from the old constructor

// Remove the list of existing child constructors from the old constructor
// so the old child constructors can be garbage collected
delete existingConstructor._childConstructors;
} else {
@@ -176,12 +184,15 @@ $.widget.extend = function( target ) {
for ( key in input[ inputIndex ] ) {
value = input[ inputIndex ][ key ];
if ( input[ inputIndex ].hasOwnProperty( key ) && value !== undefined ) {

// Clone objects
if ( $.isPlainObject( value ) ) {
target[ key ] = $.isPlainObject( target[ key ] ) ?
$.widget.extend( {}, target[ key ], value ) :

// Don't extend strings, arrays, etc. with objects
$.widget.extend( {}, value );

// Copy everything else by reference
} else {
target[ key ] = value;
@@ -257,7 +268,7 @@ $.Widget.prototype = {
classes: {},
disabled: false,

// callbacks
// Callbacks
create: null
},
_createWidget: function( options, element ) {
@@ -281,9 +292,11 @@ $.Widget.prototype = {
}
} );
this.document = $( element.style ?
// element within the document

// Element within the document
element.ownerDocument :
// element is window or document

// Element is window or document
element.document || element );
this.window = $( this.document[ 0 ].defaultView || this.document[ 0 ].parentWindow );
}
@@ -310,7 +323,7 @@ $.Widget.prototype = {
that._removeClass( value, key );
} );

// we can probably remove the unbind calls in 2.0
// We can probably remove the unbind calls in 2.0
// all event bindings should go through this._on()
this.element
.off( this.eventNamespace )
@@ -319,7 +332,7 @@ $.Widget.prototype = {
.off( this.eventNamespace )
.removeAttr( "aria-disabled" );

// clean up events and states
// Clean up events and states
this.bindings.off( this.eventNamespace );
},
_destroy: $.noop,
@@ -335,12 +348,14 @@ $.Widget.prototype = {
i;

if ( arguments.length === 0 ) {
// don't return a reference to the internal hash

// Don't return a reference to the internal hash
return $.widget.extend( {}, this.options );
}

if ( typeof key === "string" ) {
// handle nested keys, e.g., "foo.bar" => { foo: { bar: ___ } }

// Handle nested keys, e.g., "foo.bar" => { foo: { bar: ___ } }
options = {};
parts = key.split( "." );
key = parts.shift();
@@ -494,14 +509,14 @@ $.Widget.prototype = {
var delegateElement,
instance = this;

// no suppressDisabledCheck flag, shuffle arguments
// No suppressDisabledCheck flag, shuffle arguments
if ( typeof suppressDisabledCheck !== "boolean" ) {
handlers = element;
element = suppressDisabledCheck;
suppressDisabledCheck = false;
}

// no element argument, shuffle and use this.element
// No element argument, shuffle and use this.element
if ( !handlers ) {
handlers = element;
element = this.element;
@@ -513,7 +528,8 @@ $.Widget.prototype = {

$.each( handlers, function( event, handler ) {
function handlerProxy() {
// allow widgets to customize the disabled handling

// Allow widgets to customize the disabled handling
// - disabled as an array instead of boolean
// - disabled class as method for disabling individual parts
if ( !suppressDisabledCheck &&
@@ -525,7 +541,7 @@ $.Widget.prototype = {
.apply( instance, arguments );
}

// copy the guid so direct unbinding works
// Copy the guid so direct unbinding works
if ( typeof handler !== "string" ) {
handlerProxy.guid = handler.guid =
handler.guid || handlerProxy.guid || $.guid++;
@@ -595,11 +611,12 @@ $.Widget.prototype = {
event.type = ( type === this.widgetEventPrefix ?
type :
this.widgetEventPrefix + type ).toLowerCase();
// the original event may come from any element

// The original event may come from any element
// so we need to reset the target on the new event
event.target = this.element[ 0 ];

// copy original event properties over to the new event
// Copy original event properties over to the new event
orig = event.originalEvent;
if ( orig ) {
for ( prop in orig ) {

0 comments on commit b5f0fae

Please sign in to comment.
You can’t perform that action at this time.