improve design patterns example
This commit is contained in:
parent
f5782c475b
commit
0b2a94778f
1 changed files with 42 additions and 56 deletions
|
@ -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;
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue