add test browser
This commit is contained in:
rolux
parent
698d57abb0
commit
a58350a29e
15 changed files with 160 additions and 1751 deletions
|
|
@ -1,16 +0,0 @@
|
||||||
<!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"/>
|
|
||||||
<script type="text/javascript" src="../../build/js/OxUI.js"></script>
|
|
||||||
<script type="text/javascript" src="app.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div style="position: absolute">
|
|
||||||
[32] Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet, consectetur, adipisci[ng] velit, sed quia non numquam [do] eius modi tempora inci[di]dunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?
|
|
||||||
<br/>
|
|
||||||
[33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,44 +0,0 @@
|
||||||
Ox.UI(function() {
|
|
||||||
var app = new Ox.App({
|
|
||||||
requestURL: "http://blackbook.local:8000/api/"
|
|
||||||
}),
|
|
||||||
$dialog = new Ox.Dialog({
|
|
||||||
title: "Application Error",
|
|
||||||
buttons: [
|
|
||||||
{
|
|
||||||
value: "Change Title",
|
|
||||||
click: function() {
|
|
||||||
Ox.print("click to change title")
|
|
||||||
$dialog.options({
|
|
||||||
title: "New Title"
|
|
||||||
});
|
|
||||||
$dialog.$buttons[0].toggleDisabled();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "Close",
|
|
||||||
click: function() {
|
|
||||||
$dialog.close();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
});
|
|
||||||
app.request("error");
|
|
||||||
//app.request("hello");
|
|
||||||
/*
|
|
||||||
app.request("login", {"username": "test", "password": "test"}, function(result) {
|
|
||||||
Ox.print(result);
|
|
||||||
if (result.status.code == 200) {
|
|
||||||
Ox.print(result);
|
|
||||||
app.request("preferences", function(result) {
|
|
||||||
Ox.print(result.data.preferences);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
else if (result.status.code == 403) {
|
|
||||||
alert(403);
|
|
||||||
//$dialog.open();
|
|
||||||
} else if (result.status.code == 500) {
|
|
||||||
}
|
|
||||||
});
|
|
||||||
*/
|
|
||||||
});
|
|
||||||
|
|
@ -1,595 +1,10 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE HTML>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
|
<title>OxJS Test Demo</title>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||||
<link rel="stylesheet" type="text/css" href="../../build/css/ox.ui.css"/>
|
<script type="text/javascript" src="../../build/Ox.js"></script>
|
||||||
<style>
|
<script type="text/javascript" src="js/test.js"></script>
|
||||||
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/OxUI.js"></script>
|
|
||||||
<script>
|
|
||||||
Ox.UI(function() {
|
|
||||||
var size = window.location.hash.substr(1) || "medium",
|
|
||||||
$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 loadingIcon = new Ox.LoadingIcon({
|
|
||||||
size: "medium"
|
|
||||||
})
|
|
||||||
.css({
|
|
||||||
marginLeft: "4px"
|
|
||||||
});
|
|
||||||
|
|
||||||
var mainMenu = new Ox.MainMenu({
|
|
||||||
extras: [
|
|
||||||
new Ox.Input({
|
|
||||||
autocomplete: {
|
|
||||||
"Find: All": [],
|
|
||||||
"Find: Title": [
|
|
||||||
"A bout de souffle",
|
|
||||||
"Casino",
|
|
||||||
"Diaries, Notes and Sketches",
|
|
||||||
"L'age d'or",
|
|
||||||
"Far From Heaven",
|
|
||||||
"In girum imus nocte et consumimur igni",
|
|
||||||
"It Felt Like a Kiss",
|
|
||||||
"Mulholland Dr.",
|
|
||||||
"Querelle",
|
|
||||||
"Vertigo"
|
|
||||||
],
|
|
||||||
"Find: Director": [
|
|
||||||
"Luis Buñuel",
|
|
||||||
"Adam Curtis",
|
|
||||||
"Guy Debord",
|
|
||||||
"Rainer Werner Fassbinder",
|
|
||||||
"Jean-Luc Godard",
|
|
||||||
"Todd Haynes",
|
|
||||||
"Alfred Hitchcock",
|
|
||||||
"David Lynch",
|
|
||||||
"Jonas Mekas",
|
|
||||||
"Martin Scorsese"
|
|
||||||
],
|
|
||||||
"Find: Country": [
|
|
||||||
"Austria",
|
|
||||||
"Canada",
|
|
||||||
"France",
|
|
||||||
"Germany",
|
|
||||||
"Italy",
|
|
||||||
"Japan",
|
|
||||||
"Spain",
|
|
||||||
"Switzerland",
|
|
||||||
"UK",
|
|
||||||
"USA"
|
|
||||||
],
|
|
||||||
"Find: Cinematographer": []
|
|
||||||
},
|
|
||||||
clear: true,
|
|
||||||
highlight: false,
|
|
||||||
id: "find",
|
|
||||||
label: ["Find: All", "Find: Title", "Find: Director", "Find: Country", "Find: Cinematographer"],
|
|
||||||
labelWidth: 96
|
|
||||||
}).width(320),
|
|
||||||
loadingIcon
|
|
||||||
],
|
|
||||||
menus: [
|
|
||||||
{
|
|
||||||
id: "oxjs",
|
|
||||||
title: "Oxjs",
|
|
||||||
items: [
|
|
||||||
{ id: "about", title: "About" },
|
|
||||||
{},
|
|
||||||
{ id: "contact", title: "Contact"}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "user",
|
|
||||||
title: "User",
|
|
||||||
items: [
|
|
||||||
{ disabled: true, id: "user", title: "User: not logged in"},
|
|
||||||
{},
|
|
||||||
{ id: "login", title: "Login" }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "file",
|
|
||||||
title: "File",
|
|
||||||
items: [
|
|
||||||
{ id: "load", keyboard: "control o", title: "Open" },
|
|
||||||
{ id: "save", keyboard: "control a", title: "Save" },
|
|
||||||
{ id: "save_as", keyboard: "shift control s", title: "Save As..."}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "edit",
|
|
||||||
title: "Edit",
|
|
||||||
items: [
|
|
||||||
{ id: "undo", keyboard: "control z", title: "Undo" },
|
|
||||||
{ id: "redo", keyboard: "shift control z", title: "Redo" },
|
|
||||||
{},
|
|
||||||
{ id: "cut", keyboard: "control x", title: "Cut" },
|
|
||||||
{ id: "copy", keyboard: "control c", title: "Copy" },
|
|
||||||
{ id: "paste", keyboard: "control v", title: "Paste"},
|
|
||||||
{ id: "delete", keyboard: "delete", title: "Delete"},
|
|
||||||
{},
|
|
||||||
{ id: "select_all", keyboard: "control a", title: "Select All" },
|
|
||||||
{ id: "select_none", keyboard: "shift control a", title: "Select None" },
|
|
||||||
{ id: "invert_selection", keyboard: "alt control a", title: "Invert Selection" },
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "sort",
|
|
||||||
title: "Sort",
|
|
||||||
items: [
|
|
||||||
{ id: "sort_movies", title: "Sort Movies by", items: [
|
|
||||||
{ checked: true, group: "sort_movies", id: "title", title: "Title"},
|
|
||||||
{ checked: false, group: "sort_movies", id: "director", title: "Director" },
|
|
||||||
] },
|
|
||||||
{ id: "order_movies", title: "Order Movies", items: [
|
|
||||||
{ checked: false, group: "order_movies", id: "ascending", title: "Ascending"},
|
|
||||||
{ checked: true, group: "order_movies", id: "descending", title: "Descending" },
|
|
||||||
] }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "help",
|
|
||||||
title: "Help",
|
|
||||||
items: [
|
|
||||||
{ id: "help", keyboard: "control h", title: "Help" }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
size: "large"
|
|
||||||
});
|
|
||||||
Ox.Event.bind(null, "submit_find", function(data) {
|
|
||||||
loadingIcon.start();
|
|
||||||
setTimeout(function() {
|
|
||||||
loadingIcon.stop();
|
|
||||||
}, 5000);
|
|
||||||
});
|
|
||||||
|
|
||||||
var loginDialog = new Ox.Dialog({
|
|
||||||
buttons: [
|
|
||||||
[
|
|
||||||
{ value: "Register", click: function() { loginDialog.close(); } },
|
|
||||||
{ value: "Reset Password", click: function() { loginDialog.close(); } }
|
|
||||||
],
|
|
||||||
[
|
|
||||||
{ value: "Cancel", click: function() { loginDialog.close(); } },
|
|
||||||
{ value: "Login", click: function() { loginDialog.close(); } }
|
|
||||||
]
|
|
||||||
],
|
|
||||||
title: "Login"
|
|
||||||
});
|
|
||||||
|
|
||||||
Ox.Event.bind(null, "click_login", function() {
|
|
||||||
loginDialog.open();
|
|
||||||
});
|
|
||||||
|
|
||||||
var bottomPanel = Ox.Bar({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: mainMenu,
|
|
||||||
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 = new Ox.Tabbar({
|
|
||||||
selected: 0, // fixme: should not be necessary
|
|
||||||
tabs: [
|
|
||||||
{ id: "documentation", value: "Documentation" },
|
|
||||||
{ id: "demo", value: "Demo" },
|
|
||||||
{ id: "source_code", value: "Source Code" }
|
|
||||||
]
|
|
||||||
}).appendTo(mainPanel);
|
|
||||||
|
|
||||||
for (var i = 0; i < 5; i++) {
|
|
||||||
$toolbars[i] = Ox.Bar({size: i ? "medium" : "large"}).appendTo(mainPanel);
|
|
||||||
}
|
|
||||||
$toolbars[5] = Ox.Bar({size: 24}).appendTo(mainPanel);
|
|
||||||
|
|
||||||
Ox.Button({
|
|
||||||
size: "large",
|
|
||||||
type: "text",
|
|
||||||
value: "Switch Theme"
|
|
||||||
}).addClass("margin").click(switchTheme).appendTo($toolbars[0]);
|
|
||||||
Ox.Button({
|
|
||||||
size: "large",
|
|
||||||
type: "text",
|
|
||||||
value: "Open Dialog"
|
|
||||||
}).addClass("margin").click(openDialog).appendTo($toolbars[0]);
|
|
||||||
Ox.Button({
|
|
||||||
size: size,
|
|
||||||
type: "text",
|
|
||||||
value: "Button"
|
|
||||||
}).addClass("margin").appendTo($toolbars[1]);
|
|
||||||
///*
|
|
||||||
Ox.Button({
|
|
||||||
size: "small",
|
|
||||||
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({
|
|
||||||
buttons: [
|
|
||||||
{ id: "buttongroup0", value: "Button Group (0)" },
|
|
||||||
{ id: "buttongroup1", value: "Button Group (1)" },
|
|
||||||
{ id: "buttongroup2", value: "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({
|
|
||||||
buttons: [
|
|
||||||
{ id: "close", value: "close" },
|
|
||||||
{ id: "add", value: "add" },
|
|
||||||
{ id: "remove", value: "remove" }
|
|
||||||
],
|
|
||||||
selectable: true,
|
|
||||||
selected: 0,
|
|
||||||
size: "medium",
|
|
||||||
type: "image",
|
|
||||||
}).addClass("padding").appendTo($toolbars[2]);
|
|
||||||
///*
|
|
||||||
Ox.Input({
|
|
||||||
placeholder: "Placeholder",
|
|
||||||
size: size
|
|
||||||
}).addClass("margin").appendTo($toolbars[3]);
|
|
||||||
Ox.Input({
|
|
||||||
label: "Label",
|
|
||||||
labelWidth: 48,
|
|
||||||
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"
|
|
||||||
})
|
|
||||||
.bindEvent("change." + range.id, update)
|
|
||||||
.appendTo($toolbars[4]);
|
|
||||||
function update() {
|
|
||||||
//Ox.print("update", range.options("value"))
|
|
||||||
/*
|
|
||||||
// fixme: make this work
|
|
||||||
input.options({
|
|
||||||
value: range.options("value")
|
|
||||||
});
|
|
||||||
*/
|
|
||||||
input.val(range.options("value").toFixed(1))
|
|
||||||
}
|
|
||||||
//Ox.print("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);
|
|
||||||
Ox.Button({
|
|
||||||
selectable: true,
|
|
||||||
size: size,
|
|
||||||
type: "text",
|
|
||||||
value: "Bar"
|
|
||||||
}).addClass("margin").appendTo(mainPanel);
|
|
||||||
Ox.Select({
|
|
||||||
id: "select1",
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
checked: true,
|
|
||||||
id: "one",
|
|
||||||
title: "One"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "two",
|
|
||||||
title: "Two"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "three",
|
|
||||||
title: "Three"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}).addClass("margin").width(96).appendTo(mainPanel);
|
|
||||||
Ox.Select({
|
|
||||||
id: "select2",
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
checked: true,
|
|
||||||
id: "four",
|
|
||||||
title: "Four"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "five",
|
|
||||||
title: "Five"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "six",
|
|
||||||
title: "Six"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}).addClass("margin").width(96).appendTo(mainPanel);
|
|
||||||
Ox.Button({
|
|
||||||
selectable: true,
|
|
||||||
size: size,
|
|
||||||
type: "text",
|
|
||||||
value: "Foo"
|
|
||||||
}).addClass("margin").appendTo(mainPanel);
|
|
||||||
Ox.Button({
|
|
||||||
selectable: true,
|
|
||||||
size: size,
|
|
||||||
type: "text",
|
|
||||||
value: "Bar"
|
|
||||||
}).addClass("margin").appendTo(mainPanel);
|
|
||||||
Ox.Input({
|
|
||||||
autocomplete: {
|
|
||||||
City: [
|
|
||||||
"Albuquerque",
|
|
||||||
"Austin",
|
|
||||||
"Baltimore",
|
|
||||||
"Boston",
|
|
||||||
"Chicago",
|
|
||||||
"Cleveland",
|
|
||||||
"Dallas",
|
|
||||||
"Denver",
|
|
||||||
"Detroit",
|
|
||||||
"El Paso",
|
|
||||||
"Honululu",
|
|
||||||
"Houston",
|
|
||||||
"Kansas City",
|
|
||||||
"Las Vegas",
|
|
||||||
"Los Angeles",
|
|
||||||
"Memphis",
|
|
||||||
"Miami",
|
|
||||||
"Minneapolis",
|
|
||||||
"Nashville",
|
|
||||||
"New Orleans",
|
|
||||||
"New York",
|
|
||||||
"Oklahoma City",
|
|
||||||
"Philadelphia",
|
|
||||||
"Phoenix",
|
|
||||||
"Pittsburgh",
|
|
||||||
"Portland",
|
|
||||||
"San Antonio",
|
|
||||||
"San Diego",
|
|
||||||
"San Francisco",
|
|
||||||
"St. Louis",
|
|
||||||
"St. Paul",
|
|
||||||
"Seattle",
|
|
||||||
"Washington"
|
|
||||||
],
|
|
||||||
State: [
|
|
||||||
"Alabama", "Alaska", "Arizona", "Arkansas", "California",
|
|
||||||
"Colorado", "Connecticut", "Delaware", "District of Columbia", "Florida",
|
|
||||||
"Georgia", "Hawaii", "Idaho", "Illinois", "Indiana",
|
|
||||||
"Iowa", "Kansas", "Kentucky", "Louisiana", "Maine",
|
|
||||||
"Maryland", "Massachusetts", "Michigan", "Minnessota", "Mississippi",
|
|
||||||
"Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire",
|
|
||||||
"New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota",
|
|
||||||
"Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island",
|
|
||||||
"South Carolina", "South Dakota", "Tennessee", "Texas", "Utah",
|
|
||||||
"Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin",
|
|
||||||
"Wyoming"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
clear: false,
|
|
||||||
highlight: true,
|
|
||||||
id: "citystate",
|
|
||||||
placeholder: ["City", "State"],
|
|
||||||
selected: 1
|
|
||||||
}).addClass("margin").width(160).appendTo(mainPanel);
|
|
||||||
Ox.Button({
|
|
||||||
selectable: true,
|
|
||||||
size: size,
|
|
||||||
type: "text",
|
|
||||||
value: "Foo"
|
|
||||||
}).addClass("margin").appendTo(mainPanel);
|
|
||||||
Ox.Button({
|
|
||||||
selectable: true,
|
|
||||||
size: size,
|
|
||||||
type: "text",
|
|
||||||
value: "Bar"
|
|
||||||
}).addClass("margin").appendTo(mainPanel);
|
|
||||||
$("<br>").appendTo(mainPanel.$element);
|
|
||||||
$("<br>").appendTo(mainPanel.$element);
|
|
||||||
Ox.Input({
|
|
||||||
label: "Label"
|
|
||||||
}).width(400).addClass("margin").appendTo(mainPanel);
|
|
||||||
$("<br>").appendTo(mainPanel.$element);
|
|
||||||
$("<br>").appendTo(mainPanel.$element);
|
|
||||||
Ox.Input({
|
|
||||||
label: "Label",
|
|
||||||
//placeholder: "some\ntext",
|
|
||||||
type: "textarea"
|
|
||||||
}).width(400).height(100).addClass("margin").appendTo(mainPanel);
|
|
||||||
$("<br>").attr({clear: "all"}).appendTo(mainPanel.$element);
|
|
||||||
Ox.Select({
|
|
||||||
id: "selectLabel",
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
checked: true,
|
|
||||||
id: "label1",
|
|
||||||
title: "Label 1"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "label2",
|
|
||||||
title: "Label 2"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "label3",
|
|
||||||
title: "Label 3"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}).addClass("margin").width(104).appendTo(mainPanel);
|
|
||||||
Ox.Input().width(200).addClass("margin").appendTo(mainPanel);
|
|
||||||
$("<br>").attr({clear: "all"}).appendTo(mainPanel.$element);
|
|
||||||
Ox.Label({
|
|
||||||
title: "Label"
|
|
||||||
}).width(100).addClass("margin").appendTo(mainPanel);
|
|
||||||
Ox.Input().width(200).addClass("margin").appendTo(mainPanel);
|
|
||||||
$("<br>").attr({clear: "all"}).appendTo(mainPanel.$element);
|
|
||||||
Ox.Label({
|
|
||||||
title: "Label"
|
|
||||||
}).width(100).addClass("margin").appendTo(mainPanel);
|
|
||||||
Ox.Input({
|
|
||||||
type: "textarea"
|
|
||||||
}).width(200).height(100).addClass("margin").appendTo(mainPanel);
|
|
||||||
//*/
|
|
||||||
function openDialog() {
|
|
||||||
var $dialog = new Ox.Dialog({
|
|
||||||
title: "Dialog",
|
|
||||||
buttons: [
|
|
||||||
{
|
|
||||||
value: "Switch Theme",
|
|
||||||
click: switchTheme
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "Close",
|
|
||||||
click: function() {
|
|
||||||
$dialog.close();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
.append($.map(Ox.range(100), function(v, i) {
|
|
||||||
return "Line #" + (i + 1)
|
|
||||||
}).join("<br/>"))
|
|
||||||
.open();
|
|
||||||
}
|
|
||||||
function switchTheme() {
|
|
||||||
if (Ox.theme() == "classic") {
|
|
||||||
Ox.theme("modern");
|
|
||||||
} else {
|
|
||||||
Ox.theme("classic");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function clickButton(val) {
|
|
||||||
// Ox.print(val);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</head>
|
</head>
|
||||||
<body></body>
|
<body></body>
|
||||||
</html>
|
</html>
|
||||||
97
demos/test/js/test.js
Normal file
97
demos/test/js/test.js
Normal file
|
|
@ -0,0 +1,97 @@
|
||||||
|
Ox.load('UI', {
|
||||||
|
debug: true,
|
||||||
|
theme: 'classic'
|
||||||
|
}, function() {
|
||||||
|
var colors = [
|
||||||
|
[[255, 64, 64], [224, 32, 32]],
|
||||||
|
[[64, 192, 64], [32, 160, 32]]
|
||||||
|
],
|
||||||
|
gradients = [
|
||||||
|
'-moz-linear-gradient(',
|
||||||
|
'-webkit-gradient(linear, '
|
||||||
|
];
|
||||||
|
var $foo = $('<div>')
|
||||||
|
.css({
|
||||||
|
width: window.innerWidth,
|
||||||
|
height: window.innerHeight,
|
||||||
|
overflowY: 'scroll'
|
||||||
|
})
|
||||||
|
.appendTo(Ox.UI.$body);
|
||||||
|
Ox.test(Ox.PATH + 'Ox.js', function(tests) {
|
||||||
|
var total = tests.length,
|
||||||
|
succeeded = tests.filter(function(test) {
|
||||||
|
return test.success;
|
||||||
|
}).length,
|
||||||
|
failed = total - succeeded,
|
||||||
|
names = Ox.unique(tests.map(function(test) {
|
||||||
|
return test.name;
|
||||||
|
})).sort();
|
||||||
|
testsByName = {};
|
||||||
|
tests.forEach(function(test) {
|
||||||
|
if (!(test.name in testsByName)) {
|
||||||
|
testsByName[test.name] = [];
|
||||||
|
}
|
||||||
|
testsByName[test.name].push(test);
|
||||||
|
});
|
||||||
|
getBar(total == succeeded)
|
||||||
|
.html(
|
||||||
|
'<b>' + total + ' tests, ' +
|
||||||
|
succeeded + ' succeeded, ' + failed + ' failed</b>'
|
||||||
|
)
|
||||||
|
.appendTo($foo);
|
||||||
|
names.forEach(function(name) {
|
||||||
|
var tests = testsByName[name],
|
||||||
|
total = tests.length,
|
||||||
|
succeeded = tests.filter(function(test) {
|
||||||
|
return test.success;
|
||||||
|
}).length,
|
||||||
|
failed = total - succeeded,
|
||||||
|
classname = name.replace('.', '');
|
||||||
|
getBar(total == succeeded)
|
||||||
|
.html(
|
||||||
|
'<b>' + name + '</b> — ' + total +
|
||||||
|
' test' + (total == 1 ? '' : 's') + ', ' +
|
||||||
|
succeeded + ' succeeded, ' + failed + ' failed</b>'
|
||||||
|
)
|
||||||
|
.click(function() {
|
||||||
|
$('.' + classname).toggle();
|
||||||
|
})
|
||||||
|
.appendTo($foo);
|
||||||
|
tests.forEach(function(test) {
|
||||||
|
getBar(test.success, true)
|
||||||
|
.addClass(classname)
|
||||||
|
.html(
|
||||||
|
Ox.repeat(' ', 4) +
|
||||||
|
'<b>> ' + Ox.encodeHTML(test.statement) + ' </b> ==> ' +
|
||||||
|
Ox.encodeHTML(test.actual) +
|
||||||
|
(test.success ? '' : ' !=> ' + Ox.encodeHTML(test.expected))
|
||||||
|
)
|
||||||
|
.hide()
|
||||||
|
.appendTo($foo);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
function getBar(success, darker) {
|
||||||
|
var $div = $('<div>')
|
||||||
|
.css({
|
||||||
|
width: window.innerWidth - Ox.UI.SCROLLBAR_SIZE,
|
||||||
|
height: '15px',
|
||||||
|
padding: '4px 8px 4px 8px',
|
||||||
|
fontFamily: 'Menlo, Monaco, Courier',
|
||||||
|
fontSize: '12px'
|
||||||
|
});
|
||||||
|
gradients.forEach(function(gradient) {
|
||||||
|
$div.css({
|
||||||
|
background: gradient + 'left top, left bottom, from(rgb(' +
|
||||||
|
getColor(success, 0) + ')), to(rgb(' +
|
||||||
|
getColor(success, 1) + ')))'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
function getColor(success, i) {
|
||||||
|
return colors[+success][i].map(function(color) {
|
||||||
|
return color - (darker || 0) * 32;
|
||||||
|
}).join(', ')
|
||||||
|
}
|
||||||
|
return $div;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
#statusBar {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
#totals {
|
|
||||||
margin-top: 2px;
|
|
||||||
font-size: 9px;
|
|
||||||
color: rgb(192, 192, 192);
|
|
||||||
}
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
<!DOCTYPE HTML>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>oxjs List Demo</title>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
|
||||||
<link rel="stylesheet" type="text/css" href="../../build/css/ox.ui.css"/>
|
|
||||||
<link rel="stylesheet" type="text/css" href="list.css"/>
|
|
||||||
<script type="text/javascript" src="../../build/js/OxUI.js"></script>
|
|
||||||
<script type="text/javascript" src="list.js"></script>
|
|
||||||
</head>
|
|
||||||
<body></body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,637 +0,0 @@
|
||||||
Ox.UI(function() {
|
|
||||||
Ox.theme("modern");
|
|
||||||
var $body = $("body"),
|
|
||||||
$document = $(document),
|
|
||||||
app = new Ox.App({
|
|
||||||
// requestURL: "http://blackbook.local:8000/api/"
|
|
||||||
requestURL: "http://lion.oil21.org:8000/api/"
|
|
||||||
}),
|
|
||||||
findCondition = {},
|
|
||||||
groups = [
|
|
||||||
{
|
|
||||||
conditions: [],
|
|
||||||
id: "director",
|
|
||||||
title: "Director"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
conditions: [],
|
|
||||||
id: "country",
|
|
||||||
title: "Country"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
conditions: [],
|
|
||||||
id: "year",
|
|
||||||
title: "Year"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
conditions: [],
|
|
||||||
id: "language",
|
|
||||||
title: "Language"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
conditions: [],
|
|
||||||
id: "genre",
|
|
||||||
title: "Genre"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
$group = [],
|
|
||||||
elements = [],
|
|
||||||
rightPanelWidth = $document.width() - 256;
|
|
||||||
|
|
||||||
$.each(groups, function(i, v) {
|
|
||||||
var size = rightPanelWidth / 5 + (rightPanelWidth % 5 > i);
|
|
||||||
$group[i] = new Ox.TextList({
|
|
||||||
columns: [
|
|
||||||
{
|
|
||||||
align: "left",
|
|
||||||
id: "name",
|
|
||||||
operator: v.id == "year" ? "-" : "+",
|
|
||||||
title: v.title,
|
|
||||||
unique: true,
|
|
||||||
visible: true,
|
|
||||||
width: size - 40 - ($.browser.mozilla ? 16 : 12)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
align: "right",
|
|
||||||
id: "items",
|
|
||||||
operator: "-",
|
|
||||||
title: "#",
|
|
||||||
visible: true,
|
|
||||||
width: 40
|
|
||||||
}
|
|
||||||
],
|
|
||||||
id: "group_" + v.id,
|
|
||||||
request: function(options) {
|
|
||||||
delete options.keys;
|
|
||||||
app.request("find", $.extend(options, {
|
|
||||||
group: v.id,
|
|
||||||
query: constructQuery()
|
|
||||||
}), options.callback);
|
|
||||||
},
|
|
||||||
sort: [
|
|
||||||
{
|
|
||||||
key: v.id == "year" ? "name" : "items",
|
|
||||||
operator: "-"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
});
|
|
||||||
elements.push({
|
|
||||||
element: $group[i],
|
|
||||||
resizable: true,
|
|
||||||
size: size
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
var $groupsInnerPanel = new Ox.SplitPanel({
|
|
||||||
elements: [
|
|
||||||
elements[1],
|
|
||||||
elements[2],
|
|
||||||
elements[3]
|
|
||||||
],
|
|
||||||
orientation: "horizontal"
|
|
||||||
}),
|
|
||||||
|
|
||||||
$groupsOuterPanel = new Ox.SplitPanel({
|
|
||||||
elements: [
|
|
||||||
elements[0],
|
|
||||||
{
|
|
||||||
element: $groupsInnerPanel
|
|
||||||
},
|
|
||||||
elements[4]
|
|
||||||
],
|
|
||||||
orientation: "horizontal"
|
|
||||||
})
|
|
||||||
|
|
||||||
$list = constructList("text");
|
|
||||||
|
|
||||||
$toolBar = Ox.Bar({
|
|
||||||
size: 24
|
|
||||||
}),
|
|
||||||
|
|
||||||
$button = Ox.Button({
|
|
||||||
id: "groupsButton",
|
|
||||||
value: ["Show Groups", "Hide Groups"]
|
|
||||||
}).css({
|
|
||||||
float: "left",
|
|
||||||
margin: "4px"
|
|
||||||
}).width(80).appendTo($toolBar),
|
|
||||||
|
|
||||||
$select = Ox.Select({
|
|
||||||
id: "viewSelect",
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
checked: true,
|
|
||||||
id: "list",
|
|
||||||
title: "View as List"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "icons",
|
|
||||||
title: "View as Icons"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "clips",
|
|
||||||
title: "View with Clips"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "timelines",
|
|
||||||
title: "View with Timelines"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "maps",
|
|
||||||
title: "View with Maps"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "calendars",
|
|
||||||
title: "View with Calendars"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "clip",
|
|
||||||
title: "View as Clips"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "map",
|
|
||||||
title: "View on Map"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "calendar",
|
|
||||||
title: "View on Calendar"
|
|
||||||
},
|
|
||||||
]
|
|
||||||
}).css({
|
|
||||||
float: "left",
|
|
||||||
margin: "4px"
|
|
||||||
}).width(120).appendTo($toolBar);
|
|
||||||
|
|
||||||
$input = new Ox.Input({
|
|
||||||
autocomplete: function(key, value, callback) {
|
|
||||||
Ox.print("autocomplete", key, value);
|
|
||||||
value === "" && Ox.print("Warning: autocomplete function should never be called with empty value");
|
|
||||||
if (key == "all") {
|
|
||||||
callback();
|
|
||||||
} else {
|
|
||||||
app.request("find", {
|
|
||||||
keys: [key],
|
|
||||||
query: {
|
|
||||||
conditions: [
|
|
||||||
{
|
|
||||||
key: key,
|
|
||||||
value: value,
|
|
||||||
operator: ""
|
|
||||||
}
|
|
||||||
],
|
|
||||||
operator: ""
|
|
||||||
},
|
|
||||||
sort: [
|
|
||||||
{
|
|
||||||
key: key,
|
|
||||||
operator: "+"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
range: [0, 10]
|
|
||||||
}, function(result) {
|
|
||||||
Ox.print("calling callback", result.data.items)
|
|
||||||
callback($.map(result.data.items, function(v) {
|
|
||||||
return v.title;
|
|
||||||
}))
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
clear: true,
|
|
||||||
highlight: true,
|
|
||||||
id: "find",
|
|
||||||
label: [
|
|
||||||
{ id: "all", title: "Find: All" },
|
|
||||||
{ id: "title", title: "Find: Title" },
|
|
||||||
{ id: "director", title: "Find: Director" },
|
|
||||||
{ id: "country", title: "Find: Country" },
|
|
||||||
{ id: "year", title: "Find: Year" },
|
|
||||||
{ id: "language", title: "Find: Language" },
|
|
||||||
{ id: "writer", title: "Find: Writer" },
|
|
||||||
{ id: "producer", title: "Find: Producer" },
|
|
||||||
{ id: "cinematographer", title: "Find: Cinematographer" },
|
|
||||||
{ id: "editor", title: "Find: Editor" },
|
|
||||||
{ id: "actor", title: "Find: Actor" },
|
|
||||||
{ id: "character", title: "Find: Character" },
|
|
||||||
{ id: "name", title: "Find: Name" },
|
|
||||||
{ id: "genre", title: "Find: Genre" },
|
|
||||||
{ id: "keyword", title: "Find: Keyword" },
|
|
||||||
{ id: "summary", title: "Find: Summary" },
|
|
||||||
{ id: "dialog", title: "Find: Dialog" }
|
|
||||||
],
|
|
||||||
labelWidth: 85
|
|
||||||
}).css({
|
|
||||||
float: "right",
|
|
||||||
margin: "4px"
|
|
||||||
}).width(300).appendTo($toolBar);
|
|
||||||
|
|
||||||
$contentPanel = new Ox.SplitPanel({
|
|
||||||
elements: [
|
|
||||||
{
|
|
||||||
element: $groupsOuterPanel,
|
|
||||||
size: 128
|
|
||||||
},
|
|
||||||
{
|
|
||||||
element: $list
|
|
||||||
}
|
|
||||||
],
|
|
||||||
orientation: "vertical"
|
|
||||||
}),
|
|
||||||
|
|
||||||
$statusBar = new Ox.Bar({
|
|
||||||
size: 16
|
|
||||||
}).attr({
|
|
||||||
id: "statusBar"
|
|
||||||
}),
|
|
||||||
|
|
||||||
$totals = new Ox.Element()
|
|
||||||
.attr({
|
|
||||||
id: "totals"
|
|
||||||
})
|
|
||||||
.appendTo($statusBar),
|
|
||||||
|
|
||||||
$leftPanel = new Ox.Container(),
|
|
||||||
|
|
||||||
$rightPanel = new Ox.SplitPanel({
|
|
||||||
elements: [
|
|
||||||
{
|
|
||||||
element: $toolBar,
|
|
||||||
size: 24
|
|
||||||
},
|
|
||||||
{
|
|
||||||
element: $contentPanel
|
|
||||||
},
|
|
||||||
{
|
|
||||||
element: $statusBar,
|
|
||||||
size: 16
|
|
||||||
}
|
|
||||||
],
|
|
||||||
orientation: "vertical"
|
|
||||||
}),
|
|
||||||
|
|
||||||
$loadingIcon = new Ox.LoadingIcon({
|
|
||||||
size: "medium"
|
|
||||||
});
|
|
||||||
|
|
||||||
$mainMenu = new Ox.MainMenu({
|
|
||||||
extras: [
|
|
||||||
$loadingIcon
|
|
||||||
],
|
|
||||||
menus: [
|
|
||||||
{
|
|
||||||
id: "oxdb",
|
|
||||||
title: "OxDB",
|
|
||||||
items: [
|
|
||||||
{ id: "about", title: "About" }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "sort",
|
|
||||||
title: "Sort",
|
|
||||||
items: [
|
|
||||||
{ id: "sort_movies", title: "Sort Movies by", items: [
|
|
||||||
{ checked: false, group: "sort_movies", id: "title", title: "Title"},
|
|
||||||
{ checked: false, group: "sort_movies", id: "director", title: "Director" },
|
|
||||||
{ checked: false, group: "sort_movies", id: "country", title: "Country" },
|
|
||||||
{ checked: true, group: "sort_movies", id: "year", title: "Year" },
|
|
||||||
{ checked: false, group: "sort_movies", id: "language", title: "Language" },
|
|
||||||
{ checked: false, group: "sort_movies", id: "runtime", title: "Runtime" },
|
|
||||||
{ checked: false, group: "sort_movies", id: "genre", title: "Genre" },
|
|
||||||
] },
|
|
||||||
{ id: "order_movies", title: "Order Movies", items: [
|
|
||||||
{ checked: false, group: "order_movies", id: "ascending", title: "Ascending"},
|
|
||||||
{ checked: true, group: "order_movies", id: "descending", title: "Descending" },
|
|
||||||
] }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "debug",
|
|
||||||
title: "Debug",
|
|
||||||
items: [
|
|
||||||
{ id: "show_query", title: "Show Query" }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
size: "medium"
|
|
||||||
}),
|
|
||||||
|
|
||||||
$mainPanel = new Ox.SplitPanel({
|
|
||||||
elements: [
|
|
||||||
{
|
|
||||||
element: $leftPanel,
|
|
||||||
size: 256
|
|
||||||
},
|
|
||||||
{
|
|
||||||
element: $rightPanel
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
|
|
||||||
$appPanel = Ox.SplitPanel({
|
|
||||||
elements: [
|
|
||||||
{
|
|
||||||
element: $mainMenu,
|
|
||||||
size: 20
|
|
||||||
},
|
|
||||||
{
|
|
||||||
element: $mainPanel
|
|
||||||
}
|
|
||||||
],
|
|
||||||
orientation: "vertical"
|
|
||||||
}).appendTo($body);
|
|
||||||
|
|
||||||
Ox.Request.requests() && $loadingIcon.start();
|
|
||||||
Ox.Event.bind(null, "requestStart", function() {
|
|
||||||
Ox.print("start")
|
|
||||||
$loadingIcon.start();
|
|
||||||
});
|
|
||||||
Ox.Event.bind(null, "requestStop", function() {
|
|
||||||
Ox.print("stop")
|
|
||||||
$loadingIcon.stop();
|
|
||||||
});
|
|
||||||
|
|
||||||
Ox.Event.bind(null, "change_viewSelect", function(event, data) {
|
|
||||||
$list.replaceWith(constructList(data.id));
|
|
||||||
});
|
|
||||||
|
|
||||||
Ox.Event.bind(null, "submit_find", function(event, data) {
|
|
||||||
findCondition = {
|
|
||||||
key: data.key == "all" ? "" : data.key,
|
|
||||||
value: data.value,
|
|
||||||
operator: ""
|
|
||||||
};
|
|
||||||
$.each(groups, function(i, group) {
|
|
||||||
groups[i].conditions = [];
|
|
||||||
$group[i].options({
|
|
||||||
request: function(options) {
|
|
||||||
delete options.keys;
|
|
||||||
return app.request("find", $.extend(options, {
|
|
||||||
group: group.id,
|
|
||||||
query: constructQuery(group.id)
|
|
||||||
}), options.callback);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
$list.options({
|
|
||||||
request: function(options) {
|
|
||||||
return app.request("find", $.extend(options, {
|
|
||||||
query: constructQuery()
|
|
||||||
}), options.callback);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
$.each(groups, function(i, group) {
|
|
||||||
Ox.Event.bind(null, "select_group_" + group.id, function(event, data) {
|
|
||||||
$list.options({
|
|
||||||
request: function(options) {
|
|
||||||
groups[i].conditions = $.map(data.ids, function(v) {
|
|
||||||
return {
|
|
||||||
key: group.id,
|
|
||||||
value: v,
|
|
||||||
operator: "="
|
|
||||||
};
|
|
||||||
});
|
|
||||||
return app.request("find", $.extend(options, {
|
|
||||||
query: constructQuery()
|
|
||||||
}), options.callback);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
$.each(groups, function(i_, group_) {
|
|
||||||
if (i_ != i) {
|
|
||||||
$group[i_].options({
|
|
||||||
request: function(options) {
|
|
||||||
delete options.keys;
|
|
||||||
return app.request("find", $.extend(options, {
|
|
||||||
group: group_.id,
|
|
||||||
query: constructQuery(group_.id)
|
|
||||||
}), options.callback);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
Ox.Event.bind(null, "change_sort_movies", function(event, data) {
|
|
||||||
|
|
||||||
});
|
|
||||||
Ox.Event.bind(null, "load_list", function(event, data) {
|
|
||||||
$totals.html(constructStatus({
|
|
||||||
"total": data,
|
|
||||||
"selected": {}
|
|
||||||
}));
|
|
||||||
var html = [
|
|
||||||
Ox.formatNumber(data.items) + " movie" + (data.items != 1 ? "s" : ""),
|
|
||||||
Ox.formatDuration(data.runtime, "medium"),
|
|
||||||
data.files + " file" + (data.files != 1 ? "s" : ""),
|
|
||||||
Ox.formatDuration(data.duration, "short"),
|
|
||||||
Ox.formatValue(data.size, "B"),
|
|
||||||
Ox.formatValue(data.pixels, "px")
|
|
||||||
];
|
|
||||||
$totals.html("Total: " + constructStatus(data) + " — Selected: " + constructStatus({
|
|
||||||
duration: 0,
|
|
||||||
files: 0,
|
|
||||||
items: 0,
|
|
||||||
pixels: 0,
|
|
||||||
runtime: 0,
|
|
||||||
size: 0
|
|
||||||
}));
|
|
||||||
});
|
|
||||||
Ox.Event.bind(null, "sort_list", function(event, data) {
|
|
||||||
|
|
||||||
});
|
|
||||||
Ox.Event.bind(null, "select_list", function(event, data) {
|
|
||||||
|
|
||||||
});
|
|
||||||
Ox.Event.bind(null, "click_show_query", function(event, data) {
|
|
||||||
var query = constructQuery(),
|
|
||||||
html = "Conditions<br/><br/>" + $.map(query.conditions, function(v) {
|
|
||||||
return v.key + " " + v.operator + " " + v.value;
|
|
||||||
}).join("<br/>") + "<br/><br/>Operator: " + query.operator,
|
|
||||||
$dialog = new Ox.Dialog({
|
|
||||||
title: "Show Query",
|
|
||||||
buttons: [
|
|
||||||
{
|
|
||||||
value: "Close",
|
|
||||||
click: function() {
|
|
||||||
$dialog.close();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
.append(html)
|
|
||||||
.open();
|
|
||||||
});
|
|
||||||
|
|
||||||
function constructList(view) {
|
|
||||||
var $list;
|
|
||||||
if (view == "text") {
|
|
||||||
$list = new Ox.TextList({
|
|
||||||
columns: [
|
|
||||||
{
|
|
||||||
align: "left",
|
|
||||||
id: "id",
|
|
||||||
operator: "+",
|
|
||||||
title: "ID",
|
|
||||||
unique: true,
|
|
||||||
visible: true,
|
|
||||||
width: 80
|
|
||||||
},
|
|
||||||
{
|
|
||||||
align: "left",
|
|
||||||
id: "title",
|
|
||||||
operator: "+",
|
|
||||||
title: "Title",
|
|
||||||
visible: true,
|
|
||||||
width: 160
|
|
||||||
},
|
|
||||||
{
|
|
||||||
align: "left",
|
|
||||||
id: "director",
|
|
||||||
operator: "+",
|
|
||||||
title: "Director",
|
|
||||||
visible: true,
|
|
||||||
width: 160
|
|
||||||
},
|
|
||||||
{
|
|
||||||
align: "left",
|
|
||||||
id: "country",
|
|
||||||
operator: "+",
|
|
||||||
title: "Country",
|
|
||||||
visible: true,
|
|
||||||
width: 120
|
|
||||||
},
|
|
||||||
{
|
|
||||||
align: "right",
|
|
||||||
id: "year",
|
|
||||||
operator: "-",
|
|
||||||
title: "Year",
|
|
||||||
visible: true,
|
|
||||||
width: 60
|
|
||||||
},
|
|
||||||
{
|
|
||||||
align: "left",
|
|
||||||
id: "language",
|
|
||||||
operator: "+",
|
|
||||||
title: "Language",
|
|
||||||
visible: true,
|
|
||||||
width: 120
|
|
||||||
},
|
|
||||||
{
|
|
||||||
align: "right",
|
|
||||||
id: "runtime",
|
|
||||||
operator: "-",
|
|
||||||
title: "Runtime",
|
|
||||||
visible: true,
|
|
||||||
width: 80
|
|
||||||
},
|
|
||||||
{
|
|
||||||
align: "left",
|
|
||||||
id: "genre",
|
|
||||||
operator: "+",
|
|
||||||
title: "Genre",
|
|
||||||
visible: true,
|
|
||||||
width: 120
|
|
||||||
},
|
|
||||||
{
|
|
||||||
align: "right",
|
|
||||||
id: "rating",
|
|
||||||
operator: "-",
|
|
||||||
title: "Rating",
|
|
||||||
width: 80
|
|
||||||
},
|
|
||||||
{
|
|
||||||
align: "right",
|
|
||||||
id: "votes",
|
|
||||||
operator: "-",
|
|
||||||
title: "Votes",
|
|
||||||
width: 80
|
|
||||||
}
|
|
||||||
],
|
|
||||||
id: "list",
|
|
||||||
request: function(options) {
|
|
||||||
app.request("find", $.extend(options, {
|
|
||||||
query: constructQuery()
|
|
||||||
}), options.callback);
|
|
||||||
},
|
|
||||||
sort: [
|
|
||||||
{
|
|
||||||
key: "director",
|
|
||||||
operator: "+"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
});
|
|
||||||
} else if (view == "icons") {
|
|
||||||
$list = new Ox.IconList({
|
|
||||||
id: "list",
|
|
||||||
item: function(data, sort, size) {
|
|
||||||
return {
|
|
||||||
height: data.posterHeight,
|
|
||||||
id: data["id"],
|
|
||||||
info: data[$.inArray(sort[0].key, ["title", "director"]) > -1 ? "year" : sort[0].key],
|
|
||||||
title: data.title + (data.director ? " (" + data.director + ")" : ""),
|
|
||||||
url: "http://0xdb.org/" + data.id + "/poster." + size + "." + "jpg",
|
|
||||||
width: data.posterWidth
|
|
||||||
};
|
|
||||||
},
|
|
||||||
keys: ["director", "id", "posterHeight", "posterWidth", "posterURL", "title"],
|
|
||||||
request: function(options) {
|
|
||||||
app.request("find", $.extend(options, {
|
|
||||||
query: constructQuery()
|
|
||||||
}), options.callback);
|
|
||||||
},
|
|
||||||
size: 128,
|
|
||||||
sort: [
|
|
||||||
{
|
|
||||||
key: "director",
|
|
||||||
operator: "+"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
unique: "id"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return $list;
|
|
||||||
}
|
|
||||||
|
|
||||||
function constructQuery(groupId) {
|
|
||||||
var conditions = $.merge(!Ox.isUndefined(findCondition.key) ? [findCondition] : [], $.map(groups, function(v, i) {
|
|
||||||
if (v.id != groupId) {
|
|
||||||
return v.conditions;
|
|
||||||
}
|
|
||||||
}));
|
|
||||||
/*
|
|
||||||
Ox.print("conditions", conditions, "groups conditions", $.map(groups, function(v) {
|
|
||||||
return v.conditions;
|
|
||||||
}));
|
|
||||||
*/
|
|
||||||
return {
|
|
||||||
conditions: conditions,
|
|
||||||
operator: conditions.length ? "," : ""
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function constructStatus(data) {
|
|
||||||
var html = [];
|
|
||||||
$.each(data, function(k, v) {
|
|
||||||
html.push(Ox.toTitleCase(k) + ": " + [
|
|
||||||
Ox.formatNumber(data.items) + " movie" + (data.items != 1 ? "s" : ""),
|
|
||||||
Ox.formatDuration(data.runtime, "medium"),
|
|
||||||
data.files + " file" + (data.files != 1 ? "s" : ""),
|
|
||||||
Ox.formatDuration(data.duration, "short"),
|
|
||||||
Ox.formatValue(data.size, "B"),
|
|
||||||
Ox.formatValue(data.pixels, "px")
|
|
||||||
].join(", "));
|
|
||||||
})
|
|
||||||
return html.join(" — ");
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function getGroupById(id) { // unused
|
|
||||||
$.each(groups, function(i, v) {
|
|
||||||
if (v.id == id) {
|
|
||||||
return i;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
<!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"/>
|
|
||||||
<script type="text/javascript" src="../../build/js/OxUI.js"></script>
|
|
||||||
<script type="text/javascript" src="menu.js"></script>
|
|
||||||
</head>
|
|
||||||
<body></body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,150 +0,0 @@
|
||||||
Ox.UI(function() {
|
|
||||||
var button = new Ox.Button({
|
|
||||||
value: "First",
|
|
||||||
}).css({
|
|
||||||
position: "absolute",
|
|
||||||
left: "16px",
|
|
||||||
top: "16px",
|
|
||||||
width: "64px",
|
|
||||||
textAlign: "left"
|
|
||||||
}).appendTo($("body")),
|
|
||||||
menu = new Ox.Menu({
|
|
||||||
element: button,
|
|
||||||
id: "select",
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
checked: true,
|
|
||||||
group: "123",
|
|
||||||
id: "first",
|
|
||||||
title: "First"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
checked: false,
|
|
||||||
group: "123",
|
|
||||||
id: "second",
|
|
||||||
title: "Second"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
checked: false,
|
|
||||||
group: "123",
|
|
||||||
id: "third",
|
|
||||||
title: "Third"
|
|
||||||
},
|
|
||||||
{},
|
|
||||||
{
|
|
||||||
checked: false,
|
|
||||||
group: "123",
|
|
||||||
id: "fourth",
|
|
||||||
title: "Fourth"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
checked: false,
|
|
||||||
disabled: true,
|
|
||||||
group: "123",
|
|
||||||
id: "fifth",
|
|
||||||
title: "Fifth"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
checked: false,
|
|
||||||
group: "123",
|
|
||||||
id: "sixth",
|
|
||||||
title: "Sixth"
|
|
||||||
},
|
|
||||||
{},
|
|
||||||
{
|
|
||||||
id: "more",
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
checked: true,
|
|
||||||
group: "789",
|
|
||||||
id: "seventh",
|
|
||||||
title: "Seventh"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
checked: false,
|
|
||||||
group: "789",
|
|
||||||
id: "eighth",
|
|
||||||
title: "Eighth"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
checked: false,
|
|
||||||
group: "789",
|
|
||||||
id: "ninth",
|
|
||||||
title: "Ninth"
|
|
||||||
},
|
|
||||||
],
|
|
||||||
title: "More",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "even_more",
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
checked: true,
|
|
||||||
group: "101112",
|
|
||||||
id: "tenth",
|
|
||||||
title: "Tenth"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
checked: false,
|
|
||||||
group: "101112",
|
|
||||||
id: "eleventh",
|
|
||||||
title: "Eleventh"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
checked: false,
|
|
||||||
group: "101112",
|
|
||||||
id: "twelfth",
|
|
||||||
title: "Twelfth"
|
|
||||||
},
|
|
||||||
],
|
|
||||||
title: "Even More"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "nothing_more",
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
disabled: true,
|
|
||||||
id: "nothing",
|
|
||||||
title: "Nothing"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
title: "Nothing More"
|
|
||||||
},
|
|
||||||
{},
|
|
||||||
{
|
|
||||||
id: "foo",
|
|
||||||
title: "Foo"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "bar",
|
|
||||||
title: "Bar"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "baz",
|
|
||||||
title: "Baz"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
});
|
|
||||||
button
|
|
||||||
.click(function() {
|
|
||||||
$(this).blur(); // fix for firefox
|
|
||||||
menu.toggleMenu();
|
|
||||||
})
|
|
||||||
.bindEvent("OxClickMenu." + menu.id, function(event, data) {
|
|
||||||
button.options({
|
|
||||||
value: data.value
|
|
||||||
});
|
|
||||||
});
|
|
||||||
$select = $("<select>")
|
|
||||||
.css({
|
|
||||||
position: "absolute",
|
|
||||||
left: "160px",
|
|
||||||
top: "16px"
|
|
||||||
})
|
|
||||||
.appendTo($("body"));
|
|
||||||
$.each(["First", "Second", "Third"], function(i, v) {
|
|
||||||
$select.append(
|
|
||||||
$("<option>").html(v)
|
|
||||||
);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
|
|
@ -1,9 +0,0 @@
|
||||||
<!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>
|
|
||||||
|
|
@ -1,232 +0,0 @@
|
||||||
/*
|
|
||||||
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") {
|
|
||||||
Ox.print("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() {
|
|
||||||
Ox.print("Bar.bar()");
|
|
||||||
}
|
|
||||||
return that;
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
101
source/Ox.js
101
source/Ox.js
|
|
@ -318,7 +318,7 @@ Ox.filter = function(obj, fn) {
|
||||||
/*@
|
/*@
|
||||||
Ox.find <f> Returns array elements that match a string, leading matches first
|
Ox.find <f> Returns array elements that match a string, leading matches first
|
||||||
> Ox.find(['foo', 'bar', 'foobar', 'barfoo'], 'foo')
|
> Ox.find(['foo', 'bar', 'foobar', 'barfoo'], 'foo')
|
||||||
[['foo", 'foobar'], ['barfoo']]
|
[['foo', 'foobar'], ['barfoo']]
|
||||||
@*/
|
@*/
|
||||||
Ox.find = function(arr, str) {
|
Ox.find = function(arr, str) {
|
||||||
/*
|
/*
|
||||||
|
|
@ -352,15 +352,15 @@ Ox.forEach <f> forEach loop
|
||||||
callback <f> Callback function
|
callback <f> Callback function
|
||||||
value <*> Value
|
value <*> Value
|
||||||
key <n|s> Key
|
key <n|s> Key
|
||||||
@*/
|
<script>
|
||||||
/*
|
Ox.test.string = "";
|
||||||
> Ox.test.string = "";
|
Ox.forEach(["f", "o", "o"], function(v, i) { Ox.test.string += i; });
|
||||||
> Ox.forEach(["f", "o", "o"], function(v, i) { Ox.test.string += i; })
|
Ox.forEach({a: "f", b: "o", c: "o"}, function(v, k) { Ox.test.string += k; });
|
||||||
> Ox.forEach({a: "f", b: "o", c: "o"}, function(v, k) { Ox.test.string += k; })
|
Ox.forEach("foo", function(v) { Ox.test.string += v; });
|
||||||
> Ox.forEach("foo", function(v) { Ox.test.string += v; })
|
</script>
|
||||||
> Ox.test.string
|
> Ox.test.string
|
||||||
"012abcfoo"
|
"012abcfoo"
|
||||||
*/
|
@*/
|
||||||
Ox.forEach = function(obj, fn) {
|
Ox.forEach = function(obj, fn) {
|
||||||
var isObject = Ox.isObject(obj), key;
|
var isObject = Ox.isObject(obj), key;
|
||||||
for (key in obj) {
|
for (key in obj) {
|
||||||
|
|
@ -516,7 +516,9 @@ Ox.keys = function(obj) {
|
||||||
Ox.last <f> Gets or sets the last element of an array
|
Ox.last <f> Gets or sets the last element of an array
|
||||||
Unlike <code>foobarbaz[foobarbaz.length - 1]</code>,
|
Unlike <code>foobarbaz[foobarbaz.length - 1]</code>,
|
||||||
<code>Ox.last(foobarbaz)</code> is short.
|
<code>Ox.last(foobarbaz)</code> is short.
|
||||||
> Ox.test.array = [1, 2, 3]
|
<script>
|
||||||
|
Ox.test.array = [1, 2, 3];
|
||||||
|
</script>
|
||||||
> Ox.last(Ox.test.array)
|
> Ox.last(Ox.test.array)
|
||||||
3
|
3
|
||||||
> Ox.last(Ox.test.array, 4)
|
> Ox.last(Ox.test.array, 4)
|
||||||
|
|
@ -636,7 +638,7 @@ Ox.makeObject = function(obj) {
|
||||||
return ret;
|
return ret;
|
||||||
};
|
};
|
||||||
|
|
||||||
/*
|
/*@
|
||||||
Ox.map <f> Transforms the values of an array, object or string
|
Ox.map <f> Transforms the values of an array, object or string
|
||||||
Unlike <code>[].map()</code>, <code>Ox.map()</code> works for arrays,
|
Unlike <code>[].map()</code>, <code>Ox.map()</code> works for arrays,
|
||||||
objects and strings. Returning <code>null</code> from the iterator
|
objects and strings. Returning <code>null</code> from the iterator
|
||||||
|
|
@ -651,7 +653,7 @@ Ox.map <f> Transforms the values of an array, object or string
|
||||||
[true, true, false]
|
[true, true, false]
|
||||||
> Ox.map([,], function(v, i) { return i; })
|
> Ox.map([,], function(v, i) { return i; })
|
||||||
[0]
|
[0]
|
||||||
*/
|
@*/
|
||||||
|
|
||||||
Ox.map = function(obj, fn) {
|
Ox.map = function(obj, fn) {
|
||||||
// fixme: return null to filter out is a bit esoteric
|
// fixme: return null to filter out is a bit esoteric
|
||||||
|
|
@ -1104,6 +1106,7 @@ Ox.SHORT_WEEKDAYS = Ox.WEEKDAYS.map(function(val) {
|
||||||
//@ Date -----------------------------------------------------------------------
|
//@ Date -----------------------------------------------------------------------
|
||||||
|
|
||||||
//@ Ox.getDate <f> Get the day of a date, optionally UTC
|
//@ Ox.getDate <f> Get the day of a date, optionally UTC
|
||||||
|
// see Ox.setSeconds for source code
|
||||||
|
|
||||||
/*@
|
/*@
|
||||||
Ox.getDateInWeek <f> Get the date that falls on a given weekday in the same week
|
Ox.getDateInWeek <f> Get the date that falls on a given weekday in the same week
|
||||||
|
|
@ -1138,6 +1141,7 @@ Ox.getDateInWeek = function(date, weekday, utc) {
|
||||||
}
|
}
|
||||||
|
|
||||||
//@ Ox.getDay <f> Get the weekday of a date, optionally UTC
|
//@ Ox.getDay <f> Get the weekday of a date, optionally UTC
|
||||||
|
// see Ox.setSeconds for source code
|
||||||
|
|
||||||
/*@
|
/*@
|
||||||
Ox.getDayOfTheYear <f> Get the day of the year for a given date
|
Ox.getDayOfTheYear <f> Get the day of the year for a given date
|
||||||
|
|
@ -1212,8 +1216,9 @@ Ox.getFirstDayOfTheYear = function(date, utc) {
|
||||||
};
|
};
|
||||||
|
|
||||||
//@ Ox.getFullYear <f> Get the year of a date, optionally UTC
|
//@ Ox.getFullYear <f> Get the year of a date, optionally UTC
|
||||||
|
// see Ox.setSeconds for source code
|
||||||
//@ Ox.getHours <f> Get the hours of a date, optionally UTC
|
//@ Ox.getHours <f> Get the hours of a date, optionally UTC
|
||||||
|
// see Ox.setSeconds for source code
|
||||||
|
|
||||||
/*@
|
/*@
|
||||||
Ox.getISODate <f> Get the ISO date string for a given date
|
Ox.getISODate <f> Get the ISO date string for a given date
|
||||||
|
|
@ -1277,9 +1282,13 @@ Ox.getISOYear = function(date, utc) {
|
||||||
};
|
};
|
||||||
|
|
||||||
//@ Ox.getMilliseconds <f> Get the milliseconds of a date
|
//@ Ox.getMilliseconds <f> Get the milliseconds of a date
|
||||||
|
// see Ox.setSeconds for source code
|
||||||
//@ Ox.getMinutes <f> Get the minutes of a date, optionally UTC
|
//@ Ox.getMinutes <f> Get the minutes of a date, optionally UTC
|
||||||
|
// see Ox.setSeconds for source code
|
||||||
//@ Ox.getMonth <f> Get the month of a date, optionally UTC
|
//@ Ox.getMonth <f> Get the month of a date, optionally UTC
|
||||||
|
// see Ox.setSeconds for source code
|
||||||
//@ Ox.getSeconds <f> Get the seconds of a date
|
//@ Ox.getSeconds <f> Get the seconds of a date
|
||||||
|
// see Ox.setSeconds for source code
|
||||||
|
|
||||||
//@ Ox.getTime <f> Alias for <code>+new Date()</code> (deprecated)
|
//@ Ox.getTime <f> Alias for <code>+new Date()</code> (deprecated)
|
||||||
Ox.getTime = function() {
|
Ox.getTime = function() {
|
||||||
|
|
@ -1365,12 +1374,19 @@ Ox.makeYear = function(date, utc) {
|
||||||
};
|
};
|
||||||
|
|
||||||
//@ Ox.setDate <f> Set the day of a date, optionally UTC
|
//@ Ox.setDate <f> Set the day of a date, optionally UTC
|
||||||
|
// see Ox.setSeconds for source code
|
||||||
//@ Ox.setDay <f> Set the weekday of a date, optionally UTC
|
//@ Ox.setDay <f> Set the weekday of a date, optionally UTC
|
||||||
|
// see Ox.setSeconds for source code
|
||||||
//@ Ox.setFullYear <f> Set the year of a date, optionally UTC
|
//@ Ox.setFullYear <f> Set the year of a date, optionally UTC
|
||||||
|
// see Ox.setSeconds for source code
|
||||||
//@ Ox.setHours <f> Set the hours of a date, optionally UTC
|
//@ Ox.setHours <f> Set the hours of a date, optionally UTC
|
||||||
|
// see Ox.setSeconds for source code
|
||||||
//@ Ox.setMilliseconds <f> Set the milliseconds of a date
|
//@ Ox.setMilliseconds <f> Set the milliseconds of a date
|
||||||
|
// see Ox.setSeconds for source code
|
||||||
//@ Ox.setMinutes <f> Set the minutes of a date, optionally UTC
|
//@ Ox.setMinutes <f> Set the minutes of a date, optionally UTC
|
||||||
|
// see Ox.setSeconds for source code
|
||||||
//@ Ox.setMonth <f> Set the month of a date, optionally UTC
|
//@ Ox.setMonth <f> Set the month of a date, optionally UTC
|
||||||
|
// see Ox.setSeconds for source code
|
||||||
//@ Ox.setSeconds <f> Set the seconds of a date
|
//@ Ox.setSeconds <f> Set the seconds of a date
|
||||||
|
|
||||||
[
|
[
|
||||||
|
|
@ -1773,7 +1789,7 @@ Ox.element = function(str) {
|
||||||
'äbçdê'
|
'äbçdê'
|
||||||
@*/
|
@*/
|
||||||
Ox.encodeHTML = function(str) {
|
Ox.encodeHTML = function(str) {
|
||||||
return Ox.map(str, function(v) {
|
return Ox.map(str.toString(), function(v) {
|
||||||
var code = v.charCodeAt(0);
|
var code = v.charCodeAt(0);
|
||||||
return code < 128 ? (v in Ox.HTML_ENTITIES ? Ox.HTML_ENTITIES[v] : v) :
|
return code < 128 ? (v in Ox.HTML_ENTITIES ? Ox.HTML_ENTITIES[v] : v) :
|
||||||
'&#x' + Ox.pad(code.toString(16).toUpperCase(), 4) + ';';
|
'&#x' + Ox.pad(code.toString(16).toUpperCase(), 4) + ';';
|
||||||
|
|
@ -1946,11 +1962,7 @@ Ox.element = function(str) {
|
||||||
|
|
||||||
})();
|
})();
|
||||||
|
|
||||||
/*
|
//@ Format ---------------------------------------------------------------------
|
||||||
================================================================================
|
|
||||||
Format functions
|
|
||||||
================================================================================
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*@
|
/*@
|
||||||
Ox.formatArea <f> Formats a number of meters as square kilometers
|
Ox.formatArea <f> Formats a number of meters as square kilometers
|
||||||
|
|
@ -1984,7 +1996,9 @@ Ox.formatDate <f> Formats a date according to a format string
|
||||||
See
|
See
|
||||||
<a href="http://developer.apple.com/library/mac/#documentation/Darwin/Reference/ManPages/man3/strftime.3.html">strftime</a>
|
<a href="http://developer.apple.com/library/mac/#documentation/Darwin/Reference/ManPages/man3/strftime.3.html">strftime</a>
|
||||||
and <a href="http://en.wikipedia.org/wiki/ISO_8601">ISO 8601</a>.
|
and <a href="http://en.wikipedia.org/wiki/ISO_8601">ISO 8601</a>.
|
||||||
> Ox.test.date = new Date('2005-01-02 00:03:04')
|
<script>
|
||||||
|
Ox.test.date = new Date('2005-01-02 00:03:04');
|
||||||
|
</script>
|
||||||
> Ox.formatDate(Ox.test.date, '%A') // Full weekday
|
> Ox.formatDate(Ox.test.date, '%A') // Full weekday
|
||||||
'Sunday'
|
'Sunday'
|
||||||
> Ox.formatDate(Ox.test.date, '%a') // Abbreviated weekday
|
> Ox.formatDate(Ox.test.date, '%a') // Abbreviated weekday
|
||||||
|
|
@ -2256,7 +2270,7 @@ Ox.formatResolution = function(arr, str) {
|
||||||
/*@
|
/*@
|
||||||
Ox.formatString <f> Basic string formatting
|
Ox.formatString <f> Basic string formatting
|
||||||
> Ox.formatString('{0}{1}', ['foo', 'bar'])
|
> Ox.formatString('{0}{1}', ['foo', 'bar'])
|
||||||
foobar'
|
'foobar'
|
||||||
> Ox.formatString('{a}{b}', {a: 'foo', b: 'bar'})
|
> Ox.formatString('{a}{b}', {a: 'foo', b: 'bar'})
|
||||||
'foobar'
|
'foobar'
|
||||||
@*/
|
@*/
|
||||||
|
|
@ -2298,7 +2312,7 @@ Ox.formatUnit = function(num, str) {
|
||||||
return num + ' ' + str;
|
return num + ' ' + str;
|
||||||
};
|
};
|
||||||
|
|
||||||
//* Geo ------------------------------------------------------------------------
|
//@ Geo ------------------------------------------------------------------------
|
||||||
|
|
||||||
(function() {
|
(function() {
|
||||||
|
|
||||||
|
|
@ -2677,7 +2691,9 @@ Ox.parseHTML = (function() {
|
||||||
Ox.parseURL <f> Takes a URL, returns its components
|
Ox.parseURL <f> Takes a URL, returns its components
|
||||||
(url) -> <o> URL components
|
(url) -> <o> URL components
|
||||||
url <s> URL
|
url <s> URL
|
||||||
> Ox.test.object = Ox.parseURL('http://www.foo.com:8080/bar/index.html?a=0&b=1#c')
|
<script>
|
||||||
|
Ox.test.object = Ox.parseURL('http://www.foo.com:8080/bar/index.html?a=0&b=1#c');
|
||||||
|
</script>
|
||||||
> Ox.test.object.hash
|
> Ox.test.object.hash
|
||||||
'#c'
|
'#c'
|
||||||
> Ox.test.object.host
|
> Ox.test.object.host
|
||||||
|
|
@ -3053,29 +3069,28 @@ Ox.minify = function(source) {
|
||||||
/*@
|
/*@
|
||||||
Ox.test <f> Takes JavaScript, runs inline tests, returns results
|
Ox.test <f> Takes JavaScript, runs inline tests, returns results
|
||||||
@*/
|
@*/
|
||||||
Ox.test = function(source) {
|
Ox.test = function(file, callback) {
|
||||||
var tests = {
|
Ox.doc(file, function(items) {
|
||||||
success: [],
|
var tests = [];
|
||||||
failure: []
|
items.forEach(function(item) {
|
||||||
};
|
item.examples && item.examples.forEach(function(example) {
|
||||||
Ox.doc(source).forEach(function(item) {
|
Ox.print(example)
|
||||||
item.examples && item.examples.forEach(function(example) {
|
var actual = eval(example.statement);
|
||||||
Ox.print(example)
|
if (example.result) {
|
||||||
var actual = eval(example.statement);
|
tests.push({
|
||||||
if (example.result) {
|
actual: actual,
|
||||||
tests[
|
expected: example.result,
|
||||||
Ox.isEqual(eval('Ox.test.result = ' + example.result), actual) ?
|
name: item.name,
|
||||||
'success' : 'failure'
|
section: item.section,
|
||||||
].push({
|
statement: example.statement,
|
||||||
test: example.statement,
|
success: Ox.isEqual(eval('Ox.test.result = ' + example.result), actual)
|
||||||
expected: example.result,
|
});
|
||||||
actual: actual
|
}
|
||||||
});
|
});
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
callback(tests);
|
||||||
});
|
});
|
||||||
return tests;
|
};
|
||||||
}
|
|
||||||
|
|
||||||
/*@
|
/*@
|
||||||
Ox.tokenize <f> Tokenizes JavaScript
|
Ox.tokenize <f> Tokenizes JavaScript
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue