Widget demo: Some improvements based on Scott's comments.

diff --git a/demos/widget/default.html b/demos/widget/default.html
index ec272e994583240c10265c95f076fcb97b4b35cb..410318e0a90676483de33b0634f526cad9f64002 100644 (file)
--- a/demos/widget/default.html
+++ b/demos/widget/default.html
@@ -18,14 +18,17 @@
        </style>
        <script>
        $(function() {
-               // the widget definition, where 'custom' is the namespace,
-               // 'colorize' the widget name
-               $.widget( 'custom.colorize', {
+               // the widget definition, where "custom" is the namespace,
+               // "colorize" the widget name
+               $.widget( "custom.colorize", {
                        // default options
                        options: {
                                red: 255,
                                green: 0,
-                               blue: 0
+                               blue: 0,
+
+                               // callbacks
+                               random: null
                        },
 
                        // the constructor
@@ -35,9 +38,10 @@
                                        .addClass("colorize")
                                        // prevent double click to select text
                                        .disableSelection();
+
                                // bind click events to random method
                                this._bind({
-                                       // _bind won't call random when widget is disabled
+                                       // _bind won"t call random when widget is disabled
                                        click: "random"
                                });
                                this._refresh();
@@ -45,18 +49,18 @@
 
                        // 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 + ')'
+                               this.element.css( "background-color", "rgb(" +
+                                       this.options.red +"," +
+                                       this.options.green + "," +
+                                       this.options.blue + ")"
                                );
 
                                // trigger a callback/event
-                               this._trigger( 'change' );
+                               this._trigger( "change" );
                        },
 
                        // a public method to change the color to a random value
-                       // can be called directly via .colorize( 'random' )
+                       // can be called directly via .colorize( "random" )
                        random: function( event ) {
                                var colors = {
                                        red: Math.floor( Math.random() * 256 ),
@@ -64,10 +68,9 @@
                                        blue: Math.floor( Math.random() * 256 )
                                };
 
-                               // trigger an event, check if it's canceled
-                               if ( this._trigger( 'random', event, colors ) !== false ) {
-                                       $.extend( this.options, colors );
-                                       this._refresh();
+                               // trigger an event, check if it"s canceled
+                               if ( this._trigger( "random", event, colors ) !== false ) {
+                                       this.option( colors );
                                }
                        },
 
@@ -75,31 +78,39 @@
                        // revert other modifications here
                        _destroy: function() {
                                this.element
-                                       .removeClass( 'colorize' )
+                                       .removeClass( "colorize" )
                                        .enableSelection()
-                                       .css( 'background-color', 'transparent' );
+                                       .css( "background-color", "transparent" );
                        },
 
-                       // always refresh when changing an option
                        _setOption: function( key, value ) {
+                               // prevent invalid color values
+                               if ( /red|green|blue/.test(key) && value < 0 || value > 255 ) {
+                                       return;
+                               }
+                               this._super( "_setOptions", options );
+                       },
+
+                       // always refresh when changing options
+                       _setOptions: function() {
                                // _super handles keeping the right this-context
-                               this._super( "_setOption", key, value );
+                               this._superApply( "_setOptions", arguments );
                                this._refresh();
                        }
                });
 
                // initialize with default options
-               $( '#my-widget1' ).colorize();
+               $( "#my-widget1" ).colorize();
 
                // initialize with two customized options
-               $( '#my-widget2' ).colorize({
+               $( "#my-widget2" ).colorize({
                        red: 60,
                        blue: 60
                });
 
                // initialize with custom green value
                // and a random callback to allow only colors with enough green
-               $( '#my-widget3' ).colorize( {
+               $( "#my-widget3" ).colorize( {
                        green: 128,
                        random: function( event, ui ) {
                                return ui.green > 128;
@@ -107,15 +118,16 @@
                });
 
                // click to toggle enabled/disabled
-               $( '#disable' ).toggle(function() {
-                       $( ':custom-colorize' ).colorize( 'disable' );
+               $( "#disable" ).toggle(function() {
+                       // use the custom selector created for each widget to find all instances
+                       $( ":custom-colorize" ).colorize( "disable" );
                }, function() {
-                       $( ':custom-colorize' ).colorize( 'enable' );
+                       $( ":custom-colorize" ).colorize( "enable" );
                });
 
                // click to set options after initalization
-               $( '#black' ).click( function() {
-                       $( ':custom-colorize' ).colorize( 'option', {
+               $( "#black" ).click( function() {
+                       $( ":custom-colorize" ).colorize( "option", {
                                red: 0,
                                green: 0,
                                blue: 0
@@ -142,7 +154,7 @@
 
 <div class="demo-description">
 <p>This demo shows a simple custom widget built using the widget factory (jquery.ui.widget.js).</p>
-<p>The three boxes are initialized in different ways. Clicking them changes their background color. View source to see how it works.</p>
+<p>The three boxes are initialized in different ways. Clicking them changes their background color. View source to see how it works, its heavily commented</p>
 <p><a href="http://wiki.jqueryui.com/w/page/12138135/Widget-factory">For more details on the widget factory, visit the jQuery UI planning wiki.</a></p>
 </div><!-- End demo-description -->