update video editor (maps, calendars)

source/Ox.UI/js/Calendar/Ox.Calendar.js

@@ -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') {

source/Ox.UI/js/Form/Ox.ArrayEditable.js

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

source/Ox.UI/js/Panel/Ox.CollapsePanel.js

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

source/Ox.UI/js/Video/Ox.AnnotationFolder.js

@@ -82,8 +82,7 @@ Ox.AnnotationFolder = function(options, self) {
         }
     });    
 
-    that.setElement(
+    self.$panel = Ox.CollapsePanel({
-        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)
+                        if (!data.id || data.annotationIds.indexOf(self.options.selected) == -1) {
-                        self.$annotations.options({selected: data.annotationId});
+                            self.$annotations.options({
-                        // selectAnnotation({id: data.annotationId});
+                                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) {
+        getAnnotations().filter(function(item) {
-            if (item.event && Ox.getIndexById(events, item.event.id) == -1) {
+            return !!item.event;
+        }).forEach(function(item) {
+            var index = Ox.getIndexById(events, item.event.id);
+            if (index == -1) {
                 events.push(Ox.extend({
-                    annotationId: item.id
+                    annotationIds: [item.id]
-                }, item.event));
+                }, 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) {
+        getAnnotations().filter(function(item) {
-            if (item.place && Ox.getIndexById(places, item.place.id) == -1) {
+            return !!item.place;
+        }).forEach(function(item) {
+            var index = Ox.getIndexById(places, item.place.id);
+            if (index == -1) {
                 places.push(Ox.extend({
-                    annotationId: item.id
+                    annotationIds: [item.id]
-                }, item.place));
+                }, 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.widget) {
-        ///*
+            if (self.options.type == 'event') {
-        if (self.options.type == 'place') {
+                self.$calendar.options({
+                        selected: item && item.event ? item.event.id : ''
+                    })
+                    .panToEvent();
+            } else {
                 self.$map.options({
-                    selected: item && item.place ? item.place.id : null
+                        selected: item && item.place ? item.place.id : ''
                     })
                     .panToPlace();
             }
-        //*/
+        }
         that.triggerEvent('select', Ox.extend(data, item ? {
             'in': item['in'],
             out: item.out,
@@ -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;
     }

source/Ox.UI/js/Video/Ox.AnnotationPanel.js

@@ -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) {

source/Ox.UI/js/Video/Ox.VideoEditor.js

@@ -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({

source/Ox.UI/js/Video/Ox.VideoPanel.js

@@ -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('annotationssize', data.size);
-        that.triggerEvent('resizeannotations', {
-            annotationsSize: self.options.annotationsSize
-        });
     }
 
     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

source/Ox.UI/themes/classic/css/classic.css

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

source/Ox.UI/themes/modern/css/modern.css

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