make annotation map/calendar size/state sticky

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'});
+            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();
         } else if (key == 'zoom') {
             

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);

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 ? [
+                self.widget ? [self.$defineButton] : [],
-                    Ox.MenuButton({
+                [self.$addButton]
-                        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: ''});
-                        }
-                    })
-                ] : []
             ),
             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;
-    }
+        Ox.print('FOO', self.widgetSize, self.options.showWidget, self.options.widgetSize)
-
-    if (self.options.type == 'event') {
         self.$outer = Ox.Element()
             .css({
                 display: 'table-cell',
-                width: self.options.width + 'px',
+                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',
             })
             .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({
+        if (options.type == 'event') {
-                places: getPlaces()
+            self.$widget = self.$calendar = Ox.Calendar({
-                // showLabels: true
+                    events: getEvents(),
-            })
+                    height: self.widgetSize,
-            .css({height: self.widgetSize + 'px'})
+                    showZoombar: true,
-            .bindEvent({
+                    width: self.options.width
-                // FIXME: should be select, not selectplace
+                })
-                selectplace: function(data) {
+                .css({
-                    self.$annotations.options({selected: data.annotationId});
+                    width: self.options.width + 'px',
-                    // selectAnnotation({id: data.annotationId});
+                    height: self.widgetSize + 'px'
-                }
+                })
-            })
+                .bindEvent({
-            .appendTo(self.$inner);
+                    select: function(data) {
-    }
+                        selectAnnotation({id: data.annotationId});
-
+                    }
-    if (self.widget) {
+                })
-
+                .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($('<div>').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') {
+    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() {
-        self.drag = {
+        if (self.options.showWidget) {
-            startSize: self.options.widgetSize
+            self.drag = {
-        };
+                startSize: self.options.widgetSize
+            };
+        }
     }
 
     function drag(e) {
-        self.options.widgetSize = Ox.limit(
+        if (self.options.showWidget) {
-            self.drag.startSize + e.clientDY, 128, 384
+            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'});
+            if (self.options.widgetSize >= 248 && self.options.widgetSize <= 264) {
-        self.$inner.css({height: self.options.widgetSize + 'px'});
+                self.options.widgetSize = 256;
-        self.$map.css({height: self.options.widgetSize + 'px'}).resizeMap();        
+            }
+            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.$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) {
@@ -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
             });

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);

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);
             }
         });