merging changes (video editor updates)
This commit is contained in:
rolux
commit
0e2109a77c
8 changed files with 425 additions and 309 deletions
|
|
@ -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') {
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -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,22 +855,6 @@ Ox.Map = function(options, self) {
|
|||
Ox.forEach(self.$placeControls, function($placeControl) {
|
||||
$placeControl.appendTo(self.$map);
|
||||
});
|
||||
setTimeout(function() {
|
||||
var $element;
|
||||
try {
|
||||
$element = $(self.$map.find('a[href$="terms_maps.html"]').parent()).css({
|
||||
color: 'rgb(192, 192, 192)',
|
||||
textShadow: '1px 1px 0 rgb(64, 64, 64)'
|
||||
});
|
||||
['moz', 'o', 'webkit'].forEach(function(browser) {
|
||||
$element.css({
|
||||
backgroundImage: '-' + browser
|
||||
+ '-linear-gradient(left, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0.1) 50px)',
|
||||
});
|
||||
});
|
||||
$element.children().css({color: 'rgb(192, 192, 192)'});
|
||||
} catch (e) {}
|
||||
}, 0)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -880,6 +866,25 @@ Ox.Map = function(options, self) {
|
|||
&& southWest.lng() == northEast.lng();
|
||||
}
|
||||
|
||||
function formatTerms() {
|
||||
setTimeout(function() {
|
||||
var $element;
|
||||
try {
|
||||
$element = $(self.$map.find('a[href$="terms_maps.html"]').parent()).css({
|
||||
color: 'rgb(192, 192, 192)',
|
||||
textShadow: '1px 1px 0 rgb(64, 64, 64)'
|
||||
});
|
||||
['moz', 'o', 'webkit'].forEach(function(browser) {
|
||||
$element.css({
|
||||
backgroundImage: '-' + browser
|
||||
+ '-linear-gradient(left, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0.1) 50px)',
|
||||
});
|
||||
});
|
||||
$element.children().css({color: 'rgb(192, 192, 192)'});
|
||||
} catch (e) {}
|
||||
}, 0);
|
||||
}
|
||||
|
||||
function mapChanged() {
|
||||
// gets called after panning or zooming
|
||||
Ox.Log('Map', '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);
|
||||
|
|
|
|||
|
|
@ -42,116 +42,121 @@ 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' : '';
|
||||
|
||||
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() {
|
||||
var item = Ox.getObjectById(self.options.items, self.options.selected);
|
||||
that.triggerEvent('define', item.place ? {
|
||||
id: item.place.id
|
||||
} : {
|
||||
name: item.value
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
self.$addButton = Ox.Button({
|
||||
disabled: !self.options.editable,
|
||||
id: 'add',
|
||||
style: 'symbol',
|
||||
title: 'add',
|
||||
tooltip: 'Add ' + self.options.item,
|
||||
type: 'image'
|
||||
}).bindEvent({
|
||||
click: function() {
|
||||
that.triggerEvent('add', {value: ''});
|
||||
}
|
||||
});
|
||||
|
||||
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',
|
||||
type: 'image'
|
||||
})
|
||||
.bindEvent({
|
||||
click: function(data) {
|
||||
|
||||
}
|
||||
})
|
||||
] : [],
|
||||
self.options.editable ? [
|
||||
Ox.Button({
|
||||
id: 'add',
|
||||
style: 'symbol',
|
||||
title: 'add',
|
||||
tooltip: 'Add ' + self.options.item,
|
||||
type: 'image'
|
||||
}).bindEvent({
|
||||
click: function(data) {
|
||||
that.triggerEvent('add', {value: ''});
|
||||
}
|
||||
})
|
||||
] : []
|
||||
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({
|
||||
events: getEvents(),
|
||||
height: self.widgetSize,
|
||||
width: self.options.width
|
||||
})
|
||||
.css({
|
||||
width: self.options.width + 'px',
|
||||
height: self.widgetSize + 'px'
|
||||
})
|
||||
.bindEvent({
|
||||
select: function(data) {
|
||||
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',
|
||||
width: self.options.width + 'px'
|
||||
})
|
||||
.appendTo(that.$content);
|
||||
self.$inner = Ox.Element()
|
||||
.css({height: self.widgetSize + 'px', overflow: 'hidden'})
|
||||
.css({
|
||||
height: self.widgetSize + 'px',
|
||||
overflow: 'hidden'
|
||||
})
|
||||
.appendTo(self.$outer);
|
||||
self.$map = Ox.Map({
|
||||
places: getPlaces()
|
||||
// showLabels: true
|
||||
})
|
||||
.css({height: self.widgetSize + 'px'})
|
||||
.bindEvent({
|
||||
// FIXME: should be select, not selectplace
|
||||
selectplace: function(data) {
|
||||
self.$annotations.options({selected: data.annotationId});
|
||||
// selectAnnotation({id: data.annotationId});
|
||||
}
|
||||
})
|
||||
.appendTo(self.$inner);
|
||||
}
|
||||
|
||||
if (self.widget) {
|
||||
|
||||
if (options.type == 'event') {
|
||||
self.$widget = self.$calendar = Ox.Calendar({
|
||||
events: getEvents(),
|
||||
height: self.widgetSize,
|
||||
showZoombar: true,
|
||||
width: self.options.width
|
||||
})
|
||||
.css({
|
||||
width: self.options.width + 'px',
|
||||
height: self.widgetSize + 'px'
|
||||
})
|
||||
.bindEvent({
|
||||
select: function(data) {
|
||||
selectAnnotation({id: data.annotationId});
|
||||
}
|
||||
})
|
||||
.appendTo(self.$inner);
|
||||
} else { // place
|
||||
self.$widget = self.$map = Ox.Map({
|
||||
places: getPlaces(),
|
||||
showTypes: true,
|
||||
// FIXME: should be showZoombar
|
||||
zoombar: true
|
||||
// showLabels: true
|
||||
})
|
||||
.css({
|
||||
width: self.options.width + 'px',
|
||||
height: self.widgetSize + 'px'
|
||||
})
|
||||
.bindEvent({
|
||||
// FIXME: should be select, not selectplace
|
||||
selectplace: function(data) {
|
||||
self.$annotations.options({selected: data.annotationId});
|
||||
// selectAnnotation({id: data.annotationId});
|
||||
}
|
||||
})
|
||||
.appendTo(self.$inner);
|
||||
}
|
||||
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) {
|
||||
that.triggerEvent('add', {value: data.value || ''});
|
||||
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() {
|
||||
self.drag = {
|
||||
startSize: self.options.widgetSize
|
||||
};
|
||||
if (self.options.showWidget) {
|
||||
self.drag = {
|
||||
startSize: self.options.widgetSize
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function drag(e) {
|
||||
self.options.widgetSize = Ox.limit(
|
||||
self.drag.startSize + e.clientDY, 128, 384
|
||||
);
|
||||
Ox.print('DRAG', self.options.widgetSize, e.clientDY);
|
||||
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();
|
||||
if (self.options.showWidget) {
|
||||
self.options.widgetSize = Ox.limit(
|
||||
self.drag.startSize + e.clientDY, 128, 384
|
||||
);
|
||||
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.$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;
|
||||
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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,22 +1014,22 @@ Ox.VideoEditor = function(options, self) {
|
|||
$timeline.options(point, self.options[point]);
|
||||
});
|
||||
if (self.options['in'] > self.options.out) {
|
||||
setPoint(point == 'in' ? 'out' : 'in', position);
|
||||
}
|
||||
self.$annotationPanel.options({
|
||||
'in': self.options['in'],
|
||||
out: self.options.out
|
||||
});
|
||||
that.triggerEvent('points', {
|
||||
'in': self.options['in'],
|
||||
out: self.options.out
|
||||
});
|
||||
if (self.editing) {
|
||||
that.triggerEvent('editannotation', {
|
||||
id: self.options.selected,
|
||||
setPoint(point == 'in' ? 'out' : 'in', position, keepSelected);
|
||||
} else {
|
||||
self.$annotationPanel.options({
|
||||
'in': self.options['in'],
|
||||
out: self.options.out
|
||||
});
|
||||
that.triggerEvent('points', {
|
||||
'in': self.options['in'],
|
||||
out: self.options.out
|
||||
});
|
||||
self.editing && that.triggerEvent('editannotation', {
|
||||
id: self.options.selected,
|
||||
'in': self.options['in'],
|
||||
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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in a new issue