From 56b4013f0ce5c981eccf184e1cb8e91267be817e Mon Sep 17 00:00:00 2001 From: rolux Date: Mon, 25 Jun 2012 16:39:31 +0200 Subject: [PATCH] update widget example --- .../ui/widget_design_patterns/css/example.css | 7 +- .../ui/widget_design_patterns/js/example.js | 252 ++++++++++++++++-- .../widget_design_patterns/png/pandora32.png | Bin 0 -> 4328 bytes 3 files changed, 241 insertions(+), 18 deletions(-) create mode 100644 examples/ui/widget_design_patterns/png/pandora32.png diff --git a/examples/ui/widget_design_patterns/css/example.css b/examples/ui/widget_design_patterns/css/example.css index 3c00d862..f3cb4ac9 100644 --- a/examples/ui/widget_design_patterns/css/example.css +++ b/examples/ui/widget_design_patterns/css/example.css @@ -1,3 +1,6 @@ -OxMyBox.focused { - box-shadow: inset 0 0 1px black; +.OxMyBox { + float: left; +} +.OxMyInvertibleBox { + cursor: pointer; } \ No newline at end of file diff --git a/examples/ui/widget_design_patterns/js/example.js b/examples/ui/widget_design_patterns/js/example.js index 18671d4a..8dfaca47 100644 --- a/examples/ui/widget_design_patterns/js/example.js +++ b/examples/ui/widget_design_patterns/js/example.js @@ -16,7 +16,7 @@ be accessed from outside, but since `self` itself is an argument of the /* Load the UI module. */ -Ox.load('UI', function() { +Ox.load(['Image', 'UI'], function() { /* Create our own namespace. @@ -56,13 +56,14 @@ Ox.load('UI', function() { var that = Ox.Element({}, self) .defaults({ color: [128, 128, 128], - size: 128 + size: [128, 128] }) .options(options || {}) .update({ color: setColor, size: setSize - }); + }) + .addClass('OxMyBox'); /* The second part of the "constructor" function can be thought of as the @@ -73,8 +74,8 @@ Ox.load('UI', function() { be accessible across all the widget's methods, we can be sure that inside such methods, any local `var` is actually local to the method. */ - self.minSize = 128; - self.maxSize = 384; + self.minSize = 1; + self.maxSize = 256; setColor(); setSize(); @@ -103,12 +104,12 @@ Ox.load('UI', function() { Before setting the size, we make sure the value is between `minSize` and `maxSize`. */ - self.options.size = Ox.limit( - self.options.size, self.minSize, self.maxSize - ); + self.options.size = self.options.size.map(function(value) { + return Ox.limit(value, self.minSize, self.maxSize); + }); that.css({ - height: self.options.size + 'px', - width: self.options.size + 'px' + width: self.options.size[0] + 'px', + height: self.options.size[1] + 'px' }); } @@ -136,14 +137,233 @@ Ox.load('UI', function() { }; + Ox.My.InvertibleBox = function(options, self) { + + self = self || {}; + var that = Ox.My.Box({}, self); + that.defaults(Ox.extend(that.defaults(), { + inverted: false + })) + .options(options || {}) + .update({ + color: setColor, + inverted: setColor + }) + .addClass('OxMyInvertibleBox') + .bindEvent({ + doubleclick: function() { + that.invert(); + } + }); + + self.options.inverted && setColor(); + + function getInvertedColor() { + return self.options.color.map(function(value) { + return 255 - value; + }); + } + + function setColor() { + that.css({backgroundColor: 'rgb(' + ( + self.options.inverted ? getInvertedColor() : self.options.color + ).join(', ') + ')'}); + return false; + } + + that.invert = function() { + that.options({inverted: !self.options.inverted}); + }; + + return that; + + }; + + Ox.My.MetaBox = function(options, self) { + + self = self || {}; + var that = Ox.My.Box(options || {}, self) + .update({color: setColor}); + + self.inverting = false; + self.sizes = [ + Ox.splitInt(self.options.size[0], self.options.color[0].length), + Ox.splitInt(self.options.size[1], self.options.color.length) + ]; + + self.$boxes = self.options.color.map(function(array, y) { + return array.map(function(color, x) { + return Ox.My.InvertibleBox({ + color: color, + size: [self.sizes[0][x], self.sizes[1][y]] + }) + .update({ + inverted: function() { + if (!self.inverting) { + self.inverting = true; + self.$boxes[y][x].invert(); + that.invert(); + return false; + } + } + }) + .appendTo(that); + }); + }); + + function setColor() { + self.$boxes.forEach(function(array, y) { + array.forEach(function($box, x) { + $box.options({color: self.options.color[y][x]}); + }); + }); + } + + that.invert = function() { + self.inverting = true; + self.$boxes.forEach(function(array) { + array.forEach(function($box) { + $box.invert(); + }); + }); + self.inverting = false; + }; + + return that; + + }; + + 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, { + 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 + }) + }); + }); + }); + self.inverting = false; + that.triggerEvent('invert'); + }; + + function getColor() { + return [[ + [self.options.color[0], 0, 0], + [0, self.options.color[1], 0], + [0, 0, self.options.color[2]] + ]]; + } + + function setColor() { + self.$pixel.options({color: getColor()}); + } + + that.invert = function() { + self.$pixel.invert(); + }; + + return that; + + }; + + Ox.My.ImageBox = function(options, self) { + + self = self || {}; + var that = Ox.My.Box(options || {}, self); + + self.inverting = false; + + Ox.Image(self.options.image, function(image) { + var size = image.getSize(); + size = [size.width, size.height]; + self.sizes = size.map(function(value, index) { + return Ox.splitInt(self.options.size[index], value); + }); + self.$boxes = Ox.range(size[1]).map(function(y) { + return Ox.range(size[0]).map(function(x) { + return Ox.My.PixelBox({ + color: image.pixel(x, y).slice(0, 3), + size: [self.sizes[0][x], self.sizes[1][y]] + }) + .bindEvent({ + invert: function() { + if (!self.inverting) { + self.inverting = true; + self.$boxes[y][x].invert(); + that.invert(); + return false; + } + } + }) + .appendTo(that); + }); + }); + }); + + that.invert = function() { + self.inverting = true; + self.$boxes.forEach(function(array) { + array.forEach(function($box) { + $box.invert(); + }); + }); + self.inverting = false; + }; + + return that; + + }; + /* - 
-    Ox.My.Box({color: [255, 0, 0]})
-        .appendTo(Ox.$body)
-        .options({size: 256})
-        .showOptions();
-
+ This is left as an exercise for the reader ;) */ + Ox.My.VideoBox = function(options, self) { + + }; + + window.My = {}; + My.$div = $('
') + .css({float: 'left', width: '256px', height: '256px'}) + .appendTo(Ox.$body); + My.$box = Ox.My.Box({ + color: [255, 0, 0] + }).appendTo(My.$div); + My.$invertibleBox = Ox.My.InvertibleBox({ + color: [0, 0, 255] + }).appendTo(My.$div); + My.$metaBox = Ox.My.MetaBox({ + color: [ + [[255, 0, 0], [255, 255, 0], [0, 255, 0]], + [[0, 255, 255], [0, 0, 255], [255, 0, 255]] + ] + }).appendTo(My.$div); + My.$pixelBox = Ox.My.PixelBox({ + color: [255, 128, 0] + }).appendTo(My.$div); + setTimeout(function() { + My.$imageBox = Ox.My.ImageBox({ + image: 'png/pandora32.png', + size: [256, 256] + }).appendTo(Ox.$body); + }); + + + return; /* Now we create a new widget that subclasses `Ox.My.Box`. diff --git a/examples/ui/widget_design_patterns/png/pandora32.png b/examples/ui/widget_design_patterns/png/pandora32.png new file mode 100644 index 0000000000000000000000000000000000000000..111e03058d26c78b708ef4f734ef74e092043f55 GIT binary patch literal 4328 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 W>1ug-h#8Fl0000