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

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

Browse source
This commit is contained in:
j 2012-06-18 17:57:52 +02:00
parent 90ba278630
commit 7a0725bfa4
1 changed files with 35 additions and 129 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

162
examples/widget_design_patterns/js/example.js
View file

@ -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>
Ox.My.RoundedBox({
color: [255, 0, 0],
radius: 32
})
.appendTo(Ox.$body)
.options({size: 256})
.showOptions();
</pre>
*/
window.myBox = Ox.My.Box().appendTo(Ox.$body);
window.myRoundedBox = Ox.My.RoundedBox().appendTo(Ox.$body);
return;
Ox.My.Box = function(options, self) {
self = self || {};
var that = Ox.Element('<div>', self)
.defaults({
color: [128, 128, 128],
size: 128
})
.options(options || {})
.addClass('OxMyBox OxMonospace')
.css({
color: 'white',
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);
});