remove dead code from widget example and add a bit of documentation

examples/widget_design_patterns/js/example.js

@@ -145,10 +145,26 @@ Ox.load('UI', function() {
     </pre>
     */
 
+    /*
+    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
             }))
@@ -170,136 +186,24 @@ Ox.load('UI', function() {
         return that;
 
     };
-
+    /*
-
+    <pre>
-    window.myBox = Ox.My.Box().appendTo(Ox.$body);
+    Ox.My.RoundedBox({
-    window.myRoundedBox = Ox.My.RoundedBox().appendTo(Ox.$body);
+            color: [255, 0, 0],
-    return;
+            radius: 32
-
-    Ox.My.Box = function(options, self) {
-
-        self = self || {};
-        var that = Ox.Element('<div>', self)
-            .defaults({
-                color: [128, 128, 128],
-                size: 128
         })
-            .options(options || {})
+        .appendTo(Ox.$body)
-            .addClass('OxMyBox OxMonospace')
+        .options({size: 256})
-            .css({
+        .showOptions();
-                color: 'white',
+    </pre>
-                padding: '16px',
+    */
-                textShadow: '1px 1px 1px black'
-            })
-            .bindEvent({
-                anyclick: focus,
-                key_0: reset,
-                key_equal: function() {
-                    Ox.print('+', self.options.size)
-                    setSize(self.options.size + 16, true);
-                },
-                key_minus: function() {
-                    setSize(self.options.size - 16, true);
-                }
-            });
-
-        self.initialSize = self.options.size;
-        self.minSize = 128;
-        self.maxSize = 384;
-
-        setColor();
-        setSize(self.options.size);
-        showOptions();
-
-        function focus(e) {
-            Ox.print(e.target);
-            if (e.target == that.$element[0]) {
-                that.gainFocus();
-            }
-        }
-
-        function setColor() {
-            that.css({
-                backgroundColor: 'rgb(' + self.options.color.join(', ') + ')',
-            });
-        }
-
-        function setSize(size, animate) {
-            var css;
-            self.options.size = Ox.limit(size, self.minSize, self.maxSize);
-            css = {
-                height: self.options.size + 'px',
-                width: self.options.size + 'px',
-            };
-            Ox.print('SET SIZE', size, animate, self.minSize, self.maxSize, css)
-            if (animate) {
-                that.stop().animate(css, 100, showOptions);
-            } else {
-                that.css(css);
-            }
-        }
-
-        function showOptions() {
-            try {
-                that.html(JSON.stringify(self.options).replace(/([,:])/g, '$1 '));
-            } catch(e) {}
-        }
-
-        function reset() {
-            self.options = self.initialOptions;
-            showOptions();
-        }
-
-        self.setOption = function(key, value) {
-            if (key == 'color') {
-                setColor();
-            } else if (key == 'size') {
-                setSize(value);
-            }
-            showOptions();
-        };
-
-        return that;
-
-    };
-
-    Ox.My.RoundedBox = function(options, self) {
-
-        self = self || {};
-        var that = Ox.My.Box({}, self);
-        that.defaults(Ox.extend(that.defaults(), {
-                radius: 16
-            }))
-            .options(options || {});
-
-        setRadius();
-
-        function setRadius() {
-            that.css({
-                MozBorderRadius: self.options.radius + 'px',
-                OBorderRadius: self.options.radius + 'px',
-                WebkitBorderRadius: self.options.radius + 'px'
-            });
-        }
-
-        self.setSuperOption = self.setOption;
-
-        self.setOption = function(key, value) {
-            if (key == 'radius') {
-                setRadius();
-            } else {
-                self.setSuperOption(key, value);
-            }
-        }
-
-        return that;
-
-    };
 
+    /*
+    Its also possible to pass objects or other elements as options 
+    */
     Ox.My.MetaBox = function(options, self) {
 
         self = self || {};
-        Ox.print('MB', options)
         var that = Ox.My.Box({}, self);
         that.defaults(Ox.extend(that.defaults(), {
                 boxes: []
@@ -314,7 +218,10 @@ Ox.load('UI', function() {
 
     };
 
-    Ox.My.MetaBox({
+    /*
+    Now its time to create some boxes for this demo: 
+    */
+    window.boxes = Ox.My.MetaBox({
             boxes: [
                 Ox.My.Box({
                     color: [64, 128, 255]
@@ -326,5 +233,4 @@ Ox.load('UI', function() {
             size: 384
         })
         .appendTo(Ox.$body);
-
 });