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

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