allow for lists with an array of items instead of a request function
This commit is contained in:
rlx
parent
2c9d6c7e91
commit
c31850f0c4
2 changed files with 124 additions and 25 deletions
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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, {
|
||||
self.options.max == -1 && $.extend(self.keyboardEvents, {
|
||||
key_alt_control_a: invertSelection,
|
||||
key_control_a: selectAll
|
||||
});
|
||||
}
|
||||
if (self.options.min == 0) {
|
||||
$.extend(self.keyboardEvents, {
|
||||
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
|
|||
});
|
||||
}
|
||||
|
||||
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
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue