update video editor

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

@@ -60,11 +60,13 @@ Ox.ArrayEditable = function(options, self) {
         if (!$target.is('.OxInput')) {
             Ox.print('BLURRED EDITING', self.blurred, self.editing)
             if ($parent.is('.OxEditableElement')) {
-                // select another item
+                if (!$parent.is('.OxSelected')) {
-                selectItem(
+                    // select another item
-                    e.metaKey && position == self.selected
+                    selectItem(
-                    ? '' : $parent.data('position')
+                        e.metaKey && position == self.selected
-                );
+                        ? '' : $parent.data('position')
+                    );
+                }
             } else if (!self.blurred) {
                 // if there wasn't an active input element
                 if (self.editing) {
@@ -197,27 +199,21 @@ Ox.ArrayEditable = function(options, self) {
     }
 
     function selectItem(idOrPosition) {
-        var isId = Ox.isString(idOrPosition);
+        if (Ox.isString(idOrPosition)) {
-        if (
+            self.options.selected = idOrPosition;
-            (isId && idOrPosition != self.options.selected)
+            self.selected = getSelectedPosition();
-            || (!isId && idOrPosition != self.selected)
+        } else {
-        ) {
+            self.selected = idOrPosition;
-            if (isId) {
+            self.options.selected = getSelectedId();
-                self.options.selected = idOrPosition;
-                self.selected = getSelectedPosition();
-            } else {
-                self.selected = idOrPosition;
-                self.options.selected = getSelectedId();
-            }
-            if (/*self.options.selected == '' && */self.editing) {
-                self.editing = false;
-                that.blurItem();
-            }
-            Ox.print('SELECT ITEM', self.options.selected, self.selected);
-            that.find('.OxSelected').removeClass('OxSelected');
-            self.selected > -1 && self.$items[self.selected].addClass('OxSelected');
-            triggerSelectEvent();
         }
+        if (/*self.options.selected == '' && */self.editing) {
+            self.editing = false;
+            that.blurItem();
+        }
+        Ox.print('SELECT ITEM', self.options.selected, self.selected);
+        that.find('.OxSelected').removeClass('OxSelected');
+        self.selected > -1 && self.$items[self.selected].addClass('OxSelected');
+        triggerSelectEvent();
     }
 
     function selectLast() {
@@ -263,6 +259,8 @@ Ox.ArrayEditable = function(options, self) {
             that.triggerEvent('select', Ox.extend({
                 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;

source/Ox.UI/js/Map/Ox.Map.js

@@ -850,7 +850,6 @@ Ox.Map = function(options, self) {
                     if (isEmpty(mapBounds)) {
                         self.map.setZoom(self.minZoom);
                     } else {
-                        Ox.print("FITTING BOUNDS")
                         self.map.fitBounds(mapBounds);
                     }
                 }
@@ -901,7 +900,7 @@ Ox.Map = function(options, self) {
 
     function mapChanged() {
         // gets called after panning or zooming
-        Ox.Log('Map', 'mapChanged');
+        Ox.print('Map', 'mapChanged');
         if (self.boundsChanged) {
             var bounds = self.map.getBounds(),
                 southWest = bounds.getSouthWest(),
@@ -1388,7 +1387,15 @@ Ox.Map = function(options, self) {
             Ox.print('MAP SET OPTIONS PLACES', value);
             addPlaces();
             getMapBounds(function(mapBounds) {
-                self.map.fitBounds(mapBounds);
+                if (mapBounds) {
+                    self.map.fitBounds(mapBounds);
+                } else {
+                    self.map.setZoom(self.minZoom);
+                    self.map.setCenter(new google.maps.LatLng(0, 0));
+                }
+                // fixme: the following is just a guess
+                self.boundsChanged = true;
+                mapChanged();
             });
             if (self.options.selected) {
                 if (getSelectedPlace()) {

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

@@ -42,6 +42,8 @@ Ox.AnnotationFolder = function(options, self) {
         })
         .options(options || {});
 
+    self.points = getPoints();
+    self.position = self.options.position;
     self.sort = getSort();
     self.widget = self.options.type == 'event' ? 'Calendar'
         : self.options.type == 'place' ? 'Map' : '';
@@ -143,6 +145,7 @@ 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});
                     }
@@ -228,6 +231,15 @@ Ox.AnnotationFolder = function(options, self) {
         that.triggerEvent('change', item);
     }
 
+    function crossesPoint() {
+        var sort = [self.position, self.options.position].sort(),
+            positionA = sort[0],
+            positionB = sort[1];
+        return self.points.some(function(point) {
+            return point > positionA && point < positionB;
+        });
+    }
+
     function dragstart() {
         if (self.options.showWidget) {
             self.drag = {
@@ -279,6 +291,14 @@ Ox.AnnotationFolder = function(options, self) {
         });
     }
 
+    function getPoints() {
+        return Ox.unique(Ox.flatten(
+            self.options.items.map(function(item) {
+                return [item['in'], item.out];
+            })
+        ));
+    }
+
     function getEvents() {
         var events = [];
         getAnnotations().forEach(function(item) {
@@ -388,7 +408,8 @@ Ox.AnnotationFolder = function(options, self) {
         if (['in', 'out'].indexOf(key) > -1 && self.editing) {
             var index = Ox.getIndexById(self.options.items, self.options.selected);
             self.options.items[index][key] = value;
-            self.options.items[index].duration = self.options.out - self.options['in']; 
+            self.options.items[index].duration = self.options.out - self.options['in'];
+            self.points = getPoints();
         }
         if (key == 'in') {
             //fixme: array editable should support item updates while editing
@@ -403,9 +424,11 @@ Ox.AnnotationFolder = function(options, self) {
             }
         } else if (key == 'position') {
             if (self.options.range == 'position') {
-                Ox.print('POSITION CHANGED, UPDATING')
+                if (crossesPoint()) {
-                self.widget && updateWidget();
+                    self.widget && updateWidget();
-                updateAnnotations();
+                    updateAnnotations();
+                }
+                self.position = self.options.position;
             }
         } else if (key == 'range') {
             self.widget && updateWidget();

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

@@ -243,15 +243,33 @@ Ox.AnnotationPanel = function(options, self) {
     }
 
     function selectAnnotation(data, index) {
-        var height, scrollTop;
+        var height, scrollBottom, scrollTop, top;
         if (data.id) {
             self.$folder.forEach(function($folder, i) {
                 i != index && $folder.options({selected: ''});
             });
         }
         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)
+                    scrollTop += data.top - top;
+                } else {
+                    scrollTop += data.bottom - top - height;
+                }
+                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) {
@@ -260,10 +278,8 @@ Ox.AnnotationPanel = function(options, self) {
                 } else if (data.top > height - 16) {
                     scrollTop += data.top - height + 14;
                 }
-                self.$folders.animate({
-                    scrollTop: scrollTop + 'px'
-                }, 0);
             }
+            */
         }
         that.triggerEvent('select', data);
     }

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

@@ -760,20 +760,36 @@ Video
     //display: none;
 }
 
-.OxThemeModern .OxAnnotationFolder .OxEditableElement.OxSelected {
+/* FIXME: the first two should apply for every ArrayEditable */
+.OxThemeModern .OxAnnotationFolder .OxArrayEditable .OxSeparator {
+    color: rgb(160, 160, 160);
+}
+.OxThemeModern .OxAnnotationFolder .OxEditableElement.OxPlaceholder .OxValue {
+    color: rgb(96, 96, 96);
+}
+.OxThemeModern .OxAnnotationFolder .OxArrayEditable .OxEditableElement.OxSelected {
     background: rgb(64, 64, 192);
+}
+.OxThemeModern .OxAnnotationFolder .OxArrayEditableInput .OxEditableElement.OxSelected {
     box-shadow: 0 0 1px rgb(255, 255, 255);
 }
+.OxThemeModern .OxAnnotationFolder .OxArrayEditableTextarea .OxEditableElement.OxEditing {
+    background: rgb(64, 128, 64);
+}
+.OxThemeModern .OxAnnotationFolder .OxArrayEditable .OxInput.OxFocus {
+    box-shadow: none;
+}
 .OxThemeModern .OxAnnotationFolder .OxEditableElement input {
     background: rgb(64, 128, 64);
     color: rgb(255, 255, 255);
-    box-shadow: 0 0 1px rgb(255, 255, 255);
+    //box-shadow: 0 0 1px rgb(64, 64, 64);
 }
 .OxThemeModern .OxAnnotationFolder .OxEditableElement textarea {
     background: rgb(64, 128, 64);
     color: rgb(255, 255, 255);
 }
 
+
 /*
 ================================================================================
 Miscellaneous