CAMP/oxjstmp
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

improvements for resizing and scrolling lists

Browse Source
This commit is contained in:
rolux 2010-09-07 17:58:15 +02:00
parent 89cd41d2ac
commit fe1232618c
5 changed files with 224 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
build/css/ox.ui.classic.css
View File

@ -166,8 +166,8 @@ Lists
*/ */
.OxThemeClassic .OxIconList .OxItem > .OxReflection > div { .OxThemeClassic .OxIconList .OxItem > .OxReflection > div {
background: -moz-linear-gradient(top, rgba(240, 240, 240, 0.5), rgba(240, 240, 240, 1)); background: -moz-linear-gradient(top, rgba(240, 240, 240, 0.75), rgba(240, 240, 240, 1));
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(240, 240, 240, 0.5)), color-stop(1, rgba(240, 240, 240, 1))); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(240, 240, 240, 0.75)), color-stop(1, rgba(240, 240, 240, 1)));
} }
.OxThemeClassic .OxIconList .OxItem.OxSelected > .OxIcon img { .OxThemeClassic .OxIconList .OxItem.OxSelected > .OxIcon img {
border-color: rgb(128, 128, 128); border-color: rgb(128, 128, 128);

22
build/css/ox.ui.css
View File

@ -664,12 +664,16 @@ Lists
================================================================================ ================================================================================
*/ */
.OxListPage { .OxIconList.OxBoth {
position: absolute; overflow-x: hidden;
} }
.OxIconList .OxPage { .OxIconList .OxPage {
padding: 4px; position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
} }
.OxIconList .OxItem { .OxIconList .OxItem {
@ -686,6 +690,11 @@ Lists
position: relative; position: relative;
} }
.OxIconList .OxItem > .OxIcon,
.OxIconList .OxItem > .OxText {
left: -2px;
}
.OxIconList .OxItem > .OxIcon img { .OxIconList .OxItem > .OxIcon img {
position: absolute; position: absolute;
left: 0; left: 0;
@ -693,6 +702,7 @@ Lists
bottom: 0; bottom: 0;
margin: auto; margin: auto;
border: 2px solid rgba(0, 0, 0, 0); border: 2px solid rgba(0, 0, 0, 0);
cursor: pointer;
-moz-border-radius: 4px; -moz-border-radius: 4px;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
} }
@ -714,8 +724,8 @@ Lists
top: 0; top: 0;
right: 0; right: 0;
margin: auto; margin: auto;
-moz-border-radius: 4px; //-moz-border-radius: 4px;
-webkit-border-radius: 4px; //-webkit-border-radius: 4px;
-moz-transform: scaleY(-1); -moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1); -webkit-transform: scaleY(-1);
} }
@ -730,7 +740,7 @@ Lists
text-align: center; text-align: center;
padding: 1px 2px; padding: 1px 2px;
border: 2px solid rgba(0, 0, 0, 0); border: 2px solid rgba(0, 0, 0, 0);
max-width: 120px; max-width: 124px;
word-wrap: break-word; word-wrap: break-word;
cursor: pointer; cursor: pointer;
-moz-border-radius: 4px; -moz-border-radius: 4px;

12
build/css/ox.ui.modern.css
View File

