0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

improve design patterns example

Browse source
This commit is contained in:
rolux 2012-06-26 17:33:32 +02:00
parent fdb1348b39
commit 544aa77223
1 changed files with 16 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
examples/ui/widget_design_patterns/js/example.js
View file

@ -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 ')
);
}
});
});