From 9cc01f56a7874b7181f1a3db17f2ef9ec5b54aca Mon Sep 17 00:00:00 2001 From: Rolux Date: Thu, 1 Jul 2010 14:26:32 +0200 Subject: [PATCH] add load event to list --- build/css/ox.ui.modern.css | 12 +++ build/js/ox.js | 43 +++++++++ build/js/ox.ui.js | 4 +- demos/test/list.css | 7 ++ demos/test/list.html | 1 + demos/test/list.js | 191 ++++++++++++++++++++++++------------- 6 files changed, 188 insertions(+), 70 deletions(-) create mode 100644 demos/test/list.css diff --git a/build/css/ox.ui.modern.css b/build/css/ox.ui.modern.css index f776875..6932d24 100644 --- a/build/css/ox.ui.modern.css +++ b/build/css/ox.ui.modern.css @@ -186,6 +186,13 @@ Scrollbars .OxThemeModern ::-webkit-scrollbar { width: 12px; height: 12px; +} +.OxThemeModern ::-webkit-scrollbar:horizontal { + border-top: 1px solid rgb(48, 48, 48); + border-bottom: 1px solid rgb(48, 48, 48); + background: -webkit-gradient(linear, left top, left bottom, from(rgb(96, 96, 96)), to(rgb(64, 64, 64))); +} +.OxThemeModern ::-webkit-scrollbar:vertical { border-left: 1px solid rgb(48, 48, 48); border-right: 1px solid rgb(48, 48, 48); background: -webkit-gradient(linear, left top, right top, from(rgb(96, 96, 96)), to(rgb(64, 64, 64))); @@ -206,6 +213,11 @@ Scrollbars .OxThemeModern ::-webkit-scrollbar-button:vertical:increment { background: url(../png/ox.ui.modern/scrollbarVerticalIncrement.png); } +.OxThemeModern ::-webkit-scrollbar-corner { + border-right: 1px solid rgb(48, 48, 48); + border-bottom: 1px solid rgb(48, 48, 48); + background: -webkit-gradient(linear, left top, right bottom, from(rgb(96, 96, 96)), to(rgb(32, 32, 32))); +} .OxThemeModern ::-webkit-scrollbar-thumb { border: 1px solid rgb(48, 48, 48); -webkit-border-radius: 6px; diff --git a/build/js/ox.js b/build/js/ox.js index 7df4967..ab96a7e 100644 --- a/build/js/ox.js +++ b/build/js/ox.js @@ -1172,6 +1172,32 @@ Ox.formatDate = function() { }; }(); +Ox.formatDuration = function(sec, day, dec) { + /* + >>> Ox.formatDuration(123456.789, 3) + 1:10:17:36.789 + >>> Ox.formatDuration(12345.6789) + 03:25:46 + >>> Ox.formatDuration(12345.6789, true) + 0:03:25:46 + >>> Ox.formatDuration(3599.999, 3) + 00:59:59.999 + >>> 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), + 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(":"); +}; + Ox.formatNumber = function(num, dec) { /* >>> Ox.formatNumber(123456789, 3) @@ -1192,6 +1218,23 @@ Ox.formatNumber = function(num, dec) { return (num < 0 ? "-" : "") + spl.join("."); }; +Ox.formatValue = function(num, str) { + /* + >>> Ox.formatValue(0, "B") + ??? + >>> Ox.formatValue(123456789, "B") + ??? + */ + var val = ""; + $.each(["K", "M", "G", "T", "P"], function(i, v) { + if (num < Math.pow(1024, i + 2) || i == len - 1) { + val = Ox.formatNumber(num / Math.pow(1024, i + 1), i) + " " + v + str; + return false; + } + }); + return val; +}; + /* ================================================================================ Math functions diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index bc1a267..6ca6ee7 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -2394,8 +2394,6 @@ requires .click(click) .scroll(scroll); - Ox.print("self.options.unique", self.options.unique) - $.extend(self, { $items: [], $pages: [], @@ -2818,7 +2816,7 @@ requires self.requests.push(self.options.request({ callback: function(result) { var keys = {}; - Ox.print("items", result.data.items); + that.triggerEvent("load", result.data); $.extend(self, { listHeight: result.data.items * self.options.itemHeight, // fixme: should be listSize listLength: result.data.items, diff --git a/demos/test/list.css b/demos/test/list.css new file mode 100644 index 0000000..fec51a4 --- /dev/null +++ b/demos/test/list.css @@ -0,0 +1,7 @@ +#statusBar { + text-align: center; +} +#totals { + margin-top: 2px; + font-size: 9px; +} \ No newline at end of file diff --git a/demos/test/list.html b/demos/test/list.html index 31b6422..5577b1b 100644 --- a/demos/test/list.html +++ b/demos/test/list.html @@ -4,6 +4,7 @@ oxjs List Demo + diff --git a/demos/test/list.js b/demos/test/list.js index 94d8dd0..c2a17fa 100644 --- a/demos/test/list.js +++ b/demos/test/list.js @@ -6,37 +6,6 @@ $(function() { // requestURL: "http://blackbook.local:8000/api/" requestURL: "http://lion.oil21.org:8000/api/" }), - $menu = new Ox.MainMenu({ - menus: [ - { - id: "demo", - title: "Demo", - items: [ - { id: "about", title: "About" } - ] - }, - { - id: "sort", - title: "Sort", - items: [ - { id: "sort_movies", title: "Sort Movies by", items: [ - { checked: false, group: "sort_movies", id: "title", title: "Title"}, - { checked: false, group: "sort_movies", id: "director", title: "Director" }, - { checked: false, group: "sort_movies", id: "country", title: "Country" }, - { checked: true, group: "sort_movies", id: "year", title: "Year" }, - { checked: false, group: "sort_movies", id: "runtime", title: "Runtime" }, - { checked: false, group: "sort_movies", id: "language", title: "Language" }, - { checked: false, group: "sort_movies", id: "genre", title: "Genre" }, - ] }, - { id: "order_movies", title: "Order Movies", items: [ - { checked: false, group: "order_movies", id: "ascending", title: "Ascending"}, - { checked: true, group: "order_movies", id: "descending", title: "Descending" }, - ] } - ] - }, - ], - size: "large" - }), groups = [ { id: "director", @@ -63,9 +32,9 @@ $(function() { ], $group = [], elements = [], - documentWidth = $document.width(); + rightPanelWidth = $document.width() - 256; $.each(groups, function(i, v) { - var size = documentWidth / 3 + (documentWidth % 3 > i); + var size = rightPanelWidth / 3 + (rightPanelWidth % 3 > i); $group[i] = new Ox.TextList({ columns: [ { @@ -94,7 +63,7 @@ $(function() { query: { conditions: [ { - key: "country", + key: "director", value: "", operator: "" } @@ -117,29 +86,12 @@ $(function() { }); }); Ox.print("elements", elements) - var $groups = new Ox.SplitPanel({ + + var $groupsPanel = new Ox.SplitPanel({ elements: elements, orientation: "horizontal" }), - $listbar = Ox.Bar({ - size: 24 - }); - $select = Ox.Select({ - id: "selectView", - items: [ - { - checked: true, - id: "list", - title: "View: List" - }, - { - id: "icons", - title: "View: Icons" - } - ] - }).css({ - margin: "4px" - }).width(128).appendTo($listbar); + $list = new Ox.TextList({ columns: [ { @@ -228,7 +180,7 @@ $(function() { query: { conditions: [ { - key: "country", + key: "director", value: "", operator: "" } @@ -239,39 +191,132 @@ $(function() { }, sort: [ { - key: "year", - operator: "-" + key: "director", + operator: "+" } ] }), - $right = Ox.SplitPanel({ - elements: [ + + $toolBar = Ox.Bar({ + size: 24 + }), + + $select = Ox.Select({ + id: "selectView", + items: [ { - element: $groups, - size: 128 + checked: true, + id: "list", + title: "View: List" }, { - element: $listbar, - size: 24 + id: "icons", + title: "View: Icons" + } + ] + }).css({ + margin: "4px" + }).width(128).appendTo($toolBar); + + $contentPanel = new Ox.SplitPanel({ + elements: [ + { + element: $groupsPanel, + size: 128 }, { element: $list } ], orientation: "vertical" - }) - $main = Ox.SplitPanel({ + }), + + $statusBar = new Ox.Bar({ + size: 16 + }).attr({ + id: "statusBar" + }), + + $totals = new Ox.Element().attr({ + id: "totals" + }).appendTo($statusBar); + + $leftPanel = new Ox.Container(), + + $rightPanel = new Ox.SplitPanel({ elements: [ { - element: $menu, + element: $toolBar, size: 24 }, { - element: $right + element: $contentPanel + }, + { + element: $statusBar, + size: 16 + } + ], + orientation: "vertical" + }), + + $mainMenu = new Ox.MainMenu({ + menus: [ + { + id: "demo", + title: "Demo", + items: [ + { id: "about", title: "About" } + ] + }, + { + id: "sort", + title: "Sort", + items: [ + { id: "sort_movies", title: "Sort Movies by", items: [ + { checked: false, group: "sort_movies", id: "title", title: "Title"}, + { checked: false, group: "sort_movies", id: "director", title: "Director" }, + { checked: false, group: "sort_movies", id: "country", title: "Country" }, + { checked: true, group: "sort_movies", id: "year", title: "Year" }, + { checked: false, group: "sort_movies", id: "runtime", title: "Runtime" }, + { checked: false, group: "sort_movies", id: "language", title: "Language" }, + { checked: false, group: "sort_movies", id: "genre", title: "Genre" }, + ] }, + { id: "order_movies", title: "Order Movies", items: [ + { checked: false, group: "order_movies", id: "ascending", title: "Ascending"}, + { checked: true, group: "order_movies", id: "descending", title: "Descending" }, + ] } + ] + }, + ], + size: "large" + }), + + $mainPanel = new Ox.SplitPanel({ + elements: [ + { + element: $leftPanel, + size: 256 + }, + { + element: $rightPanel + } + ] + }), + + $appPanel = Ox.SplitPanel({ + elements: [ + { + element: $mainMenu, + size: 24 + }, + { + element: $mainPanel } ], orientation: "vertical" }).appendTo($body); + $.each(groups, function(i, group) { Ox.Event.bind(null, "select_group_" + group.id, function(event, data) { $list.options({ @@ -316,6 +361,18 @@ $(function() { }); Ox.Event.bind(null, "change_sort_movies", function(event, data) { + }); + Ox.Event.bind(null, "load_list", function(event, data) { + Ox.print(data) + var dhms = ["day", "hour", "minute", "second"], + 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.formatValue(data.pixels, "px") + ]; + $totals.html(html.join(", ")); }); Ox.Event.bind(null, "sort_list", function(event, data) {