diff --git a/build/css/ox.ui.modern.css b/build/css/ox.ui.modern.css
index f7768752..6932d248 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 7df49674..ab96a7e5 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 bc1a267b..6ca6ee7f 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 00000000..fec51a4d
--- /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 31b64222..5577b1b9 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 94d8dd07..c2a17fa7 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) {