@ -146,9 +146,19 @@ Lists
================================================================================ ================================================================================
*/ */
.OxThemeModern .OxIconList .OxItem {
//background: rgb(20, 20, 20);
}
.OxThemeModern .OxIconList .OxItem img.OxLoading {
background: -moz-linear-gradient(top, rgb(32, 32, 32), rgb(0, 0, 0));
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(32, 32, 32)), color-stop(1, rgb(0, 0, 0)));
}
.OxThemeModern .OxIconList .OxItem > .OxIcon img.OxLoading {
border-color: rgb(16, 16, 16);
}
.OxThemeModern .OxIconList .OxItem > .OxReflection > div { .OxThemeModern .OxIconList .OxItem > .OxReflection > div {
background: -moz-linear-gradient(top, rgba(16, 16, 16, 0.75), rgba(16, 16, 16, 1)); background: -moz-linear-gradient(top, rgba(16, 16, 16, 0.75), rgba(16, 16, 16, 1));
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(16, 16, 16, 0.5)), color-stop(1, rgba(16, 16, 16, 1))); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(16, 16, 16, 0.75)), color-stop(1, rgba(16, 16, 16, 1)));
} }
.OxThemeModern .OxIconList .OxItem.OxSelected > .OxIcon img { .OxThemeModern .OxIconList .OxItem.OxSelected > .OxIcon img {
border-color: rgb(128, 128, 128); border-color: rgb(128, 128, 128);

6
build/js/ox.load.js
View File

@ -61,6 +61,9 @@ $(function() {
width: '32px', width: '32px',
height: '32px' height: '32px'
})) }))
.mousedown(function(e) {
e.preventDefault();
})
.appendTo($div), .appendTo($div),
deg = 0, deg = 0,
interval = setInterval(function() { interval = setInterval(function() {
@ -125,6 +128,9 @@ $(function() {
border: 0, border: 0,
cursor: 'pointer' cursor: 'pointer'
})) }))
.mousedown(function(e) {
e.preventDefault();
})
.mouseenter(function() { .mouseenter(function() {
$(this).animate({ $(this).animate({
width: '72px', width: '72px',

342
build/js/ox.ui.js
View File

@ -228,7 +228,7 @@ requires
callback({ callback({
config: config, config: config,
user: user user: user
}); });
}); });
}); });
}); });
@ -242,7 +242,7 @@ requires
}; };
that.options = function() { that.options = function() {
return Ox.getset(self.options, Array.prototype.slice.call(arguments), self.change, that); return Ox.getset(self.options, Array.prototype.slice.call(arguments), self.change, that);
}; };
that.request = function(action, data, callback) { that.request = function(action, data, callback) {
@ -585,9 +585,9 @@ requires
keypress(event); keypress(event);
} }
} }
}); });
} else { } else {
$document.keydown(keypress); $document.keydown(keypress);
} }
}); });
function keypress(event) { function keypress(event) {
@ -612,7 +612,7 @@ requires
buffer = ''; buffer = '';
} }
buffer += key == 'SPACE' ? ' ' : key; buffer += key == 'SPACE' ? ' ' : key;
bufferTime = time; bufferTime = time;
} }
Ox.Event.trigger('', 'key_' + key); Ox.Event.trigger('', 'key_' + key);
//return false; //return false;
@ -622,9 +622,9 @@ requires
ret = Ox.event.trigger(keyboard + Ox.toCamelCase(key) + '.' + v); ret = Ox.event.trigger(keyboard + Ox.toCamelCase(key) + '.' + v);
return ret; return ret;
}); });
*/ */
} }
})(); })();
/* /*
@ -756,7 +756,7 @@ requires
title: 'Details', title: 'Details',
click: function() { click: function() {
$dialog.close(function() { $dialog.close(function() {
debug(request); debug(request);
}); });
} }
}, },
@ -1077,7 +1077,7 @@ requires
} }
*/ */
}); });
ret = that; ret = that;
} }
return ret; return ret;
}; };
@ -1677,7 +1677,7 @@ requires
elementWidth = that.width(), elementWidth = that.width(),
offset = that.offset(), offset = that.offset(),
x = event.clientX, x = event.clientX,
y = event.clientY; y = event.clientY;
$window.mousemove(function(event) { $window.mousemove(function(event) {
that.css({ that.css({
margin: 0 margin: 0
@ -1699,7 +1699,7 @@ requires
}); });
$window.one('mouseup', function() { $window.one('mouseup', function() {
$window.unbind('mousemove'); $window.unbind('mousemove');
}); });
} }
function getButtonById(id) { function getButtonById(id) {
@ -1762,7 +1762,7 @@ requires
}); });
$window.one('mouseup', function() { $window.one('mouseup', function() {
$window.unbind('mousemove'); $window.unbind('mousemove');
}); });
} }
self.onChange = function(key, value) { self.onChange = function(key, value) {
@ -2084,7 +2084,7 @@ requires
function mouseenter(event) { function mouseenter(event) {
self.$tooltip.show(event.clientX, event.clientY); self.$tooltip.show(event.clientX, event.clientY);
} }
function mouseleave(event) { function mouseleave(event) {
self.$tooltip.hide(); self.$tooltip.hide();
@ -4014,7 +4014,7 @@ requires
function getVal(px) { function getVal(px) {
var px = self.trackSize / self.values >= 16 ? px : px - 8, var px = self.trackSize / self.values >= 16 ? px : px - 8,
valPerPx = (self.options.max - self.options.min) / valPerPx = (self.options.max - self.options.min) /
(self.trackSize - self.thumbSize); (self.trackSize - self.thumbSize);
return Ox.limit(self.options.min + return Ox.limit(self.options.min +
Math.floor(px * valPerPx / self.options.step) * self.options.step, Math.floor(px * valPerPx / self.options.step) * self.options.step,
self.options.min, self.options.max); self.options.min, self.options.max);
@ -4641,7 +4641,7 @@ requires
serialize function serialize function
size 'large', 'medium' or 'small' size 'large', 'medium' or 'small'
type 'password', 'select' or 'text' type 'password', 'select' or 'text'
unit string, or unit string, or
array [{ id, title, checked }] (selectable unit) array [{ id, title, checked }] (selectable unit)
unitWidth integer (px) unitWidth integer (px)
value string, or value string, or
@ -4977,7 +4977,7 @@ requires
function changeKey(event, data) { function changeKey(event, data) {
Ox.print('changeKey', data); Ox.print('changeKey', data);
if (data) { // fixme: necessary? if (data) { // fixme: necessary?
self.key = { self.key = {
id: data.id, id: data.id,
title: data.value // fixme: should be data.title title: data.value // fixme: should be data.title
}; };
@ -5102,7 +5102,7 @@ requires
size: 'medium', size: 'medium',
type: 'text', type: 'text',
value: '', value: '',
width: 128 width: 128
}) })
.options(options || {}) .options(options || {})
.addClass('OxInput Ox' + Ox.toTitleCase(self.options.size) + ( .addClass('OxInput Ox' + Ox.toTitleCase(self.options.size) + (
@ -5538,7 +5538,7 @@ requires
function getVal(px) { function getVal(px) {
var px = trackWidth / values >= 16 ? px : px - 8, var px = trackWidth / values >= 16 ? px : px - 8,
valPerPx = (self.options.max - self.options.min) / valPerPx = (self.options.max - self.options.min) /
(trackWidth - thumbWidth); (trackWidth - thumbWidth);
return Ox.limit(self.options.min + return Ox.limit(self.options.min +
Math.floor(px * valPerPx / self.options.step) * self.options.step, Math.floor(px * valPerPx / self.options.step) * self.options.step,
self.options.min, self.options.max); self.options.min, self.options.max);
@ -5638,11 +5638,11 @@ requires
orientation: self.options.orientation, orientation: self.options.orientation,
keys: self.options.keys, keys: self.options.keys,
request: self.options.request, request: self.options.request,
rowLength: 4, // rowLength: 4,
size: 128, size: 128,
type: 'icon', type: 'icon',
}/*, self*/) }/*, self*/)
.addClass('OxIconList') .addClass('OxIconList Ox' + Ox.toTitleCase(self.options.orientation))
.click(click) .click(click)
.dblclick(dblclick) .dblclick(dblclick)
.scroll(scroll); .scroll(scroll);
@ -5652,7 +5652,7 @@ requires
} }
function constructItem(data) { function constructItem(data) {
var data = self.options.item(data, self.options.sort); var data = self.options.item(data, self.options.sort, self.options.size);
return new Ox.IconItem($.extend(data, { return new Ox.IconItem($.extend(data, {
size: self.options.size size: self.options.size
})); }));
@ -5674,7 +5674,7 @@ requires
Ox.IconItem = function(options, self) { Ox.IconItem = function(options, self) {
var self = self || {} var self = self || {},
that = new Ox.Element({}, self) that = new Ox.Element({}, self)
.defaults({ .defaults({
height: 0, height: 0,
@ -5687,12 +5687,10 @@ requires
}) })
.options(options || {}) .options(options || {})
Ox.print('IconItem', options);
$.extend(self, { $.extend(self, {
height: self.options.size * 1.5, height: self.options.size * 1.5,
url: oxui.path + '/png/ox.ui.' + Ox.theme() + '/icon.png', url: oxui.path + '/png/ox.ui.' + Ox.theme() + '/icon.png',
width: self.options.size + 4 width: self.options.size
}); });
that.css({ that.css({
@ -5703,10 +5701,11 @@ requires
.addClass('OxIcon') .addClass('OxIcon')
.css({ .css({
top: self.options.size == 64 ? -70 : -120, top: self.options.size == 64 ? -70 : -120,
width: self.options.size + 'px', width: (self.options.size + 4) + 'px',
height: self.options.size + 'px' height: self.options.size + 'px'
}); });
that.$iconImage = $('<img>') that.$iconImage = $('<img>')
.addClass('OxLoading OxTarget')
.attr({ .attr({
src: self.options.url src: self.options.url
}) })
@ -5714,30 +5713,25 @@ requires
width: self.options.width + 'px', width: self.options.width + 'px',
height: self.options.height + 'px' height: self.options.height + 'px'
}) })
.mousedown(mousedown)
.mouseenter(mouseenter) .mouseenter(mouseenter)
.mouseleave(mouseleave) .mouseleave(mouseleave)
/* .load(load);
.load(function() {
that.$iconImage.attr({
src: self.options.url
})
Ox.print('width:', that.$iconImage[0].width);
});
*/
that.$textBox = $('<div>') that.$textBox = $('<div>')
.addClass('OxText') .addClass('OxText')
.css({ .css({
top: (self.options.size / 2) + 'px', top: (self.options.size / 2) + 'px',
width: self.options.size + 'px', width: (self.options.size + 4) + 'px',
height: (self.options.size == 64 ? 38 : 58) + 'px' height: (self.options.size == 64 ? 38 : 58) + 'px'
}) })
that.$text = $('<div>') that.$text = $('<div>')
.addClass('OxTarget')
.html( .html(
formatTitle(self.options.title) + formatTitle(self.options.title) +
'<br/><span class="OxInfo">' + self.options.info + '</span>' '<br/><span class="OxInfo">' + self.options.info + '</span>'
) )
.mouseenter(mouseenter) .mouseenter(mouseenter)
.mouseleave(mouseleave) .mouseleave(mouseleave);
that.$reflection = $('<div>') that.$reflection = $('<div>')
.addClass('OxReflection') .addClass('OxReflection')
.css({ .css({
@ -5746,19 +5740,14 @@ requires
height: (self.options.size / 2) + 'px' height: (self.options.size / 2) + 'px'
}); });
that.$reflectionImage = $('<img>') that.$reflectionImage = $('<img>')
.addClass('OxLoading')
.attr({ .attr({
src: self.options.url src: self.options.url
}) })
.css({ .css({
width: self.options.width + 'px', width: self.options.width + 'px',
height: self.options.height + 'px' height: self.options.height + 'px'
}) });
/*
.one('load', function() {
that.$reflectionImage.attr({
src: self.options.url
});
})*/;
that.$gradient = $('<div>') that.$gradient = $('<div>')
.css({ .css({
//top: (-self.options.size / 2) + 'px', //top: (-self.options.size / 2) + 'px',
@ -5797,13 +5786,21 @@ requires
}).join('<br/>'); }).join('<br/>');
} }
function load() {
that.$iconImage.removeClass('OxLoading');
that.$reflectionImage.removeClass('OxLoading');
}
function mousedown(e) {
e.preventDefault();
}
function mouseenter() { function mouseenter() {
Ox.print('mouseenter');
that.addClass('OxHover'); that.addClass('OxHover');
} }
function mouseleave() { function mouseleave() {
//that.removeClass('OxHover'); that.removeClass('OxHover');
} }
return that; return that;
@ -5822,13 +5819,13 @@ requires
orientation: 'vertical', orientation: 'vertical',
pageLength: 100, pageLength: 100,
request: function() {}, // {sort:, range:, callback:}, without parameter returns {items, size etc.} request: function() {}, // {sort:, range:, callback:}, without parameter returns {items, size etc.}
rowLength: 1, //rowLength: 1,
sort: [], sort: [],
type: 'text', type: 'text',
unique: '' unique: ''
}) })
.options(options || {}) .options(options || {})
.click(click) .mousedown(mousedown)
.scroll(scroll); .scroll(scroll);
$.extend(self, { $.extend(self, {
@ -5836,7 +5833,7 @@ requires
$pages: [], $pages: [],
clickTimeout: 0, clickTimeout: 0,
ids: {}, ids: {},
itemMargin: self.options.type == 'text' ? 0 : 8, itemMargin: self.options.type == 'text' ? 0 : 8, // 2 x 4 px margin ... fixme: the 2x should be computed later
keyboardEvents: { keyboardEvents: {
key_alt_control_a: invertSelection, key_alt_control_a: invertSelection,
key_control_a: selectAll, key_control_a: selectAll,
@ -5848,9 +5845,11 @@ requires
key_pageup: scrollPageUp, key_pageup: scrollPageUp,
key_space: preview key_space: preview
}, },
listMargin: self.options.type == 'text' ? 0 : 8, // 2 x 4 px padding
page: 0, page: 0,
preview: false, preview: false,
requests: [], requests: [],
scrollTimeout: 0,
selected: [] selected: []
}); });
self.keyboardEvents['key_' + (self.options.orientation == 'vertical' ? 'up' : 'left')] = selectPrevious; self.keyboardEvents['key_' + (self.options.orientation == 'vertical' ? 'up' : 'left')] = selectPrevious;
@ -5858,15 +5857,21 @@ requires
self.keyboardEvents['key_' + (self.options.orientation == 'vertical' ? 'shift_up' : 'shift_left')] = addPreviousToSelection; self.keyboardEvents['key_' + (self.options.orientation == 'vertical' ? 'shift_up' : 'shift_left')] = addPreviousToSelection;
self.keyboardEvents['key_' + (self.options.orientation == 'vertical' ? 'shift_down' : 'shift_right')] = addNextToSelection; self.keyboardEvents['key_' + (self.options.orientation == 'vertical' ? 'shift_down' : 'shift_right')] = addNextToSelection;
if (self.options.orientation == 'both') { if (self.options.orientation == 'both') {
self.keyboardEvents['key_down'] = selectBelow; $.extend(self.keyboardEvents, {
self.keyboardEvents['key_up'] = selectAbove; key_down: selectBelow,
self.keyboardEvents['key_shift_down'] = addBelowToSelection; key_up: selectAbove,
self.keyboardEvents['key_shift_up'] = addAboveToSelection; key_shift_down: addBelowToSelection,
key_shift_up: addAboveToSelection
});
self.pageLengthByRowLength = [
0, 60, 60, 60, 60, 60, 60, 63, 64, 63, 60, 66, 60, 65, 70, 60
];
} }
updateQuery(); updateQuery();
Ox.print('s.o', self.options) Ox.print('s.o', self.options)
that.addEvent(self.keyboardEvents); that.addEvent(self.keyboardEvents);
$window.resize(resize);
function addAboveToSelection() { function addAboveToSelection() {
var pos = getAbove(); var pos = getAbove();
@ -5964,49 +5969,6 @@ requires
}); });
} }
function click(e) {
Ox.print('click')
var $item = findItem(e),
pos,
deselectTimeout = false;
selectTimeout = false;
that.gainFocus();
if ($item) {
if (!self.clickTimeout) {
// click
pos = $item.data('position');
if (e.metaKey) {
if (!isSelected(pos)) {
addToSelection(pos);
} else {
deselectTimeout = true;
}
} else if (e.shiftKey) {
addAllToSelection(pos);
} else if (!isSelected(pos)) {
select(pos);
} else {
selectTimeout = true;
}
self.clickTimeout = setTimeout(function() {
self.clickTimeout = 0;
if (deselectTimeout) {
deselect(pos);
} else if (selectTimeout) {
select(pos);
}
}, 250);
} else {
// dblclick
clearTimeout(self.clickTimeout);
self.clickTimeout = 0;
open();
}
} else {
selectNone();
}
}
function deselect(pos) { function deselect(pos) {
if (isSelected(pos)) { if (isSelected(pos)) {
self.selected.splice(self.selected.indexOf(pos), 1); self.selected.splice(self.selected.indexOf(pos), 1);
@ -6020,11 +5982,16 @@ requires
function findItem(e) { function findItem(e) {
var $element = $(e.target), var $element = $(e.target),
$item = null; $item = null;
while (!$element.hasClass('OxItem') && !$element.hasClass('OxPage') && !$element.is('body')) { while (!$element.hasClass('OxTarget') && !$element.hasClass('OxPage') && !$element.is('body')) {
$element = $element.parent(); $element = $element.parent();
} }
if ($element.hasClass('OxItem')) { if ($element.hasClass('OxTarget')) {
$item = $element; while (!$element.hasClass('OxItem') && !$element.hasClass('OxPage') && !$element.is('body')) {
$element = $element.parent();
}
if ($element.hasClass('OxItem')) {
$item = $element;
}
} }
return $item; return $item;
} }
@ -6032,8 +5999,7 @@ requires
function getAbove() { function getAbove() {
var pos = -1; var pos = -1;
if (self.selected.length) { if (self.selected.length) {
pos = self.selected[self.selected.length - 1] - getRowLength(); // fixme: need self.rowLength pos = self.selected[self.selected.length - 1] - self.rowLength
Ox.print(getRowLength(), getWidth())
if (pos < 0) { if (pos < 0) {
pos = -1; pos = -1;
} }
@ -6044,7 +6010,7 @@ requires
function getBelow() { function getBelow() {
var pos = -1; var pos = -1;
if (self.selected.length) { if (self.selected.length) {
pos = self.selected[self.selected.length - 1] + getRowLength(); pos = self.selected[self.selected.length - 1] + self.rowLength;
if (pos >= self.$items.length) { if (pos >= self.$items.length) {
pos = -1; pos = -1;
} }
@ -6071,8 +6037,8 @@ requires
function getPage() { function getPage() {
return self.options.orientation == 'horizontal' return self.options.orientation == 'horizontal'
? Math.floor(that.scrollLeft() / self.pageWidth) ? Math.floor((that.scrollLeft() - self.listMargin / 2) / self.pageWidth)
: Math.floor(that.scrollTop() / self.pageHeight); : Math.floor((that.scrollTop() - self.listMargin / 2) / self.pageHeight);
} }
function getPositions() { function getPositions() {
@ -6113,18 +6079,17 @@ requires
if (self.selected.length) { if (self.selected.length) {
pos = (self.options.orientation == 'both' ? pos = (self.options.orientation == 'both' ?
self.selected[self.selected.length - 1] : self.selected[self.selected.length - 1] :
Ox.max(self.selected)) - 1; Ox.min(self.selected)) - 1;
} }
return pos; return pos;
} }
function getRow(pos) { function getRow(pos) {
return Math.floor(pos / getRowLength()); return Math.floor(pos / self.rowLength);
} }
function getRowLength() { function getRowLength() {
// fixme: should the first margin be a separate listMargin? return Math.floor((getWidth() - self.listMargin) / (self.options.itemWidth + self.itemMargin));
return Math.floor((getWidth() - self.itemMargin) / (self.options.itemWidth + self.itemMargin));
} }
function getSelectedIds() { function getSelectedIds() {
@ -6155,27 +6120,28 @@ requires
} }
function loadPage(page, callback) { function loadPage(page, callback) {
Ox.print('loadPage', page)
if (page < 0 || page >= self.pages) { if (page < 0 || page >= self.pages) {
!Ox.isUndefined(callback) && callback(); !Ox.isUndefined(callback) && callback();
return; return;
} }
Ox.print('loadPage', page);
var keys = $.inArray('id', self.options.keys) > -1 ? self.options.keys : var keys = $.inArray('id', self.options.keys) > -1 ? self.options.keys :
$.merge(self.options.keys, ['id']), $.merge(self.options.keys, ['id']),
offset = page * self.options.pageLength, offset = page * self.pageLength,
range = [offset, offset + (page < self.pages - 1 ? range = [offset, offset + (page < self.pages - 1 ?
self.options.pageLength : self.listLength % self.options.pageLength)]; self.pageLength : self.listLength % self.pageLength)];
if (Ox.isUndefined(self.$pages[page])) { if (Ox.isUndefined(self.$pages[page])) {
self.requests.push(self.options.request({ self.requests.push(self.options.request({
callback: function(result) { callback: function(result) {
self.$pages[page] = new Ox.ListPage(); self.$pages[page] = new Ox.ListPage()
if (self.options.type == 'text') { .css({
self.$pages[page].css({ width: self.pageWidth + 'px'
top: (page * self.pageHeight) + 'px'
}); });
if (self.options.orientation == 'horizontal') {
} else { } else {
self.$pages[page].css({ self.$pages[page].css({
top: (page * self.pageHeight + self.listMargin / 2) + 'px'
}); });
} }
$.each(result.data.items, function(i, v) { $.each(result.data.items, function(i, v) {
@ -6233,6 +6199,49 @@ requires
}); });
} }
function mousedown(e) {
Ox.print('click')
var $item = findItem(e),
pos,
deselectTimeout = false;
selectTimeout = false;
that.gainFocus();
if ($item) {
if (!self.clickTimeout) {
// click
pos = $item.data('position');
if (e.metaKey) {
if (!isSelected(pos)) {
addToSelection(pos);
} else {
deselectTimeout = true;
}
} else if (e.shiftKey) {
addAllToSelection(pos);
} else if (!isSelected(pos)) {
select(pos);
} else {
selectTimeout = true;
}
self.clickTimeout = setTimeout(function() {
self.clickTimeout = 0;
if (deselectTimeout) {
deselect(pos);
} else if (selectTimeout) {
select(pos);
}
}, 250);
} else {
// dblclick
clearTimeout(self.clickTimeout);
self.clickTimeout = 0;
open();
}
} else {
selectNone();
}
}
function open() { function open() {
that.triggerEvent('open', { that.triggerEvent('open', {
ids: getSelectedIds() ids: getSelectedIds()
@ -6250,33 +6259,54 @@ requires
} }
} }
function resize() {
if (self.options.orientation == 'both') {
var rowLength = getRowLength(),
pageLength = self.pageLengthByRowLength[rowLength];
if (pageLength != self.pageLength) {
updateQuery();
} else if (rowLength != self.rowLength) {
self.rowLength = rowLength;
self.pageWidth = (self.options.itemWidth + self.itemMargin) * self.rowLength;
$.each(self.$pages, function(i, $page) {
$page.css({
width: self.pageWidth + 'px'
});
});
}
}
}
function scroll() { function scroll() {
var page = self.page; var page = self.page;
self.page = getPage(); self.scrollTimeout && clearTimeout(self.scrollTimeout);
setTimeout(function() { self.scrollTimeout = setTimeout(function() {
if (self.page == getPage()) { self.scrollTimeout = 0;
if (self.page == page - 1) { self.page = getPage();
unloadPage(self.page + 2); if (self.page != page) {
loadPage(self.page - 1); Ox.print('page', page, '-->', self.page);
} 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);
}
} }
}, 100); 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);
}
}, 250);
} }
function scrollPageDown() { function scrollPageDown() {
@ -6300,7 +6330,7 @@ requires
size = getWidth(); size = getWidth();
} else { } else {
positions[0] = (self.options.orientation == 'vertical' ? pos : getRow(pos)) * itemHeight; positions[0] = (self.options.orientation == 'vertical' ? pos : getRow(pos)) * itemHeight;
positions[1] = positions[0] + itemHeight; positions[1] = positions[0] + itemHeight + (self.options.orientation == 'vertical' ? 0 : self.itemMargin);
scroll = that.scrollTop(); scroll = that.scrollTop();
size = getHeight(); size = getHeight();
if (positions[0] < scroll) { if (positions[0] < scroll) {
@ -6416,7 +6446,7 @@ requires
} }
Ox.print('unloadPage', page) Ox.print('unloadPage', page)
Ox.print('self.$pages', self.$pages) Ox.print('self.$pages', self.$pages)
Ox.print(!Ox.isUndefined(self.$pages[page])) Ox.print('page not undefined', !Ox.isUndefined(self.$pages[page]))
!Ox.isUndefined(self.$pages[page]) && self.$pages[page].remove(); !Ox.isUndefined(self.$pages[page]) && self.$pages[page].remove();
} }
@ -6432,15 +6462,20 @@ requires
callback: function(result) { callback: function(result) {
var keys = {}; var keys = {};
that.triggerEvent('load', result.data); that.triggerEvent('load', result.data);
self.rowLength = getRowLength();
self.pageLength = self.options.orientation == 'both' ?
self.pageLengthByRowLength[self.rowLength] :
self.options.pageLength;
$.extend(self, { $.extend(self, {
listHeight: result.data.items * self.options.itemHeight, // fixme: should be listSize listHeight: Math.ceil(result.data.items * (self.options.itemHeight + self.itemMargin) / self.rowLength), // fixme: should be listSize
listLength: result.data.items, listLength: result.data.items,
pages: Math.ceil(result.data.items / self.options.pageLength), pages: Math.ceil(result.data.items / self.pageLength),
pageWidth: self.options.orientation == 'horizontal' ? pageWidth: self.options.orientation == 'vertical' ? 0 :
self.options.pageLength * self.options.itemWidth : 0, (self.options.itemWidth + self.itemMargin) * self.rowLength,
pageHeight: self.options.orientation == 'horizontal' ? 0 : pageHeight: self.options.orientation == 'horizontal' ? 0 :
self.options.pageLength * self.options.itemHeight / self.options.rowLength Math.ceil(self.pageLength * (self.options.itemHeight + self.itemMargin) / self.rowLength)
}); });
Ox.print('list self', self);
that.$content.css({ that.$content.css({
height: self.listHeight + 'px' height: self.listHeight + 'px'
}); });
@ -6770,6 +6805,7 @@ requires
function constructItem(data) { function constructItem(data) {
var $item = $('<div>') var $item = $('<div>')
.addClass('OxTarget')
.css({ .css({
width: getItemWidth() + 'px' width: getItemWidth() + 'px'
}); });
@ -7512,7 +7548,7 @@ requires
$target.data('position') : -1; $target.data('position') : -1;
if (self.focused && position != self.selected) { if (self.focused && position != self.selected) {
if (position > -1) { if (position > -1) {
clickTitle(position); clickTitle(position);
} else { } else {
focused = self.focused; focused = self.focused;
that.menus[self.selected].hideMenu(); that.menus[self.selected].hideMenu();
@ -8059,7 +8095,7 @@ requires
that.items[selected].removeClass('OxSelected'); that.items[selected].removeClass('OxSelected');
} }
do { do {
selected++; selected++;
} while (that.items[selected].options('disabled')) } while (that.items[selected].options('disabled'))
selectItem(selected); selectItem(selected);
offset = that.items[selected].offset().top + itemHeight - offset = that.items[selected].offset().top + itemHeight -
@ -8079,7 +8115,7 @@ requires
}); });
} }
} }
} }
} }
function selectPreviousItem() { function selectPreviousItem() {
@ -8090,7 +8126,7 @@ requires
if (!isFirstEnabledItem()) { if (!isFirstEnabledItem()) {
that.items[selected].removeClass('OxSelected'); that.items[selected].removeClass('OxSelected');
do { do {
selected--; selected--;
} while (that.items[selected].options('disabled')) } while (that.items[selected].options('disabled'))
selectItem(selected); selectItem(selected);
} }
@ -8380,7 +8416,7 @@ requires
oxui.symbols[self.options.keyboard.key] || oxui.symbols[self.options.keyboard.key] ||
self.options.keyboard.key.toUpperCase() self.options.keyboard.key.toUpperCase()
}) })
); );
function parseKeyboard(str) { function parseKeyboard(str) {
var modifiers = str.split(' '), var modifiers = str.split(' '),