add load event to list
This commit is contained in:
Rolux
parent
82f1fc8b9a
commit
9cc01f56a7
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
7
demos/test/list.css
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
#statusBar {
|
||||
text-align: center;
|
||||
}
|
||||
#totals {
|
||||
margin-top: 2px;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user