From c31850f0c455739b9baa13c4192a40386e045bef Mon Sep 17 00:00:00 2001
From: rlx <0x0073@0x2620.org>
Date: Mon, 7 Feb 2011 05:34:18 +0000
Subject: [PATCH] allow for lists with an array of items instead of a request
function
---
build/css/ox.ui.modern.css | 3 +
build/js/ox.ui.js | 146 ++++++++++++++++++++++++++++++-------
2 files changed, 124 insertions(+), 25 deletions(-)
diff --git a/build/css/ox.ui.modern.css b/build/css/ox.ui.modern.css
index 13d1b6ca..338ead22 100644
--- a/build/css/ox.ui.modern.css
+++ b/build/css/ox.ui.modern.css
@@ -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);
diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js
index 7db34ed0..36be7ac9 100644
--- a/build/js/ox.ui.js
+++ b/build/js/ox.ui.js
@@ -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, '
')};
+ }),
+ })
+ .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, '
'))
+ .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
});