CAMP/oxjstmp
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

better list demo

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
build/js/ox.js
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)
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) {

2
build/js/ox.ui.js
View File

@ -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) ?

1
demos/test/list.css
View File

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

5
demos/test/list.html
View File

@ -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>

140
demos/test/list.js
View File

@ -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(", "));