From 894f27f7609b52e6dd21b7b9d9c4c1ee19d23c59 Mon Sep 17 00:00:00 2001 From: Rolux Date: Thu, 1 Jul 2010 17:06:04 +0200 Subject: [PATCH] better list demo --- build/js/ox.js | 42 +++++++++---- build/js/ox.ui.js | 2 +- demos/test/list.css | 1 + demos/test/list.html | 5 +- demos/test/list.js | 140 ++++++++++++++++++++++++++++++++++++++----- 5 files changed, 159 insertions(+), 31 deletions(-) diff --git a/build/js/ox.js b/build/js/ox.js index ab96a7e5..28a56c96 100644 --- a/build/js/ox.js +++ b/build/js/ox.js @@ -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) { diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index 6ca6ee7f..3f0a8499 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -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) ? diff --git a/demos/test/list.css b/demos/test/list.css index fec51a4d..bb75e1db 100644 --- a/demos/test/list.css +++ b/demos/test/list.css @@ -4,4 +4,5 @@ #totals { margin-top: 2px; font-size: 9px; + color: rgb(192, 192, 192); } \ No newline at end of file diff --git a/demos/test/list.html b/demos/test/list.html index 5577b1b9..f7b28d88 100644 --- a/demos/test/list.html +++ b/demos/test/list.html @@ -1,4 +1,4 @@ - + oxjs List Demo @@ -10,6 +10,5 @@ - - + \ No newline at end of file diff --git a/demos/test/list.js b/demos/test/list.js index c2a17fa7..d9c7e93e 100644 --- a/demos/test/list.js +++ b/demos/test/list.js @@ -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(", "));