diff --git a/build/css/ox.ui.css b/build/css/ox.ui.css index 3c27d536..a5a9ef60 100644 --- a/build/css/ox.ui.css +++ b/build/css/ox.ui.css @@ -11,10 +11,12 @@ Base body { margin: 0; overflow: hidden; - -webkit-user-select: none + -moz-user-select: none; + -webkit-user-select: none; } div { - -webkit-user-select: none + -moz-user-select: none; + -webkit-user-select: none; } div, input, textarea { font-family: Lucida Grande, Lucida Sans Unicode, Segoe UI; diff --git a/build/css/ox.ui.modern.css b/build/css/ox.ui.modern.css index b0eece15..1d5d6445 100644 --- a/build/css/ox.ui.modern.css +++ b/build/css/ox.ui.modern.css @@ -126,6 +126,7 @@ Lists background: rgb(66, 66, 66); } .OxThemeModern .OxTextList .OxBar .OxSelected { + background: -moz-linear-gradient(top, rgb(80, 80, 80), 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))); color: rgb(255, 255, 255); } diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index 8f77feaa..4e5a399b 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -2387,31 +2387,42 @@ requires .defaults({ itemHeight: 16, itemWidth: 16, + keys: [], + listLength: 0, orientation: "vertical", request: function() {}, // {sort:, range:, callback:}, without parameter returns {items, size etc.} rowLength: 1, sort: [], type: "text" }) - .options(options || {}); + .options(options || {}) + .scroll(scroll); - Ox.print("self1", self) $.extend(self, { $items: [], $pages: [], page: 0, pageLength: 100, - pages: 0, + requests: [], selected: [] }); - Ox.print("self2", self) - $.extend(self, { - pageWidth: self.options.orientation == "horizontal" ? - self.pageLength * self.options.itemWidth : 0, - pageHeight: self.options.orientation == "horizontal" ? 0 : - self.pageLength * self.options.itemHeight / self.options.rowLength + + self.options.request({ + callback: function(result) { + $.extend(self, { + listHeight: result.data.items * self.options.itemHeight, + listLength: result.data.items, + pages: Math.ceil(result.data.items / self.pageLength), + pageWidth: self.options.orientation == "horizontal" ? + self.pageLength * self.options.itemWidth : 0, + pageHeight: self.options.orientation == "horizontal" ? 0 : + self.pageLength * self.options.itemHeight / self.options.rowLength + }); + loadPages(self.page); + } }); + function addAllToSelection(pos) { var arr, len = self.$items.length; @@ -2503,19 +2514,23 @@ requires } function isSelected(pos) { - return selected.indexOf(pos) > -1; + return self.selected.indexOf(pos) > -1; } function loadPage(page, callback) { - if (page < 0 || page >= pages) { + Ox.print("loadPage", page, self.pages) + if (page < 0 || page >= self.pages) { return; } var offset = page * self.pageLength, range = [offset, offset + (page < self.pages - 1 ? self.pageLength : self.listLength % self.pageLength)]; + Ox.print("page", self.$pages[page]); if (Ox.isUndefined(self.$pages[page])) { - Ox.Request.send({ + Ox.print("request...") + self.requests.push(self.options.request({ callback: function(data) { + Ox.print("callback", data) self.$pages[page] = new Ox.ListPage(); if (self.options.type == "text") { self.$pages[page].css({ @@ -2534,12 +2549,17 @@ requires } self.$items[pos].appendTo(self.$pages[page]) }); + self.$pages[page].appendTo(that.$content); }, + keys: $.map(self.visibleColumns, function(v, i) { + return v.id; + }), range: range, sort: self.options.sort - }); + })); + } else { + self.$pages[page].appendTo(that.$content); } - self.$pages[page].appendTo(that.$content); } function loadPages(page, callback) { @@ -2554,6 +2574,31 @@ requires }); } + function scroll() { + var page = self.page; + self.page = getPage(); + if (self.page == page - 1) { + unloadPage(self.page + 2); + loadPage(self.page - 1); + } else if (self.page ==page + 1) { + unloadPage(self.page - 2); + loadPage(self.page + 1); + } else if (self.page == page - 2) { + unloadPage(self.page + 3); + unloadPage(self.page + 2); + loadPage(self.page); + loadPage(self.page - 1); + } else if (self.page == page + 2) { + unloadPage(self.page - 3); + unloadPage(self.page - 2); + loadPage(self.page); + loadPage(self.page + 1); + } else if (self.page != page) { + unloadPages(page); + loadPages(self.page); + } + } + function select(pos) { if (!isSelected(pos) || selected.length > 1) { selectNone(); @@ -2621,6 +2666,37 @@ requires unloadPage(page + 1) } + that.clearCache = function() { + self.$pages = []; + }; + + that.reload = function() { + $.each(self.requests, function(i, v) { + Ox.Request.cancel(v); + }); + self.requests = []; + $.extend(self, { + $items: [], + $pages: [], + page: 0, + selected: [] + }); + unloadPages(self.page); + that.scrollTop(0); + loadPages(self.page); + } + + that.sort = function(key, operator) { + if (key != self.options.sort[0].key || operator != self.options.sort[0].operator) { + self.options.sort[0] = { + key: key, + operator: operator + } + // trigger sort event + that.reload(); + } + } + return that; }; @@ -2643,7 +2719,7 @@ requires .defaults({ columns: [], request: function() {}, // {sort, range, keys, callback} - sort: {} + sort: [] }) .options(options || {}) .addClass("OxTextList"); @@ -2654,7 +2730,10 @@ requires page: 0, pageLength: 100, scrollLeft: 0, - selectedColumn: getColumnById(self.options.sort.key) + selectedColumn: getColumnById(self.options.sort[0].key), + visibleColumns: $.map(self.options.columns, function(v, i) { + return v.visible ? v : null; + }) }); $.extend(self, { pageHeight: self.pageLength * self.itemHeight @@ -2672,7 +2751,7 @@ requires .appendTo(that.$bar); that.$head.$content.addClass("OxTitles"); that.$titles = []; - $.each(self.options.columns, function(i, v) { + $.each(self.visibleColumns, function(i, v) { var $order, $resize, $left, $center, $right; self.columnWidths[i] = v.width; that.$titles[i] = $("