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

make annotation map/calendar size/state sticky

Browse source
This commit is contained in:
rlx 2012-01-14 17:09:55 +05:30
parent 36c1cda12a
commit 56cf323110
5 changed files with 162 additions and 111 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') {

13
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) {
@ -1360,6 +1362,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);

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

@ -42,69 +42,76 @@ 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() {
} }
}) });
] : [], }
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 +123,18 @@ 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({ // FIXME: should be showZoombar
display: 'table-cell', zoombar: true
width: self.widgetSize + 'px',
})
.appendTo(that.$content);
self.$inner = Ox.Element()
.css({height: self.widgetSize + 'px', overflow: 'hidden'})
.appendTo(self.$outer);
self.$map = Ox.Map({
places: getPlaces()
// 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 +144,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,7 +163,6 @@ Ox.AnnotationFolder = function(options, self) {
dragend: dragend dragend: dragend
}) })
.appendTo(self.$outer); .appendTo(self.$outer);
} }
self.$annotations = Ox.ArrayEditable({ self.$annotations = Ox.ArrayEditable({
@ -208,33 +206,37 @@ 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);
if (!Ox.getObject(self.options.items, 'value', $element.html()).place) {
$element.css({color: 'rgb(192, 64, 64)'});
}
});
}
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 +298,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.$defineButton.options({disabled: !self.options.selected});
///* ///*
if (self.options.type == 'place') { if (self.options.type == 'place') {
self.$map.options({ self.$map.options({
@ -311,6 +314,19 @@ Ox.AnnotationFolder = function(options, self) {
} : {})); } : {}));
} }
function showWarnings() {
if (self.widget) {
self.$annotations.find('.OxValue').each(function() {
var $element = $(this);
if (!Ox.getObject(
self.options.items, 'value', $element.html()
)[self.options.type]) {
$element.css({color: 'rgb(192, 64, 64)'});
}
});
}
}
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;
@ -321,9 +337,9 @@ Ox.AnnotationFolder = function(options, self) {
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 +347,10 @@ 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});
} }
self.setOption = function(key, value) { self.setOption = function(key, value) {
@ -368,9 +385,17 @@ 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()}); self.$annotations.options({items: getAnnotations()});
showWarnings();
} 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
}); });

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

@ -180,17 +180,27 @@ Ox.AnnotationPanel = function(options, self) {
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', 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);

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

@ -640,14 +640,26 @@ Ox.VideoEditor = function(options, self) {
}, },
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) {
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) {
that.triggerEvent('togglemap', data);
} }
}); });