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-25 17:54:18 +02:00
parent f5782c475b
commit 0b2a94778f
1 changed files with 42 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -182,7 +182,11 @@ Ox.load(['Image', 'UI'], function() {
Ox.My.MetaBox = function(options, self) {
self = self || {};
var that = Ox.My.Box(options || {}, self)
var that = Ox.My.Box({}, self);
that.defaults(Ox.extend(that.defaults(), {
color: [[[128, 128, 128]]]
}))
.options(options || {})
.update({color: setColor});
self.inverting = false;
@ -199,12 +203,7 @@ Ox.load(['Image', 'UI'], function() {
})
.update({
inverted: function() {
if (!self.inverting) {
self.inverting = true;
self.$boxes[y][x].invert();
that.invert();
return false;
}
return that.invert(x, y);
}
})
.appendTo(that);
@ -219,14 +218,22 @@ Ox.load(['Image', 'UI'], function() {
});
}
that.invert = function() {
self.inverting = true;
self.$boxes.forEach(function(array) {
array.forEach(function($box) {
$box.invert();
self.invertBox = function($box) {
$box.invert();
};
that.invert = function(x, y) {
if (!self.inverting) {
self.inverting = true;
arguments.length && self.$boxes[y][x].invert();
self.$boxes.forEach(function(array) {
array.forEach(self.invertBox);
});
});
self.inverting = false;
self.inverting = false;
that.triggerEvent('invert')
return false;
}
return that; // fixme
};
return that;
@ -236,29 +243,23 @@ Ox.load(['Image', 'UI'], function() {
Ox.My.PixelBox = function(options, self) {
self = self || {};
var that = Ox.My.Box(options || {}, self)
.update({
color: setColor
});
self.$pixel = Ox.My.MetaBox(Ox.extend(options, {
self.options = Ox.extend(Ox.My.Box().defaults(), options || {});
var that = Ox.My.MetaBox(Ox.extend(self.options, {
color: getColor()
}), self)
.appendTo(that);
self.$pixel.invert = function() {
self.inverting = true;
self.$boxes.forEach(function(array) {
array.forEach(function($box, x) {
$box.options({
color: $box.options('color').map(function(value, i) {
return i == x ? 255 - value : value
})
});
});
.update({
color: function() {
setColor();
return false;
}
});
self.invertBox = function($box, x) {
$box.options({
color: $box.options('color').map(function(value, i) {
return i == x ? 255 - value : value
})
});
self.inverting = false;
that.triggerEvent('invert');
};
function getColor() {
@ -273,10 +274,6 @@ Ox.load(['Image', 'UI'], function() {
self.$pixel.options({color: getColor()});
}
that.invert = function() {
self.$pixel.invert();
};
return that;
};
@ -284,9 +281,11 @@ Ox.load(['Image', 'UI'], function() {
Ox.My.ImageBox = function(options, self) {
self = self || {};
var that = Ox.My.Box(options || {}, self);
self.inverting = false;
var that = Ox.My.Box({}, self)
that.defaults({
image: null
})
.options(options || {});
Ox.Image(self.options.image, function(image) {
var size = image.getSize();
@ -302,12 +301,7 @@ Ox.load(['Image', 'UI'], function() {
})
.bindEvent({
invert: function() {
if (!self.inverting) {
self.inverting = true;
self.$boxes[y][x].invert();
that.invert();
return false;
}
return that.invert(x, y);
}
})
.appendTo(that);
@ -315,15 +309,7 @@ Ox.load(['Image', 'UI'], function() {
});
});
that.invert = function() {
self.inverting = true;
self.$boxes.forEach(function(array) {
array.forEach(function($box) {
$box.invert();
});
});
self.inverting = false;
};
that.invert = Ox.My.MetaBox(self.options, self).invert;
return that;