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

update video editor (places, events)

Browse source
This commit is contained in:
rlx 2012-01-13 21:55:47 +05:30
parent 8de69b3173
commit 8384fcc913
13 changed files with 346 additions and 144 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
source/Ox.UI/css/Ox.UI.css
View file

@ -148,6 +148,10 @@ Bars
.OxResizebar { .OxResizebar {
z-index: 2; z-index: 2;
} }
.OxResizebar:hover > .OxSpace {
//background: rgba(128, 128, 128, 0.25);
}
.OxResizebar.OxHorizontal { .OxResizebar.OxHorizontal {
width: 100%; width: 100%;
height: 5px; height: 5px;
@ -293,34 +297,27 @@ Calendar
} }
.OxCalendar .OxCalendarControl.OxCalendarButtonCenter { .OxCalendar .OxCalendarControl.OxCalendarButtonCenter {
left: 24px; left: 24px;
bottom: 56px;
} }
.OxCalendar .OxCalendarControl.OxCalendarButtonDown { .OxCalendar .OxCalendarControl.OxCalendarButtonDown {
left: 24px; left: 24px;
bottom: 36px;
} }
.OxCalendar .OxCalendarControl.OxCalendarButtonLeft { .OxCalendar .OxCalendarControl.OxCalendarButtonLeft {
left: 4px; left: 4px;
bottom: 56px;
} }
.OxCalendar .OxCalendarControl.OxCalendarButtonRight { .OxCalendar .OxCalendarControl.OxCalendarButtonRight {
left: 44px; left: 44px;
bottom: 56px;
} }
.OxCalendar .OxCalendarControl.OxCalendarButtonUp { .OxCalendar .OxCalendarControl.OxCalendarButtonUp {
left: 24px; left: 24px;
bottom: 76px;
} }
.OxCalendar .OxEventControl.OxEventName { .OxCalendar .OxEventControl.OxEventName {
right: 24px; right: 24px;
bottom: 36px;
width: 128px; width: 128px;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.OxCalendar .OxEventControl.OxEventDeselectButton { .OxCalendar .OxEventControl.OxEventDeselectButton {
right: 4px; right: 4px;
bottom: 36px;
} }
.OxCalendar .OxRange .OxArrow { .OxCalendar .OxRange .OxArrow {
@ -1695,6 +1692,9 @@ Panels
.OxCollapsePanel > .OxBar > .OxExtras { .OxCollapsePanel > .OxBar > .OxExtras {
float: right; float: right;
} }
.OxCollapsePanel > .OxBar > .OxExtras > * {
float: left;
}
.OxCollapsePanel > .OxBar > .OxExtras > .OxButton { .OxCollapsePanel > .OxBar > .OxExtras > .OxButton {
//position: absolute; //position: absolute;
//right: 0px; //right: 0px;

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

@ -38,7 +38,9 @@ Ox.Calendar = function(options, self) {
range: [1000, 3000], range: [1000, 3000],
selected: '', selected: '',
showControls: false, showControls: false,
showToolbar: false,
showTypes: ['date', 'place', 'person', 'other'], showTypes: ['date', 'place', 'person', 'other'],
showZoombar: false,
width: 256, width: 256,
zoom: 8 zoom: 8
}) })
@ -289,61 +291,65 @@ Ox.Calendar = function(options, self) {
} }
]; ];
self.$toolbar = Ox.Bar({ if (self.options.showToolbar) {
size: 24
})
.appendTo(that);
self.$typeSelect = Ox.Select({ self.$toolbar = Ox.Bar({
items: [ size: 24
{id: 'date', title: 'Dates'}, })
{id: 'place', title: 'Places'}, .appendTo(that);
{id: 'person', title: 'People'},
{id: 'other', title: 'Other'}
],
max: -1,
min: 1,
title: 'Show...',
value: self.options.showTypes,
width: 80
})
.css({float: 'left', margin: '4px'})
.bindEvent({
change: function(data) {
self.options.showTypes = data.value;
getLines();
renderCalendar();
}
})
.appendTo(self.$toolbar);
self.$dateInput = Ox.Input({ self.$typeSelect = Ox.Select({
clear: true, items: [
//placeholder: 'Date', {id: 'date', title: 'Dates'},
value: Ox.formatDate(self.options.date, '%Y-%m-%d %H:%M:%S', true), {id: 'place', title: 'Places'},
width: 160 {id: 'person', title: 'People'},
}) {id: 'other', title: 'Other'}
.css({float: 'right', margin: '4px'}) ],
.bindEvent({ max: -1,
change: function(data) { min: 1,
panTo(Ox.parseDate(data.value, true)) title: 'Show...',
} value: self.options.showTypes,
}) width: 80
.appendTo(self.$toolbar); })
.css({float: 'left', margin: '4px'})
.bindEvent({
change: function(data) {
self.options.showTypes = data.value;
getLines();
renderCalendar();
}
})
.appendTo(self.$toolbar);
self.$dateInput = Ox.Input({
clear: true,
//placeholder: 'Date',
value: Ox.formatDate(self.options.date, '%Y-%m-%d %H:%M:%S', true),
width: 160
})
.css({float: 'right', margin: '4px'})
.bindEvent({
change: function(data) {
panTo(Ox.parseDate(data.value, true))
}
})
.appendTo(self.$toolbar);
}
self.$scalebar = Ox.Element() self.$scalebar = Ox.Element()
.addClass('OxTimeline') .addClass('OxTimeline')
.css({ .css({
posision: 'absolute', posision: 'absolute',
top: '24px' top: (self.options.showToolbar * 24) + 'px'
}) })
.appendTo(that); .appendTo(that);
self.$container = Ox.Element() self.$container = Ox.Element()
.addClass('OxCalendarContainer') .addClass('OxCalendarContainer')
.css({ .css({
top: '40px', top: (self.options.showToolbar * 24) + 16 + 'px',
bottom: '16px' bottom: (self.options.showZoombar * 16) + 'px'
}) })
.bind({ .bind({
mouseleave: mouseleave, mouseleave: mouseleave,
@ -372,17 +378,36 @@ Ox.Calendar = function(options, self) {
.addClass('OxTimeline') .addClass('OxTimeline')
.css({ .css({
posision: 'absolute', posision: 'absolute',
bottom: '16px' bottom: (self.options.showZoombar * 16) + 'px'
}) })
.appendTo(that); .appendTo(that);
self.$zoombar = Ox.Element() if (self.options.showZoombar) {
.css({
position: 'absolute', self.$zoombar = Ox.Element()
bottom: 0, .css({
height: '16px' position: 'absolute',
}) bottom: 0,
.appendTo(that); height: '16px'
})
.appendTo(that);
self.$zoomInput = Ox.Range({
arrows: true,
changeOnDrag: true,
max: self.maxZoom,
min: 0,
size: self.options.width,
thumbSize: 32,
thumbValue: true,
value: self.options.zoom
})
.bindEvent({
change: changeZoom
})
.appendTo(self.$zoombar);
}
self.$controls = { self.$controls = {
center: Ox.Button({ center: Ox.Button({
@ -390,6 +415,7 @@ Ox.Calendar = function(options, self) {
type: 'image' type: 'image'
}) })
.addClass('OxCalendarControl OxCalendarButtonCenter') .addClass('OxCalendarControl OxCalendarButtonCenter')
.css({bottom: 40 + (self.options.showZoombar * 16) + 'px'})
.bindEvent({ .bindEvent({
singleclick: function() { singleclick: function() {
// ... // ...
@ -404,6 +430,7 @@ Ox.Calendar = function(options, self) {
type: 'image' type: 'image'
}) })
.addClass('OxCalendarControl OxCalendarButtonDown') .addClass('OxCalendarControl OxCalendarButtonDown')
.css({bottom: 20 + (self.options.showZoombar * 16) + 'px'})
.bindEvent({ .bindEvent({
singleclick: function() { singleclick: function() {
scrollBy(1); scrollBy(1);
@ -418,6 +445,7 @@ Ox.Calendar = function(options, self) {
type: 'image' type: 'image'
}) })
.addClass('OxCalendarControl OxCalendarButtonLeft') .addClass('OxCalendarControl OxCalendarButtonLeft')
.css({bottom: 40 + (self.options.showZoombar * 16) + 'px'})
.bindEvent({ .bindEvent({
singleclick: function() { singleclick: function() {
panBy(-self.$content.width() / 2 * getSecondsPerPixel() * 1000); panBy(-self.$content.width() / 2 * getSecondsPerPixel() * 1000);
@ -433,6 +461,7 @@ Ox.Calendar = function(options, self) {
type: 'image' type: 'image'
}) })
.addClass('OxCalendarControl OxCalendarButtonRight') .addClass('OxCalendarControl OxCalendarButtonRight')
.css({bottom: 40 + (self.options.showZoombar * 16) + 'px'})
.bindEvent({ .bindEvent({
singleclick: function() { singleclick: function() {
panBy(self.$content.width() / 2 * getSecondsPerPixel() * 1000); panBy(self.$content.width() / 2 * getSecondsPerPixel() * 1000);
@ -447,6 +476,7 @@ Ox.Calendar = function(options, self) {
title: 'up', title: 'up',
type: 'image' type: 'image'
}) })
.css({bottom: 60 + (self.options.showZoombar * 16) + 'px'})
.addClass('OxCalendarControl OxCalendarButtonUp') .addClass('OxCalendarControl OxCalendarButtonUp')
.bindEvent({ .bindEvent({
singleclick: function() { singleclick: function() {
@ -465,6 +495,7 @@ Ox.Calendar = function(options, self) {
self.$eventControls = { self.$eventControls = {
name: Ox.Label() name: Ox.Label()
.addClass('OxEventControl OxEventName') .addClass('OxEventControl OxEventName')
.css({bottom: 20 + (self.options.showZoombar * 16) + 'px'})
.bindEvent({ .bindEvent({
singleclick: function() { singleclick: function() {
panToSelected(); panToSelected();
@ -479,6 +510,7 @@ Ox.Calendar = function(options, self) {
type: 'image', type: 'image',
}) })
.addClass('OxEventControl OxEventDeselectButton') .addClass('OxEventControl OxEventDeselectButton')
.css({bottom: 20 + (self.options.showZoombar * 16) + 'px'})
.bindEvent({ .bindEvent({
click: function() { click: function() {
selectEvent(''); selectEvent('');
@ -490,21 +522,6 @@ Ox.Calendar = function(options, self) {
$eventControl.css({opacity: 0}).hide(); $eventControl.css({opacity: 0}).hide();
}); });
self.$zoomInput = Ox.Range({
arrows: true,
changeOnDrag: true,
max: self.maxZoom,
min: 0,
size: self.options.width,
thumbSize: 32,
thumbValue: true,
value: self.options.zoom
})
.bindEvent({
change: changeZoom
})
.appendTo(self.$zoombar);
self.$tooltip = Ox.Tooltip({ self.$tooltip = Ox.Tooltip({
animate: false animate: false
}) })
@ -1008,7 +1025,8 @@ Ox.Calendar = function(options, self) {
function renderCalendar() { function renderCalendar() {
self.contentHeight = Math.max( self.contentHeight = Math.max(
self.lineEvents.length * 16 + 16, // fixme: why +16 ?, self.lineEvents.length * 16 + 16, // fixme: why +16 ?,
self.options.height - 56 // 24 + 16 + 16 self.options.height - (self.options.showToolbar * 24) - 16 - 16
// self.options.height - 56 // 24 + 16 + 16
); );
self.$content.css({height: self.contentHeight + 'px'}); self.$content.css({height: self.contentHeight + 'px'});
$('.OxBackground').empty(); $('.OxBackground').empty();
@ -1017,7 +1035,7 @@ Ox.Calendar = function(options, self) {
renderTimelines(); renderTimelines();
renderOverlay(); renderOverlay();
renderEvents(); renderEvents();
self.$dateInput.value( self.options.showToolbar && self.$dateInput.value(
Ox.formatDate(self.options.date, '%Y-%m-%d %H:%M:%S', true) Ox.formatDate(self.options.date, '%Y-%m-%d %H:%M:%S', true)
); );
} }
@ -1045,7 +1063,7 @@ Ox.Calendar = function(options, self) {
Ox.Element() Ox.Element()
.addClass('OxOverlay') .addClass('OxOverlay')
.css({ .css({
bottom: '16px' bottom: (self.options.showZoombar * 16) + 'px'
}) })
.append( .append(
$('<div>').css({ $('<div>').css({
@ -1169,7 +1187,7 @@ Ox.Calendar = function(options, self) {
function zoomTo(zoom) { function zoomTo(zoom) {
self.options.zoom = Ox.limit(zoom, 0, self.maxZoom); self.options.zoom = Ox.limit(zoom, 0, self.maxZoom);
self.$zoomInput.value(self.options.zoom); self.options.showZoombar && self.$zoomInput.value(self.options.zoom);
renderCalendar(); renderCalendar();
} }
@ -1279,7 +1297,7 @@ Ox.Calendar = function(options, self) {
that.resizeCalendar = function() { that.resizeCalendar = function() {
self.options.width = that.width(); self.options.width = that.width();
self.options.height = that.height(); self.options.height = that.height();
self.$zoomInput.options({size: self.options.width}); self.options.showZoombar && self.$zoomInput.options({size: self.options.width});
renderCalendar(); renderCalendar();
return that; return that;
}; };

6
source/Ox.UI/js/Calendar/Ox.ListCalendar.js
View file

@ -233,6 +233,8 @@ Ox.ListCalendar = function(options, self) {
events: Ox.clone(self.options.events, true), events: Ox.clone(self.options.events, true),
height: self.options.height, height: self.options.height,
showControls: self.options.showControls, showControls: self.options.showControls,
showToolbar: true,
showZoombar: true,
width: self.options.width - 514, width: self.options.width - 514,
zoom: 4 zoom: 4
}) })
@ -331,7 +333,7 @@ Ox.ListCalendar = function(options, self) {
.bindEvent({ .bindEvent({
change: function(data) { change: function(data) {
Ox.Log('Calendar', 'CHANGE', data); Ox.Log('Calendar', 'CHANGE', data);
var exists = false, values var exists = false, values;
if (['name', 'alternativeNames'].indexOf(data.id) > -1) { if (['name', 'alternativeNames'].indexOf(data.id) > -1) {
exists = ''; exists = '';
values = data.id == 'name' ? [data.data.value] : data.data.value; values = data.id == 'name' ? [data.data.value] : data.data.value;
@ -624,4 +626,4 @@ Ox.ListCalendar = function(options, self) {
return that; return that;
}; };

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

@ -290,7 +290,7 @@ Ox.Request = (function() {
}) })
.open(); .open();
// fixme: change this to Send / Don't Send // fixme: change this to Send / Don't Send
}, error == 'timeout' ? 250 : 0); }, error == 'timeout' ? 1000 : 0);
} }
pending[options.id] = false; pending[options.id] = false;
} }

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

@ -150,6 +150,7 @@ Ox.ArrayEditable = function(options, self) {
} }
function selectItem(idOrPosition) { function selectItem(idOrPosition) {
Ox.print('???????', self.editing)
if (Ox.isString(idOrPosition)) { if (Ox.isString(idOrPosition)) {
self.options.selected = idOrPosition; self.options.selected = idOrPosition;
self.selected = getSelectedPosition(); self.selected = getSelectedPosition();
@ -157,7 +158,7 @@ Ox.ArrayEditable = function(options, self) {
self.selected = idOrPosition; self.selected = idOrPosition;
self.options.selected = getSelectedId(); self.options.selected = getSelectedId();
} }
if (self.options.selected == '' && self.editing) { if (/*self.options.selected == '' && */self.editing) {
self.editing = false; self.editing = false;
that.blurItem(); that.blurItem();
} }
@ -253,13 +254,15 @@ Ox.ArrayEditable = function(options, self) {
}; };
that.blurItem = function() { that.blurItem = function() {
/*
if (self.options.selected) { if (self.options.selected) {
self.$items[self.selected].options({editing: false}); self.$items[self.selected].options({editing: false});
} else { } else {
*/
self.$items.forEach(function($item) { self.$items.forEach(function($item) {
$item.options({editing: false}); $item.options({editing: false});
}); });
} //}
}; };
that.editItem = function() { that.editItem = function() {

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

@ -36,6 +36,8 @@ Ox.ArrayInput = function(options, self) {
addInput(i, value); addInput(i, value);
}); });
self.options.value = getValue();
function addInput(index, value, focus) { function addInput(index, value, focus) {
Ox.Log('Form', 'add', index) Ox.Log('Form', 'add', index)
self.$element.splice(index, 0, Ox.Element() self.$element.splice(index, 0, Ox.Element()

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

@ -479,7 +479,7 @@ Ox.ListMap = function(options, self) {
change: function(data) { change: function(data) {
var isResult = self.selectedPlace[0] == '_'; var isResult = self.selectedPlace[0] == '_';
if (!self.isAsync) { if (!self.isAsync) {
// ...
} else { } else {
!isResult && editPlace(['type']) !isResult && editPlace(['type'])
} }
@ -508,7 +508,7 @@ Ox.ListMap = function(options, self) {
// fixme: if type is set, no change event fires // fixme: if type is set, no change event fires
var isResult = self.selectedPlace[0] == '_'; var isResult = self.selectedPlace[0] == '_';
if (!self.isAsync) { if (!self.isAsync) {
// ...
} else { } else {
!isResult && editPlace([v]) !isResult && editPlace([v])
} }

10
source/Ox.UI/js/Map/Ox.Map.js
View file

@ -108,9 +108,9 @@ Ox.Map = function(options, self) {
showControls: false, showControls: false,
showLabels: false, showLabels: false,
showTypes: false, showTypes: false,
statusbar: false, statusbar: false, // FIXME: showStatusbar
toolbar: false, toolbar: false, // FIXME: showToolbar
zoombar: false zoombar: false // FIXME: showZoombar
// fixme: width, height // fixme: width, height
}) })
.options(options || {}) .options(options || {})
@ -1112,6 +1112,7 @@ Ox.Map = function(options, self) {
} }
function selectPlace(id, zoom) { function selectPlace(id, zoom) {
Ox.print('SELECT PLACE', id)
// id can be null (deselect) // id can be null (deselect)
var place, var place,
selected = getSelectedMarker(); selected = getSelectedMarker();
@ -1366,7 +1367,7 @@ Ox.Map = function(options, self) {
self.map.fitBounds(mapBounds); self.map.fitBounds(mapBounds);
}); });
} else if (key == 'selected') { } else if (key == 'selected') {
selectPlace(value); selectPlace(value || null);
} else if (key == 'type') { } else if (key == 'type') {
} }
@ -1477,6 +1478,7 @@ Ox.Map = function(options, self) {
size: self.options.width size: self.options.width
}); });
updateFormElements(); updateFormElements();
Ox.print('triggering google maps resize event, height', self.options.height)
google.maps.event.trigger(self.map, 'resize'); google.maps.event.trigger(self.map, 'resize');
return that; return that;
} }

1
source/Ox.UI/js/Panel/Ox.CollapsePanel.js
View file

@ -59,6 +59,7 @@ Ox.CollapsePanel = function(options, self) {
if (self.options.extras.length) { if (self.options.extras.length) {
self.$extras = Ox.Element() self.$extras = Ox.Element()
.addClass('OxExtras') .addClass('OxExtras')
.css({width: self.options.extras.length * 16 + 1 + 'px'})
.appendTo(self.$titlebar); .appendTo(self.$titlebar);
self.options.extras.forEach(function($extra) { self.options.extras.forEach(function($extra) {
$extra.appendTo(self.$extras); $extra.appendTo(self.$extras);

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

@ -32,32 +32,55 @@ Ox.AnnotationFolder = function(options, self) {
position: 0, position: 0,
range: 'all', range: 'all',
selected: '', selected: '',
showWidget: false,
sort: 'position', sort: 'position',
title: '', title: '',
type: 'text', type: 'text',
users: 'all', users: 'all',
widgetSize: 256,
width: 0 width: 0
}) })
.options(options || {}); .options(options || {});
Ox.print('SO', self.options)
self.sort = getSort(); self.sort = getSort();
self.widget = self.options.type == 'event' ? 'Calendar'
: self.options.type == 'place' ? 'Map' : '';
that.setElement( that.setElement(
Ox.CollapsePanel({ Ox.CollapsePanel({
collapsed: self.options.collapsed, collapsed: self.options.collapsed,
extras: self.options.editable ? [ extras: Ox.merge(
Ox.Button({ self.widget ? [
id: 'add', Ox.MenuButton({
style: 'symbol', items: [
title: 'add', {id: 'show', title: 'Show ' + self.widget, checked: true}
tooltip: 'Add ' + self.options.item, ],
type: 'image' style: 'square',
}).bindEvent({ title: 'set',
click: function(data) { type: 'image'
that.triggerEvent('add', {value: ''}); })
} .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: ''});
}
})
] : []
),
size: 16, size: 16,
title: self.options.title title: self.options.title
}) })
@ -68,62 +91,152 @@ Ox.AnnotationFolder = function(options, self) {
); );
that.$content = that.$element.$content; that.$content = that.$element.$content;
if (self.widget) {
self.widgetSize = self.options.showWidget * self.options.widgetSize;
}
if (self.options.type == 'event') { if (self.options.type == 'event') {
self.$annotations = Ox.Element(); self.$outer = Ox.Element()
} else if (self.options.type == 'place') { .css({
self.$annotations = Ox.Element() display: 'table-cell',
width: self.options.width + 'px',
//height: '256px'
});
self.$calendar = Ox.Calendar({
events: getEvents(),
height: self.widgetSize,
width: self.options.width
})
.css({ .css({
width: self.options.width + 'px', width: self.options.width + 'px',
height: '256px' height: self.widgetSize + 'px'
}); })
Ox.print('PLACES::', self.places) .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',
})
.appendTo(that.$content);
self.$inner = Ox.Element()
.css({height: self.widgetSize + 'px', overflow: 'hidden'})
.appendTo(self.$outer);
self.$map = Ox.Map({ self.$map = Ox.Map({
places: getPlaces() places: getPlaces()
// showLabels: true // showLabels: true
}) })
.css({height: self.widgetSize + 'px'})
.bindEvent({ .bindEvent({
// FIXME: should be select, not selectplace
selectplace: function(data) { selectplace: function(data) {
selectAnnotation({id: data.annotationId}); self.$annotations.options({selected: data.annotationId});
// selectAnnotation({id: data.annotationId});
} }
}) })
.appendTo(self.$annotations); .appendTo(self.$inner);
} else if (['string', 'text'].indexOf(self.options.type) > -1) {
self.$annotations = Ox.ArrayEditable({
editable: self.options.editable,
items: getAnnotations(),
selected: self.options.selected,
sort: self.sort,
submitOnBlur: false,
width: self.options.type == 'text' ? self.options.width + 8 : self.options.width,
type: self.options.type == 'text' ? 'textarea' : 'input'
})
.bindEvent({
add: function(data) {
that.triggerEvent('add', {value: data.value || ''});
},
blur: function() {
that.triggerEvent('blur');
},
'delete': function(data) {
that.triggerEvent('remove', {id: data.id});
},
edit: function() {
self.editing = true;
that.triggerEvent('edit');
},
select: selectAnnotation,
submit: submitAnnotation,
key_space: function() {
that.triggerEvent('paused');
}
});
} }
self.$annotations.appendTo(that.$content);
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',
cursor: 'ns-resize'
})
.append($('<div>').addClass('OxSpace'))
.append($('<div>').addClass('OxLine'))
.append($('<div>').addClass('OxSpace'))
.bindEvent({
anyclick: toggleWidget,
dragstart: dragstart,
drag: drag,
dragend: dragend
})
.appendTo(self.$outer);
}
self.$annotations = Ox.ArrayEditable({
editable: self.options.editable,
items: getAnnotations(),
selected: self.options.selected,
sort: self.sort,
submitOnBlur: false,
width: self.options.type == 'text' ? self.options.width + 8 : self.options.width,
type: self.options.type == 'text' ? 'textarea' : 'input'
})
//.css({marginTop: '256px'})
.bindEvent({
add: function(data) {
that.triggerEvent('add', {value: data.value || ''});
},
blur: function() {
that.triggerEvent('blur');
},
'delete': function(data) {
that.triggerEvent('remove', {id: data.id});
},
edit: function() {
self.editing = true;
that.triggerEvent('edit');
},
select: selectAnnotation,
submit: submitAnnotation,
key_space: function() {
that.triggerEvent('paused');
}
})
.appendTo(
['event', 'place'].indexOf(self.options.type) > -1
? self.$outer : that.$content
);
Ox.print('SAH', self.$annotations.height())
self.options.selected && setTimeout(function() { self.options.selected && setTimeout(function() {
selectAnnotation({id: self.options.selected}); selectAnnotation({id: self.options.selected});
}, 0); }, 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)'});
}
});
}
function dragstart() {
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();
}
function dragend(e) {
}
function getAnnotations() { function getAnnotations() {
return self.options.items.filter(function(item) { return self.options.items.filter(function(item) {
return self.editing && item.id == self.options.selected || ( return self.editing && item.id == self.options.selected || (
@ -145,6 +258,21 @@ Ox.AnnotationFolder = function(options, self) {
}); });
} }
function getEvents() {
var events = [];
getAnnotations().forEach(function(item) {
if (item.event && Ox.getIndexById(events, item.event.id) == -1) {
events.push(Ox.extend({
annotationId: item.id
}, item.event));
}
});
if (!events.length) {
events = [{id: 'FOO', name: '20th Century', type: 'date', start: '1900', end: '2000'}]
}
return events;
}
function getPlaces() { function getPlaces() {
var places = []; var places = [];
getAnnotations().forEach(function(item) { getAnnotations().forEach(function(item) {
@ -168,6 +296,14 @@ 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 : '';
///*
if (self.options.type == 'place') {
self.$map.options({
selected: item && item.place ? item.place.id : null
})
.panToPlace();
}
//*/
that.triggerEvent('select', Ox.extend(data, item ? { that.triggerEvent('select', Ox.extend(data, item ? {
'in': item['in'], 'in': item['in'],
out: item.out, out: item.out,
@ -190,6 +326,16 @@ Ox.AnnotationFolder = function(options, self) {
that.triggerEvent('toggle', {collapsed: self.options.collapsed}); that.triggerEvent('toggle', {collapsed: self.options.collapsed});
} }
function toggleWidget() {
self.options.showWidget = !self.options.showWidget;
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.setOption = function(key, value) { self.setOption = function(key, value) {
if (['in', 'out'].indexOf(key) > -1 && self.editing) { if (['in', 'out'].indexOf(key) > -1 && self.editing) {
var index = Ox.getIndexById(self.options.items, self.options.selected); var index = Ox.getIndexById(self.options.items, self.options.selected);

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

@ -9,13 +9,17 @@ Ox.AnnotationPanel = function(options, self) {
self = self || {}; self = self || {};
var that = Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
calendarSize: 256,
editable: false, editable: false,
font: 'small', font: 'small',
layers: [], layers: [],
mapSize: 256,
range: 'all', range: 'all',
selected: '', selected: '',
showCalendar: false,
showFonts: false, showFonts: false,
showLayers: {}, showLayers: {},
showMap: false,
showUsers: false, showUsers: false,
sort: 'position', sort: 'position',
width: 256 width: 256
@ -112,7 +116,10 @@ Ox.AnnotationPanel = function(options, self) {
{id: 'deselect', title: 'Deselect Annotation', disabled: !self.options.selected, keyboard: 'escape'}, {id: 'deselect', title: 'Deselect Annotation', disabled: !self.options.selected, keyboard: 'escape'},
{}, {},
{id: 'save', title: 'Save Changes', disabled: true, keyboard: 'shift return'}, {id: 'save', title: 'Save Changes', disabled: true, keyboard: 'shift return'},
{id: 'undo', title: 'Undo Changes', disabled: true, keyboard: 'escape'} {id: 'undo', title: 'Undo Changes', disabled: true, keyboard: 'escape'},
{},
{id: 'find', title: 'Find Annotation', disabled: true},
{id: 'manage', title: 'Edit Place/Event', disabled: true}
], ],
style: 'square', style: 'square',
title: 'edit', title: 'edit',
@ -152,7 +159,13 @@ Ox.AnnotationPanel = function(options, self) {
selected: selected, selected: selected,
sort: self.options.sort, sort: self.options.sort,
width: self.options.width - Ox.UI.SCROLLBAR_SIZE width: self.options.width - Ox.UI.SCROLLBAR_SIZE
}, layer) }, layer, layer.type == 'event' ? {
showWidget: self.options.showCalendar,
widgetSize: self.options.calendarSize
} : layer.type == 'place' ? {
showWidget: self.options.showMap,
widgetSize: self.options.mapSize
} : {})
) )
.bindEvent({ .bindEvent({
add: function(data) { add: function(data) {
@ -271,6 +284,7 @@ Ox.AnnotationPanel = function(options, self) {
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();
}; };
@ -279,6 +293,11 @@ Ox.AnnotationPanel = function(options, self) {
getFolder(self.options.selected).editItem(); getFolder(self.options.selected).editItem();
}; };
that.updateItem = function(layer, item) {
var i = Ox.getIndexById(self.options.layers, layer);
self.$folder[i].updateItem(item);
};
return that; return that;
}; };

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

@ -18,7 +18,9 @@ Ox.VideoEditor = function(options, self) {
self = self || {}; self = self || {};
var that = Ox.Element({}, self) var that = Ox.Element({}, self)
.defaults({ .defaults({
annotationsCalendarSize: 256,
annotationsFont: 'small', annotationsFont: 'small',
annotationsMapSize: 256,
annotationsRange: 'all', annotationsRange: 'all',
annotationsSize: 256, annotationsSize: 256,
annotationsSort: 'position', annotationsSort: 'position',
@ -42,6 +44,8 @@ Ox.VideoEditor = function(options, self) {
resolution: 0, resolution: 0,
selected: '', selected: '',
showAnnotations: false, showAnnotations: false,
showAnnotationsCalendar: false,
showAnnotationsMap: false,
showLargeTimeline: true, showLargeTimeline: true,
showLayers: {}, showLayers: {},
showUsers: false, showUsers: false,
@ -588,16 +592,20 @@ Ox.VideoEditor = function(options, self) {
.appendTo(self.$menubar.$element); .appendTo(self.$menubar.$element);
self.$annotationPanel = Ox.AnnotationPanel({ self.$annotationPanel = Ox.AnnotationPanel({
calendarSize: self.options.annotationsCalendarSize,
editable: true, editable: true,
font: self.options.annotationsFont, font: self.options.annotationsFont,
'in': self.options['in'], 'in': self.options['in'],
layers: self.options.layers, layers: self.options.layers,
mapSize: self.options.annotationsMapSize,
out: self.options.out, out: self.options.out,
position: self.options.position, position: self.options.position,
range: self.options.annotationsRange, range: self.options.annotationsRange,
selected: self.options.selected, selected: self.options.selected,
sort: self.options.annotationsSort, sort: self.options.annotationsSort,
showCalendar: self.options.showAnnotationsCalendar,
showLayers: self.options.showLayers, showLayers: self.options.showLayers,
showMap: self.options.showAnnotationsMap,
showUsers: self.options.showUsers, showUsers: self.options.showUsers,
width: self.options.annotationsSize width: self.options.annotationsSize
}) })

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

@ -263,7 +263,8 @@ Forms
.OxThemeClassic .OxButton.OxSelected, .OxThemeClassic .OxButton.OxSelected,
.OxThemeClassic .OxSelect.OxSelected { .OxThemeClassic .OxSelect.OxSelected,
.OxThemeClassic .OxCollapsePanel > .OxBar > .OxExtras > .OxSelect.OxSelected {
background: -moz-linear-gradient(top, rgb(160, 160, 160), rgb(192, 192, 192)); background: -moz-linear-gradient(top, rgb(160, 160, 160), rgb(192, 192, 192));
background: -o-linear-gradient(top, rgb(160, 160, 160), rgb(192, 192, 192)); background: -o-linear-gradient(top, rgb(160, 160, 160), rgb(192, 192, 192));
background: -webkit-linear-gradient(top, rgb(160, 160, 160), rgb(192, 192, 192)); background: -webkit-linear-gradient(top, rgb(160, 160, 160), rgb(192, 192, 192));