add annotation separator option to video panel

source/UI/js/Video/AnnotationFolder.js

@@ -48,6 +48,7 @@ Ox.AnnotationFolder = function(options, self) {
             position: 0,
             range: 'all',
             selected: '',
+            separator: ';',
             showInfo: false,
             showWidget: false,
             sort: 'position',
@@ -269,7 +270,7 @@ Ox.AnnotationFolder = function(options, self) {
                 drag: drag,
                 dragend: dragend
             })
-            .appendTo(self.$outer);         
+            .appendTo(self.$outer);
     }
     self.$annotations = Ox.ArrayEditable(Ox.extend({
             clickLink: self.options.clickLink,
@@ -282,7 +283,7 @@ Ox.AnnotationFolder = function(options, self) {
             globalAttributes: ['data', 'lang'],
             highlight: self.options.translate ? Ox._(self.options.highlight) : self.options.highlight,
             placeholder: Ox._('Loading...'),
-            separator: ';',
+            separator: self.options.separator,
             sort: self.sort,
             submitOnBlur: false,
             tooltipText: self.options.showInfo ? function(item) {
@@ -315,7 +316,7 @@ Ox.AnnotationFolder = function(options, self) {
                 if (self.editing) {
                     // FIXME: changed value will not be saved!
                 }
-                that.triggerEvent('add', {value: data.value || ''});                    
+                that.triggerEvent('add', {value: data.value || ''});
             },
             blur: function() {
                 // the video editor will, if it has not received focus,
@@ -684,7 +685,7 @@ Ox.AnnotationFolder = function(options, self) {
 
     /*@
     gainFocus <f> gain focus
-        () -> <o> gain focus 
+        () -> <o> gain focus
     @*/
     that.gainFocus = function() {
         self.$annotations.gainFocus();
@@ -696,7 +697,7 @@ Ox.AnnotationFolder = function(options, self) {
     };
 
     /*@
-    removeItem <f> remove item 
+    removeItem <f> remove item
         () -> <o>  remove selected item
     @*/
     that.removeItem = function() {
@@ -722,7 +723,7 @@ Ox.AnnotationFolder = function(options, self) {
     };
 
     /*@
-    updateItem <f> update item 
+    updateItem <f> update item
         (id, data) -> <o>  update item
     @*/
     that.updateItem = function(id, data) {

source/UI/js/Video/AnnotationPanel.js

@@ -57,6 +57,7 @@ Ox.AnnotationPanel = function(options, self) {
             mapSize: 256,
             range: 'all',
             selected: '',
+            separator: ';',
             showCalendar: false,
             showLayers: {},
             showMap: false,
@@ -162,7 +163,7 @@ Ox.AnnotationPanel = function(options, self) {
             });
             if (found) {
                 return false; // break
-            } 
+            }
         });
         return annotation;
     }
@@ -371,6 +372,7 @@ Ox.AnnotationPanel = function(options, self) {
                     position: self.options.position,
                     range: self.options.range,
                     selected: selected,
+                    separator: self.options.separator,
                     sort: self.options.sort,
                     width: self.options.width - Ox.UI.SCROLLBAR_SIZE
                 }, layer, layer.type == 'event' ? {
@@ -707,7 +709,7 @@ Ox.AnnotationPanel = function(options, self) {
     };
 
     /*@
-    blurItem <f> Blur selected item 
+    blurItem <f> Blur selected item
         () -> <o> AnnotationPanel
     @*/
     that.blurItem = function() {
@@ -739,7 +741,7 @@ Ox.AnnotationPanel = function(options, self) {
     };
 
     /*@
-    removeItem <f> Remove selected item 
+    removeItem <f> Remove selected item
         () -> <o> AnnotationPanel
     @*/
     that.removeItem = function(remove) {
@@ -796,7 +798,7 @@ Ox.AnnotationPanel = function(options, self) {
             index = Ox.getIndexById(self.options.layers, id);
         if (self.$folder[index] == $folder) {
             $folder.blurItem();
-        }            
+        }
         self.options.layers[index].items = items;
         self.$folder[index].replaceWith(
             self.$folder[index] = renderFolder(self.options.layers[index])
@@ -805,5 +807,5 @@ Ox.AnnotationPanel = function(options, self) {
     };
 
     return that;
-  
+
 };

source/UI/js/Video/VideoAnnotationPanel.js

@@ -50,6 +50,7 @@ Ox.VideoAnnotationPanel = function(options, self) {
                 annotationsCalendarSize: 256,
                 annotationsMapSize: 256,
                 annotationsRange: 'all',
+                annotationsSeparator: ';',
                 annotationsSize: 256,
                 annotationsSort: 'position',
                 annotationsTooltip: Ox._('annotations'),
@@ -843,6 +844,7 @@ Ox.VideoAnnotationPanel = function(options, self) {
             position: self.options.position,
             range: self.options.annotationsRange,
             selected: self.options.selected,
+            separator: self.options.annotationsSeparator,
             showCalendar: self.options.showAnnotationsCalendar,
             showLayers: Ox.clone(self.options.showLayers),
             showMap: self.options.showAnnotationsMap,
@@ -957,7 +959,7 @@ Ox.VideoAnnotationPanel = function(options, self) {
         self.$annotationPanel.bindEvent(key, function() {
             that.triggerEvent(key);
         });
-    });    
+    });
 
     that.setElement(
         self.$mainPanel = Ox.SplitPanel({
@@ -1177,7 +1179,7 @@ Ox.VideoAnnotationPanel = function(options, self) {
             return size.player[0].height + self.controlsHeight
                 + size.timeline[0].height + lines * 16
                 + (lines + 3) * self.margin;
-        }        
+        }
         if (self.options.videoSize == 'small') {
             width = 0;
             widths = Ox.splitInt(contentWidth - 4 * self.margin, 3);
@@ -1371,7 +1373,7 @@ Ox.VideoAnnotationPanel = function(options, self) {
                     out: cut - 1 / self.options.fps
                 };
                 return false; // break
-            } 
+            }
         });
         setPoint('in', points['in']);
         setPoint('out', points.out);