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

- remove editItem from Ox.List

Browse source 
- use ArrayEditable for text too
This commit is contained in:
j 2012-01-04 22:57:32 +05:30
parent 66934d22a9
commit 093edd57d0
12 changed files with 180 additions and 403 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

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

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

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, var length = self.$input.val().length,
start = Ox.isNumber(arguments[0]) start = Ox.isNumber(arguments[0])
? (arguments[0] < 0 ? length + arguments[0] : arguments[0]) ? (arguments[0] < 0 ? length + arguments[0] : arguments[0])
: 0, : arguments[0] ? 0 : length,
stop = Ox.isNumber(arguments[1]) stop = Ox.isNumber(arguments[1])
? (arguments[1] < 0 ? length + arguments[1] : arguments[1]) ? (arguments[1] < 0 ? length + arguments[1] : arguments[1])
: Ox.isNumber(arguments[0]) ? arguments[0] : 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; 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 paste <f> paste data
(data) -> <o> the list (data) -> <o> the list

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

@ -26,7 +26,7 @@ Ox.AnnotationPanel = function(options, self) {
id: '', id: '',
items: [], items: [],
range: 'all', range: 'all',
selected: -1, selected: '',
sort: 'position', sort: 'position',
title: '', title: '',
type: 'text', type: 'text',
@ -78,12 +78,13 @@ Ox.AnnotationPanel = function(options, self) {
self.$annotations = Ox.Element(); self.$annotations = Ox.Element();
} else if (self.options.type == 'place') { } else if (self.options.type == 'place') {
self.$annotations = Ox.Element(); self.$annotations = Ox.Element();
} else if (self.options.type == 'string') { } else if (['string', 'text'].indexOf(self.options.type) > -1) {
self.$annotations = Ox.ArrayEditable({ self.$annotations = Ox.ArrayEditable({
editable: self.options.editable, editable: self.options.editable,
items: getAnnotations(), items: getAnnotations(),
sort: self.sort, sort: self.sort,
width: pandora.user.ui.annotationsSize - Ox.UI.SCROLLBAR_SIZE width: self.options.width,
type: self.options.type == 'text' ? 'textarea' : 'input'
}) })
.bindEvent({ .bindEvent({
add: function(data) { add: function(data) {
@ -94,63 +95,11 @@ Ox.AnnotationPanel = function(options, self) {
'delete': function(data) { 'delete': function(data) {
that.triggerEvent('remove', {id: data.id}); that.triggerEvent('remove', {id: data.id});
}, },
select: function(data) { edit: function(data) {
selectAnnotation({ids: [data.id]}); that.triggerEvent('edit', data);
},
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]});
}, },
select: selectAnnotation, select: selectAnnotation,
submit: updateAnnotation submit: editAnnotation
}); });
} }
self.$annotations.appendTo(that.$content); self.$annotations.appendTo(that.$content);
@ -185,15 +134,17 @@ Ox.AnnotationPanel = function(options, self) {
} }
function selectAnnotation(data) { function selectAnnotation(data) {
var item = Ox.getObjectById(self.options.items, data.ids[0]); var item = Ox.getObjectById(self.options.items, data.id);
item && that.triggerEvent('select', { that.triggerEvent('select', Ox.extend({
id: data.id
}, item ? {
'in': item['in'], 'in': item['in'],
'out': item.out, out: item.out,
'layer': self.options.id layer: self.options.id
}); } : {}));
} }
function updateAnnotation(data) { function editAnnotation(data) {
var item = Ox.getObjectById(self.options.items, data.id); var item = Ox.getObjectById(self.options.items, data.id);
item.value = data.value; item.value = data.value;
that.triggerEvent('submit', item); that.triggerEvent('submit', item);
@ -221,7 +172,7 @@ Ox.AnnotationPanel = function(options, self) {
items: getAnnotations() items: getAnnotations()
}); });
} else if (key == 'sort') { } else if (key == 'sort') {
self.$annotations.options({sort: value}); self.$annotations.options('sort', value);
} }
}; };
@ -231,11 +182,7 @@ Ox.AnnotationPanel = function(options, self) {
that.addItem = function(item) { that.addItem = function(item) {
var pos = 0; var pos = 0;
self.options.items.splice(pos, 0, item); self.options.items.splice(pos, 0, item);
if (self.$annotations.addItem) { self.$annotations.addItem(pos, item);
self.$annotations.addItem(pos, item);
} else {
self.$annotations.addItems(pos, [item]);
}
self.$annotations.editItem(pos); self.$annotations.editItem(pos);
}; };
@ -243,7 +190,7 @@ Ox.AnnotationPanel = function(options, self) {
deselectItems <f> deselectItems deselectItems <f> deselectItems
@*/ @*/
that.deselectItems = function() { 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: [], results: [],
showPointMarkers: false, showPointMarkers: false,
showSubtitles: false, showSubtitles: false,
state: 'default',
subtitles: [], subtitles: [],
width: 0 width: 0
}) })
@ -50,16 +51,16 @@ Ox.BlockVideoTimeline = function(options, self) {
setCSS(); setCSS();
self.$image = Ox.SmallVideoTimelineImage({ self.$image = Ox.SmallVideoTimelineImage({
duration: self.options.duration, duration: self.options.duration,
editing: self.options.editing, editing: self.options.editing,
'in': self.options['in'], 'in': self.options['in'],
out: self.options.out, out: self.options.out,
results: self.options.results, results: self.options.results,
subtitles: self.options.showSubtitles ? self.options.subtitles : [], subtitles: self.options.showSubtitles ? self.options.subtitles : [],
timeline: self.options.getImageURL, timeline: self.options.getImageURL,
width: Math.round(self.options.duration), width: Math.round(self.options.duration),
type: self.options.type type: 'editor'
}); });
Ox.loop(self.lines, function(i) { Ox.loop(self.lines, function(i) {
addLine(i); addLine(i);
@ -217,6 +218,11 @@ Ox.BlockVideoTimeline = function(options, self) {
updateTimelines(); updateTimelines();
} }
function setState() {
self.$image.options({state: self.options.state});
updateTimelines();
}
function setWidth() { function setWidth() {
self.lines = getLines(); self.lines = getLines();
setCSS(); setCSS();
@ -266,6 +272,8 @@ Ox.BlockVideoTimeline = function(options, self) {
setPositionMarker(); setPositionMarker();
} else if (key == 'results') { } else if (key == 'results') {
setResults(); setResults();
} else if (key == 'state') {
setState();
} else if (key == 'width') { } else if (key == 'width') {
setWidth(); 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) var that = Ox.Element({}, self)
.defaults({ .defaults({
duration: 0, duration: 0,
editing: false,
'in': 0, 'in': 0,
out: 0, out: 0,
results: [], results: [],
selected: false, state: 'default',
subtitles: [], subtitles: [],
timeline: '', timeline: '',
width: 256, width: 256,
@ -102,8 +101,8 @@ Ox.SmallVideoTimelineImage = function(options, self) {
.appendTo(that.$element); .appendTo(that.$element);
function getImageURL(image, callback) { function getImageURL(image, callback) {
var width = image == 'results' || image == 'selection' ? var width = image == 'results' || image == 'selection'
self.options.width : self.imageWidth, ? self.options.width : self.imageWidth,
height = self.imageHeight, height = self.imageHeight,
canvas = $('<canvas>') canvas = $('<canvas>')
.attr({ .attr({
@ -125,9 +124,10 @@ Ox.SmallVideoTimelineImage = function(options, self) {
) + 1; ) + 1;
Ox.loop(left, right, function(x) { Ox.loop(left, right, function(x) {
Ox.loop(top, bottom, function(y) { Ox.loop(top, bottom, function(y) {
var alpha = self.options.type == 'player' ? 128 var alpha = self.options.type == 'editor'
: (y == top || y == bottom - 1) ? 255 : 64, && (y == top || y == bottom - 1) ? 192 : 64,
color = Ox.Theme[self.theme].timeline.result, color = [2, 3, 6].indexOf(x % 4 + y % 4) > -1
? [0, 0, 0] : [255, 255, 0],
index = x * 4 + y * 4 * width; index = x * 4 + y * 4 * width;
data[index] = color[0]; data[index] = color[0];
data[index + 1] = color[1]; data[index + 1] = color[1];
@ -145,15 +145,14 @@ Ox.SmallVideoTimelineImage = function(options, self) {
) + 1, ) + 1,
top = 0, top = 0,
bottom = height, 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(left, right, function(x) {
Ox.loop(top, bottom, function(y) { Ox.loop(top, bottom, function(y) {
var alpha = self.options.type == 'player' ? 128 var alpha = self.options.type == 'editor'
: (y == top || y == bottom - 1) ? 255 : 64, && (y == top || y == bottom - 1) ? 192 : 64,
color = Ox.Theme[self.theme].timeline[ color = rgb[[2, 3, 6].indexOf(x % 4 + y % 4) > -1 ? 0 : 1],
self.options.editing ? 'editing'
: self.options.selected ? 'selected' : 'default'
],
index = x * 4 + y * 4 * width; index = x * 4 + y * 4 * width;
data[index] = color[0]; data[index] = color[0];
data[index + 1] = color[1]; data[index + 1] = color[1];
@ -209,6 +208,10 @@ Ox.SmallVideoTimelineImage = function(options, self) {
self.$subtitles.attr({ self.$subtitles.attr({
src: getImageURL('subtitles') src: getImageURL('subtitles')
}); });
} else if (key == 'state') {
self.$selection.attr({
src: getImageURL('selection')
});
} else if (key == 'width') { } else if (key == 'width') {
that.css({width: value + 'px'}); that.css({width: value + 'px'});
self.$results self.$results

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

@ -40,8 +40,10 @@ Ox.VideoEditor = function(options, self) {
posterFrame: 0, posterFrame: 0,
posterFrameControls: false, posterFrameControls: false,
resolution: 0, resolution: 0,
selected: '',
showAnnotations: false, showAnnotations: false,
showLargeTimeline: true, showLargeTimeline: true,
state: 'default',
subtitles: [], subtitles: [],
tooltips: false, tooltips: false,
videoRatio: 16/9, videoRatio: 16/9,
@ -284,6 +286,7 @@ Ox.VideoEditor = function(options, self) {
results: find(self.options.find), results: find(self.options.find),
showPointMarkers: true, showPointMarkers: true,
showSubtitles: true, showSubtitles: true,
state: self.options.state,
subtitles: self.options.subtitles, subtitles: self.options.subtitles,
videoId: self.options.videoId, videoId: self.options.videoId,
width: self.sizes.timeline[1].width width: self.sizes.timeline[1].width
@ -313,6 +316,7 @@ Ox.VideoEditor = function(options, self) {
out: self.options.out, out: self.options.out,
position: self.options.position, position: self.options.position,
range: self.options.annotationsRange, range: self.options.annotationsRange,
// selected: self.options.selected,
sort: self.options.annotationsSort, sort: self.options.annotationsSort,
width: self.options.annotationsSize - Ox.UI.SCROLLBAR_SIZE width: self.options.annotationsSize - Ox.UI.SCROLLBAR_SIZE
}, layer) }, layer)
@ -324,6 +328,9 @@ Ox.VideoEditor = function(options, self) {
data.out = self.options.out; data.out = self.options.out;
that.triggerEvent('addannotation', data); that.triggerEvent('addannotation', data);
}, },
edit: function(data) {
setState(data.editing ? 'editing' : 'selected');
},
remove: function(data) { remove: function(data) {
that.triggerEvent('removeannotation', { that.triggerEvent('removeannotation', {
id: data.id, id: data.id,
@ -331,14 +338,14 @@ Ox.VideoEditor = function(options, self) {
}); });
}, },
select: function(data) { select: function(data) {
self.options.layers.forEach(function(layer_, i_) { if(data.id) {
if (i_ != i) { self.options.layers.forEach(function(layer_, i_) {
// FIXME: the way AnnotationPanel is set up, if (i_ != i) {
// it does not actually have that method self.$annotationPanel[i_].deselectItems();
// self.$annotationPanel[i_].deselectItems(); }
} });
}); selectAnnotation(data);
selectAnnotation(data); }
}, },
submit: editAnnotation submit: editAnnotation
}) })
@ -671,50 +678,52 @@ Ox.VideoEditor = function(options, self) {
}) })
.appendTo(self.$annotationsbar); .appendTo(self.$annotationsbar);
that.$element = Ox.SplitPanel({ that.setElement(
elements: [ Ox.SplitPanel({
{ elements: [
element: Ox.SplitPanel({ {
elements: [ element: Ox.SplitPanel({
{ elements: [
element: self.$videobar, {
size: 16 element: self.$videobar,
}, size: 16
{ },
element: self.$editor {
} element: self.$editor
], }
orientation: 'vertical' ],
}) orientation: 'vertical'
}, })
{ },
collapsed: !self.options.showAnnotations, {
collapsible: true, collapsed: !self.options.showAnnotations,
element: Ox.SplitPanel({ collapsible: true,
elements: [ element: Ox.SplitPanel({
{ elements: [
element: self.$annotationsbar, {
size: 16 element: self.$annotationsbar,
}, size: 16
{ },
element: self.$annotations, {
} element: self.$annotations,
], }
orientation: 'vertical' ],
}) orientation: 'vertical'
.bindEvent({ })
resize: resizeAnnotations, .bindEvent({
resizeend: resizeendAnnotations, resize: resizeAnnotations,
toggle: toggleAnnotations resizeend: resizeendAnnotations,
}), toggle: toggleAnnotations
resizable: true, }),
resize: [192, 256, 320, 384], resizable: true,
size: self.options.annotationsSize, resize: [192, 256, 320, 384],
tooltip: self.options.tooltips ? 'annotations' : false size: self.options.annotationsSize,
} tooltip: self.options.tooltips ? 'annotations' : false
], }
orientation: 'horizontal' ],
}); orientation: 'horizontal'
})
);
// we need a timeout so that a chained bindEvent // we need a timeout so that a chained bindEvent
// actually catches the event // actually catches the event
@ -920,9 +929,12 @@ Ox.VideoEditor = function(options, self) {
} }
function selectAnnotation(data) { function selectAnnotation(data) {
//setPosition(data['in']); self.options.annotationsRange != 'position' && setPosition(data['in']);
setPoint('in', data['in']); if (data.id) {
setPoint('out', data.out); setPoint('in', data['in']);
setPoint('out', data.out);
}
setState(data.id ? 'selected' : 'default');
} }
function select(type) { function select(type) {
@ -933,6 +945,9 @@ Ox.VideoEditor = function(options, self) {
function setPoint(point, position) { function setPoint(point, position) {
var otherPoint = point == 'in' ? 'out' : 'in'; var otherPoint = point == 'in' ? 'out' : 'in';
self.options[point] = position; self.options[point] = position;
if (self.options.state == 'selected') {
setState('default');
}
self.$player.forEach(function($player) { self.$player.forEach(function($player) {
$player.options(point, self.options[point]); $player.options(point, self.options[point]);
}); });
@ -1000,6 +1015,11 @@ Ox.VideoEditor = function(options, self) {
}); });
} }
function setState(state) {
self.options.state = state;
self.$timeline[1].options({state: state});
}
function submitFindInput(value, hasPressedEnter) { function submitFindInput(value, hasPressedEnter) {
self.options.find = value; self.options.find = value;
self.results = find(self.options.find); 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)); background: -webkit-linear-gradient(top, rgb(160, 160, 160), rgb(192, 192, 192));
} }
.OxThemeClassic .OxEditableElement.OxSelected {
background: rgb(208, 208, 208);
}
/* /*
================================================================================ ================================================================================
Images Images
@ -743,6 +739,13 @@ Video
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgba(192, 192, 192, 1)); 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 Miscellaneous
@ -775,7 +778,10 @@ Miscellaneous
-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); -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); background: rgb(192, 192, 192);
//color: rgb(255, 255, 255); //color: rgb(255, 255, 255);
} }

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

@ -760,6 +760,12 @@ Video
//display: none; //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. objects and strings.
> Ox.filter([2, 1, 0], function(v, i) { return v == i; }) > Ox.filter([2, 1, 0], function(v, i) { return v == i; })
[1] [1]
> Ox.keys(Ox.filter({a: 'c', b: 'b', c: 'a'}, function(v, k) { return v == k; })) > Ox.filter({a: 'c', b: 'b', c: 'a'}, function(v, k) { return v == k; })
['b'] {b: 'b'}
> Ox.filter(' foo bar ', function(v) { return v != ' '; }) > Ox.filter(' foo bar ', function(v) { return v != ' '; })
'foobar' 'foobar'
@*/ @*/
@ -113,14 +113,14 @@ Ox.filter <f> Filters a collection by a given condition
Ox.filter = function(col, fn) { Ox.filter = function(col, fn) {
var type = Ox.typeOf(col), var type = Ox.typeOf(col),
ret = type == 'array' ? [] : type == 'object' ? {} : ''; ret = type == 'array' ? [] : type == 'object' ? {} : '';
Ox.forEach(col, function(v, k) { Ox.forEach(col, function(val, key) {
if (fn(v, k)) { if (fn(val, key)) {
if (type == 'array') { if (type == 'array') {
ret.push(v); ret.push(val);
} else if (type == 'object') { } else if (type == 'object') {
ret[k] = v; ret[key] = val;
} else { } 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 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 Not to be confused with <code>Ox.length</code>, which is the
<code>length</code> property of the <code>Ox</code> function <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]) > Ox.len([1, 2, 3])
3 3
> Ox.len([,]) > 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}) > Ox.makeArray({0: "f", 1: "o", 2: "o", length: 3})
["f", "o", "o"] ["f", "o", "o"]
@*/ @*/
Ox.makeArray = /MSIE/.test(navigator.userAgent) Ox.makeArray = /MSIE/.test(navigator.userAgent)
? function(col) { ? function(col) {
var i, len, ret = []; var i, len, ret = [];
@ -632,7 +631,6 @@ Ox.shuffle <f> Randomizes the order of values within a collection
> Ox.shuffle('123').length > Ox.shuffle('123').length
3 3
@*/ @*/
Ox.shuffle = function(col) { Ox.shuffle = function(col) {
var keys, ret, type = Ox.typeOf(col), values; var keys, ret, type = Ox.typeOf(col), values;
function sort() { function sort() {