0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

add load event to list

Browse source
This commit is contained in:
Rolux 2010-07-01 14:26:32 +02:00
parent a5c5ab7e4d
commit 0ea96e3810
6 changed files with 188 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
build/css/ox.ui.modern.css
View file

@ -186,6 +186,13 @@ Scrollbars
.OxThemeModern ::-webkit-scrollbar {
width: 12px;
height: 12px;
}
.OxThemeModern ::-webkit-scrollbar:horizontal {
border-top: 1px solid rgb(48, 48, 48);
border-bottom: 1px solid rgb(48, 48, 48);
background: -webkit-gradient(linear, left top, left bottom, from(rgb(96, 96, 96)), to(rgb(64, 64, 64)));
}
.OxThemeModern ::-webkit-scrollbar:vertical {
border-left: 1px solid rgb(48, 48, 48);
border-right: 1px solid rgb(48, 48, 48);
background: -webkit-gradient(linear, left top, right top, from(rgb(96, 96, 96)), to(rgb(64, 64, 64)));
@ -206,6 +213,11 @@ Scrollbars
.OxThemeModern ::-webkit-scrollbar-button:vertical:increment {
background: url(../png/ox.ui.modern/scrollbarVerticalIncrement.png);
}
.OxThemeModern ::-webkit-scrollbar-corner {
border-right: 1px solid rgb(48, 48, 48);
border-bottom: 1px solid rgb(48, 48, 48);
background: -webkit-gradient(linear, left top, right bottom, from(rgb(96, 96, 96)), to(rgb(32, 32, 32)));
}
.OxThemeModern ::-webkit-scrollbar-thumb {
border: 1px solid rgb(48, 48, 48);
-webkit-border-radius: 6px;

43
build/js/ox.js
View file

@ -1172,6 +1172,32 @@ Ox.formatDate = function() {
};
}();
Ox.formatDuration = function(sec, day, dec) {
/*
>>> Ox.formatDuration(123456.789, 3)
1:10:17:36.789
>>> Ox.formatDuration(12345.6789)
03:25:46
>>> Ox.formatDuration(12345.6789, true)
0:03:25:46
>>> Ox.formatDuration(3599.999, 3)
00:59:59.999
>>> Ox.formatDuration(3599.999)
01:00:00
*/
var dec = arguments.length == 3 ? dec : (Ox.isNumber(day) ? day : 0),
day = arguments.length == 3 ? day : (Ox.isBoolean(day) ? day : false),
sec = dec ? sec : Math.round(sec),
arr = [
Math.floor(sec / 86400),
Ox.pad(Math.floor(sec % 86400 / 3600), 2),
Ox.pad(Math.floor(sec % 3600 / 60), 2),
Ox.pad(Ox.formatNumber(sec % 60, dec, true), dec ? dec + 3 : 2)
];
!arr[0] && !day && arr.shift();
return arr.join(":");
};
Ox.formatNumber = function(num, dec) {
/*
>>> Ox.formatNumber(123456789, 3)
@ -1192,6 +1218,23 @@ Ox.formatNumber = function(num, dec) {
return (num < 0 ? "-" : "") + spl.join(".");
};
Ox.formatValue = function(num, str) {
/*
>>> Ox.formatValue(0, "B")
???
>>> Ox.formatValue(123456789, "B")
???
*/
var val = "";
$.each(["K", "M", "G", "T", "P"], function(i, v) {
if (num < Math.pow(1024, i + 2) || i == len - 1) {
val = Ox.formatNumber(num / Math.pow(1024, i + 1), i) + " " + v + str;
return false;
}
});
return val;
};
/*
================================================================================
Math functions

4
build/js/ox.ui.js
View file

@ -2394,8 +2394,6 @@ requires
.click(click)
.scroll(scroll);
Ox.print("self.options.unique", self.options.unique)
$.extend(self, {
$items: [],
$pages: [],
@ -2818,7 +2816,7 @@ requires
self.requests.push(self.options.request({
callback: function(result) {
var keys = {};
Ox.print("items", result.data.items);
that.triggerEvent("load", result.data);
$.extend(self, {
listHeight: result.data.items * self.options.itemHeight, // fixme: should be listSize
listLength: result.data.items,

7
demos/test/list.css Normal file
View file

@ -0,0 +1,7 @@
#statusBar {
text-align: center;
}
#totals {
margin-top: 2px;
font-size: 9px;
}

1
demos/test/list.html
View file

@ -4,6 +4,7 @@
<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/jquery-1.4.2.js"></script>
<script type="text/javascript" src="../../build/js/ox.js"></script>
<script type="text/javascript" src="../../build/js/ox.ui.js"></script>

191
demos/test/list.js
View file

@ -6,37 +6,6 @@ $(function() {
// requestURL: "http://blackbook.local:8000/api/"
requestURL: "http://lion.oil21.org:8000/api/"
}),
$menu = new Ox.MainMenu({
menus: [
{
id: "demo",
title: "Demo",
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: "runtime", title: "Runtime" },
{ checked: false, group: "sort_movies", id: "language", title: "Language" },
{ 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" },
] }
]
},
],
size: "large"
}),
groups = [
{
id: "director",
@ -63,9 +32,9 @@ $(function() {
],
$group = [],
elements = [],
documentWidth = $document.width();
rightPanelWidth = $document.width() - 256;
$.each(groups, function(i, v) {
var size = documentWidth / 3 + (documentWidth % 3 > i);
var size = rightPanelWidth / 3 + (rightPanelWidth % 3 > i);
$group[i] = new Ox.TextList({
columns: [
{
@ -94,7 +63,7 @@ $(function() {
query: {
conditions: [
{
key: "country",
key: "director",
value: "",
operator: ""
}
@ -117,29 +86,12 @@ $(function() {
});
});
Ox.print("elements", elements)
var $groups = new Ox.SplitPanel({
var $groupsPanel = new Ox.SplitPanel({
elements: elements,
orientation: "horizontal"
}),
$listbar = Ox.Bar({
size: 24
});
$select = Ox.Select({
id: "selectView",
items: [
{
checked: true,
id: "list",
title: "View: List"
},
{
id: "icons",
title: "View: Icons"
}
]
}).css({
margin: "4px"
}).width(128).appendTo($listbar);
$list = new Ox.TextList({
columns: [
{
@ -228,7 +180,7 @@ $(function() {
query: {
conditions: [
{
key: "country",
key: "director",
value: "",
operator: ""
}
@ -239,39 +191,132 @@ $(function() {
},
sort: [
{
key: "year",
operator: "-"
key: "director",
operator: "+"
}
]
}),
$right = Ox.SplitPanel({
elements: [
$toolBar = Ox.Bar({
size: 24
}),
$select = Ox.Select({
id: "selectView",
items: [
{
element: $groups,
size: 128
checked: true,
id: "list",
title: "View: List"
},
{
element: $listbar,
size: 24
id: "icons",
title: "View: Icons"
}
]
}).css({
margin: "4px"
}).width(128).appendTo($toolBar);
$contentPanel = new Ox.SplitPanel({
elements: [
{
element: $groupsPanel,
size: 128
},
{
element: $list
}
],
orientation: "vertical"
})
$main = Ox.SplitPanel({
}),
$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: $menu,
element: $toolBar,
size: 24
},
{
element: $right
element: $contentPanel
},
{
element: $statusBar,
size: 16
}
],
orientation: "vertical"
}),
$mainMenu = new Ox.MainMenu({
menus: [
{
id: "demo",
title: "Demo",
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: "runtime", title: "Runtime" },
{ checked: false, group: "sort_movies", id: "language", title: "Language" },
{ 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" },
] }
]
},
],
size: "large"
}),
$mainPanel = new Ox.SplitPanel({
elements: [
{
element: $leftPanel,
size: 256
},
{
element: $rightPanel
}
]
}),
$appPanel = Ox.SplitPanel({
elements: [
{
element: $mainMenu,
size: 24
},
{
element: $mainPanel
}
],
orientation: "vertical"
}).appendTo($body);
$.each(groups, function(i, group) {
Ox.Event.bind(null, "select_group_" + group.id, function(event, data) {
$list.options({
@ -316,6 +361,18 @@ $(function() {
});
Ox.Event.bind(null, "change_sort_movies", function(event, data) {
});
Ox.Event.bind(null, "load_list", function(event, data) {
Ox.print(data)
var dhms = ["day", "hour", "minute", "second"],
html = [
data.items + " movie" + (data.items != 1 ? "s" : ""),
$.map(Ox.formatDuration(data.runtime).split(":"), function(v, i) {
return v + " " + dhms[i] + ((v != "1" && v != "01") ? "s" : "");
}).join(" "),
Ox.formatValue(data.pixels, "px")
];
$totals.html(html.join(", "));
});
Ox.Event.bind(null, "sort_list", function(event, data) {