better list demo
This commit is contained in:
Rolux
parent
302725cf35
commit
a62a18cb58
3 changed files with 91 additions and 47 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
Loading…
Reference in a new issue