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

merging changes (video editor updates)

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

7
source/Ox.UI/js/Calendar/Ox.Calendar.js
View file

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

124
source/Ox.UI/js/Core/Ox.Request.js
View file

@ -13,6 +13,7 @@ Ox.Request = (function() {
var cache = {}, var cache = {},
//dfd = $.Deferred(), //dfd = $.Deferred(),
$element = Ox.Element(),
pending = {}, pending = {},
requests = {}, requests = {},
self = { self = {
@ -59,6 +60,10 @@ Ox.Request = (function() {
}); });
} }
}, },
/*@
bindEvent <f> bindEvent to error/authrize requests
@*/
bindEvent: $element.bindEvent,
// fixme: remove // fixme: remove
_leakCache: function() { _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) { function complete(request) {
var $dialog, data, error; var $dialog, data;
try { try {
data = JSON.parse(request.responseText); data = JSON.parse(request.responseText);
} catch (err) { } catch (err) {
@ -205,92 +179,8 @@ Ox.Request = (function() {
time: Ox.getTime() time: Ox.getTime()
}; };
callback(data); 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 { } else {
// 0 (timeout) or 500 (error) $element.triggerEvent('error', data);
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);
} }
pending[options.id] = false; pending[options.id] = false;
} }

81
source/Ox.UI/js/Map/Ox.ListMap.js
View file

@ -10,6 +10,7 @@ Ox.ListMap <f:Ox.Element> ListMap object
options <o> Options object options <o> Options object
height <n|256> Height in px height <n|256> Height in px
labels <b|false> If true, show labels 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 places <a|f|null> Array of places, or function that returns places
selected <a|[]> Selected places selected <a|[]> Selected places
width <n|256> Width in px width <n|256> Width in px
@ -26,10 +27,11 @@ Ox.ListMap = function(options, self) {
getMatches: null, getMatches: null,
height: 256, height: 256,
labels: false, labels: false,
names: null,
pageLength: 100, pageLength: 100,
places: null, places: null,
removePlace: null, removePlace: null,
selected: [], selected: '',
showControls: false, showControls: false,
showLabels: false, showLabels: false,
showTypes: false, showTypes: false,
@ -220,6 +222,59 @@ Ox.ListMap = function(options, self) {
size: 24 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({ self.$findElement = Ox.FormElementGroup({
elements: [ elements: [
self.$findSelect = Ox.Select({ self.$findSelect = Ox.Select({
@ -242,7 +297,7 @@ Ox.ListMap = function(options, self) {
self.$findInput = Ox.Input({ self.$findInput = Ox.Input({
clear: true, clear: true,
placeholder: 'Find in List', placeholder: 'Find in List',
width: 234 width: self.options.names ? 214 : 234
}) })
.bindEvent({ .bindEvent({
submit: function(data) { submit: function(data) {
@ -267,8 +322,11 @@ Ox.ListMap = function(options, self) {
columnsVisible: true, columnsVisible: true,
//items: Ox.clone(self.options.places), //items: Ox.clone(self.options.places),
items: self.options.places, items: self.options.places,
max: 1,
min: 0,
pageLength: self.options.pageLength, pageLength: self.options.pageLength,
scrollbarVisible: true, scrollbarVisible: true,
selected: self.options.selected ? [self.options.selected] : [],
sort: self.options.sort sort: self.options.sort
}) })
.bindEvent({ .bindEvent({
@ -308,6 +366,7 @@ Ox.ListMap = function(options, self) {
findPlaceholder: 'Find on Map', findPlaceholder: 'Find on Map',
height: self.options.height, height: self.options.height,
places: self.options.places, places: self.options.places,
selected: self.options.selected,
//statusbar: true, //statusbar: true,
showControls: self.options.showControls, showControls: self.options.showControls,
showLabels: self.options.showLabels, showLabels: self.options.showLabels,
@ -622,7 +681,7 @@ Ox.ListMap = function(options, self) {
elements: [ elements: [
{ {
collapsible: true, collapsible: true,
element: Ox.SplitPanel({ element: self.$listPanel = Ox.SplitPanel({
elements: [ elements: [
{ {
element: self.$listToolbar, 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 ?? 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) { function updateList(key, value) {
var query = { var query = {
conditions: Ox.merge( conditions: Ox.merge(

39
source/Ox.UI/js/Map/Ox.Map.js
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() { window.googleCallback = function() {
delete window.googleCallback; delete window.googleCallback;
initMap(); initMap();
@ -450,10 +456,6 @@ Ox.Map = function(options, self) {
document.location.protocol document.location.protocol
+ '//maps.google.com/maps/api/js?callback=googleCallback&sensor=false' + '//maps.google.com/maps/api/js?callback=googleCallback&sensor=false'
); );
} else {
(function interval() {
window.google ? initMap() : setTimeout(interval, 100);
}());
} }
function addPlaceToMap(place) { function addPlaceToMap(place) {
@ -775,7 +777,7 @@ Ox.Map = function(options, self) {
getMapBounds(function(mapBounds) { 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.elevationService = new google.maps.ElevationService();
self.geocoder = new google.maps.Geocoder(); self.geocoder = new google.maps.Geocoder();
@ -853,6 +855,18 @@ Ox.Map = function(options, self) {
Ox.forEach(self.$placeControls, function($placeControl) { Ox.forEach(self.$placeControls, function($placeControl) {
$placeControl.appendTo(self.$map); $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() { setTimeout(function() {
var $element; var $element;
try { try {
@ -868,16 +882,7 @@ Ox.Map = function(options, self) {
}); });
$element.children().css({color: 'rgb(192, 192, 192)'}); $element.children().css({color: 'rgb(192, 192, 192)'});
} catch (e) {} } catch (e) {}
}, 0) }, 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();
} }
function mapChanged() { function mapChanged() {
@ -969,6 +974,7 @@ Ox.Map = function(options, self) {
if (self.zoomChanged) { if (self.zoomChanged) {
self.zoomChanged = false; self.zoomChanged = false;
} }
formatTerms();
} }
function pan(x, y) { function pan(x, y) {
@ -1360,6 +1366,7 @@ Ox.Map = function(options, self) {
self.setOption = function(key, value) { self.setOption = function(key, value) {
if (key == 'height' || key == 'width') { if (key == 'height' || key == 'width') {
that.$element.css(key, value + 'px');
that.resizeMap(); that.resizeMap();
} else if (key == 'places') { } else if (key == 'places') {
Ox.print('MAP SET OPTIONS PLACES', value); Ox.print('MAP SET OPTIONS PLACES', value);

227
source/Ox.UI/js/Video/Ox.AnnotationFolder.js
View file

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

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

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

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

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

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

@ -740,6 +740,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));
} }
/* 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 { .OxThemeClassic .OxAnnotationFolder .OxEditableElement.OxSelected {
background: rgb(192, 192, 255); background: rgb(192, 192, 255);
box-shadow: 0 0 1px rgb(64, 64, 64); box-shadow: 0 0 1px rgb(64, 64, 64);