From 3a21cc95c7db0f516065b8901cdbcc4d30cd4cbb Mon Sep 17 00:00:00 2001 From: Rolux Date: Fri, 2 Jul 2010 01:51:08 +0200 Subject: [PATCH] better list demo --- build/css/ox.ui.css | 10 +++++- build/js/ox.ui.js | 74 ++++++++++++++++++++++++--------------------- demos/test/list.js | 54 +++++++++++++++++++++++++-------- 3 files changed, 91 insertions(+), 47 deletions(-) diff --git a/build/css/ox.ui.css b/build/css/ox.ui.css index 21e98a6..4c42c0e 100644 --- a/build/css/ox.ui.css +++ b/build/css/ox.ui.css @@ -637,10 +637,18 @@ Menus background: rgb(48, 48, 48); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(80, 80, 80)), color-stop(1, rgb(48, 48, 48))); } -.OxMainMenu > .OxExtras { +.OxMainMenu.OxLarge > .OxExtras { float: right; padding: 4px 12px 0 0; } +.OxMainMenu.OxMedium > .OxExtras { + float: right; + padding: 2px 10px 0 0; +} +.OxMainMenu.OxSmall > .OxExtras { + float: right; + padding: 2px 8px 0 0; +} .OxMenu { diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index 3f0a849..3ce181e 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -204,7 +204,6 @@ requires // use dom elements / jquery instead - Ox.Event = function() { var keyboardEvents = {}; $eventHandler = $("
"); @@ -532,8 +531,6 @@ requires Ox.Request = function() { - // chained requests, make cancelable: id = 4.7.9 - var cache = {}, pending = {}, requests = {}, @@ -574,22 +571,22 @@ requires send: function(options) { - options = $.extend({ - age: -1, - callback: function() {}, - id: Ox.uid(), - timeout: self.options.timeout, - type: self.options.type, - url: self.options.url - }, options); - - var req = JSON.stringify({ + var options = $.extend({ + age: -1, + callback: function() {}, + id: Ox.uid(), + timeout: self.options.timeout, + type: self.options.type, + url: self.options.url + }, options), + req = JSON.stringify({ url: options.url, data: options.data }); function callback(data) { delete requests[options.id]; + Ox.length(requests) == 0 && Ox.Event.trigger("requestStop"); options.callback(data); } @@ -718,9 +715,16 @@ requires type: options.type, url: options.url }); + Ox.length(requests) == 1 && Ox.Event.trigger("requestStart"); } } + return options.id; + + }, + + requests: function() { + return Ox.length(requests); } }; @@ -4208,8 +4212,15 @@ requires .addClass( "OxLoadingIcon Ox" + Ox.toTitleCase(self.options.size) ); - self.count = 0; self.deg = 0; + self.interval = 0; + self.isRunning = false; + function clear() { + clearInterval(self.interval); + self.deg = 0; + self.interval = 0; + update(); + } function update() { that.css({ MozTransform: "rotate(" + self.deg + "deg)", @@ -4217,28 +4228,23 @@ requires }); } that.start = function() { - self.deg = 0; - self.count++; - if (self.count == 1) { - that.animate({ - opacity: 1 - }, 250); - self.interval = setInterval(function() { - self.deg = (self.deg + 30) % 360; - update(); - }, 83); - } + self.isRunning = true; + clear(); + that.animate({ + opacity: 1 + }, 250); + self.interval = setInterval(function() { + self.deg = (self.deg + 30) % 360; + update(); + }, 83); }; that.stop = function() { - self.count--; - if (self.count == 0) { - that.animate({ - opacity: 0 - }, 250, function() { - clearTimeout(self.interval); - self.deg = 0; - }); - } + that.animate({ + opacity: 0 + }, 250, function() { + !self.isRunning && clear(); + self.isRunning = false; + }); } return that; } diff --git a/demos/test/list.js b/demos/test/list.js index a8012c3..634a174 100644 --- a/demos/test/list.js +++ b/demos/test/list.js @@ -19,7 +19,6 @@ $(function() { id: "year", title: "Year" }, - /* { id: "language", title: "Language" @@ -28,13 +27,13 @@ $(function() { id: "genre", title: "Genre" } - */ ], $group = [], elements = [], rightPanelWidth = $document.width() - 256; + $.each(groups, function(i, v) { - var size = rightPanelWidth / 3 + (rightPanelWidth % 3 > i); + var size = rightPanelWidth / 5 + (rightPanelWidth % 5 > i); $group[i] = new Ox.TextList({ columns: [ { @@ -44,15 +43,15 @@ $(function() { title: v.title, unique: true, visible: true, - width: size - 60 - ($.browser.mozilla ? 16 : 12) + width: size - 40 - ($.browser.mozilla ? 16 : 12) }, { align: "right", id: "items", operator: "-", - title: "Items", + title: "#", visible: true, - width: 60 + width: 40 } ], id: "group_" + v.id, @@ -74,8 +73,8 @@ $(function() { }, sort: [ { - key: "name", - operator: "+" + key: v.id == "year" ? "name" : "items", + operator: "-" } ] }); @@ -85,13 +84,27 @@ $(function() { size: size }); }); - Ox.print("elements", elements) - var $groupsPanel = new Ox.SplitPanel({ - elements: elements, + var $groupsInnerPanel = new Ox.SplitPanel({ + elements: [ + elements[1], + elements[2], + elements[3] + ], orientation: "horizontal" }), + $groupsOuterPanel = new Ox.SplitPanel({ + elements: [ + elements[0], + { + element: $groupsInnerPanel + }, + elements[4] + ], + orientation: "horizontal" + }) + $list = new Ox.TextList({ columns: [ { @@ -327,7 +340,7 @@ $(function() { $contentPanel = new Ox.SplitPanel({ elements: [ { - element: $groupsPanel, + element: $groupsOuterPanel, size: 128 }, { @@ -366,7 +379,14 @@ $(function() { orientation: "vertical" }), + $loadingIcon = new Ox.LoadingIcon({ + size: "medium" + }); + $mainMenu = new Ox.MainMenu({ + extras: [ + $loadingIcon + ], menus: [ { id: "demo", @@ -423,6 +443,16 @@ $(function() { orientation: "vertical" }).appendTo($body); + Ox.Request.requests() && $loadingIcon.start(); + Ox.Event.bind(null, "requestStart", function() { + Ox.print("start") + $loadingIcon.start(); + }); + Ox.Event.bind(null, "requestStop", function() { + Ox.print("stop") + $loadingIcon.stop(); + }); + $.each(groups, function(i, group) { Ox.Event.bind(null, "select_group_" + group.id, function(event, data) { $list.options({