add support for data annotations

source/UI/js/Form/ArrayEditable.js

@@ -75,7 +75,7 @@ Ox.ArrayEditable = function(options, self) {
             width: function() {
                 var width = self.options.width;
                 that.css({width: width - 8 + 'px'}); // 2 x 4 px padding
-                self.options.type == 'textarea' && self.$items.forEach(function($item) {
+                self.options.type != 'input' && self.$items.forEach(function($item) {
                     $item.options({width: width})
                 });
             }

source/UI/js/Form/Editable.js

@@ -19,7 +19,7 @@ Ox.Editable = function(options, self) {
 
     self = self || {};
     var that = Ox.Element({
-            element: options.type == 'textarea' ? '<div>' : '<span>',
+            element: options.type == 'input' ? '<span>' : '<div>',
             tooltip: options.tooltip
         }, self)
         .defaults({
@@ -94,7 +94,9 @@ Ox.Editable = function(options, self) {
             }
         });
 
+    if (self.options.type != 'data') {
         self.options.value = self.options.value.toString();
+    }
 
     self.css = {};
     self.$value = Ox.Element(self.options.type == 'input' ? '<span>' : '<div>')
@@ -159,7 +161,7 @@ Ox.Editable = function(options, self) {
                         changeOnKeypress: true,
                         element: self.options.type == 'input' ? '<span>' : '<div>',
                         style: 'square',
-                        type: self.options.type,
+                        type: getInputType(),
                         value: formatInputValue()
                     })
                     .css(self.css)
@@ -203,14 +205,15 @@ Ox.Editable = function(options, self) {
     }
 
     function formatInputValue() {
-        return self.options.type == 'input'
+        return self.options.unformat
-            ? (self.options.unformat || Ox.decodeHTMLEntities)(self.options.value)
+            ? self.options.unformat(self.options.value)
+            : self.options.type == 'input' ? Ox.decodeHTMLEntities(self.options.value)
             : self.options.value.replace(/<br\/?><br\/?>/g, '\n\n');
     }
 
     function formatTestValue() {
         var value = Ox.encodeHTMLEntities(
-            (self.options.unformat || Ox.identity)(self.$input.options('value'))
+            (self.options.type != 'data' && self.options.unformat || Ox.identity)(self.$input.options('value'))
         );
         return !value ? '&nbsp;'
             : self.options.type == 'input'
@@ -247,7 +250,9 @@ Ox.Editable = function(options, self) {
             self.$input.value().replace(/\n\n+/g, '\0')
         ).replace(/\0/g, '\n\n').trim();
         return (
-            self.options.type == 'input'
+            self.options.type == 'data'
+            ? JSON.parse(value)
+            : self.options.type == 'input'
             ? Ox.encodeHTMLEntities(value)
             : Ox.sanitizeHTML(value, self.options.tags, self.options.globalAttributes)
         );
@@ -265,7 +270,7 @@ Ox.Editable = function(options, self) {
         height = self.options.height || Ox.limit(self.$test.height(), self.minHeight, self.maxHeight);
         width = self.$test.width();
         // +Ox.UI.SCROLLBAR_SIZE to prevent scrollbar from showing up
-        if (self.options.type == 'textarea') {
+        if (self.options.type != 'input') {
             width += Ox.UI.SCROLLBAR_SIZE;
         }
         width = self.options.width || Ox.limit(width, self.minWidth, self.maxWidth);
@@ -280,12 +285,16 @@ Ox.Editable = function(options, self) {
             width: width,
             height: height
         });
-        self.$input.find(self.options.type).css({
+        self.$input.find(getInputType()).css({
             width: width + 'px',
             height: height + 'px'
         });
     }
 
+    function getInputType() {
+        return self.options.type == 'data' ? 'textarea' : self.options.type
+    }
+
     function submit() {
         self.options.editing = false;
         that.removeClass('OxEditing');

source/UI/js/Video/AnnotationFolder.js

@@ -121,7 +121,7 @@ Ox.AnnotationFolder = function(options, self) {
                     self.$widget.options({width: self.options.width});
                 }
                 self.$annotations.options({
-                    width: self.options.type == 'text'
+                    width: isTextType(self.options.type)
                         ? self.options.width + 8
                         : self.options.width
                 });
@@ -284,7 +284,7 @@ Ox.AnnotationFolder = function(options, self) {
             clickLink: self.options.clickLink,
             confirmDeleteDialog: self.options.confirmDeleteDialog,
             editable: self.options.editable,
-            getSortValue: self.options.type == 'text'
+            getSortValue: isTextType(self.options.type)
                 ? function(value) {
                     return Ox.stripTags(value);
                 }
@@ -301,8 +301,24 @@ Ox.AnnotationFolder = function(options, self) {
                     + Ox.formatDate(item.modified.slice(0, 10), '%B %e, %Y');
             } : '',
             width: self.options.width,
-            maxHeight: self.options.type == 'text' ? Infinity : void 0,
+            maxHeight: isTextType(self.options.type) ? Infinity : void 0,
-            type: self.options.type == 'text' ? 'textarea' : 'input'
+            type: self.options.type == 'data' ? 'data' : self.options.type == 'text' ? 'textarea' : 'input',
+            format: self.options.type == 'data' ? function(value) {
+                return Ox.TreeList({
+                    data: value,
+                    width: self.options.width
+                }).css({
+                    minHeight: '256px',
+                });
+            } : self.options.translate ? function(value) {
+                return Ox._(value);
+            } : null,
+            unformat: function(value) {
+                if (self.options.type == 'data') {
+                    return JSON.stringify(value, null, "    ");
+                }
+                return Ox.decodeHTMLEntities(Ox.stripTags(value));
+            }
         }, self.options.autocomplete ? {
             autocomplete: function(value, callback) {
                 self.options.autocomplete(self.options.id, value, callback);
@@ -313,14 +329,9 @@ Ox.AnnotationFolder = function(options, self) {
             autocompleteSelectHighlight: true,
             autocompleteSelectMaxWidth: 256,
             autocompleteSelectOffset: {left: 0, top: 0},
-            autocompleteSelectUpdate: true,
+            autocompleteSelectUpdate: true
-            format: self.options.translate ? function(value) {
+        } : {
-                return Ox._(value);
+        }))
-            } : null,
-            unformat: function(value) {
-                return Ox.decodeHTMLEntities(Ox.stripTags(value));
-            }
-        } : {}))
         .bindEvent({
             add: function(data) {
                 if (self.editing) {
@@ -548,8 +559,8 @@ Ox.AnnotationFolder = function(options, self) {
 
     function getSort() {
         return ({
-            duration: ['-duration', '+in', self.options.type == 'text' ? '+created' : '+value'],
+            duration: ['-duration', '+in', isTextType(self.options.type) ? '+created' : '+value'],
-            position: ['+in', '+duration', self.options.type == 'text' ? '+created' : '+value'],
+            position: ['+in', '+duration', isTextType(self.options.type) ? '+created' : '+value'],
             text: ['+value', '+in', '+duration'],
             created: ['+created', '+in', '+duration', '+value']
         })[self.options.sort];
@@ -560,6 +571,10 @@ Ox.AnnotationFolder = function(options, self) {
             && !!item[self.options.type].type;
     }
 
+    function isTextType(type) {
+        return ['text', 'data'].includes(type);
+    }
+
     function removeAnnotation(data) {
         var item;
         self.editing = false;

source/UI/js/Video/AnnotationPanel.js

@@ -247,13 +247,13 @@ Ox.AnnotationPanel = function(options, self) {
             if (annotation && folder) {
                 key = folder.options('id');
                 type = folder.options('type');
-                value = annotation.entity ? annotation.entity.name : annotation.value;
+                value = type == 'data' ? '' : annotation.entity ? annotation.entity.name : annotation.value;
                 isEditable = annotation.editable;
                 isEntity = !!annotation.entity;
                 isEvent = type == 'event';
                 isPlace = type == 'place';
                 isEventOrPlace = isEvent || isPlace;
-                isString = type != 'text';
+                isString = type != 'text' && type != 'data';
                 // fixme: absence of annotation[type] may be an error
                 isDefined = isEventOrPlace && !!annotation[type] && !!annotation[type].type;
                 annotationTitle = folder.options('item') + ': "' + Ox.stripTags(value) + '"';

source/UI/js/Video/VideoAnnotationPanel.js

@@ -1069,10 +1069,16 @@ Ox.VideoAnnotationPanel = function(options, self) {
         if (query.length) {
             query = query.toLowerCase();
             results = self.annotations.filter(function(annotation) {
+                let value = annotation.value
+                if (!value.toLowerCase && value.toString) {
+                    value = value.toString()
+                }
+                if (value.toLowerCase) {
                     return Ox.contains(['*', annotation.layer], self.options.findLayer)
                         && Ox.decodeHTMLEntities(Ox.stripTags(
-                        annotation.value.toLowerCase()
+                            value.toLowerCase()
                         )).indexOf(query) > -1;
+                }
             });
         }
         return results;
@@ -1119,6 +1125,9 @@ Ox.VideoAnnotationPanel = function(options, self) {
             Ox.forEach(layer.items, function(item) {
                 if (item.id == annotationId) {
                     value = item.value;
+                    if (!value.toLowerCase && value.toString) {
+                        value = value.toString()
+                    }
                     found = true;
                     return false; // break
                 }
@@ -1276,9 +1285,15 @@ Ox.VideoAnnotationPanel = function(options, self) {
         var words = [];
         Ox.forEach(Ox.count(Ox.words(
             self.annotations.map(function(annotation) {
+                let value = annotation.value
+                if (!value.toLowerCase && value.toString) {
+                    value = value.toString()
+                }
+                if (value.toLowerCase) {
                     return Ox.decodeHTMLEntities(
-                    Ox.stripTags(annotation.value.toLowerCase())
+                        Ox.stripTags(value.toLowerCase())
                     );
+                }
             }).join(' ')
         )), function(count, value) {
             words.push({count: count, value: value});
@@ -1431,11 +1446,12 @@ Ox.VideoAnnotationPanel = function(options, self) {
                 position: self.options.position
             });
             if (self.editing && self.options.selected.length && self.options.selected[0] != '_') {
+                let value = $('.OxEditableElement input:visible').val()
                 that.triggerEvent('editannotation', {
                     id: self.options.selected,
                     'in': self.options['in'],
                     out: self.options.out,
-                    value: $('.OxEditableElement input:visible').val()
+                    value: value
                 });
             }
         }
@@ -1568,6 +1584,9 @@ Ox.VideoAnnotationPanel = function(options, self) {
         }
         data['in'] = self.options['in'];
         data.out = self.options.out;
+        if (data.layer == 'data' && Ox.isString(data.value)) {
+            data.value = JSON.parse(data.value)
+        }
         that.triggerEvent('editannotation', data);
     }