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)
|
>>> 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) {
|
||||||
|
|
|
||||||
|
|
@ -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) ?
|
||||||
|
|
|
||||||
|
|
@ -4,4 +4,5 @@
|
||||||
#totals {
|
#totals {
|
||||||
margin-top: 2px;
|
margin-top: 2px;
|
||||||
font-size: 9px;
|
font-size: 9px;
|
||||||
|
color: rgb(192, 192, 192);
|
||||||
}
|
}
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -133,7 +133,7 @@ $(function() {
|
||||||
operator: "-",
|
operator: "-",
|
||||||
title: "Year",
|
title: "Year",
|
||||||
visible: true,
|
visible: true,
|
||||||
width: 80
|
width: 60
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
align: "right",
|
align: "right",
|
||||||
|
|
@ -198,25 +198,131 @@ $(function() {
|
||||||
}),
|
}),
|
||||||
|
|
||||||
$toolBar = Ox.Bar({
|
$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({
|
$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(", "));
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue