better list demo

This commit is contained in:
Rolux 2010-07-02 01:51:08 +02:00
parent 6269999c0e
commit 3a21cc95c7
3 changed files with 91 additions and 47 deletions

View File

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

View File

@ -204,7 +204,6 @@ requires
// use dom elements / jquery instead
Ox.Event = function() {
var keyboardEvents = {};
$eventHandler = $("<div>");
@ -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({
var 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({
}, 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,9 +4228,8 @@ requires
});
}
that.start = function() {
self.deg = 0;
self.count++;
if (self.count == 1) {
self.isRunning = true;
clear();
that.animate({
opacity: 1
}, 250);
@ -4227,19 +4237,15 @@ requires
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;
!self.isRunning && clear();
self.isRunning = false;
});
}
}
return that;
}

View File

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