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

update video editor (maps, calendars)

Browse source
This commit is contained in:
rlx 2012-01-17 14:55:58 +05:30
parent 1445824ffd
commit dc47e901ad
9 changed files with 196 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1214,7 +1214,21 @@ Ox.Calendar = function(options, self) {
self.setOption = function(key, value) {
if (key == 'date') {
// ...
} else if (key == 'events') {
value.forEach(function(event) {
event = getEventData(event);
});
self.$lines = [];
getLines();
renderCalendar();
if (self.options.selected) {
if (getSelectedEvent()) {
selectEvent(self.options.selected);
} else {
self.options.selected = '';
}
}
} else if (key == 'height') {
that.css({height: self.options.height + 'px'});
} else if (key == 'selected') {

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

@ -256,13 +256,9 @@ Ox.ArrayEditable = function(options, self) {
function triggerSelectEvent() {
if (!self.triggered) {
that.triggerEvent('select', Ox.extend({
that.triggerEvent('select', {
id: self.options.selected
}, self.options.selected ? {
height: self.$items[self.selected].$element.height()
+ (self.options.type == 'textarea' ? 8 : 0),
top: self.$items[self.selected].offset().top
} : {}));
});
self.triggered = true;
setTimeout(function() {
self.triggered = false;

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

@ -108,6 +108,8 @@ Ox.CollapsePanel = function(options, self) {
@*/
self.setOption = function(key, value) {
if (key == 'collapsed') {
// will be toggled again in toggleCollapsed
self.options.collapsed = !self.options.collapsed;
self.$button.trigger('click');
} else if (key == 'title') {
self.$title.html(self.options.title);

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

@ -82,8 +82,7 @@ Ox.AnnotationFolder = function(options, self) {
}
});
that.setElement(
Ox.CollapsePanel({
self.$panel = Ox.CollapsePanel({
collapsed: self.options.collapsed,
extras: Ox.merge(
self.widget ? [self.$defineButton] : [],
@ -95,8 +94,9 @@ Ox.AnnotationFolder = function(options, self) {
.addClass('OxAnnotationFolder')
.bindEvent({
toggle: toggleLayer
})
);
});
that.setElement(self.$panel);
that.$content = that.$element.$content;
if (self.widget) {
@ -126,7 +126,11 @@ Ox.AnnotationFolder = function(options, self) {
})
.bindEvent({
select: function(data) {
selectAnnotation({id: data.annotationId});
if (!data.id || data.annotationIds.indexOf(self.options.selected) == -1) {
self.$annotations.options({
selected: !data.id ? '' : data.annotationIds[0]
});
}
}
})
.appendTo(self.$inner);
@ -145,9 +149,11 @@ Ox.AnnotationFolder = function(options, self) {
.bindEvent({
// FIXME: should be select, not selectplace
selectplace: function(data) {
Ox.print('ANNOTATION ID IS', data.annotationId)
self.$annotations.options({selected: data.annotationId});
// selectAnnotation({id: data.annotationId});
if (!data.id || data.annotationIds.indexOf(self.options.selected) == -1) {
self.$annotations.options({
selected: !data.id ? '' : data.annotationIds[0]
});
}
}
})
.appendTo(self.$inner);
@ -217,8 +223,6 @@ Ox.AnnotationFolder = function(options, self) {
? self.$outer : that.$content
);
Ox.print('SAH', self.$annotations.height())
self.options.selected && setTimeout(function() {
selectAnnotation({id: self.options.selected});
}, 0);
@ -260,11 +264,9 @@ Ox.AnnotationFolder = function(options, self) {
self.$inner.css({height: self.options.widgetSize + 'px'});
self.$widget.options({height: self.options.widgetSize});
}
//self.options.type == 'place' && self.$map.resizeMap();
}
function dragend(e) {
//self.options.type == 'place' && self.$map.resizeMap();
if (self.options.showWidget) {
that.triggerEvent('resizewidget', {size: self.options.widgetSize});
}
@ -301,26 +303,33 @@ Ox.AnnotationFolder = function(options, self) {
function getEvents() {
var events = [];
getAnnotations().forEach(function(item) {
if (item.event && Ox.getIndexById(events, item.event.id) == -1) {
getAnnotations().filter(function(item) {
return !!item.event;
}).forEach(function(item) {
var index = Ox.getIndexById(events, item.event.id);
if (index == -1) {
events.push(Ox.extend({
annotationId: item.id
}, item.event));
annotationIds: [item.id]
}, item.event))
} else {
events[index].annotationIds.push(item.id);
}
});
if (!events.length) {
events = [{id: 'FOO', name: '20th Century', type: 'date', start: '1900', end: '2000'}]
}
return events;
}
function getPlaces() {
var places = [];
getAnnotations().forEach(function(item) {
if (item.place && Ox.getIndexById(places, item.place.id) == -1) {
getAnnotations().filter(function(item) {
return !!item.place;
}).forEach(function(item) {
var index = Ox.getIndexById(places, item.place.id);
if (index == -1) {
places.push(Ox.extend({
annotationId: item.id
}, item.place));
annotationIds: [item.id]
}, item.place))
} else {
places[index].annotationIds.push(item.id);
}
});
return places;
@ -335,17 +344,22 @@ Ox.AnnotationFolder = function(options, self) {
}
function selectAnnotation(data) {
Ox.print('SELECT annotation', 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({
selected: item && item.place ? item.place.id : null
})
.panToPlace();
if (self.widget) {
if (self.options.type == 'event') {
self.$calendar.options({
selected: item && item.event ? item.event.id : ''
})
.panToEvent();
} else {
self.$map.options({
selected: item && item.place ? item.place.id : ''
})
.panToPlace();
}
}
//*/
that.triggerEvent('select', Ox.extend(data, item ? {
'in': item['in'],
out: item.out,
@ -401,7 +415,7 @@ Ox.AnnotationFolder = function(options, self) {
function updateWidget() {
self.options.type == 'event'
? self.$calendar.options({events: getEvents()})
: self.$map.options({places: getPlaces()});
: self.$map.options({places: getPlaces()});
}
self.setOption = function(key, value) {
@ -437,6 +451,10 @@ Ox.AnnotationFolder = function(options, self) {
if (value === '') {
self.editing = false;
}
if (value && self.options.collapsed) {
Ox.print('HELLO??')
self.$panel.options({collapsed: false});
}
self.$annotations.options({selected: value});
} else if (key == 'sort') {
self.sort = getSort();
@ -499,7 +517,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();
if (self.widget) {
updateWidget();
if (item[self.options.type]) {
// if updating has made the item match
// an event / a place, then select it
self.$widget.options({selected: item[self.options.type].id});
}
}
updateAnnotations();
return that;
}

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

@ -242,20 +242,40 @@ Ox.AnnotationPanel = function(options, self) {
return folder;
}
function scrollToSelected(type) {
var $item = that.find('.OxEditableElement.OxSelected'),
itemHeight = $item.height() + (type == 'text' ? 8 : 0),
itemTop = $item.offset().top,
itemBottom = itemTop + itemHeight,
height = self.$folders.height(),
scrollTop = self.$folders.scrollTop(),
top = self.$folders.offset().top;
if (itemTop < top || itemBottom > top + height) {
if (itemTop < top) {
scrollTop += itemTop - top;
} else {
scrollTop += itemBottom - top - height;
}
self.$folders.animate({
scrollTop: scrollTop + 'px'
}, 0);
}
}
function selectAnnotation(data, index) {
var height, scrollBottom, scrollTop, top;
self.options.selected = data.id;
if (data.id) {
self.$folder.forEach(function($folder, i) {
i != index && $folder.options({selected: ''});
});
scrollToSelected(self.options.layers[index].type);
}
/*
if (data.top) {
data.bottom = data.top + data.height;
height = self.$folders.height();
top = self.$folders.offset().top;
Ox.print('top', top);
scrollTop = self.$folders.scrollTop();
Ox.print('data/self t/b/h', data.top, data.bottom, data.height, scrollTop, height)
if (data.top < top || data.bottom > height) {
if (data.top < top) {
Ox.print('top scrollTop', data.top, scrollTop)
@ -266,21 +286,9 @@ Ox.AnnotationPanel = function(options, self) {
self.$folders.animate({
scrollTop: scrollTop + 'px'
}, 0);
}
/*
data.top -= 60; // 20 + 24 + 16
Ox.print('HEIGHT', height, 'SCROLLTOP', scrollTop, 'TOP', data.top);
if (data.top < 0 || data.top > height - 16) {
if (data.top < 0) {
scrollTop += data.top - 3;
} else if (data.top > height - 16) {
scrollTop += data.top - height + 14;
}
}
*/
}
*/
that.triggerEvent('select', data);
}
@ -302,7 +310,7 @@ Ox.AnnotationPanel = function(options, self) {
} else {
self.$folder.forEach(function($folder) {
$folder.options({selected: ''});
})
});
}
} else if (key == 'width') {
self.$folder.forEach(function($folder) {

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

@ -604,11 +604,11 @@ Ox.VideoEditor = function(options, self) {
position: self.options.position,
range: self.options.annotationsRange,
selected: self.options.selected,
sort: self.options.annotationsSort,
showCalendar: self.options.showAnnotationsCalendar,
showLayers: self.options.showLayers,
showMap: self.options.showAnnotationsMap,
showUsers: self.options.showUsers,
sort: self.options.annotationsSort,
width: self.options.annotationsSize
})
.bindEvent({

62
source/Ox.UI/js/Video/Ox.VideoPanel.js
View file

@ -164,28 +164,64 @@ Ox.VideoPanel = function(options, self) {
}
],
orientation: 'vertical'
})
.bindEvent({
resize: resizePanel
});
self.$annotationPanel = Ox.AnnotationPanel({
calendarSize: self.options.annotationsCalendarSize,
editable: false,
font: self.options.annotationsFont,
'in': self.options['in'],
layers: self.options.layers,
mapSize: self.options.annotationsMapSize,
out: self.options.out,
position: self.options.position,
range: self.options.annotationsRange,
selected: self.options.selected,
showCalendar: self.options.showAnnotationsCalendar,
showFonts: true,
showLayers: self.options.showLayers,
showMap: self.options.showAnnotationsMap,
showUsers: self.options.showUsers,
sort: self.options.annotationsSort
sort: self.options.annotationsSort,
width: self.options.annotationsSize
})
.bindEvent({
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);
},
resize: resizeAnnotations,
resizeend: resizeendAnnotations,
resizecalendar: function(data) {
that.triggerEvent('resizecalendar', data);
},
resizemap: function(data) {
that.triggerEvent('resizemap', data);
},
select: selectAnnotation,
toggle: toggleAnnotations
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);
}
});
that.$element = Ox.SplitPanel({
@ -239,13 +275,11 @@ Ox.VideoPanel = function(options, self) {
self.$timeline.options({
width: getTimelineWidth()
});
self.$annotationPanel.options({width: data.size});
}
function resizeendAnnotations(data) {
self.options.annotationsSize = data.size;
that.triggerEvent('resizeannotations', {
annotationsSize: self.options.annotationsSize
});
that.triggerEvent('annotationssize', data.size);
}
function resizeElement(data) {
@ -256,8 +290,10 @@ Ox.VideoPanel = function(options, self) {
});
}
/*
function resizePanel(data) {
// called on annotations toggle
// called on annotations toggle <-- FIXME: NOT TRUE
Ox.print('RESIZEPANEL----------')
self.$video.options({
width: getPlayerWidth()
});
@ -265,6 +301,7 @@ Ox.VideoPanel = function(options, self) {
width: getTimelineWidth()
});
}
*/
function selectAnnotation(data) {
self.options.selected = data.id;
@ -292,7 +329,10 @@ Ox.VideoPanel = function(options, self) {
function toggleAnnotations(data) {
self.options.showAnnotations = !data.collapsed;
self.$video.options({
height: getPlayerHeight()
width: getPlayerWidth()
});
self.$timeline.options({
width: getTimelineWidth()
});
that.triggerEvent('toggleannotations', {
showAnnotations: self.options.showAnnotations

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

@ -140,6 +140,27 @@ Calendar
inset 0 0 1px rgb(0, 0, 0),
inset 0 0 1px rgb(0, 0, 0);
}
.OxThemeClassic .OxCalendar .OxLine > .OxEvent.OxDate {
background: -moz-linear-gradient(top, rgba(128, 128, 255, 0.9), rgba(96, 96, 224, 0.9));
background: -o-linear-gradient(top, rgba(128, 128, 255, 0.9), rgba(96, 96, 224, 0.9));
background: -webkit-linear-gradient(top, rgba(128, 128, 255, 0.9), rgba(96, 96, 224, 0.9));
}
.OxThemeClassic .OxCalendar .OxLine > .OxEvent.OxPlace {
background: -moz-linear-gradient(top, rgba(0, 192, 96, 0.9), rgba(0, 160, 64, 0.9));
background: -o-linear-gradient(top, rgba(0, 192, 96, 0.9), rgba(0, 160, 64, 0.9));
background: -webkit-linear-gradient(top, rgba(0, 192, 96, 0.9), rgba(0, 160, 64, 0.9));
}
.OxThemeClassic .OxCalendar .OxLine > .OxEvent.OxPerson {
background: -moz-linear-gradient(top, rgba(255, 128, 0, 0.9), rgba(224, 96, 0, 0.9));
background: -o-linear-gradient(top, rgba(255, 128, 0, 0.9), rgba(224, 96, 0, 0.9));
background: -webkit-linear-gradient(top, rgba(255, 128, 0, 0.9), rgba(224, 96, 0, 0.9));
}
.OxThemeClassic .OxCalendar .OxLine > .OxEvent.OxOther {
background: -moz-linear-gradient(top, rgba(255, 128, 128, 0.9), rgba(224, 96, 96, 0.9));
background: -o-linear-gradient(top, rgba(255, 128, 128, 0.9), rgba(224, 96, 96, 0.9));
background: -webkit-linear-gradient(top, rgba(255, 64, 64, 0.9), rgba(224, 32, 32, 0.9));
}
.OxThemeClassic .OxCalendar .OxOverlay div:nth-child(even) {
background-color: rgba(0, 0, 0, 0.25);

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

@ -139,6 +139,27 @@ Calendar
inset 0 0 1px rgb(255, 255, 255),
inset 0 0 1px rgb(255, 255, 255);
}
.OxThemeModern .OxCalendar .OxLine > .OxEvent.OxDate {
background: -moz-linear-gradient(top, rgba(96, 96, 192, 0.9), rgba(64, 64, 160, 0.9));
background: -o-linear-gradient(top, rgba(96, 96, 192, 0.9), rgba(64, 64, 160, 0.9));
background: -webkit-linear-gradient(top, rgba(96, 96, 255, 0.9), rgba(64, 64, 224, 0.9));
}
.OxThemeModern .OxCalendar .OxLine > .OxEvent.OxPlace {
background: -moz-linear-gradient(top, rgba(0, 128, 96, 0.9), rgba(0, 96, 64, 0.9));
background: -o-linear-gradient(top, rgba(0, 128, 96, 0.9), rgba(0, 96, 64, 0.9));
background: -webkit-linear-gradient(top, rgba(0, 128, 96, 0.9), rgba(0, 96, 64, 0.9));
}
.OxThemeModern .OxCalendar .OxLine > .OxEvent.OxPerson {
background: -moz-linear-gradient(top, rgba(255, 96, 0, 0.9), rgba(224, 64, 0, 0.9));
background: -o-linear-gradient(top, rgba(255, 96, 0, 0.9), rgba(224, 64, 0, 0.9));
background: -webkit-linear-gradient(top, rgba(255, 96, 0, 0.9), rgba(224, 64, 0, 0.9));
}
.OxThemeModern .OxCalendar .OxLine > .OxEvent.OxOther {
background: -moz-linear-gradient(top, rgba(192, 32, 32, 0.9), rgba(160, 0, 0, 0.9));
background: -o-linear-gradient(top, rgba(192, 32, 32, 0.9), rgba(160, 0, 0, 0.9));
background: -webkit-linear-gradient(top, rgba(192, 32, 32, 0.9), rgba(160, 0, 0, 0.9));
}
.OxThemeModern .OxCalendar .OxOverlay div:nth-child(even) {
background-color: rgba(255, 255, 255, 0.25);