merging changes (video editor updates)

This commit is contained in:
rolux 2012-01-16 12:58:09 +05:30
commit 0e2109a77c
8 changed files with 425 additions and 309 deletions

View file

@ -1216,12 +1216,13 @@ Ox.Calendar = function(options, self) {
if (key == 'date') {
} else if (key == 'height') {
//that.css({height: self.options.height + 'px'});
that.css({height: self.options.height + 'px'});
} else if (key == 'selected') {
selectEvent(value);
} else if (key == 'width') {
//that.css({width: self.options.width + 'px'});
//self.$zoomInput.options({size: self.options.width});
that.css({width: self.options.width + 'px'});
self.options.showZoombar && self.$zoomInput.options({size: self.options.width});
renderOverlay();
//getLines();
} else if (key == 'zoom') {

View file

@ -13,6 +13,7 @@ Ox.Request = (function() {
var cache = {},
//dfd = $.Deferred(),
$element = Ox.Element(),
pending = {},
requests = {},
self = {
@ -59,6 +60,10 @@ Ox.Request = (function() {
});
}
},
/*@
bindEvent <f> bindEvent to error/authrize requests
@*/
bindEvent: $element.bindEvent,
// fixme: remove
_leakCache: function() {
@ -145,39 +150,8 @@ Ox.Request = (function() {
}
}
/*
function debug(request) {
var $iframe = $('<iframe>')
.css({ // fixme: should go into a class
width: 768,
height: 384
}),
$dialog = Ox.Dialog({
title: 'Application Error',
buttons: [
Ox.Button({
title: 'Close'
})
.bindEvent({
click: function() {
$dialog.close();
}
})
],
content: $iframe,
width: 768,
height: 384
})
.open(),
iframe = $iframe[0].contentDocument || $iframe[0].contentWindow.document;
iframe.open();
iframe.write(request.responseText);
iframe.close();
}
*/
function complete(request) {
var $dialog, data, error;
var $dialog, data;
try {
data = JSON.parse(request.responseText);
} catch (err) {
@ -205,92 +179,8 @@ Ox.Request = (function() {
time: Ox.getTime()
};
callback(data);
} else if (data.status.code == 401 || data.status.code == 403) {
// unauthorized or forbidden
$dialog = Ox.Dialog({
buttons: [
Ox.Button({
id: 'close',
title: 'Close'
})
.bindEvent({
click: function() {
$dialog.close();
}
})
],
content: Ox.Element()
.append(
$('<img>')
.attr({src: Ox.UI.PATH + 'png/icon128.png'})
.css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'})
)
.append(
Ox.Element()
.css({position: 'absolute', left: '96px', top: '16px', width: '256px'})
.html('Sorry, you have made an unauthorized request.')
),
fixedSize: true,
height: 192,
keys: {enter: 'close', escape: 'close'},
title: Ox.toTitleCase(data.status.text),
width: 368
})
.open();
} else {
// 0 (timeout) or 500 (error)
error = data.status.code == 0 ? 'timeout' : 'error';
// on window unload, pending request will time out, so
// in order to keep the dialog from appearing, delay it
setTimeout(function() {
$dialog = Ox.Dialog({
buttons: [
/*
Ox.Button({
id: 'details',
title: 'Details'
})
.bindEvent({
click: function() {
$dialog.close(function() {
debug(request);
});
}
}),
*/
Ox.Button({
id: 'close',
title: 'Close'
})
.bindEvent({
click: function() {
$dialog.close();
}
})
],
content: Ox.Element()
.append(
$('<img>')
.attr({src: Ox.UI.PATH + 'png/icon128.png'})
.css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'})
)
.append(
Ox.Element()
.css({position: 'absolute', left: '96px', top: '16px', width: '256px'})
.html(
'Sorry, a server ' + error
+ ' occured while handling your request. To help us find out what went wrong, you may want to report this error to an administrator. Otherwise, please try again later.'
)
),
fixedSize: true,
height: 192,
keys: {enter: 'close', escape: 'close'},
title: 'Server ' + Ox.toTitleCase(error),
width: 368
})
.open();
// fixme: change this to Send / Don't Send
}, error == 'timeout' ? 1000 : 0);
$element.triggerEvent('error', data);
}
pending[options.id] = false;
}

View file

@ -10,6 +10,7 @@ Ox.ListMap <f:Ox.Element> ListMap object
options <o> Options object
height <n|256> Height in px
labels <b|false> If true, show labels
names <a|f|null> Array or names (undefined places), or function
places <a|f|null> Array of places, or function that returns places
selected <a|[]> Selected places
width <n|256> Width in px
@ -26,10 +27,11 @@ Ox.ListMap = function(options, self) {
getMatches: null,
height: 256,
labels: false,
names: null,
pageLength: 100,
places: null,
removePlace: null,
selected: [],
selected: '',
showControls: false,
showLabels: false,
showTypes: false,
@ -220,6 +222,59 @@ Ox.ListMap = function(options, self) {
size: 24
});
if (self.options.names) {
self.$listSelect = Ox.Select({
items: [
{id: 'places', title: 'Show Places'},
{id: 'names', title: 'Show Names'}
],
max: 1,
min: 1,
style: 'symbol',
title: 'set',
type: 'image',
value: 'places'
})
.css({float: 'left', margin: '4px 0 4px 4px'})
.bindEvent({
change: toggleList
})
.appendTo(self.$listToolbar);
self.$namesList = Ox.TextList({
columns: [
{
id: 'name',
operator: '+',
title: 'Name',
visible: true,
width: 256
},
{
align: 'right',
id: 'matches',
operator: '-',
title: 'Matches',
visible: true,
width: 64,
}
],
columnsVisible: true,
items: [],
max: 1,
min: 0,
scrollbarVisible: true,
sort: [{key: 'name', operator: '+'}]
})
.bindEvent({
select: function(data) {
}
});
}
self.$findElement = Ox.FormElementGroup({
elements: [
self.$findSelect = Ox.Select({
@ -242,7 +297,7 @@ Ox.ListMap = function(options, self) {
self.$findInput = Ox.Input({
clear: true,
placeholder: 'Find in List',
width: 234
width: self.options.names ? 214 : 234
})
.bindEvent({
submit: function(data) {
@ -267,8 +322,11 @@ Ox.ListMap = function(options, self) {
columnsVisible: true,
//items: Ox.clone(self.options.places),
items: self.options.places,
max: 1,
min: 0,
pageLength: self.options.pageLength,
scrollbarVisible: true,
selected: self.options.selected ? [self.options.selected] : [],
sort: self.options.sort
})
.bindEvent({
@ -308,6 +366,7 @@ Ox.ListMap = function(options, self) {
findPlaceholder: 'Find on Map',
height: self.options.height,
places: self.options.places,
selected: self.options.selected,
//statusbar: true,
showControls: self.options.showControls,
showLabels: self.options.showLabels,
@ -622,7 +681,7 @@ Ox.ListMap = function(options, self) {
elements: [
{
collapsible: true,
element: Ox.SplitPanel({
element: self.$listPanel = Ox.SplitPanel({
elements: [
{
element: self.$listToolbar,
@ -821,6 +880,22 @@ Ox.ListMap = function(options, self) {
return Ox.isNumber(val) ? val.toFixed(8) : val; // fixme: why can a string be passed ??
}
function toggleList() {
var list = self.$listSelect.options('value');
list == 'names' && !self.namesLoaded ? load() : toggle();
function load() {
self.options.names(function(data) {
Ox.print('DATA IS', data);
self.$namesList.options({items: data});
self.namesLoaded = true;
toggle();
});
}
function toggle() {
self.$listPanel.replaceElement(1, self[list == 'places' ? '$list' : '$namesList']);
}
}
function updateList(key, value) {
var query = {
conditions: Ox.merge(

View file

@ -441,7 +441,13 @@ Ox.Map = function(options, self) {
});
}
if (!window.googleCallback) {
if (window.google) {
initMap();
} else if (window.googleCallback) {
(function interval() {
window.google ? initMap() : setTimeout(interval, 100);
}());
} else {
window.googleCallback = function() {
delete window.googleCallback;
initMap();
@ -450,10 +456,6 @@ Ox.Map = function(options, self) {
document.location.protocol
+ '//maps.google.com/maps/api/js?callback=googleCallback&sensor=false'
);
} else {
(function interval() {
window.google ? initMap() : setTimeout(interval, 100);
}());
}
function addPlaceToMap(place) {
@ -775,7 +777,7 @@ Ox.Map = function(options, self) {
getMapBounds(function(mapBounds) {
Ox.Log('Map', 'init', mapBounds.getSouthWest(), mapBounds.getNorthEast(), mapBounds.getCenter())
//Ox.Log('Map', 'init', mapBounds.getSouthWest(), mapBounds.getNorthEast(), mapBounds.getCenter())
self.elevationService = new google.maps.ElevationService();
self.geocoder = new google.maps.Geocoder();
@ -853,6 +855,18 @@ Ox.Map = function(options, self) {
Ox.forEach(self.$placeControls, function($placeControl) {
$placeControl.appendTo(self.$map);
});
}
}
function isEmpty(bounds) {
// Google's bounds.isEmpty() is not reliable
var southWest = bounds.getSouthWest(),
northEast = bounds.getNorthEast();
return southWest.lat() == northEast.lat()
&& southWest.lng() == northEast.lng();
}
function formatTerms() {
setTimeout(function() {
var $element;
try {
@ -868,16 +882,7 @@ Ox.Map = function(options, self) {
});
$element.children().css({color: 'rgb(192, 192, 192)'});
} catch (e) {}
}, 0)
}
}
function isEmpty(bounds) {
// Google's bounds.isEmpty() is not reliable
var southWest = bounds.getSouthWest(),
northEast = bounds.getNorthEast();
return southWest.lat() == northEast.lat()
&& southWest.lng() == northEast.lng();
}, 0);
}
function mapChanged() {
@ -969,6 +974,7 @@ Ox.Map = function(options, self) {
if (self.zoomChanged) {
self.zoomChanged = false;
}
formatTerms();
}
function pan(x, y) {
@ -1360,6 +1366,7 @@ Ox.Map = function(options, self) {
self.setOption = function(key, value) {
if (key == 'height' || key == 'width') {
that.$element.css(key, value + 'px');
that.resizeMap();
} else if (key == 'places') {
Ox.print('MAP SET OPTIONS PLACES', value);

View file

@ -42,69 +42,81 @@ Ox.AnnotationFolder = function(options, self) {
})
.options(options || {});
Ox.print('SO', self.options)
self.sort = getSort();
self.widget = self.options.type == 'event' ? 'Calendar'
: self.options.type == 'place' ? 'Map' : '';
that.setElement(
Ox.CollapsePanel({
collapsed: self.options.collapsed,
extras: Ox.merge(
self.widget ? [
Ox.MenuButton({
items: [
{id: 'show', title: 'Show ' + self.widget, checked: true}
],
style: 'square',
title: 'set',
if (self.widget) {
self.$defineButton = Ox.Button({
disabled: !self.options.selected,
id: 'define',
style: 'symbol',
title: 'click',
tooltip: 'Define ' + Ox.toTitleCase(self.options.type),
type: 'image'
})
.bindEvent({
click: function(data) {
click: function() {
var item = Ox.getObjectById(self.options.items, self.options.selected);
that.triggerEvent('define', item.place ? {
id: item.place.id
} : {
name: item.value
});
}
})
] : [],
self.options.editable ? [
Ox.Button({
});
}
self.$addButton = Ox.Button({
disabled: !self.options.editable,
id: 'add',
style: 'symbol',
title: 'add',
tooltip: 'Add ' + self.options.item,
type: 'image'
}).bindEvent({
click: function(data) {
click: function() {
that.triggerEvent('add', {value: ''});
}
})
] : []
});
that.setElement(
Ox.CollapsePanel({
collapsed: self.options.collapsed,
extras: Ox.merge(
self.widget ? [self.$defineButton] : [],
[self.$addButton]
),
size: 16,
title: self.options.title
})
.addClass('OxAnnotationFolder')
.bindEvent({
toggle: togglePanel
toggle: toggleLayer
})
);
that.$content = that.$element.$content;
if (self.widget) {
self.widgetSize = self.options.showWidget * self.options.widgetSize;
}
if (self.options.type == 'event') {
Ox.print('FOO', self.widgetSize, self.options.showWidget, self.options.widgetSize)
self.$outer = Ox.Element()
.css({
display: 'table-cell',
width: self.options.width + 'px',
//height: '256px'
});
self.$calendar = Ox.Calendar({
width: self.options.width + 'px'
})
.appendTo(that.$content);
self.$inner = Ox.Element()
.css({
height: self.widgetSize + 'px',
overflow: 'hidden'
})
.appendTo(self.$outer);
if (options.type == 'event') {
self.$widget = self.$calendar = Ox.Calendar({
events: getEvents(),
height: self.widgetSize,
showZoombar: true,
width: self.options.width
})
.css({
@ -116,23 +128,19 @@ Ox.AnnotationFolder = function(options, self) {
selectAnnotation({id: data.annotationId});
}
})
.appendTo(self.$outer);
} else if (self.options.type == 'place') {
Ox.print('SWS', self.widgetSize)
self.$outer = Ox.Element()
.css({
display: 'table-cell',
width: self.widgetSize + 'px',
})
.appendTo(that.$content);
self.$inner = Ox.Element()
.css({height: self.widgetSize + 'px', overflow: 'hidden'})
.appendTo(self.$outer);
self.$map = Ox.Map({
places: getPlaces()
.appendTo(self.$inner);
} else { // place
self.$widget = self.$map = Ox.Map({
places: getPlaces(),
showTypes: true,
// FIXME: should be showZoombar
zoombar: true
// showLabels: true
})
.css({height: self.widgetSize + 'px'})
.css({
width: self.options.width + 'px',
height: self.widgetSize + 'px'
})
.bindEvent({
// FIXME: should be select, not selectplace
selectplace: function(data) {
@ -142,16 +150,13 @@ Ox.AnnotationFolder = function(options, self) {
})
.appendTo(self.$inner);
}
if (self.widget) {
self.$resizebar = Ox.Element({
tooltip: 'Drag to resize or click to toggle map' // fixme: update as w/ splitpanels
})
.addClass('OxResizebar OxHorizontal')
.css({
position: 'absolute',
top: self.options.widgetSize + 'px',
top: self.widgetSize + 'px',
cursor: 'ns-resize'
})
.append($('<div>').addClass('OxSpace'))
@ -164,13 +169,14 @@ Ox.AnnotationFolder = function(options, self) {
dragend: dragend
})
.appendTo(self.$outer);
}
self.$annotations = Ox.ArrayEditable({
editable: self.options.editable,
items: getAnnotations(),
placeholder: 'No ' + self.options.title,
selected: self.options.selected,
separator: ';',
sort: self.sort,
submitOnBlur: false,
width: self.options.type == 'text' ? self.options.width + 8 : self.options.width,
@ -179,12 +185,19 @@ Ox.AnnotationFolder = function(options, self) {
//.css({marginTop: '256px'})
.bindEvent({
add: function(data) {
if (self.editing) {
// FIXME: changed value will not be saved!
}
that.triggerEvent('add', {value: data.value || ''});
},
blur: function() {
// the video editor will, if it has not received focus,
// call blurItem
that.triggerEvent('blur');
},
change: changeAnnotation,
'delete': function(data) {
self.editing = false;
that.triggerEvent('remove', {id: data.id});
},
edit: function() {
@ -208,33 +221,43 @@ Ox.AnnotationFolder = function(options, self) {
selectAnnotation({id: self.options.selected});
}, 0);
if (self.options.type == 'place') {
self.$annotations.find('.OxValue').each(function() {
var $element = $(this);
if (!Ox.getObject(self.options.items, 'value', $element.html()).place) {
$element.css({color: 'rgb(192, 64, 64)'});
}
});
showWarnings();
function changeAnnotation(data) {
var item = Ox.getObjectById(self.options.items, data.id);
item.value = data.value;
that.triggerEvent('change', item);
}
function dragstart() {
if (self.options.showWidget) {
self.drag = {
startSize: self.options.widgetSize
};
}
}
function drag(e) {
if (self.options.showWidget) {
self.options.widgetSize = Ox.limit(
self.drag.startSize + e.clientDY, 128, 384
);
Ox.print('DRAG', self.options.widgetSize, e.clientDY);
if (self.options.widgetSize >= 248 && self.options.widgetSize <= 264) {
self.options.widgetSize = 256;
}
self.$resizebar.css({top: self.options.widgetSize + 'px'});
self.$inner.css({height: self.options.widgetSize + 'px'});
self.$map.css({height: self.options.widgetSize + 'px'}).resizeMap();
self.$widget.css({
height: self.options.widgetSize + 'px'
});
}
//self.options.type == 'place' && self.$map.resizeMap();
}
function dragend(e) {
if (self.options.showWidget) {
that.triggerEvent('resizewidget', {size: self.options.widgetSize});
}
}
function getAnnotations() {
@ -296,6 +319,7 @@ Ox.AnnotationFolder = function(options, self) {
function selectAnnotation(data) {
var item = Ox.getObjectById(self.options.items, data.id);
self.options.selected = item ? data.id : '';
self.widget && self.$defineButton.options({disabled: !self.options.selected});
///*
if (self.options.type == 'place') {
self.$map.options({
@ -311,19 +335,33 @@ Ox.AnnotationFolder = function(options, self) {
} : {}));
}
function showWarnings() {
if (self.widget && self.options.items.length) {
self.$annotations.find('.OxValue').each(function() {
var $element = $(this);
try { // FIXME: bad data, remove later!!
if (!Ox.getObject(
self.options.items, 'value', $element.html()
)[self.options.type]) {
$element.css({color: 'rgb(192, 64, 64)'});
}
} catch(e) {}
});
}
}
function submitAnnotation(data) {
var item = Ox.getObjectById(self.options.items, data.id);
item.value = data.value;
self.editing = false;
Ox.print('??:', self.options.items[0], self.$annotations.options('items')[0])
//self.$annotations.options({items: self.options.items});
self.options.sort == 'text' && self.$annotations.reloadItems();
that.triggerEvent('submit', item);
}
function togglePanel() {
function toggleLayer() {
self.options.collapsed = !self.options.collapsed;
that.triggerEvent('toggle', {collapsed: self.options.collapsed});
that.triggerEvent('togglelayer', {collapsed: self.options.collapsed});
}
function toggleWidget() {
@ -331,9 +369,21 @@ Ox.AnnotationFolder = function(options, self) {
self.widgetSize = self.options.showWidget * self.options.widgetSize;
self.$resizebar.animate({top: self.widgetSize + 'px'}, 250);
self.$inner.animate({height: self.widgetSize + 'px'}, 250);
self.$map.animate({height: self.widgetSize + 'px'}, 250, function() {
self.$map.resizeMap();
self.$widget.animate({height: self.widgetSize + 'px'}, 250, function() {
self.$widget.options({height: self.widgetSize});
});
that.triggerEvent('togglewidget', {collapsed: !self.options.showWidget});
}
function updateAnnotations() {
self.$annotations.options({items: getAnnotations()});
showWarnings();
}
function updateWidget() {
self.options.type == 'event'
? self.$calendar.options({events: getEvents()})
: self.$map.options({places: getPlaces()});
}
self.setOption = function(key, value) {
@ -344,19 +394,19 @@ Ox.AnnotationFolder = function(options, self) {
}
if (key == 'in') {
//fixme: array editable should support item updates while editing
if (self.editing || self.options.range == 'selection') {
self.options.type == 'place' ? self.$map.options({places: getPlaces()})
: self.$annotations.options({items: getAnnotations()});
if (self.options.range == 'selection') {
self.widget && updateWidget();
updateAnnotations();
}
} else if (key == 'out') {
if (self.editing || self.options.range == 'selection') {
self.options.type == 'place' ? self.$map.options({places: getPlaces()})
: self.$annotations.options({items: getAnnotations()});
if (self.options.range == 'selection') {
self.widget && updateWidget();
updateAnnotations();
}
} else if (key == 'position') {
if (self.editing || self.options.range == 'position') {
self.options.type == 'place' ? self.$map.options({places: getPlaces()})
: self.$annotations.options({items: getAnnotations()});
if (self.options.range == 'position') {
self.widget && updateWidget();
updateAnnotations();
}
} else if (key == 'range') {
self.$annotations.options({items: getAnnotations()});
@ -368,9 +418,16 @@ Ox.AnnotationFolder = function(options, self) {
} else if (key == 'sort') {
self.sort = getSort();
self.$annotations.options({sort: self.sort});
showWarnings();
} else if (key == 'users') {
self.$annotations.options({items: getAnnotations()});
updateAnnotations();
} else if (key == 'width') {
Ox.print('RESIZE!!!!')
if (self.widget) {
self.$outer.options({width: self.options.width});
self.$inner.options({width: self.options.width});
self.$widget.options({width: self.options.width});
}
self.$annotations.options({
width: self.options.type == 'text' ? self.options.width + 8 : self.options.width
});
@ -381,18 +438,26 @@ Ox.AnnotationFolder = function(options, self) {
addItem <f> addItem
@*/
that.addItem = function(item) {
Ox.print('FOLDER ADD ITEM', item)
var pos = 0;
self.options.items.splice(pos, 0, item);
self.$annotations.addItem(pos, item);
self.$annotations.editItem(item.id);
self.$annotations
.addItem(pos, item)
.options({selected: item.id})
.editItem();
//selectAnnotation(item);
//that.triggerEvent('edit');
return that;
};
that.blurItem = function() {
self.$annotations.blurItem();
return that;
};
that.editItem = function() {
self.$annotations.editItem();
return that;
};
/*@
@ -406,6 +471,14 @@ Ox.AnnotationFolder = function(options, self) {
};
*/
that.updateItem = function(item) {
var index = Ox.getIndexById(self.options.items, item.id);
self.options.items[index] = item;
self.widget && updateWidget();
updateAnnotations();
return that;
}
return that;
};

View file

@ -174,23 +174,39 @@ Ox.AnnotationPanel = function(options, self) {
blur: function() {
that.triggerEvent('blur');
},
change: function(data) {
that.triggerEvent('change', Ox.extend({layer: layer.id}, data));
},
define: function(data) {
that.triggerEvent('define', data);
},
edit: function() {
that.triggerEvent('edit')
that.triggerEvent('edit');
},
paused: function() {
that.triggerEvent('paused')
},
'remove': function(data) {
remove: function(data) {
that.triggerEvent('remove', Ox.extend({layer: layer.id}, data));
},
resizewidget: function(data) {
that.triggerEvent('resize' + (
layer.type == 'event' ? 'calendar' : 'map'
), data);
},
select: function(data) {
selectAnnotation(data, i);
},
submit: function(data) {
that.triggerEvent('submit', data);
that.triggerEvent('submit', Ox.extend({layer: layer.id}, data));
},
toggle: function(data) {
togglelayer: function(data) {
that.triggerEvent('togglelayer', Ox.extend({layer: layer.id}, data));
},
togglewidget: function(data) {
that.triggerEvent('toggle' + (
layer.type == 'event' ? 'calendar' : 'map'
), data);
}
})
.appendTo(self.$folders);
@ -280,11 +296,11 @@ Ox.AnnotationPanel = function(options, self) {
};
that.addItem = function(layer, item) {
Ox.print('ADD ITEM', layer, item);
var i = Ox.getIndexById(self.options.layers, layer);
self.$folder[i].addItem(item);
};
that.blurItem = function() {
getFolder(self.options.selected).blurItem();
};
@ -293,9 +309,9 @@ Ox.AnnotationPanel = function(options, self) {
getFolder(self.options.selected).editItem();
};
that.updateItem = function(layer, item) {
var i = Ox.getIndexById(self.options.layers, layer);
self.$folder[i].updateItem(item);
that.updateItem = function(item) {
Ox.print('UPDATE ITEM', item);
getFolder(item.id).updateItem(item);
};
return that;

View file

@ -58,9 +58,6 @@ Ox.VideoEditor = function(options, self) {
width: 0
})
.options(options || {})
.mousedown(function() {
that.gainFocus();
})
.bindEvent({
key_0: toggleMuted,
key_shift_0: function() {
@ -90,8 +87,9 @@ Ox.VideoEditor = function(options, self) {
movePositionBy(self.sizes.timeline[0].width);
},
key_enter: function() {
if (self.editiing) {
submitAnnotation();
if (self.editing) {
// submitAnnotation();
blurAnnotation();
} else if (self.options.selected) {
editAnnotation();
}
@ -211,8 +209,12 @@ Ox.VideoEditor = function(options, self) {
// the following is needed to determine
// how to handle annotation input blur
if (self.editing) {
Ox.print('FOCUSED')
self.focused = true;
setTimeout(function() {
// annotation folder will gain focus on blur
// so we need to get focus back
that.gainFocus();
self.focused = false;
}, 25);
}
@ -614,18 +616,26 @@ Ox.VideoEditor = function(options, self) {
addAnnotation(data.layer);
},
annotationsfont: function(data) {
self.options.annotationsFont = data.font;
that.triggerEvent('annotationsfont', data);
},
annotationsrange: function(data) {
self.options.annotationsRange = data.range;
that.triggerEvent('annotationsrange', data);
},
annotationssort: function(data) {
self.options.annotationsSort = data.sort;
that.triggerEvent('annotationssort', data);
},
blur: function() {
Ox.print('VE-BLUR')
self.editing = false;
setTimelineState();
blur: function(data) {
Ox.print('VIDEO EDITOR BLUR')
!self.focused && blurAnnotation();
},
change: function(data) {
that.triggerEvent('editannotation', data);
},
define: function(data) {
that.triggerEvent('define', data);
},
edit: function() {
self.editing = true;
@ -633,21 +643,39 @@ Ox.VideoEditor = function(options, self) {
},
paused: togglePaused,
remove: function(data) {
that.triggerEvent('removeannotation', {
id: data.id,
layer: data.layer
});
Ox.print('?>???', data)
var layer = Ox.getObjectById(self.options.layers, data.layer),
index = Ox.getIndexById(layer.items, data.id);
layer.items.splice(index, 1);
self.editing = false;
self.options.selected = '';
setTimelineState();
that.triggerEvent('removeannotation', data);
},
resize: resizeAnnotations,
resizeend: resizeendAnnotations,
resizecalendar: function(data) {
that.triggerEvent('resizecalendar', data);
},
resizemap: function(data) {
that.triggerEvent('resizemap', data);
},
select: selectAnnotation,
submit: submitAnnotation,
toggle: toggleAnnotations,
togglecalendar: function(data) {
self.options.showAnnotationsCalendar = !data.collapsed;
that.triggerEvent('togglecalendar', data);
},
togglelayer: function(data) {
that.triggerEvent('togglelayer', {
collapsed: data.collapsed,
layer: data.layer
});
},
togglemap: function(data) {
self.options.showAnnotationsMap = !data.collapsed;
that.triggerEvent('togglemap', data);
}
});
@ -673,7 +701,7 @@ Ox.VideoEditor = function(options, self) {
collapsible: true,
element: self.$annotationPanel,
resizable: true,
resize: [192, 256, 320, 384],
resize: [192, 256, 320, 384, 448, 512],
size: self.options.annotationsSize,
tooltip: self.options.tooltips ? 'annotations' : false
}
@ -700,7 +728,17 @@ Ox.VideoEditor = function(options, self) {
function blurAnnotation() {
self.editing = false;
setTimelineState();
self.$annotationPanel.blurItem();
if (
self.options.annotationsRange == 'position' && (
self.options.position < self.options['in']
|| self.options.position > self.options.out
)
) {
setPosition(self.options['in']);
}
// setPosition causes a folder redraw
// so blur once that's done
setTimeout(self.$annotationPanel.blurItem, 0);
}
function editAnnotation() {
@ -920,7 +958,6 @@ Ox.VideoEditor = function(options, self) {
}
function selectAnnotation(data) {
//Ox.print('VE.sA')
if (Ox.isUndefined(data)) {
// doubleclick on small timeline
data = getAnnotation();
@ -929,13 +966,10 @@ Ox.VideoEditor = function(options, self) {
}
self.editing = false;
self.options.selected = data.id;
// fixme: what is the following supposed to do?
if (self.options.selected && self.options.annotationsRange != 'position') {
setPosition(data['in']);
}
if (self.options.selected) {
setPoint('in', data['in']);
setPoint('out', data.out);
self.options.annotationsRange != 'position' && setPosition(data['in']);
setPoint('in', data['in'], true);
setPoint('out', data.out, true);
}
self.$annotationPanel.options({selected: self.options.selected});
setTimelineState();
@ -964,16 +998,12 @@ Ox.VideoEditor = function(options, self) {
setPoint('out', points.out);
}
function setPoint(point, position, annotation) {
function setPoint(point, position, keepSelected) {
var otherPoint = point == 'in' ? 'out' : 'in';
self.options[point] = position;
/*
// should only happen through interaction
if (self.options.selected && !self.editing) {
self.options.selected = '';
setTimelineState();
if (self.options.selected && !self.editing && !keepSelected) {
selectAnnotation({id: ''});
}
*/
self.$player.forEach(function($player) {
$player.options(point, self.options[point]);
});
@ -984,8 +1014,8 @@ Ox.VideoEditor = function(options, self) {
$timeline.options(point, self.options[point]);
});
if (self.options['in'] > self.options.out) {
setPoint(point == 'in' ? 'out' : 'in', position);
}
setPoint(point == 'in' ? 'out' : 'in', position, keepSelected);
} else {
self.$annotationPanel.options({
'in': self.options['in'],
out: self.options.out
@ -994,11 +1024,11 @@ Ox.VideoEditor = function(options, self) {
'in': self.options['in'],
out: self.options.out
});
if (self.editing) {
that.triggerEvent('editannotation', {
self.editing && that.triggerEvent('editannotation', {
id: self.options.selected,
'in': self.options['in'],
out: self.options.out
out: self.options.out,
value: $('.OxEditableElement input:visible').val()
});
}
}
@ -1056,6 +1086,17 @@ Ox.VideoEditor = function(options, self) {
function submitAnnotation(data) {
self.editing = false;
setTimelineState();
Ox.print('....', self.options.annotationsRange == 'position',
self.options.position < self.options['in'],
self.options.position > self.options.out)
if (
self.options.annotationsRange == 'position' && (
self.options.position < self.options['in']
|| self.options.position > self.options.out
)
) {
setPosition(self.options['in']);
}
data['in'] = self.options['in'];
data.out = self.options.out;
that.triggerEvent('editannotation', data);
@ -1137,9 +1178,15 @@ Ox.VideoEditor = function(options, self) {
annotation <o> annotation to add
@*/
that.addAnnotation = function(layer, annotation) {
// called from addannotation callback
self.$annotationPanel.addItem(layer, annotation);
};
that.updateAnnotation = function(annotation) {
// called from editannotation callback
self.$annotationPanel.updateItem(annotation);
}
/*@
removeAnnotation <f> remove annotation
(layer, ids) -> <o> remove annotation from layer

View file

@ -740,6 +740,13 @@ Video
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgba(192, 192, 192, 1));
}
/* FIXME: the first two should apply for every ArrayEditable */
.OxThemeClassic .OxAnnotationFolder .OxArrayEditable .OxSeparator {
color: rgb(96, 96, 96);
}
.OxThemeClassic .OxAnnotationFolder .OxEditableElement.OxPlaceholder .OxValue {
color: rgb(160, 160, 160);
}
.OxThemeClassic .OxAnnotationFolder .OxEditableElement.OxSelected {
background: rgb(192, 192, 255);
box-shadow: 0 0 1px rgb(64, 64, 64);