init
This commit is contained in:
Rolux
commit
5b8b31271c
87 changed files with 73788 additions and 0 deletions
BIN
demos/.DS_Store
vendored
Normal file
BIN
demos/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
demos/geo/.DS_Store
vendored
Normal file
BIN
demos/geo/.DS_Store
vendored
Normal file
Binary file not shown.
191
demos/geo/geo.html
Normal file
191
demos/geo/geo.html
Normal file
|
|
@ -0,0 +1,191 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
.map {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 1024px;
|
||||
height: 640px;
|
||||
margin: auto;
|
||||
}
|
||||
.flag {
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin-left: -4px;
|
||||
margin-top: -4px;
|
||||
-moz-border-radius: 1px;
|
||||
-webkit-border-radius: 1px;
|
||||
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 128);
|
||||
}
|
||||
.flag.hover,
|
||||
.flag:hover {
|
||||
width: 16px;
|
||||
height: 15px;
|
||||
margin-left: -8px;
|
||||
margin-top: -8px;
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 128);
|
||||
z-index: 1000;
|
||||
}
|
||||
</style>
|
||||
<script src="../../build/js/jquery-1.3.2.js"></script>
|
||||
<script src="../../build/js/ox.js"></script>
|
||||
<script src="../../build/js/ox.data.js"></script>
|
||||
<script src="../../build/js/ox.geo.js"></script>
|
||||
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
var $body = $("body"),
|
||||
places = Ox.getCountries(true);
|
||||
var $map = $("<img/>")
|
||||
.attr({
|
||||
src: "map.png"
|
||||
})
|
||||
.addClass("map")
|
||||
.appendTo("body")
|
||||
.click(function(e) {
|
||||
var offset = $(this).offset(),
|
||||
left = offset.left,
|
||||
top = offset.top,
|
||||
width = $(this).width(),
|
||||
height = $(this).height(),
|
||||
latLng = Ox.getLatLng((e.clientX - left) / width, (e.clientY - top) / height);
|
||||
Ox.getPlacemarks(latLng.lat, latLng.lng, function(data) {
|
||||
var length = data.results.length;
|
||||
console.log(data)
|
||||
if (length && data.results[length - 1].types[0] == "country") {
|
||||
var $img = $("#" + data.results[length - 1].address_components[0].short_name);
|
||||
if (!$img.length) {
|
||||
Ox.getPlacemarks(data.results[length - 1].formatted_address, function(data) {
|
||||
if (data.results.length) {
|
||||
var location = data.results[0].geometry.location,
|
||||
xy = Ox.getXY(location.lat(), location.lng());
|
||||
//console.log(+new Date, place.name, location, xy);
|
||||
var $img = $("<img/>")
|
||||
.attr({
|
||||
id: data.results[0].address_components[0].short_name,
|
||||
src: "../../tools/flags/png/square/" + data.results[0].address_components[0].short_name + ".png",
|
||||
title: data.results[0].formatted_address
|
||||
})
|
||||
.addClass("flag hover")
|
||||
.css({
|
||||
left: left + (xy.x * width) + "px",
|
||||
top: top + (xy.y * height) + "px"
|
||||
})
|
||||
.mouseenter(function() {
|
||||
$(this).css({
|
||||
zIndex: Ox.uid()
|
||||
});
|
||||
})
|
||||
.dblclick(function() {
|
||||
$(this).remove();
|
||||
})
|
||||
.appendTo($body);
|
||||
setTimeout(function() {
|
||||
$img.removeClass("hover");
|
||||
}, 1000);
|
||||
} else {
|
||||
//console.log("no results", place, data)
|
||||
}
|
||||
});
|
||||
} else {
|
||||
$img.addClass("hover");
|
||||
setTimeout(function() {
|
||||
$img.removeClass("hover");
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
// /*
|
||||
var aliases = {
|
||||
"Ascension Island": "Ascension Island, Saint Helena",
|
||||
"England": "England, United Kingdom",
|
||||
"Georgia": "Georgia, Europe",
|
||||
"Holy See": "Vatican City",
|
||||
"Palestine": "West Bank",
|
||||
"Saint Martin": "Sint Maarten",
|
||||
"Scotland": "Scotland, United Kingdom",
|
||||
"Svalbard and Jan Mayen": "Svalbard",
|
||||
"Wales": "Wales, United Kingdom",
|
||||
"Yugoslavia": "Serbia"
|
||||
};
|
||||
var json = [];
|
||||
setTimeout(function() {
|
||||
getPlacemarks(places);
|
||||
}, 1000);
|
||||
function getPlacemarks(places) {
|
||||
var place = places.shift();
|
||||
Ox.getPlacemarks(aliases[place.name] || place.name, function(data) {
|
||||
if (data.results.length) {
|
||||
var location = data.results[0].geometry.location,
|
||||
xy = Ox.getXY(location.lat(), location.lng()),
|
||||
offset = $map.offset(),
|
||||
left = offset.left,
|
||||
top = offset.top,
|
||||
width = $map.width(),
|
||||
height = $map.height();
|
||||
$("<img/>")
|
||||
.attr({
|
||||
src: "../../tools/flags/png/square/" + (place.flag.indexOf("-") == 2 ? place.flag.substr(0, 2) + "/" : "") + place.flag + ".png",
|
||||
title: place.code + " " + place.name
|
||||
})
|
||||
.addClass("flag")
|
||||
.css({
|
||||
left: left + (xy.x * width) + "px",
|
||||
top: top + (xy.y * height) + "px"
|
||||
})
|
||||
.mouseenter(function() {
|
||||
$(this).css({
|
||||
zIndex: Ox.uid()
|
||||
});
|
||||
})
|
||||
.appendTo($body);
|
||||
d = {
|
||||
name: data.results[0].formatted_address,
|
||||
center: {
|
||||
lat: data.results[0].geometry.viewport.getCenter().lat().toFixed(10),
|
||||
lng: data.results[0].geometry.viewport.getCenter().lng().toFixed(10)
|
||||
},
|
||||
southWest: {
|
||||
lat: data.results[0].geometry.viewport.getSouthWest().lat().toFixed(10),
|
||||
lng: data.results[0].geometry.viewport.getSouthWest().lng().toFixed(10)
|
||||
},
|
||||
northEast: {
|
||||
lat: data.results[0].geometry.viewport.getNorthEast().lat().toFixed(10),
|
||||
lng: data.results[0].geometry.viewport.getNorthEast().lng().toFixed(10)
|
||||
}
|
||||
};
|
||||
console.log(JSON.stringify(d))
|
||||
json.push(d);
|
||||
} else {
|
||||
console.log("no results", place, data)
|
||||
}
|
||||
});
|
||||
if (places.length) {
|
||||
setTimeout(function() {
|
||||
getPlacemarks(places);
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
$("body").append($("<div/>").html(JSON.stringify(json)));
|
||||
// */
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
BIN
demos/geo/map.png
Normal file
BIN
demos/geo/map.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
22
demos/png/index.html
Normal file
22
demos/png/index.html
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<style>
|
||||
</style>
|
||||
<script type="text/javascript" src="../../build/js/jquery-1.3.2.js"></script>
|
||||
<script type="text/javascript" src="../../build/js/ox.js"></script>
|
||||
<script type="text/javascript" src="ox.png.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
var png = new Ox.PNG("http://khm0.google.com/kh/v=46&x=0&y=0&z=0");
|
||||
png.load(function() {
|
||||
console.log(png.getChunks());
|
||||
console.log(png.getSize());
|
||||
png.appendTo("body")
|
||||
})
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
125
demos/png/ox.png.js
Normal file
125
demos/png/ox.png.js
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
Ox = Ox || {};
|
||||
|
||||
(function() {
|
||||
|
||||
Ox.PNG = function(url) {
|
||||
var that = this,
|
||||
self = {};
|
||||
self.getCanvas = function() {
|
||||
var canvas = $("<canvas/>")
|
||||
.attr({
|
||||
width: that.width,
|
||||
height: that.height
|
||||
})[0],
|
||||
context = canvas.getContext("2d");
|
||||
context.drawImage(self.$png[0], 0, 0);
|
||||
return {
|
||||
canvas: canvas,
|
||||
context: context
|
||||
};
|
||||
};
|
||||
self.getChunks = function() {
|
||||
var data = self.getData().substr(8),
|
||||
length, chunks = [];
|
||||
while (data) {
|
||||
length = data.charCodeAt(1) << 16 |
|
||||
data.charCodeAt(2) << 8 |
|
||||
data.charCodeAt(3);
|
||||
chunks.push({
|
||||
length: length,
|
||||
type: data.substr(4, 4),
|
||||
data: data.substr(8, length),
|
||||
crc: data.substr(length + 8, 4)
|
||||
});
|
||||
data = data.substr(length + 12);
|
||||
}
|
||||
return chunks;
|
||||
}
|
||||
self.getData = function() {
|
||||
return atob(self.getURL().split(",")[1]);
|
||||
}
|
||||
self.getDimensions = function() {
|
||||
var dimensions;
|
||||
self.$png
|
||||
.hide()
|
||||
.appendTo($("body"));
|
||||
dimensions = {
|
||||
width: self.$png.width(),
|
||||
height: self.$png.height()
|
||||
}
|
||||
self.$png.remove();
|
||||
return dimensions;
|
||||
}
|
||||
self.getHeader = function() {
|
||||
return self.getData().substr(0, 8);
|
||||
}
|
||||
self.getURL = function() {
|
||||
return that.canvas.toDataURL();
|
||||
}
|
||||
self.onLoad = function($png, callback) {
|
||||
self.$png = $png;
|
||||
var dimensions = self.getDimensions();
|
||||
that.width = dimensions.width;
|
||||
that.height = dimensions.height;
|
||||
var canvas = self.getCanvas();
|
||||
that.context = canvas.context;
|
||||
that.canvas = canvas.canvas;
|
||||
console.log(self.getChunks())
|
||||
callback();
|
||||
};
|
||||
that.addChunk = function(options) {
|
||||
options = $.extend({
|
||||
data: "",
|
||||
type: "",
|
||||
position: -1
|
||||
}, options);
|
||||
var len = options.data.length,
|
||||
randomType = !options.type,
|
||||
chunks = self.getChunks();
|
||||
chunk = {
|
||||
length: 0,
|
||||
type: options.type || "",
|
||||
data: options.data,
|
||||
crc: ""
|
||||
},
|
||||
data = "";
|
||||
i;
|
||||
// 0 1 2 3 4 ... length: 6
|
||||
// IHDR IDAT IDAT IDAT ifOo IEND
|
||||
options.position = options.position < 0 ?
|
||||
Math.max(chunks.length - 1 - options.position, 0) :
|
||||
Math.min(options.position, chunks.length - 2);
|
||||
for (i = 0; i < 4; i++) {
|
||||
if (randomType) {
|
||||
// format abCd (ancillary, private, (reserved), safe-to-copy)
|
||||
chunk.type += String.fromCharCode((i == 2 ? 65 : 97) + Math.random() * 26);
|
||||
}
|
||||
chunk.length += String.fromCharCode(len >> ((3 - i) * 8) & 255);
|
||||
chunk.crc += String.fromCharCode(Math.random() * 256);
|
||||
}
|
||||
chunks.splice(position + 1, 0, chunk);
|
||||
// data = ...
|
||||
}
|
||||
that.appendTo = function(selector) {
|
||||
$("<img/>")
|
||||
.attr({
|
||||
src: self.getURL()
|
||||
})
|
||||
.appendTo(selector);
|
||||
}
|
||||
that.getSize = function() {
|
||||
return self.getData().length;
|
||||
}
|
||||
that.load = function(callback) {
|
||||
$("<img/>")
|
||||
.attr({
|
||||
src: url
|
||||
})
|
||||
.load(function() {
|
||||
self.onLoad($(this), callback);
|
||||
});
|
||||
}
|
||||
return that;
|
||||
};
|
||||
|
||||
})();
|
||||
BIN
demos/png/testPlainPS.png
Normal file
BIN
demos/png/testPlainPS.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
245
demos/test/index.html
Normal file
245
demos/test/index.html
Normal file
|
|
@ -0,0 +1,245 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<link rel="stylesheet" type="text/css" href="../../build/css/ox.ui.css"/>
|
||||
<style>
|
||||
input {
|
||||
//float: left;
|
||||
//margin: 4px 0 4px 0;
|
||||
}
|
||||
.top {
|
||||
margin: 4px;
|
||||
font-family: Monaco, Consolas;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
}
|
||||
.bottom {
|
||||
margin: 7px;
|
||||
font-family: Monaco, Consolas;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
}
|
||||
.margin {
|
||||
float: left;
|
||||
margin: 4px 2px 4px 2px;
|
||||
}
|
||||
.padding {
|
||||
float: left;
|
||||
margin: 4px 0 4px 0;
|
||||
padding: 0 4px 0 4px;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript" src="../../build/js/jquery-1.3.2.js"></script>
|
||||
<script type="text/javascript" src="../../build/js/ox.js"></script>
|
||||
<script type="text/javascript" src="../../build/js/ox.ui.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
var size = window.location.hash.substr(1) || "small",
|
||||
$body = $("body"),
|
||||
$toolbars = [];
|
||||
|
||||
var sidePanel = new Ox.Panel();
|
||||
var mainPanel = new Ox.Panel().css({
|
||||
//borderLeft: "1px solid rgb(160, 160, 160)"
|
||||
});
|
||||
var middleSplitPanel = Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
element: sidePanel,
|
||||
size: 256
|
||||
},
|
||||
{
|
||||
element: mainPanel
|
||||
}
|
||||
],
|
||||
orientation: "horizontal"
|
||||
})/*.css({
|
||||
borderTop: "1px solid rgb(160, 160, 160)",
|
||||
borderBottom: "1px solid rgb(160, 160, 160)"
|
||||
})*/;
|
||||
|
||||
var topPanel = Ox.Toolbar({size: "small"})
|
||||
.css({
|
||||
zIndex: 2,
|
||||
MozBoxShadow: "0 0 4px rgb(0, 0, 0)",
|
||||
WebkitBoxShadow: "0 0 4px rgb(0, 0, 0)"
|
||||
})
|
||||
.append(
|
||||
$("<div/>")
|
||||
.addClass("top")
|
||||
.html("Ox.js")
|
||||
);
|
||||
var bottomPanel = Ox.Toolbar({size: "small"})
|
||||
.css({
|
||||
zIndex: 2,
|
||||
MozBoxShadow: "0 0 4px rgb(0, 0, 0)",
|
||||
WebkitBoxShadow: "0 0 4px rgb(0, 0, 0)"
|
||||
})
|
||||
.append(
|
||||
$("<div/>")
|
||||
.addClass("bottom")
|
||||
.html("Ox.js - A JavaScript Library for Web Applications")
|
||||
);
|
||||
var mainSplitPanel = Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
element: topPanel,
|
||||
size: 24
|
||||
},
|
||||
{
|
||||
element: middleSplitPanel
|
||||
},
|
||||
{
|
||||
element: bottomPanel,
|
||||
size: 24
|
||||
}
|
||||
],
|
||||
orientation: "vertical"
|
||||
}).appendTo($body);
|
||||
|
||||
var oxjsPanel = new Ox.CollapsePanel({
|
||||
title: "ox.js"
|
||||
}).appendTo(sidePanel);
|
||||
oxjsPanel.$content.html("Core<br/>Array/Object<br/>Color<br/>Date<br/>Format<br/>Math<br/>String<br/>Type").click(function() {$(this).append("<div>foo</div>")})
|
||||
var oxdatajsPanel = new Ox.CollapsePanel({
|
||||
title: "ox.data.js"
|
||||
}).appendTo(sidePanel);
|
||||
oxdatajsPanel.$content.html("HTML<br/>ISO<br/>Unicode")
|
||||
var oxuijsPanel = new Ox.CollapsePanel({
|
||||
title: "ox.ui.js"
|
||||
}).appendTo(sidePanel);
|
||||
oxuijsPanel.$content.html("Core<br/>Bars<br/>Forms<br/>Panels")
|
||||
|
||||
$tabbar = Ox.Tabbar({
|
||||
values: ["Documentation", "Demo", "Source Code"]
|
||||
}).appendTo(mainPanel);
|
||||
|
||||
for (var i = 0; i < 5; i++) {
|
||||
$toolbars[i] = Ox.Toolbar({size: i ? "small" : "medium"}).appendTo(mainPanel);
|
||||
}
|
||||
$toolbars[5] = Ox.Bar({size: 24}).appendTo(mainPanel);
|
||||
|
||||
Ox.Button({
|
||||
size: "medium",
|
||||
type: "text",
|
||||
value: "Switch Theme"
|
||||
}).addClass("margin").click(switchTheme).appendTo($toolbars[0]);
|
||||
Ox.Button({
|
||||
size: size,
|
||||
type: "text",
|
||||
value: "Button"
|
||||
}).addClass("margin").appendTo($toolbars[1]);
|
||||
///*
|
||||
Ox.Button({
|
||||
size: "xsmall",
|
||||
type: "text",
|
||||
value: ['Button, value=["foo", "bar"] (foo)', 'Button, value=["foo", "bar"] (bar)']
|
||||
}).addClass("margin").css({width: "256px"}).appendTo($toolbars[1]);
|
||||
//*/
|
||||
Ox.Button({
|
||||
selectable: true,
|
||||
size: size,
|
||||
type: "text",
|
||||
value: "Button, selectable=true"
|
||||
}).addClass("margin").appendTo($toolbars[1]);
|
||||
Ox.ButtonGroup({
|
||||
values: ["Button Group (0)", "Button Group (1)", "Button Group (2)"]
|
||||
}).addClass("padding").appendTo($toolbars[1]);
|
||||
$.each(["close", "add", "remove", ["play", "pause"]], function(i, v) {
|
||||
Ox.Button({
|
||||
size: size,
|
||||
type: "image",
|
||||
value: v
|
||||
})
|
||||
.addClass("margin")
|
||||
.mousedown(function() {
|
||||
clickButton($(this).val())
|
||||
})
|
||||
.appendTo($toolbars[2]);
|
||||
});
|
||||
///*
|
||||
Ox.Button({
|
||||
size: size,
|
||||
type: "text",
|
||||
value: "Enabled"
|
||||
}).addClass("margin").appendTo($toolbars[2]);
|
||||
Ox.Button({
|
||||
disabled: true,
|
||||
size: size,
|
||||
type: "text",
|
||||
value: "Disabled"
|
||||
}).addClass("margin").appendTo($toolbars[2]);
|
||||
//*/
|
||||
Ox.ButtonGroup({
|
||||
selectable: true,
|
||||
selected: 0,
|
||||
size: "small",
|
||||
type: "image",
|
||||
values: ["close", "add", "remove"]
|
||||
}).addClass("padding").appendTo($toolbars[2]);
|
||||
///*
|
||||
Ox.Input({
|
||||
placeholder: "Placeholder",
|
||||
size: size
|
||||
}).addClass("margin").appendTo($toolbars[3]);
|
||||
var range = Ox.Range({
|
||||
max: 10,
|
||||
min: 0,
|
||||
size: 200,
|
||||
step: 0.1,
|
||||
value: 0
|
||||
}).addClass("margin").appendTo($toolbars[4])
|
||||
var input = Ox.Input({
|
||||
value: 0
|
||||
})
|
||||
.addClass("margin")
|
||||
.css({
|
||||
width: "32px"
|
||||
})
|
||||
.subscribe("change." + range.id, update)
|
||||
.appendTo($toolbars[4]);
|
||||
function update() {
|
||||
//console.log("update", range.options("value"))
|
||||
/*
|
||||
// fixme: make this work
|
||||
input.options({
|
||||
value: range.options("value")
|
||||
});
|
||||
*/
|
||||
input.val(range.options("value").toFixed(1))
|
||||
}
|
||||
//console.log("binding to OxRange" + range.id + "Change")
|
||||
Ox.Range({
|
||||
animate: true,
|
||||
arrows: true,
|
||||
max: 300,
|
||||
min: 100,
|
||||
size: 202,
|
||||
step: 100,
|
||||
thumbValue: true,
|
||||
trackImages: ["png/r.png", "png/g.png", "png/b.png"],
|
||||
value: 100
|
||||
}).addClass("margin").appendTo($toolbars[4])
|
||||
Ox.Button({
|
||||
selectable: true,
|
||||
size: size,
|
||||
type: "text",
|
||||
value: "Foo"
|
||||
}).addClass("margin").appendTo(mainPanel);
|
||||
//*/
|
||||
function switchTheme() {
|
||||
if (Ox.theme() == "classic") {
|
||||
Ox.theme("modern");
|
||||
} else {
|
||||
Ox.theme("classic");
|
||||
}
|
||||
}
|
||||
function clickButton(val) {
|
||||
// console.log(val);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
BIN
demos/test/png/b.png
Normal file
BIN
demos/test/png/b.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
demos/test/png/g.png
Normal file
BIN
demos/test/png/g.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
demos/test/png/r.png
Normal file
BIN
demos/test/png/r.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
9
demos/test/test.html
Normal file
9
demos/test/test.html
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script type="text/javascript" src="../../build/js/jquery-1.3.2.js"></script>
|
||||
<script type="text/javascript" src="test.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
232
demos/test/test.js
Normal file
232
demos/test/test.js
Normal file
|
|
@ -0,0 +1,232 @@
|
|||
/*
|
||||
ox.js
|
||||
*/
|
||||
Ox = {
|
||||
version: "0.1.2"
|
||||
};
|
||||
(function() {
|
||||
var _ = {
|
||||
uid: 0
|
||||
};
|
||||
Ox.makeObject = function() {
|
||||
/*
|
||||
>>> Ox.makeObject("foo", "bar").foo
|
||||
bar
|
||||
>>> Ox.makeObject({foo: "bar"}).foo
|
||||
bar
|
||||
*/
|
||||
var obj = {};
|
||||
if (arguments.length == 1) {
|
||||
obj = arguments[0];
|
||||
} else {
|
||||
obj[arguments[0]] = arguments[1]
|
||||
}
|
||||
return obj;
|
||||
}
|
||||
Ox.uid = function() {
|
||||
/*
|
||||
returns a unique id
|
||||
*/
|
||||
return _.uid++;
|
||||
}
|
||||
})();
|
||||
/*
|
||||
ox.ui.js
|
||||
*/
|
||||
(function() {
|
||||
var _ = {
|
||||
elements: [],
|
||||
jQueryFunctions: function() {
|
||||
var functions = [],
|
||||
$element = $("<div/>");
|
||||
delete $element.length;
|
||||
$.each($element, function(k, v) {
|
||||
if (typeof v == "function") {
|
||||
functions.push(k);
|
||||
}
|
||||
});
|
||||
return functions.sort();
|
||||
}()
|
||||
};
|
||||
Ox.Widget = function(options, self) {
|
||||
|
||||
// construct
|
||||
var self = self || {},
|
||||
that = this;
|
||||
|
||||
// init
|
||||
(function() {
|
||||
if (typeof options == "string") {
|
||||
options = {
|
||||
element: options
|
||||
};
|
||||
}
|
||||
that.ox = Ox.version;
|
||||
that.id = Ox.uid();
|
||||
that.$element = $("<" + (options.element || "div") + "/>")
|
||||
.data("ox", that.id);
|
||||
_.elements[that.id] = that;
|
||||
wrapjQuery();
|
||||
})();
|
||||
|
||||
// private
|
||||
function wrapjQuery() {
|
||||
$.each(_.jQueryFunctions, function(i, v) {
|
||||
that[v] = function() {
|
||||
var args = arguments,
|
||||
length = args.length,
|
||||
id, ret;
|
||||
$.each(args, function(i, v) {
|
||||
// if an ox object was passed
|
||||
// then pass its $element instead
|
||||
// so we can do jqObj.jqFn(oxObj)
|
||||
if (v.ox) {
|
||||
args[i] = v.$element;
|
||||
}
|
||||
});
|
||||
// why does this not work?
|
||||
// ret = that.$element[v].apply(this, arguments);
|
||||
if (length == 0) {
|
||||
ret = that.$element[v]();
|
||||
} else if (length == 1) {
|
||||
ret = that.$element[v](args[0]);
|
||||
} else if (length == 2) {
|
||||
ret = that.$element[v](args[0], args[1]);
|
||||
} else if (length == 3) {
|
||||
ret = that.$element[v](args[0], args[1], args[2]);
|
||||
} else if (length == 4) {
|
||||
ret = that.$element[v](args[0], args[1], args[2], args[3]);
|
||||
}
|
||||
// if the $element of an ox object was returned
|
||||
// then return the ox object instead
|
||||
// so we can do oxObj.jqFn().oxFn()
|
||||
return ret.jquery && oxui.elements[id = ret.data("ox")] ?
|
||||
oxui.elements[id] : ret;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// shared
|
||||
self.onChange = function() {
|
||||
/*
|
||||
self.onChange(option, value)
|
||||
is called when an option changes
|
||||
to be implemented by widget
|
||||
*/
|
||||
};
|
||||
|
||||
// public
|
||||
that.defaults = function(defaults) {
|
||||
/*
|
||||
that.defaults({foo: x}) sets self.defaults
|
||||
*/
|
||||
self.defaults = defaults;
|
||||
return that;
|
||||
}
|
||||
that.options = function() {
|
||||
/*
|
||||
that.options() returns self.options
|
||||
that.options("foo") returns self.options.foo
|
||||
that.options("foo", x) sets self.options.foo,
|
||||
returns that
|
||||
that.options({foo: x, bar: y}) sets self.options.foo
|
||||
and self.options.bar,
|
||||
returns that
|
||||
*/
|
||||
var length = arguments.length,
|
||||
args, ret;
|
||||
if (length == 0) {
|
||||
// options()
|
||||
ret = self.options;
|
||||
} else if (length == 1 && typeof arguments[0] == "string") {
|
||||
// options(str)
|
||||
ret = self.options[arguments[0]]
|
||||
} else {
|
||||
// options (str, val) or options({str: val, ...})
|
||||
// translate (str, val) to ({str: val})
|
||||
args = Ox.makeObject.apply(that, arguments);
|
||||
// if options have not been set, extend defaults,
|
||||
// otherwise, extend options
|
||||
self.options = $.extend(
|
||||
self.options || self.defaults, args);
|
||||
$.each(args, function(k, v) {
|
||||
self.onChange(k, v);
|
||||
});
|
||||
ret = that;
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
|
||||
// return
|
||||
return that;
|
||||
|
||||
}
|
||||
/*
|
||||
Widget Design Pattern
|
||||
|
||||
Ox.MyWidget = function(options, self) {
|
||||
|
||||
// construct
|
||||
var self = self || {},
|
||||
that = new Ox.Widget({...}, self)
|
||||
.defaults({...})
|
||||
.options(options || {});
|
||||
|
||||
// init, wrapped in function so it can be collapsed
|
||||
(function() {...})();
|
||||
|
||||
// private, can be called from init
|
||||
function foo() {...}
|
||||
|
||||
// private, shared
|
||||
self.onChange = function(option, value) {...}
|
||||
self.foo = function() {...}
|
||||
|
||||
// public
|
||||
that.foo = function() {...}
|
||||
|
||||
// return
|
||||
return that;
|
||||
|
||||
}
|
||||
*/
|
||||
Ox.Foo = function(options, self) {
|
||||
var self = self || {},
|
||||
that = new Ox.Widget({
|
||||
element: "div"
|
||||
}, self)
|
||||
.defaults({
|
||||
foo: "bar"
|
||||
})
|
||||
.options(options || {});
|
||||
(function() {
|
||||
self.time = Date.now();
|
||||
})();
|
||||
self.onChange = function(option, value) {
|
||||
if (option == "foo") {
|
||||
console.log("foo set to", value);
|
||||
}
|
||||
}
|
||||
that.getTime = function() {
|
||||
return self.time;
|
||||
}
|
||||
return that;
|
||||
}
|
||||
Ox.Bar = function(options, self) {
|
||||
var self = self || {},
|
||||
that = Ox.Foo({
|
||||
foo: "baz"
|
||||
}, self)
|
||||
.defaults({
|
||||
bar: "xyz"
|
||||
})
|
||||
.options(options || {}),
|
||||
(function() {
|
||||
self.time = 0;
|
||||
})();
|
||||
that.bar = function() {
|
||||
console.log("Bar.bar()");
|
||||
}
|
||||
return that;
|
||||
}
|
||||
})();
|
||||
Loading…
Add table
Add a link
Reference in a new issue