better list demo
This commit is contained in:
Rolux
parent
0ea96e3810
commit
894f27f760
5 changed files with 159 additions and 31 deletions
|
|
@ -1172,7 +1172,7 @@ Ox.formatDate = function() {
|
|||
};
|
||||
}();
|
||||
|
||||
Ox.formatDuration = function(sec, day, dec) {
|
||||
Ox.formatDuration = function(sec, dec, format) {
|
||||
/*
|
||||
>>> Ox.formatDuration(123456.789, 3)
|
||||
1:10:17:36.789
|
||||
|
|
@ -1185,17 +1185,37 @@ Ox.formatDuration = function(sec, day, dec) {
|
|||
>>> 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),
|
||||
var format = arguments.length == 3 ? format : (Ox.isString(dec) ? dec : "short"),
|
||||
dec = (arguments.length == 3 || Ox.isNumber(dec)) ? dec : 0,
|
||||
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(":");
|
||||
val = [
|
||||
Math.floor(sec / 31536000),
|
||||
Math.floor(sec % 31536000 / 86400),
|
||||
Math.floor(sec % 86400 / 3600),
|
||||
Math.floor(sec % 3600 / 60),
|
||||
format == "short" ? Ox.formatNumber(sec % 60, dec) : sec % 60
|
||||
],
|
||||
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) {
|
||||
|
|
|
|||
|
|
@ -1557,7 +1557,7 @@ requires
|
|||
style: "default", // can be default, symbol or tab
|
||||
type: "text",
|
||||
value: "",
|
||||
values: []
|
||||
values: [] // fixme: shouldn't this go into self.values?
|
||||
})
|
||||
.options($.extend(options, {
|
||||
value: $.isArray(options.value) ?
|
||||
|
|
|
|||
|
|
@ -4,4 +4,5 @@
|
|||
#totals {
|
||||
margin-top: 2px;
|
||||
font-size: 9px;
|
||||
color: rgb(192, 192, 192);
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<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="list.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
<body></body>
|
||||
</html>
|
||||
|
|
@ -133,7 +133,7 @@ $(function() {
|
|||
operator: "-",
|
||||
title: "Year",
|
||||
visible: true,
|
||||
width: 80
|
||||
width: 60
|
||||
},
|
||||
{
|
||||
align: "right",
|
||||
|
|
@ -198,25 +198,131 @@ $(function() {
|
|||
}),
|
||||
|
||||
$toolBar = Ox.Bar({
|
||||
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({
|
||||
id: "selectView",
|
||||
id: "viewSelect",
|
||||
items: [
|
||||
{
|
||||
checked: true,
|
||||
id: "list",
|
||||
title: "View: List"
|
||||
title: "View as List"
|
||||
},
|
||||
{
|
||||
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({
|
||||
float: "left",
|
||||
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({
|
||||
elements: [
|
||||
|
|
@ -289,7 +395,7 @@ $(function() {
|
|||
]
|
||||
},
|
||||
],
|
||||
size: "large"
|
||||
size: "medium"
|
||||
}),
|
||||
|
||||
$mainPanel = new Ox.SplitPanel({
|
||||
|
|
@ -308,7 +414,7 @@ $(function() {
|
|||
elements: [
|
||||
{
|
||||
element: $mainMenu,
|
||||
size: 24
|
||||
size: 20
|
||||
},
|
||||
{
|
||||
element: $mainPanel
|
||||
|
|
@ -363,13 +469,15 @@ $(function() {
|
|||
|
||||
});
|
||||
Ox.Event.bind(null, "load_list", function(event, data) {
|
||||
Ox.print(data)
|
||||
var dhms = ["day", "hour", "minute", "second"],
|
||||
html = [
|
||||
Ox.print("data", data)
|
||||
var 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.formatDuration(data.runtime, "long"),
|
||||
Ox.formatDuration(data.runtime, "medium"),
|
||||
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")
|
||||
];
|
||||
$totals.html(html.join(", "));
|
||||
|
|
|
|||
Loading…
Reference in a new issue