From 544aa7722322ddb474b15653c702967e21dcf97b Mon Sep 17 00:00:00 2001
From: rolux <rolux@rolux.org>
Date: Tue, 26 Jun 2012 17:33:32 +0200
Subject: [PATCH] improve design patterns example

---
 .../ui/widget_design_patterns/js/example.js   | 28 +++++++++++--------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/examples/ui/widget_design_patterns/js/example.js b/examples/ui/widget_design_patterns/js/example.js
index 884f0d8a..b57646ea 100644
--- a/examples/ui/widget_design_patterns/js/example.js
+++ b/examples/ui/widget_design_patterns/js/example.js
@@ -7,7 +7,9 @@ The following examples illustrate the common design pattern for `OxJS` UI
 widgets: an inheritance model that is neither classical nor prototypal, but
 "parasitical" (a term coined by <a
 href="http://www.crockford.com/javascript/inheritance.html">Douglas
-Crockford</a>). In a nutshell, "instances" are created by augmenting other
+Crockford</a>).
+
+In a nutshell, "instances" are created by augmenting other
 instances, but in addition to private members (`var foo`) and public members
 (`that.bar`), they can have shared private members (`self.baz`). `self` cannot
 be accessed from outside, but since `self` itself is an argument of the
@@ -73,7 +75,7 @@ Ox.My.Box = function(options, self) {
         derived from it) provides, on its prototype, all methods of a jQuery
         `$('<div>')`. Chaining works too: If you have `var $d = $('<div>'), $e =
         Ox.Element();`, then `$d.appendTo($e)` returns `$d`, and `$e.append($d)`
-        returns `$e`. If you type Ox.Element() in the console, you will get
+        returns `$e`. If you type `Ox.Element()` in the console, you will get
         something like `[<div class="OxElement"></div>]`. Any widget's `0`
         property is an actual DOM element, and in case you ever need the
         jQuery-wrapped element &mdash; that's the widget's `$element` property.
@@ -227,7 +229,7 @@ Ox.My.InvertibleBox = function(options, self) {
 
     /*
     When `setColor` is invoked as an update handler, returning `false` signals
-    that no other handler should run. Otherwise, the original handler of
+    that no further handlers should run. Otherwise, the original handler of
     `Ox.My.Box` would run next, and revert any inversion we might have done
     here.
     */
@@ -259,8 +261,7 @@ Ox.My.InvertibleBox = function(options, self) {
     </pre>
     */
     that.invert = function() {
-        that.options({inverted: !self.options.inverted});
-        that.triggerEvent('invert');
+        that.options({inverted: !self.options.inverted}).triggerEvent('invert');
         return that;
     };
 
@@ -371,7 +372,7 @@ Ox.My.MetaBox = function(options, self) {
         self.$boxes.forEach(function(array) {
             array.forEach(self.invertBox);
         });
-        that.triggerEvent('invert');
+        that.options({inverted: !self.options.inverted}).triggerEvent('invert');
         return that;
     };
 
@@ -482,7 +483,7 @@ Ox.My.ImageBox = function(options, self) {
     var that = Ox.My.Box({}, self).displayText('Loading...');
     /*
     It's not required to define empty defaults &mdash; omitting them would
-    simply leave them undefined). Still, to add an explicit `null` default is a
+    simply leave them undefined. Still, to add an explicit `null` default is a
     good practice, as it makes it obvious to any reader of our code that
     `Ox.My.ImageBox` expects an `image` option.
     */
@@ -591,7 +592,7 @@ Ox.load(['Image', 'UI'], function() {
     */
     var h = Ox.random(360), s = 1, l = 0.5;
     /*
-    Create a global variable, so that we can play with our widgets in the
+    Create a global variable, so that we can interact with our widgets in the
     console.
     */
     window.My = {};
@@ -631,12 +632,15 @@ Ox.load(['Image', 'UI'], function() {
         .appendTo(Ox.$body);
     /*
     As a last step, we add a handler to the `invert` event of each widgets. It
-    will display the widget name inside the `Ox.My.Box`.
+    will display the widget's name and options inside the `Ox.My.Box`.
     */
-    Ox.forEach(My, function($element, name) {
-        $element.bindEvent({
+    Ox.forEach(My, function($box, name) {
+        $box.bindEvent({
             invert: function() {
-                My.$box.displayText(name[1].toUpperCase() + name.slice(2));
+                My.$box.displayText(
+                    '<b>' + name[1].toUpperCase() + name.slice(2) + '</b><br>'
+                    + JSON.stringify($box.options()).replace(/([,:])/g, '$1 ')
+                );
             }
         });
     });