Changeset 5544

Timestamp:

05/09/08 21:12:14 (4 months ago)

Author:

scott.gonzalez

Message:

UI experimental: Totally busted plugin inheritance.

Location:

branches/ui-experimental/base

Files:

• ui.core.js (modified) (3 diffs)
• ui.test.js (modified) (2 diffs)

branches/ui-experimental/base/ui.core.js

@@ -77 +77 @@
         
         // add widget prototype
-        $[namespace][name].prototype = $.extend({}, widgetPrototype, prototype);
+        var proto = ($[namespace][name].prototype = widgetPrototype);
+        var extend = prototype.extend || [];
+        extend = (typeof extend == "string" ? extend.split(/,?\s+/) : extend);
+        $.each(extend, function(i, base) {
+            // TODO: add support for non-namespaced bases
+            var parts = base.split('.'),
+                baseNamespace = parts[0],
+                baseName = parts[1];
+            
+            // add methods from base object
+            proto[baseName] = {};
+            $.each($[baseNamespace][baseName], function(prop, val) {
+                proto[baseName][prop] = $.isFunction(val)
+                    ? function() {
+                        val.apply(proto, arguments);
+                    } : val;
+            });
+            
+            // add methods from plugin prototype
+            $.each(prototype[baseName], function(prop, val) {
+                proto[baseName][prop] = $.isFunction(val)
+                    ? function() {
+                        val.apply(proto, arguments);
+                    } : val;
+            });
+            //basePrototypes[baseName] = $[baseNamespace][baseName];
+        });
+        $.extend(true, proto, prototype);
     };
-    
+    /*
     $.widget.merge = function() {
         var ret = {};
@@ -95 +122 @@
     };
     
+    $.widget('ui.funky', {
+        extend: {
+            mouse: $.ui.mouse,
+            keyboard: $.ui.keybaord
+        },
+        
+        init: function() {
+            this.mouse.init();
+            this.keyboard.init();
+            
+            // funky specific init
+        },
+        destroy: function() {
+            this.mouse.destroy();
+            this.keyboard.destroy();
+            
+            // funky specific destroy
+        },
+        
+        foo: function() {
+            // something funky
+        },
+        
+        mouse: {
+            start: function() {
+                // funky stuff for $.ui.mouse to use on start
+            }
+        }
+    });
+    
+    $.widget('ui.draggable', {
+        init: function() {
+            this.mouse.init.apply(this, arguments);
+            // draggable specific stuff
+        },
+        
+        foo: function() {
+            // something draggable specific
+        },
+        
+        mouse: $.extend($.ui.mouse, {
+            // draggable specific functions for the mouse code to work with
+        })
+    });
+    */
     $.ui.color = {
         init: function() {
             var self = this;
             this.element.bind('click', function() {
-                self.colorize();
+                self.color.colorize();
             });
         },
@@ -105 +177 @@
             this.element.css('background-color', color);
         },
-        colorize: function() {
+        random: function() {
             var r = Math.floor(Math.random() * 255),
                 g = Math.floor(Math.random() * 255),
                 b = Math.floor(Math.random() * 255);
-            this.bg('rgb(' + r + ', ' + g + ', ' + b + ')');
+            return 'rgb(' + r + ', ' + g + ', ' + b + ')';
+        },
+        colorize: function() {
+            this.color.bg(this.color.random());
         },
         colorize2: function() {
-            this.bg(this.options.color.mainColor);
+            this.color.bg(this.options.color.mainColor);
         },
         colorize3: function() {
-            this.bg(this.color.color3.apply(this, arguments));
+            this.color.bg(this.color.red());
         }
     };

branches/ui-experimental/base/ui.test.js

@@ -1 +1 @@
 ;(function($) {
-    $.widget('ui.test', $.widget.merge({}, $.ui.color, {
+    $.widget('ui.test', {
+        extend: 'ui.color',
+        
         init: function() {
-            console.log('test initialized');
+            this.color.init();
         },
         black: function() {
@@ -8 +10 @@
         },
         color: {
-            color3: function() {
-                return '#00f';
+            red: function() {
+                return '#f00';
             }
         }
-    }));
+    });
     
     $.ui.test.defaults = {
         color: {
-            mainColor: '#f00'
+            mainColor: '#00f'
         }
     };