allow for lists with an array of items instead of a request function

This commit is contained in:
rlx 2011-02-07 05:34:18 +00:00
parent 2c9d6c7e91
commit c31850f0c4
2 changed files with 124 additions and 25 deletions

View file

@ -349,6 +349,9 @@ Video
.OxThemeModern .OxAnnotation {
border-color: rgb(48, 48, 48);
}
.OxThemeModern .OxAnnotation.OxSelected {
background: rgb(48, 48, 48);
}
.OxThemeModern .OxVideoPlayer {
background: rgb(0, 0, 0);

View file

@ -10,6 +10,8 @@ requires
// also see test.js, in demos ...
// fixme: render might be a better function name than construct
(function() {
// fixme: move into Ox.UI
@ -6452,21 +6454,36 @@ requires
Ox.List = function(options, self) {
/***
basic list object
Options
centered boolean if true, and orientation is 'horizontal',
then keep the selected item centered
construct function function(data), returns the list item HTML
request function function(callback) returns {items, size, ...}
function(data, callback) returns [items]
Methods
Events
***/
// fixme: items and request should be the same option
var self = self || {},
that = new Ox.Container({}, self)
.defaults({
centered: false,
construct: function() {},
construct: null,
draggable: false,
format: [],
itemHeight: 16,
items: null,
itemWidth: 16,
keys: [],
max: -1,
min: 0,
orientation: 'vertical',
pageLength: 100,
request: function() {}, // (data, callback), without data returns {items, size etc.}
request: null,
selected: [],
sort: [],
sortable: false,
@ -6518,17 +6535,13 @@ requires
scrollTimeout: 0,
selected: []
});
if (self.options.max == -1) {
$.extend(self.keyboardEvents, {
key_alt_control_a: invertSelection,
key_control_a: selectAll
});
}
if (self.options.min == 0) {
$.extend(self.keyboardEvents, {
key_control_shift_a: selectNone
});
}
self.options.max == -1 && $.extend(self.keyboardEvents, {
key_alt_control_a: invertSelection,
key_control_a: selectAll
});
self.options.min == 0 && $.extend(self.keyboardEvents, {
key_control_shift_a: selectNone
});
self.keyboardEvents[
'key_' + (self.options.orientation == 'vertical' ? 'up' : 'left')
] = selectPrevious;
@ -6567,9 +6580,14 @@ requires
});
}
updateQuery(self.options.selected);
Ox.print('OxList', self.options)
if (Ox.isArray(self.options.items)) {
loadItems();
} else {
updateQuery(self.options.selected);
}
that.bindEvent(self.keyboardEvents);
$window.resize(that.size);
$window.resize(that.size); // fixme: this is not the widget's job
function addAboveToSelection() {
var pos = getAbove();
@ -7040,6 +7058,21 @@ requires
return self.selected.indexOf(pos) > -1;
}
function loadItems() {
self.options.items.forEach(function(item, pos) {
// fixme: duplicated
self.$items[pos] = new Ox.ListItem({
construct: self.options.construct,
data: item,
draggable: self.options.draggable,
position: pos,
unique: self.options.unique
});
isSelected(pos) && self.$items[pos].addClass('OxSelected');
self.$items[pos].appendTo(that.$content);
});
}
function loadPage(page, callback) {
if (page < 0 || page >= self.pages) {
!Ox.isUndefined(callback) && callback();
@ -7171,18 +7204,17 @@ requires
}
function _mousedown(e) {
Ox.print('mousedown')
var pos = findItemPosition(e),
clickable, editable,
clickTimeout = false,
selectTimeout = false,
$cell,
hadFocus = that.hasFocus();
Ox.print('mousedown', pos)
that.gainFocus();
if (pos > -1) {
if (!self.clickTimeout) {
// click
//Ox.print('^^^^', 'pos', pos, 'id', $item.data('id'))
if (e.metaKey) {
if (!isSelected(pos) && (self.options.max == -1 || self.options.max > self.selected.length)) {
addToSelection(pos);
@ -7488,7 +7520,7 @@ requires
var ids = self.options.selected = getSelectedIds();
setTimeout(function() {
var ids_ = getSelectedIds();
//Ox.print('ids', ids, 'ids after 100 msec', ids_)
Ox.print('ids', ids, 'ids after 100 msec', ids_)
if (ids.length == ids_.length && (ids.length == 0 || ids[0] == ids_[0])) {
that.triggerEvent('select', {
ids: ids
@ -7497,7 +7529,7 @@ requires
ids: ids
});
} else {
//Ox.print('select event not triggered after timeout');
Ox.print('select event not triggered after timeout');
}
}, 100);
}
@ -7521,9 +7553,10 @@ requires
unloadPage(page + 1)
}
function updateQuery(ids) {
function updateQuery(ids) { // fixme: shouldn't this be setQuery?
// ids are the selcected ids
// (in case list is loaded with selection)
Ox.print('####', self.options)
clear();
self.requests.push(self.options.request({}, function(result) {
var keys = {};
@ -10429,10 +10462,13 @@ requires
id: '',
items: [],
title: '',
type: 'text'
type: 'text',
width: 0
})
.options(options || {});
self.selected = -1;
that.$element = new Ox.CollapsePanel({
collapsed: false,
extras: [
@ -10452,14 +10488,59 @@ requires
});
that.$content = that.$element.$content;
self.$annotations = new Ox.List({
construct: function(data) {
return new Ox.Element('div')
.addClass('OxAnnotation OxTarget')
.html(data.value);
},
items: $.map(self.options.items, function(v, i) {
return {value: v.value.replace(/\n/g, '<br/>')};
}),
})
.bindEvent({
select: selectAnnotation
})
.appendTo(that.$content);
/*
self.$annotations = new Ox.Element('div')
.appendTo(that.$content);
self.$annotation = [];
self.options.items.forEach(function(item, i) {
new Ox.Element('div')
self.$annotation[i] = new Ox.Element('div')
.addClass('OxAnnotation')
.html(item.value)
.html(item.value.replace(/\n/g, '<br/>'))
.click(function() {
clickAnnotation(i);
})
.appendTo(self.$annotations);
});
*/
function selectAnnotation(event, data) {
var pos = data.selected.ids[0],
item = self.options.items[pos];
if (pos != self.selected) {
self.selected > -1 &&
self.$annotation[self.selected].removeClass('OxSelected');
self.selected = pos;
self.$annotation[self.selected].addClass('OxSelected');
that.triggerEvent('select', {
'in': item.in,
'out': item.out
});
} else {
self.$annotation[pos].replaceWith(
new Ox.Input({
height: 128,
type: 'textarea',
value: item.value,
width: self.options.width
})
);
}
}
function togglePanel() {
@ -11465,8 +11546,13 @@ requires
self.options.layers.forEach(function(layer, i) {
self.$annotationPanel[i] = new Ox.AnnotationPanel(
$.extend({}, layer, layer.id == 'subtitles' ? {items: self.options.subtitles} : {})
$.extend({
width: self.options.annotationSize
}, layer, layer.id == 'subtitles' ? {items: self.options.subtitles} : {})
)
.bindEvent({
select: selectAnnotation
})
.appendTo(self.$annotations);
});
@ -11674,6 +11760,13 @@ requires
});
}
function selectAnnotation(event, data) {
self.options.position = data.in
self.options.points = [data.in, data.out];
setPosition();
setPoints();
}
function setPoint(point) {
self.options.points[point == 'in' ? 0 : 1] = self.options.position;
self.$player[point == 'in' ? 1 : 2].options({
@ -11685,13 +11778,16 @@ requires
position: self.options.position
});
}
setPoints();
}
function setPoints() {
$.each(self.$player, function(i, v) {
v.options({
points: self.options.points
});
});
$.each(self.$timeline, function(i, v) {
//Ox.print('points:', self.options.points)
v.options({
points: self.options.points
});