remove dead code from widget example and add a bit of documentation
This commit is contained in:
parent
90ba278630
commit
7a0725bfa4
1 changed files with 35 additions and 129 deletions
|
@ -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);
|
||||
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue