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>
|
</pre>
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
/*
|
||||||
|
Now we create a new widget that subclasses `Ox.My.Box`.
|
||||||
|
*/
|
||||||
Ox.My.RoundedBox = function(options, self) {
|
Ox.My.RoundedBox = function(options, self) {
|
||||||
|
|
||||||
self = self || {};
|
self = self || {};
|
||||||
|
/*
|
||||||
|
This time `that` is an instance of `Ox.My.Box`
|
||||||
|
*/
|
||||||
var that = Ox.My.Box({}, self);
|
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(), {
|
that.defaults(Ox.extend(that.defaults(), {
|
||||||
radius: 16
|
radius: 16
|
||||||
}))
|
}))
|
||||||
|
@ -170,136 +186,24 @@ Ox.load('UI', function() {
|
||||||
return that;
|
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);
|
Its also possible to pass objects or other elements as options
|
||||||
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;
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
Ox.My.MetaBox = function(options, self) {
|
Ox.My.MetaBox = function(options, self) {
|
||||||
|
|
||||||
self = self || {};
|
self = self || {};
|
||||||
Ox.print('MB', options)
|
|
||||||
var that = Ox.My.Box({}, self);
|
var that = Ox.My.Box({}, self);
|
||||||
that.defaults(Ox.extend(that.defaults(), {
|
that.defaults(Ox.extend(that.defaults(), {
|
||||||
boxes: []
|
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: [
|
boxes: [
|
||||||
Ox.My.Box({
|
Ox.My.Box({
|
||||||
color: [64, 128, 255]
|
color: [64, 128, 255]
|
||||||
|
@ -326,5 +233,4 @@ Ox.load('UI', function() {
|
||||||
size: 384
|
size: 384
|
||||||
})
|
})
|
||||||
.appendTo(Ox.$body);
|
.appendTo(Ox.$body);
|
||||||
|
});
|
||||||
});
|
|
||||||
|
|
Loading…
Reference in a new issue