improve design patterns example

examples/ui/widget_design_patterns/css/example.css

@@ -1,6 +1,9 @@
 .OxMyBox {
     float: left;
 }
+.OxMyBox .OxMyText {
+    padding: 4px;
+}
 .OxMyInvertibleBox {
     cursor: pointer;
 }

examples/ui/widget_design_patterns/js/example.js

@@ -117,12 +117,13 @@ Ox.load(['Image', 'UI'], function() {
         Next, we define the widgets public methods, as properties of `that`.
         (Note that unlike private methods, they are not hoisted.)
         */
-        that.showOptions = function() {
+        that.displayText = function(text) {
             /*
             As there isn't much to do yet, this method just displays the
             widget's options.
             */
-            that.html(JSON.stringify(self.options).replace(/([,:])/g, '$1 '));
+            that.empty();
+            text && that.append($('<div>').addClass('OxMyText').html(text));
             /*
             Public methods should return `that`, for chaining.
             */
@@ -173,6 +174,7 @@ Ox.load(['Image', 'UI'], function() {
 
         that.invert = function() {
             that.options({inverted: !self.options.inverted});
+            that.triggerEvent('invert');
             return that;
         };
 
@@ -276,7 +278,7 @@ Ox.load(['Image', 'UI'], function() {
     Ox.My.ImageBox = function(options, self) {
 
         self = self || {};
-        var that = Ox.My.Box({}, self)
+        var that = Ox.My.Box({}, self).displayText('Loading...')
         that.defaults({
                 image: null
             })
@@ -288,6 +290,7 @@ Ox.load(['Image', 'UI'], function() {
             self.sizes = size.map(function(value, index) {
                 return Ox.splitInt(self.options.size[index], value);
             });
+            that.displayText();
             self.$boxes = Ox.range(size[1]).map(function(y) {
                 return Ox.range(size[0]).map(function(x) {
                     return Ox.My.PixelBox({
@@ -313,121 +316,43 @@ Ox.load(['Image', 'UI'], function() {
         
     };
 
-    window.My = {};
+    (function() {
-    My.$div = $('<div>')
+        var h = Ox.random(360), s = 1, l = 0.5;
-        .css({float: 'left', width: '256px', height: '256px'})
+        window.My = {};
-        .appendTo(Ox.$body);
+        My.$backgroundBox = Ox.My.Box({
-    My.$box = Ox.My.Box({
+                size: [256, 256]
-        color: [255, 0, 0]
+            })
-    }).appendTo(My.$div);
+            .append(
-    My.$invertibleBox = Ox.My.InvertibleBox({
+                My.$box = Ox.My.Box({
-        color: [0, 0, 255]
+                    color: Ox.rgb(h, s, l)
-    }).appendTo(My.$div);
-    My.$metaBox = Ox.My.MetaBox({
-        color: [
-            [[255, 0, 0], [255, 255, 0], [0, 255, 0]],
-            [[0, 255, 255], [0, 0, 255], [255, 0, 255]]
-        ]
-    }).appendTo(My.$div);
-    My.$pixelBox = Ox.My.PixelBox({
-        color: [255, 128, 0]
-    }).appendTo(My.$div);
-    setTimeout(function() {
-        My.$imageBox = Ox.My.ImageBox({
-            image: 'png/pandora32.png',
-            size: [256, 256]
-        }).appendTo(Ox.$body);
-    });
-
-
-    return;
-
-    /*
-    Now we create a new widget that subclasses `Ox.My.Box`.
-    */
-    Ox.My.RoundedBox = function(options, self) {
-
-        self = self || {};
-        /*
-        This time `that` is an instance of `Ox.My.Box`
-        */
-        var that = Ox.My.Box({}, self);
-        /*
-        `Ox.RoundedBox` has additional default properties,
-        we define this by overwriting the defaults.
-        Sice we do not want to overwrite the existing defaults,
-        we first get the defaults and extend them with our new values.
-
-        Here we also show an alternative way of getting updates.
-        Instead of passing an object `{key: function}`,
-        we can also pass one function that gets called with key, value.
-        */
-        that.defaults(Ox.extend(that.defaults(), {
-                radius: 16
-            }))
-            .options(options || {})
-            .update(function(key, value) {
-                if (key == 'radius') {
-                    setRadius();
-                }
-            });
-
-        setRadius();
-
-        function setRadius() {
-            that.css({
-                borderRadius: self.options.radius + 'px'
-            });
-        }
-
-        return that;
-
-    };
-    /*
-    <pre>
-    Ox.My.RoundedBox({
-            color: [255, 0, 0],
-            radius: 32
-        })
-        .appendTo(Ox.$body)
-        .options({size: 256})
-        .showOptions();
-    </pre>
-    */
-
-    /*
-    Its also possible to pass objects or other elements as options 
-    */
-    Ox.My.MetaBox = function(options, self) {
-
-        self = self || {};
-        var that = Ox.My.Box({}, self);
-        that.defaults(Ox.extend(that.defaults(), {
-                boxes: []
-            }))
-            .options(options || {});
-
-        self.options.boxes.forEach(function(box) {
-            that.append(box);
-        });
-
-        return that;
-
-    };
-
-    /*
-    Now its time to create some boxes for this demo: 
-    */
-    window.boxes = Ox.My.MetaBox({
-            boxes: [
-                Ox.My.Box({
-                    color: [64, 128, 255]
                 }),
-                Ox.My.RoundedBox({
+                My.$invertibleBox = Ox.My.InvertibleBox({
-                    color: [255, 128, 64]
+                    color: Ox.rgb(h + 120, s, l)
+                }),
+                My.$metaBox = Ox.My.MetaBox({
+                    color: Ox.range(2).map(function(y) {
+                        return Ox.range(3).map(function(x) {
+                            return Ox.rgb(h + x * 60 + y * 180, s, l);
+                        });
+                    })
+                }),
+                My.$pixelBox = Ox.My.PixelBox({
+                    color: Ox.rgb(h + 120, s, l)
                 })
-            ],
+            )
-            size: 384
+            .appendTo(Ox.$body);
-        })
+        My.$imageBox = Ox.My.ImageBox({
-        .appendTo(Ox.$body);
+                image: 'png/pandora32.png',
+                size: [256, 256]
+            })
+            .appendTo(Ox.$body);
+        Ox.forEach(My, function($element, name) {
+            $element.bindEvent({
+                invert: function() {
+                    My.$box.displayText(name[1].toUpperCase() + name.slice(2));
+                }
+            })
+        });
+    }());
+
 });