From b5f0fae57a138d0cddd15819f222704064233a7a Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Fri, 21 Aug 2015 00:13:00 -0400 Subject: [PATCH] Widget: Style updates Ref #14246 Ref gh-1588 --- demos/widget/default.html | 26 ++++++++-------- ui/widget.js | 65 ++++++++++++++++++++++++--------------- 2 files changed, 54 insertions(+), 37 deletions(-) diff --git a/demos/widget/default.html b/demos/widget/default.html index e545ef6ad..80a420db4 100644 --- a/demos/widget/default.html +++ b/demos/widget/default.html @@ -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,7 +50,7 @@ .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" @@ -58,7 +58,7 @@ 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 +"," + @@ -66,11 +66,11 @@ 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, diff --git a/ui/widget.js b/ui/widget.js index c6f228efd..ab062cfb4 100644 --- a/ui/widget.js +++ b/ui/widget.js @@ -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,7 +67,7 @@ $.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 ); }; @@ -74,30 +75,35 @@ $.widget = function( name, base, prototype ) { $[ 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 ) { -- 2.39.5