0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

merging changes (timeline, annotations, urls)

Browse source
This commit is contained in:
rolux 2012-01-06 17:32:20 +05:30
commit 80f9a1a33d
13 changed files with 214 additions and 440 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
source/Ox.UI/js/Core/Ox.URL.js
View file

@ -125,9 +125,12 @@ example.com/2001/2001 -> example.com/0062622/video/00:33:21
example.com/2002/2002 -> example.com/calendar/2002/2002
2002 is a valid duration, but no list view supports durations. Then it is
read as a year, and we get calendar view with find *=2002
example.com/@paris/london -> example.com/map/@paris/london
paris matches place ABC (case-insensitive), but (assuming) find *=london
does not match place ABC, "paris" becomes the map query
example.com/@paris/paris -> example.com/map/ABC/paris
paris matches a place name (case-insensitive), so we get map view, zoomed to
Paris, with find *=paris
paris matches place ABC (case-insensitive), so we get map view, zoomed to
ABC/Paris, which is selected, with find *=paris
example.com/@renaissance/renaissance -> example.com/calendar/ABC/renaissance
renaissaince matches an event name (case-insensitive), so we get calendar
view, zoomed to the Renaissance, with find *=renaissance
@ -200,13 +203,9 @@ Ox.URL = function(options) {
function constructFind(find) {
return find.conditions.map(function(condition) {
var ret;
if (condition.conditions) {
ret = '(' + constructFind(condition) + ')';
} else {
ret = constructCondition(condition);
}
return ret;
return condition.conditions
? '(' + constructFind(condition) + ')'
: constructCondition(condition);
}).join(find.operator);
}
@ -275,10 +274,7 @@ Ox.URL = function(options) {
type = Ox.isArray(findKey.type) ? findKey.type[0] : findKey.type,
value = str,
values = findKey.values;
if (type == 'enum') {
return values[value];
}
return value;
return type == 'enum' ? values[value] : value;
}
function decodeValue(str) {
@ -531,6 +527,7 @@ Ox.URL = function(options) {
if (!state.span && /^[A-Z@]/.test(parts[0])) {
// test for span id or name
self.options.getSpan(state.item, state.view, parts[0].replace(/%20/g, ' '), function(span, view) {
Ox.Log('Core', 'span/view', span, view)
if (span) {
if (!state.view) {
// set list or item view

32
source/Ox.UI/js/Form/Ox.ArrayEditable.js
View file

@ -16,6 +16,7 @@ Ox.ArrayEditable = function(options, self) {
items: [],
position: -1,
selected: '',
type: 'input',
width: 256
})
.options(options || {})
@ -40,10 +41,14 @@ Ox.ArrayEditable = function(options, self) {
function anyclick(e) {
var $target = $(e.target),
$parent = $target.parent();
$target.is(':not(input)') && that.gainFocus();
$parent = $target.parent(),
position = $parent.data('position');
!$target.is('.OxInput') && that.gainFocus();
if ($parent.is('.OxEditableElement')) {
selectItem($parent.data('position'));
selectItem(
e.metaKey && position == self.selected
? -1 : $parent.data('position')
);
} else {
selectNone();
}
@ -58,10 +63,11 @@ Ox.ArrayEditable = function(options, self) {
}
function doubleclick(e) {
var $parent = $(e.target).parent();
var $target = $(e.target),
$parent = $target.parent();
if ($parent.is('.OxEditableElement')) {
that.editItem(self.options.selected);
} else {
} else if(!$target.is('.OxInput')) {
that.triggerEvent('add');
}
}
@ -88,9 +94,10 @@ Ox.ArrayEditable = function(options, self) {
function renderItems() {
that.empty();
self.options.items.forEach(function(item, i) {
i && $('<span>')
.html(', ')
.appendTo(that);
i && self.options.type == 'input'
&& $('<span>')
.html(', ')
.appendTo(that);
self.$items[i] = Ox.Editable({
editable: item.editable,
format: function(value) {
@ -99,13 +106,18 @@ Ox.ArrayEditable = function(options, self) {
tooltip: 'Click to select' + (
item.editable ? ', doubleclick to edit' : ''
),
value: item.value
type: self.options.type,
value: item.value,
width: self.options.type == 'input' ? 0 : self.options.width
})
.addClass(item.id == self.options.selected ? 'OxSelected' : '')
.data({position: i})
.bindEvent({
cancel: function(data) {
},
edit: function(data) {
that.triggerEvent('edit', data);
},
submit: function(data) {
submit(i, data.value);
@ -159,6 +171,8 @@ Ox.ArrayEditable = function(options, self) {
self.setOption = function(key, value) {
if (key == 'items') {
renderItems();
} else if (key == 'selected') {
that.selectItem(value);
}
}

3
source/Ox.UI/js/Form/Ox.Editable.js
View file

@ -63,6 +63,7 @@ Ox.Editable = function(options, self) {
if (self.options.editing) {
self.options.editing = false;
// edit will toggle self.options.editing
edit();
}
@ -159,7 +160,7 @@ Ox.Editable = function(options, self) {
}
// fixme: why can't this be chained?
setTimeout(function() {
self.$input.focusInput(true);
self.$input.focusInput(self.options.type == 'input');
}, 0);
that.$tooltip && that.$tooltip.options({title: ''});
that.triggerEvent('edit', {editing: true});

2
source/Ox.UI/js/Form/Ox.Input.js
View file

@ -885,7 +885,7 @@ Ox.Input = function(options, self) {
var length = self.$input.val().length,
start = Ox.isNumber(arguments[0])
? (arguments[0] < 0 ? length + arguments[0] : arguments[0])
: 0,
: arguments[0] ? 0 : length,
stop = Ox.isNumber(arguments[1])
? (arguments[1] < 0 ? length + arguments[1] : arguments[1])
: Ox.isNumber(arguments[0]) ? arguments[0]

176
source/Ox.UI/js/List/Ox.ItemInput.js
View file

@ -1,176 +0,0 @@
// vim: et:ts=4:sw=4:sts=4:ft=javascript
'use strict';
/*@
Ox.ItemInput <f:Ox.Element> ItemInput Object
() -> <f> ItemInput Object
(options) -> <f> ItemInput Object
(options, self) -> <f> ItemInput Object
options <o> Options object
type <s|textarea> can be textarea
value <s> default value
height <n|300> height
width <n|100> width
self <o> shared private variable
cancel <!> triggered if cancel button is pressed
save <!> triggered if save button is pressed
@*/
Ox.ItemInput = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
type: 'textarea',
value: '',
height: 300,
width: 100
})
.options(options || {});
self.$input = Ox.Input({
changeOnKeypress: true,
height: self.options.height,
style: 'square',
type: self.options.type,
value: self.options.value,
width: self.options.width + 6
})
.bind({
mousedown: function(e) {
// keep mousedown from reaching list
e.stopPropagation();
}
})
.bindEvent({
change: function(data) {
self.options.height = data.value.split('\n').length * 13;
Ox.Log('List', 'HEIGHT', self.options.height)
self.$input.options({
height: self.options.height
});
that.css({
height: self.options.height + 16 + 'px'
});
that.parent().css({
height: self.options.height + 24 + 'px'
});
self.$bar.css({
marginTop: 8 + 'px'
});
}
})
.appendTo(that);
self.$bar = Ox.Bar({
size: 16
})
.css({
marginTop: self.options.height - 8 + 'px'
})
.appendTo(that);
Ox.Button({
style: 'symbol',
title: 'delete',
tooltip: 'Remove',
type: 'image'
})
.css({float: 'left'})
.bindEvent({
click: function() {
that.triggerEvent('remove');
}
})
.appendTo(self.$bar);
Ox.Button({
style: 'symbol',
title: 'check',
tooltip: 'Save',
type: 'image'
})
.css({float: 'right'})
.bindEvent({
click: function() {
that.triggerEvent('save', {
value: self.$input.value()
});
}
})
.appendTo(self.$bar);
Ox.Button({
style: 'symbol',
title: 'view',
tooltip: 'Preview',
type: 'image'
})
.css({float: 'right'})
.bindEvent({
click: function() {
that.triggerEvent('preview');
}
})
.appendTo(self.$bar);
Ox.Button({
style: 'symbol',
title: 'close',
tooltip: 'Cancel',
type: 'image'
})
.css({float: 'right'})
.bindEvent({
click: function() {
that.triggerEvent('cancel');
}
})
.appendTo(self.$bar);
/*
that.append(
$input = Ox.Input({
height: self.options.height,
style: 'square',
type: self.options.type,
value: self.options.value,
width: self.options.width + 6
})
.bind({
mousedown: function(e) {
// keep mousedown from reaching list
e.stopPropagation();
}
})
)
.append(Ox.Element()
.append(Ox.Button({type: 'text', title: 'Cancel'})
.css('width', '42%')
.bindEvent({
'click': function() {
that.triggerEvent('cancel');
}
}))
.append(Ox.Button({type: 'text', title: 'Save'})
.css('width', '42%')
.bindEvent({
'click': function() {
that.triggerEvent('save', {
value: $input.value()
});
}
}))
.css({
'margin-top': self.options.height-8,
'height': '16px',
'text-align': 'right',
})
);
Ox.Log('List', $input);
*/
return that;
};

50
source/Ox.UI/js/List/Ox.List.js
View file

@ -1538,56 +1538,6 @@ Ox.List = function(options, self) {
return that;
};
/*@
editItem <f> turn item into edit form
(pos) -> <u> edit item at position
pos <n> position of item to edit
@*/
that.editItem = function(pos) {
var $input,
item = self.options.items[pos],
$item = self.$items[pos],
width = $item.width(), // fixme: don't lookup in DOM
height = $item.height();
$item
.height(height + 8 + 16)
.empty()
.addClass('OxEdit');
$input = Ox.ItemInput({
type: 'textarea',
value: item.value,
height: height,
width: width
}).bindEvent({
cancel: cancel,
remove: remove,
save: submit
}).appendTo($item.$element);
/*
setTimeout(function() {
$input.gainFocus();
$input.focus();
});
*/
function cancel() {
$item.options('data', item);
that.triggerEvent('cancel', item);
loadItems();
}
function remove() {
that.triggerEvent('remove', item.id);
}
function submit(data) {
item.value = data.value;
//$input.loseFocus().remove();
// fixme: leaky, inputs remain in focus stack
$item.options('data', item);
that.triggerEvent('submit', item);
loadItems();
}
}
/*@
paste <f> paste data
(data) -> <o> the list

120
source/Ox.UI/js/Video/Ox.AnnotationPanel.js
View file

@ -26,7 +26,7 @@ Ox.AnnotationPanel = function(options, self) {
id: '',
items: [],
range: 'all',
selected: -1,
selected: '',
sort: 'position',
title: '',
type: 'text',
@ -78,12 +78,14 @@ Ox.AnnotationPanel = function(options, self) {
self.$annotations = Ox.Element();
} else if (self.options.type == 'place') {
self.$annotations = Ox.Element();
} else if (self.options.type == 'string') {
} else if (['string', 'text'].indexOf(self.options.type) > -1) {
self.$annotations = Ox.ArrayEditable({
editable: self.options.editable,
items: getAnnotations(),
selected: self.options.selected,
sort: self.sort,
width: pandora.user.ui.annotationsSize - Ox.UI.SCROLLBAR_SIZE
width: self.options.width,
type: self.options.type == 'text' ? 'textarea' : 'input'
})
.bindEvent({
add: function(data) {
@ -94,81 +96,25 @@ Ox.AnnotationPanel = function(options, self) {
'delete': function(data) {
that.triggerEvent('remove', {id: data.id});
},
select: function(data) {
selectAnnotation({ids: [data.id]});
},
submit: updateAnnotation
});
} else if (self.options.type == 'text') {
self.$annotations = Ox.List({
construct: function(data) {
var $item = Ox.Element()
.addClass('OxAnnotation OxTarget')
.css({padding: '4px 4px 0 4px'})
.append(
Ox.Editable({
type: 'textarea',
width: self.options.width - 8,
value: data.value
})
.bindEvent({
edit: function() {
$item.removeClass('OxTarget');
},
submit: function(newData) {
$item.addClass('OxTarget');
updateAnnotation({
id: data.id,
value: newData.value
});
}
})
)
.append($('<div>').css({height: '4px'}));
return $item;
},
items: getAnnotations(),
max: 1,
min: 0,
sort: self.sort,
type: 'none', // fixme
unique: 'id'
})
.bindEvent({
cancel: function(item) {
//reset in/out points
selectAnnotation({ids: [item.id]});
},
open: function(data) {
return;
if (data.ids.length == 1) {
var pos = Ox.getIndexById(self.$annotations.options('items'), data.ids[0]);
self.$annotations.editItem(pos);
}
},
'delete': function(data) {
that.triggerEvent('remove', {id: data.ids[0]});
edit: function(data) {
that.triggerEvent('edit', data);
},
select: selectAnnotation,
submit: updateAnnotation
submit: editAnnotation
});
}
self.$annotations.appendTo(that.$content);
/*
self.$annotations = Ox.Element()
.appendTo(that.$content);
self.$annotation = [];
self.options.items.forEach(function(item, i) {
self.$annotation[i] = Ox.Element()
.addClass('OxAnnotation')
.html(item.value.replace(/\n/g, '<br/>'))
.click(function() {
clickAnnotation(i);
})
.appendTo(self.$annotations);
});
*/
Ox.print('SOS', self.options.selected);
self.options.selected && setTimeout(function() {
selectAnnotation({id: self.options.selected});
}, 0);
function editAnnotation(data) {
var item = Ox.getObjectById(self.options.items, data.id);
item.value = data.value;
that.triggerEvent('submit', item);
}
function getAnnotations() {
return self.options.items.filter(function(item) {
@ -179,24 +125,20 @@ Ox.AnnotationPanel = function(options, self) {
) || (
self.options.range == 'position'
&& item['in'] <= self.options.position
&& item.out > self.options.position
&& item.out >= self.options.position
)
});
}
function selectAnnotation(data) {
var item = Ox.getObjectById(self.options.items, data.ids[0]);
item && that.triggerEvent('select', {
'in': item['in'],
'out': item.out,
'layer': self.options.id
});
}
function updateAnnotation(data) {
var item = Ox.getObjectById(self.options.items, data.id);
item.value = data.value;
that.triggerEvent('submit', item);
that.triggerEvent('select', Ox.extend({
id: data.id
}, item ? {
'in': item['in'],
out: item.out,
layer: self.options.id
} : {}));
}
function togglePanel() {
@ -221,7 +163,7 @@ Ox.AnnotationPanel = function(options, self) {
items: getAnnotations()
});
} else if (key == 'sort') {
self.$annotations.options({sort: value});
self.$annotations.options('sort', value);
}
};
@ -231,11 +173,7 @@ Ox.AnnotationPanel = function(options, self) {
that.addItem = function(item) {
var pos = 0;
self.options.items.splice(pos, 0, item);
if (self.$annotations.addItem) {
self.$annotations.addItem(pos, item);
} else {
self.$annotations.addItems(pos, [item]);
}
self.$annotations.addItem(pos, item);
self.$annotations.editItem(pos);
};
@ -243,7 +181,7 @@ Ox.AnnotationPanel = function(options, self) {
deselectItems <f> deselectItems
@*/
that.deselectItems = function() {
self.$annotations.options('selected', []);
self.$annotations.options('selected', '');
};
/*@

28
source/Ox.UI/js/Video/Ox.BlockVideoTimeline.js
View file

@ -16,6 +16,7 @@ Ox.BlockVideoTimeline = function(options, self) {
results: [],
showPointMarkers: false,
showSubtitles: false,
state: 'default',
subtitles: [],
width: 0
})
@ -50,16 +51,16 @@ Ox.BlockVideoTimeline = function(options, self) {
setCSS();
self.$image = Ox.SmallVideoTimelineImage({
duration: self.options.duration,
editing: self.options.editing,
'in': self.options['in'],
out: self.options.out,
results: self.options.results,
subtitles: self.options.showSubtitles ? self.options.subtitles : [],
timeline: self.options.getImageURL,
width: Math.round(self.options.duration),
type: self.options.type
});
duration: self.options.duration,
editing: self.options.editing,
'in': self.options['in'],
out: self.options.out,
results: self.options.results,
subtitles: self.options.showSubtitles ? self.options.subtitles : [],
timeline: self.options.getImageURL,
width: Math.round(self.options.duration),
type: 'editor'
});
Ox.loop(self.lines, function(i) {
addLine(i);
@ -217,6 +218,11 @@ Ox.BlockVideoTimeline = function(options, self) {
updateTimelines();
}
function setState() {
self.$image.options({state: self.options.state});
updateTimelines();
}
function setWidth() {
self.lines = getLines();
setCSS();
@ -266,6 +272,8 @@ Ox.BlockVideoTimeline = function(options, self) {
setPositionMarker();
} else if (key == 'results') {
setResults();
} else if (key == 'state') {
setState();
} else if (key == 'width') {
setWidth();
}

31
source/Ox.UI/js/Video/Ox.SmallVideoTimelineImage.js
View file

@ -6,11 +6,10 @@ Ox.SmallVideoTimelineImage = function(options, self) {
var that = Ox.Element({}, self)
.defaults({
duration: 0,
editing: false,
'in': 0,
out: 0,
results: [],
selected: false,
state: 'default',
subtitles: [],
timeline: '',
width: 256,
@ -102,8 +101,8 @@ Ox.SmallVideoTimelineImage = function(options, self) {
.appendTo(that.$element);
function getImageURL(image, callback) {
var width = image == 'results' || image == 'selection' ?
self.options.width : self.imageWidth,
var width = image == 'results' || image == 'selection'
? self.options.width : self.imageWidth,
height = self.imageHeight,
canvas = $('<canvas>')
.attr({
@ -125,9 +124,10 @@ Ox.SmallVideoTimelineImage = function(options, self) {
) + 1;
Ox.loop(left, right, function(x) {
Ox.loop(top, bottom, function(y) {
var alpha = self.options.type == 'player' ? 128
: (y == top || y == bottom - 1) ? 255 : 64,
color = Ox.Theme[self.theme].timeline.result,
var alpha = self.options.type == 'editor'
&& (y == top || y == bottom - 1) ? 192 : 64,
color = [2, 3, 6].indexOf(x % 4 + y % 4) > -1
? [0, 0, 0] : [255, 255, 0],
index = x * 4 + y * 4 * width;
data[index] = color[0];
data[index + 1] = color[1];
@ -145,15 +145,14 @@ Ox.SmallVideoTimelineImage = function(options, self) {
) + 1,
top = 0,
bottom = height,
rgb = self.options.editing ? [128, 255, 255] : [255, 255, 255];
rgb = self.options.state == 'editing' ? [[0, 0, 128], [128, 128, 255]]
: self.options.state == 'selected' ? [[0, 128, 0], [128, 255, 128]]
: [[0, 0, 0], [255, 255, 255]];
Ox.loop(left, right, function(x) {
Ox.loop(top, bottom, function(y) {
var alpha = self.options.type == 'player' ? 128
: (y == top || y == bottom - 1) ? 255 : 255,
color = Ox.Theme[self.theme].timeline[
self.options.editing ? 'editing'
: self.options.selected ? 'selected' : 'default'
],
var alpha = self.options.type == 'editor'
&& (y == top || y == bottom - 1) ? 192 : 64,
color = rgb[[2, 3, 6].indexOf(x % 4 + y % 4) > -1 ? 0 : 1],
index = x * 4 + y * 4 * width;
data[index] = color[0];
data[index + 1] = color[1];
@ -209,6 +208,10 @@ Ox.SmallVideoTimelineImage = function(options, self) {
self.$subtitles.attr({
src: getImageURL('subtitles')
});
} else if (key == 'state') {
self.$selection.attr({
src: getImageURL('selection')
});
} else if (key == 'width') {
that.css({width: value + 'px'});
self.$results

147
source/Ox.UI/js/Video/Ox.VideoEditor.js
View file

@ -40,8 +40,10 @@ Ox.VideoEditor = function(options, self) {
posterFrame: 0,
posterFrameControls: false,
resolution: 0,
selected: '',
showAnnotations: false,
showLargeTimeline: true,
state: 'default',
subtitles: [],
tooltips: false,
videoRatio: 16/9,
@ -155,6 +157,8 @@ Ox.VideoEditor = function(options, self) {
margin: 8,
});
Ox.print('VIDEO EDITOR OPTIONS', self.options)
self.words = [];
Ox.forEach(Ox.count(Ox.words(self.options.subtitles.map(function(subtitle) {
return subtitle.text;
@ -284,6 +288,7 @@ Ox.VideoEditor = function(options, self) {
results: find(self.options.find),
showPointMarkers: true,
showSubtitles: true,
state: self.options.state,
subtitles: self.options.subtitles,
videoId: self.options.videoId,
width: self.sizes.timeline[1].width
@ -306,6 +311,8 @@ Ox.VideoEditor = function(options, self) {
self.$annotationPanel = [];
self.options.layers.forEach(function(layer, i) {
var item = Ox.getObjectById(layer.items, self.options.selected),
selected = item ? item.id : '';
self.$annotationPanel[i] = Ox.AnnotationPanel(
Ox.extend({
font: self.options.annotationsFont,
@ -313,6 +320,7 @@ Ox.VideoEditor = function(options, self) {
out: self.options.out,
position: self.options.position,
range: self.options.annotationsRange,
selected: selected,
sort: self.options.annotationsSort,
width: self.options.annotationsSize - Ox.UI.SCROLLBAR_SIZE
}, layer)
@ -324,6 +332,9 @@ Ox.VideoEditor = function(options, self) {
data.out = self.options.out;
that.triggerEvent('addannotation', data);
},
edit: function(data) {
setState(data.editing ? 'editing' : 'selected');
},
remove: function(data) {
that.triggerEvent('removeannotation', {
id: data.id,
@ -331,14 +342,16 @@ Ox.VideoEditor = function(options, self) {
});
},
select: function(data) {
self.options.layers.forEach(function(layer_, i_) {
if (i_ != i) {
// FIXME: the way AnnotationPanel is set up,
// it does not actually have that method
// self.$annotationPanel[i_].deselectItems();
}
});
selectAnnotation(data);
if (data.id) {
self.options.layers.forEach(function(layer_, i_) {
if (i_ != i) {
self.$annotationPanel[i_].deselectItems();
}
});
selectAnnotation(data);
} else {
// ...
}
},
submit: editAnnotation
})
@ -671,50 +684,52 @@ Ox.VideoEditor = function(options, self) {
})
.appendTo(self.$annotationsbar);
that.$element = Ox.SplitPanel({
elements: [
{
element: Ox.SplitPanel({
elements: [
{
element: self.$videobar,
size: 16
},
{
element: self.$editor
}
],
orientation: 'vertical'
})
},
{
collapsed: !self.options.showAnnotations,
collapsible: true,
element: Ox.SplitPanel({
elements: [
{
element: self.$annotationsbar,
size: 16
},
{
element: self.$annotations,
}
],
orientation: 'vertical'
})
.bindEvent({
resize: resizeAnnotations,
resizeend: resizeendAnnotations,
toggle: toggleAnnotations
}),
resizable: true,
resize: [192, 256, 320, 384],
size: self.options.annotationsSize,
tooltip: self.options.tooltips ? 'annotations' : false
}
],
orientation: 'horizontal'
});
that.setElement(
Ox.SplitPanel({
elements: [
{
element: Ox.SplitPanel({
elements: [
{
element: self.$videobar,
size: 16
},
{
element: self.$editor
}
],
orientation: 'vertical'
})
},
{
collapsed: !self.options.showAnnotations,
collapsible: true,
element: Ox.SplitPanel({
elements: [
{
element: self.$annotationsbar,
size: 16
},
{
element: self.$annotations,
}
],
orientation: 'vertical'
})
.bindEvent({
resize: resizeAnnotations,
resizeend: resizeendAnnotations,
toggle: toggleAnnotations
}),
resizable: true,
resize: [192, 256, 320, 384],
size: self.options.annotationsSize,
tooltip: self.options.tooltips ? 'annotations' : false
}
],
orientation: 'horizontal'
})
);
// we need a timeout so that a chained bindEvent
// actually catches the event
@ -864,9 +879,9 @@ Ox.VideoEditor = function(options, self) {
//Ox.Log('Video', 'getSizes', scrollbarIsVisible, height, self.options.height, size)
return (!scrollbarIsVisible && height > self.options.height - 16) ? getSizes(true) : size;
function getHeight() {
return size.player[0].height + self.controlsHeight +
size.timeline[0].height + lines * 16 +
(lines + 3) * self.margin;
return size.player[0].height + self.controlsHeight
+ size.timeline[0].height + lines * 16
+ (lines + 3) * self.margin;
}
}
@ -920,9 +935,15 @@ Ox.VideoEditor = function(options, self) {
}
function selectAnnotation(data) {
//setPosition(data['in']);
setPoint('in', data['in']);
setPoint('out', data.out);
self.options.annotationsRange != 'position' && setPosition(data['in']);
setState(data.id ? 'selected' : 'default');
that.triggerEvent('select', {
id: data.id || ''
});
if (data.id) {
setPoint('in', data['in']);
setPoint('out', data.out);
}
}
function select(type) {
@ -930,9 +951,12 @@ Ox.VideoEditor = function(options, self) {
setPoints();
}
function setPoint(point, position) {
function setPoint(point, position, annotation) {
var otherPoint = point == 'in' ? 'out' : 'in';
self.options[point] = position;
if (self.options.state == 'selected') {
setState('default');
}
self.$player.forEach(function($player) {
$player.options(point, self.options[point]);
});
@ -1000,6 +1024,11 @@ Ox.VideoEditor = function(options, self) {
});
}
function setState(state) {
self.options.state = state;
self.$timeline[1].options({state: state});
}
function submitFindInput(value, hasPressedEnter) {
self.options.find = value;
self.results = find(self.options.find);

16
source/Ox.UI/themes/classic/css/classic.css
View file

@ -340,10 +340,6 @@ Forms
background: -webkit-linear-gradient(top, rgb(160, 160, 160), rgb(192, 192, 192));
}
.OxThemeClassic .OxEditableElement.OxSelected {
background: rgb(208, 208, 208);
}
/*
================================================================================
Images
@ -743,6 +739,13 @@ Video
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgba(192, 192, 192, 1));
}
.OxThemeClassic .OxAnnotationPanel .OxEditableElement.OxSelected {
background: rgb(192, 255, 192);
}
.OxThemeClassic .OxAnnotationPanel .OxEditableElement input {
background: rgb(192, 192, 255);
}
/*
================================================================================
Miscellaneous
@ -775,7 +778,10 @@ Miscellaneous
-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.OxThemeClassic ::selection {
.OxThemeClassic ::selection,
.OxThemeClassic ::-moz-selection,
.OxThemeClassic ::-o-selection,
.OxThemeClassic ::-webkit-selection {
background: rgb(192, 192, 192);
//color: rgb(255, 255, 255);
}

6
source/Ox.UI/themes/modern/css/modern.css
View file

@ -760,6 +760,12 @@ Video
//display: none;
}
.OxThemeModern .OxAnnotationPanel .OxEditableElement.OxSelected {
background: rgb(0, 128, 0);
}
.OxThemeModern .OxAnnotationPanel .OxEditableElement input {
background: rgb(64, 64, 192);
}
/*
================================================================================

18
source/Ox/js/Collection.js
View file

@ -104,8 +104,8 @@ Ox.filter <f> Filters a collection by a given condition
objects and strings.
> Ox.filter([2, 1, 0], function(v, i) { return v == i; })
[1]
> Ox.keys(Ox.filter({a: 'c', b: 'b', c: 'a'}, function(v, k) { return v == k; }))
['b']
> Ox.filter({a: 'c', b: 'b', c: 'a'}, function(v, k) { return v == k; })
{b: 'b'}
> Ox.filter(' foo bar ', function(v) { return v != ' '; })
'foobar'
@*/
@ -113,14 +113,14 @@ Ox.filter <f> Filters a collection by a given condition
Ox.filter = function(col, fn) {
var type = Ox.typeOf(col),
ret = type == 'array' ? [] : type == 'object' ? {} : '';
Ox.forEach(col, function(v, k) {
if (fn(v, k)) {
Ox.forEach(col, function(val, key) {
if (fn(val, key)) {
if (type == 'array') {
ret.push(v);
ret.push(val);
} else if (type == 'object') {
ret[k] = v;
ret[key] = val;
} else {
ret += v;
ret += val;
}
}
});
@ -384,7 +384,7 @@ Ox.last = function(arr, val) {
Ox.len <f> Returns the length of an array, function, object or string
Not to be confused with <code>Ox.length</code>, which is the
<code>length</code> property of the <code>Ox</code> function
(<code>1</code>).
(<code>1</code>). // FIXME: 1 becomes 67 in DocPanel
> Ox.len([1, 2, 3])
3
> Ox.len([,])
@ -455,7 +455,6 @@ Ox.makeArray <f> Takes an array-like object and returns a true array
> Ox.makeArray({0: "f", 1: "o", 2: "o", length: 3})
["f", "o", "o"]
@*/
Ox.makeArray = /MSIE/.test(navigator.userAgent)
? function(col) {
var i, len, ret = [];
@ -632,7 +631,6 @@ Ox.shuffle <f> Randomizes the order of values within a collection
> Ox.shuffle('123').length
3
@*/
Ox.shuffle = function(col) {
var keys, ret, type = Ox.typeOf(col), values;
function sort() {