better list demo

This commit is contained in:
Rolux 2010-07-01 17:06:04 +02:00
parent 9cc01f56a7
commit e1f92d0fa9
5 changed files with 159 additions and 31 deletions

View File

@ -1172,7 +1172,7 @@ Ox.formatDate = function() {
}; };
}(); }();
Ox.formatDuration = function(sec, day, dec) { Ox.formatDuration = function(sec, dec, format) {
/* /*
>>> Ox.formatDuration(123456.789, 3) >>> Ox.formatDuration(123456.789, 3)
1:10:17:36.789 1:10:17:36.789
@ -1185,17 +1185,37 @@ Ox.formatDuration = function(sec, day, dec) {
>>> Ox.formatDuration(3599.999) >>> Ox.formatDuration(3599.999)
01:00:00 01:00:00
*/ */
var dec = arguments.length == 3 ? dec : (Ox.isNumber(day) ? day : 0), var format = arguments.length == 3 ? format : (Ox.isString(dec) ? dec : "short"),
day = arguments.length == 3 ? day : (Ox.isBoolean(day) ? day : false), dec = (arguments.length == 3 || Ox.isNumber(dec)) ? dec : 0,
sec = dec ? sec : Math.round(sec), sec = dec ? sec : Math.round(sec),
arr = [ val = [
Math.floor(sec / 86400), Math.floor(sec / 31536000),
Ox.pad(Math.floor(sec % 86400 / 3600), 2), Math.floor(sec % 31536000 / 86400),
Ox.pad(Math.floor(sec % 3600 / 60), 2), Math.floor(sec % 86400 / 3600),
Ox.pad(Ox.formatNumber(sec % 60, dec, true), dec ? dec + 3 : 2) Math.floor(sec % 3600 / 60),
]; format == "short" ? Ox.formatNumber(sec % 60, dec) : sec % 60
!arr[0] && !day && arr.shift(); ],
return arr.join(":"); str = {
medium: ["y", "d", "h", "m", "s"],
long: ["year", "day", "hour", "minute", "second"]
},
pad = [0, 3, 2, 2, dec ? dec + 3 : 2];
while (!val[0] && val.length > (format == "short" ? 3 : 1)) {
val.shift();
str.medium.shift();
str.long.shift();
pad.shift();
}
while (format != "short" && !val[val.length - 1] && val.length > 1) {
val.pop();
str.medium.pop();
str.long.pop();
}
return $.map(val, function(v, i) {
return format == "short" ? Ox.pad(v, pad[i]) :
v + (format == "long" ? " " : "") + str[format][i] +
(format == "long" && v != 1 ? "s" : "");
}).join(format == "short" ? ":" : " ");
}; };
Ox.formatNumber = function(num, dec) { Ox.formatNumber = function(num, dec) {

View File

@ -1557,7 +1557,7 @@ requires
style: "default", // can be default, symbol or tab style: "default", // can be default, symbol or tab
type: "text", type: "text",
value: "", value: "",
values: [] values: [] // fixme: shouldn't this go into self.values?
}) })
.options($.extend(options, { .options($.extend(options, {
value: $.isArray(options.value) ? value: $.isArray(options.value) ?

View File

@ -4,4 +4,5 @@
#totals { #totals {
margin-top: 2px; margin-top: 2px;
font-size: 9px; font-size: 9px;
color: rgb(192, 192, 192);
} }

View File

@ -1,4 +1,4 @@
<!DOCTYPE html> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<title>oxjs List Demo</title> <title>oxjs List Demo</title>
@ -10,6 +10,5 @@
<script type="text/javascript" src="../../build/js/ox.ui.js"></script> <script type="text/javascript" src="../../build/js/ox.ui.js"></script>
<script type="text/javascript" src="list.js"></script> <script type="text/javascript" src="list.js"></script>
</head> </head>
<body> <body></body>
</body>
</html> </html>

View File

@ -133,7 +133,7 @@ $(function() {
operator: "-", operator: "-",
title: "Year", title: "Year",
visible: true, visible: true,
width: 80 width: 60
}, },
{ {
align: "right", align: "right",
@ -201,22 +201,128 @@ $(function() {
size: 24 size: 24
}), }),
$button = Ox.Button({
id: "groupsButton",
value: ["Show Groups", "Hide Groups"]
}).css({
float: "left",
margin: "4px"
}).width(80).appendTo($toolBar),
$select = Ox.Select({ $select = Ox.Select({
id: "selectView", id: "viewSelect",
items: [ items: [
{ {
checked: true, checked: true,
id: "list", id: "list",
title: "View: List" title: "View as List"
}, },
{ {
id: "icons", id: "icons",
title: "View: Icons" title: "View as Icons"
} },
{
id: "clips",
title: "View with Clips"
},
{
id: "timelines",
title: "View with Timelines"
},
{
id: "timelines",
title: "View with Maps"
},
{
id: "timelines",
title: "View with Calendars"
},
{
id: "timelines",
title: "View as Clips"
},
{
id: "timelines",
title: "View on Map"
},
{
id: "timelines",
title: "View on Calendar"
},
] ]
}).css({ }).css({
float: "left",
margin: "4px" margin: "4px"
}).width(128).appendTo($toolBar); }).width(120).appendTo($toolBar);
$input = 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: Year",
"Find: Language",
"Find: Genre",
"Find: Writer",
"Find: Producer",
"Find: Cinematographer",
"Find: Editor",
"Find: Actor",
"Find: Character",
"Find: Name",
"Find: Keyword",
"Find: Summary",
"Find: Dialog",
],
labelWidth: 85
}).css({
float: "right",
margin: "4px"
}).width(300).appendTo($toolBar);
$contentPanel = new Ox.SplitPanel({ $contentPanel = new Ox.SplitPanel({
elements: [ elements: [
@ -289,7 +395,7 @@ $(function() {
] ]
}, },
], ],
size: "large" size: "medium"
}), }),
$mainPanel = new Ox.SplitPanel({ $mainPanel = new Ox.SplitPanel({
@ -308,7 +414,7 @@ $(function() {
elements: [ elements: [
{ {
element: $mainMenu, element: $mainMenu,
size: 24 size: 20
}, },
{ {
element: $mainPanel element: $mainPanel
@ -363,13 +469,15 @@ $(function() {
}); });
Ox.Event.bind(null, "load_list", function(event, data) { Ox.Event.bind(null, "load_list", function(event, data) {
Ox.print(data) Ox.print("data", data)
var dhms = ["day", "hour", "minute", "second"], var html = [
html = [
data.items + " movie" + (data.items != 1 ? "s" : ""), data.items + " movie" + (data.items != 1 ? "s" : ""),
$.map(Ox.formatDuration(data.runtime).split(":"), function(v, i) { Ox.formatDuration(data.runtime, "long"),
return v + " " + dhms[i] + ((v != "1" && v != "01") ? "s" : ""); Ox.formatDuration(data.runtime, "medium"),
}).join(" "), Ox.formatDuration(data.runtime, 3, "short"),
data.files + " file" + (data.files != 1 ? "s" : ""),
Ox.formatDuration(data.duration, "short"),
Ox.formatValue(data.size, "B"),
Ox.formatValue(data.pixels, "px") Ox.formatValue(data.pixels, "px")
]; ];
$totals.html(html.join(", ")); $totals.html(html.join(", "));