improve design patterns example
This commit is contained in:
rolux
parent
60c279ed1c
commit
c6bf7ac770
2 changed files with 46 additions and 118 deletions
|
|
@ -1,6 +1,9 @@
|
|||
.OxMyBox {
|
||||
float: left;
|
||||
}
|
||||
.OxMyBox .OxMyText {
|
||||
padding: 4px;
|
||||
}
|
||||
.OxMyInvertibleBox {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -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 = {};
|
||||
My.$div = $('<div>')
|
||||
.css({float: 'left', width: '256px', height: '256px'})
|
||||
.appendTo(Ox.$body);
|
||||
My.$box = Ox.My.Box({
|
||||
color: [255, 0, 0]
|
||||
}).appendTo(My.$div);
|
||||
My.$invertibleBox = Ox.My.InvertibleBox({
|
||||
color: [0, 0, 255]
|
||||
}).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]
|
||||
(function() {
|
||||
var h = Ox.random(360), s = 1, l = 0.5;
|
||||
window.My = {};
|
||||
My.$backgroundBox = Ox.My.Box({
|
||||
size: [256, 256]
|
||||
})
|
||||
.append(
|
||||
My.$box = Ox.My.Box({
|
||||
color: Ox.rgb(h, s, l)
|
||||
}),
|
||||
Ox.My.RoundedBox({
|
||||
color: [255, 128, 64]
|
||||
My.$invertibleBox = Ox.My.InvertibleBox({
|
||||
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);
|
||||
)
|
||||
.appendTo(Ox.$body);
|
||||
My.$imageBox = Ox.My.ImageBox({
|
||||
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));
|
||||
}
|
||||
})
|
||||
});
|
||||
}());
|
||||
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue