From 56cf3231103aff2aefec114b7873bd1a8626d8c2 Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Sat, 14 Jan 2012 17:09:55 +0530 Subject: [PATCH] make annotation map/calendar size/state sticky --- source/Ox.UI/js/Calendar/Ox.Calendar.js | 7 +- source/Ox.UI/js/Map/Ox.Map.js | 13 +- source/Ox.UI/js/Video/Ox.AnnotationFolder.js | 227 ++++++++++--------- source/Ox.UI/js/Video/Ox.AnnotationPanel.js | 14 +- source/Ox.UI/js/Video/Ox.VideoEditor.js | 12 + 5 files changed, 162 insertions(+), 111 deletions(-) diff --git a/source/Ox.UI/js/Calendar/Ox.Calendar.js b/source/Ox.UI/js/Calendar/Ox.Calendar.js index ad819409..5252449c 100644 --- a/source/Ox.UI/js/Calendar/Ox.Calendar.js +++ b/source/Ox.UI/js/Calendar/Ox.Calendar.js @@ -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') { diff --git a/source/Ox.UI/js/Map/Ox.Map.js b/source/Ox.UI/js/Map/Ox.Map.js index 36327a3d..e104842d 100644 --- a/source/Ox.UI/js/Map/Ox.Map.js +++ b/source/Ox.UI/js/Map/Ox.Map.js @@ -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) { @@ -1360,6 +1362,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); diff --git a/source/Ox.UI/js/Video/Ox.AnnotationFolder.js b/source/Ox.UI/js/Video/Ox.AnnotationFolder.js index df360803..bfd51047 100644 --- a/source/Ox.UI/js/Video/Ox.AnnotationFolder.js +++ b/source/Ox.UI/js/Video/Ox.AnnotationFolder.js @@ -42,116 +42,115 @@ 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() { + + } + }); + } + + 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(), + // 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($('
').addClass('OxSpace')) @@ -164,7 +163,6 @@ Ox.AnnotationFolder = function(options, self) { dragend: dragend }) .appendTo(self.$outer); - } self.$annotations = Ox.ArrayEditable({ @@ -208,33 +206,37 @@ 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 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 +298,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.$defineButton.options({disabled: !self.options.selected}); ///* if (self.options.type == 'place') { 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) { var item = Ox.getObjectById(self.options.items, data.id); item.value = data.value; @@ -321,9 +337,9 @@ Ox.AnnotationFolder = function(options, self) { 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 +347,10 @@ 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}); } self.setOption = function(key, value) { @@ -368,9 +385,17 @@ 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()}); + showWarnings(); } 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 }); diff --git a/source/Ox.UI/js/Video/Ox.AnnotationPanel.js b/source/Ox.UI/js/Video/Ox.AnnotationPanel.js index 7af65d2e..eabe14f1 100644 --- a/source/Ox.UI/js/Video/Ox.AnnotationPanel.js +++ b/source/Ox.UI/js/Video/Ox.AnnotationPanel.js @@ -180,17 +180,27 @@ Ox.AnnotationPanel = function(options, self) { 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); }, - 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); diff --git a/source/Ox.UI/js/Video/Ox.VideoEditor.js b/source/Ox.UI/js/Video/Ox.VideoEditor.js index 7e6247e6..440edd82 100644 --- a/source/Ox.UI/js/Video/Ox.VideoEditor.js +++ b/source/Ox.UI/js/Video/Ox.VideoEditor.js @@ -640,14 +640,26 @@ Ox.VideoEditor = function(options, self) { }, 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) { + that.triggerEvent('togglecalendar', data); + }, togglelayer: function(data) { that.triggerEvent('togglelayer', { collapsed: data.collapsed, layer: data.layer }); + }, + togglemap: function(data) { + that.triggerEvent('togglemap', data); } });