add InsertHTMLDialog to VideoEditor

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

@@ -168,6 +168,9 @@ Ox.ArrayEditable = function(options, self) {
                             self.editing = true;
                             that.triggerEvent('edit', data);
                         },
+                        insert: function(data) {
+                            that.triggerEvent('insert', data);
+                        },
                         submit: function(data) {
                             self.editing = false;
                             that.gainFocus();

source/Ox.UI/js/Form/Ox.Editable.js

@@ -120,6 +120,9 @@ Ox.Editable = function(options, self) {
                         blur: self.options.submitOnBlur ? submit : blur,
                         cancel: cancel,
                         change: change,
+                        insert: function(data) {
+                            that.triggerEvent('insert', data);
+                        },
                         submit: submit
                     })
                     .appendTo(that.$element);

source/Ox.UI/js/Form/Ox.Input.js

@@ -117,7 +117,7 @@ Ox.Input = function(options, self) {
             .bindEvent(Ox.extend(self.options.type != 'textarea' ? {
                 key_enter: submit
             } : {}, {
-                key_control_v: paste,
+                key_control_i: insert,
                 key_escape: cancel,
                 key_shift_enter: submit
             }));
@@ -719,6 +719,17 @@ Ox.Input = function(options, self) {
             - (self.options.style == 'rounded' ? 14 : 6);
     }
 
+    function insert() {
+        var input = self.$input[0];
+        that.triggerEvent('insert', {
+            end: input.selectionEnd,
+            id: that.id,
+            selection: input.value.substring(input.selectionStart, input.selectionEnd),
+            start: input.selectionStart,
+            value: input.value
+        });
+    }
+
     function keydown(event) {
         var oldCursor = cursor(),
             oldValue = self.options.value,
@@ -758,6 +769,7 @@ Ox.Input = function(options, self) {
     }
 
     function paste() {
+        // fixme: unused
         var data = Ox.Clipboard.paste();
         data.text && self.$input.val(data.text);
     }

source/Ox.UI/js/Form/Ox.InsertHTMLDialog.js

@@ -0,0 +1,203 @@
+'use strict';
+
+Ox.InsertHTMLDialog = function(options, self) {
+
+    var that;
+
+    self = self || {};
+    self.options = Ox.extend({
+        callback: void 0,
+        end: 0,
+        selection: '',
+        start: 0
+    }, options || {});
+
+    self.items = [
+        {id: 'img', title: 'Image'},
+        {id: 'a', title: 'Link'},
+        {id: 'li', title: 'List'},
+        {},
+        {id: 'blockquote', title: 'Blockquote'},
+        {id: 'h1', title: 'Headline'},
+        {id: 'p', title: 'Paragraph'},
+        {id: 'div', title: 'Right-to-Left'},
+        {},
+        {id: 'b', title: 'Bold'},
+        {id: 'i', title: 'Italic'},
+        {id: 'code', title: 'Monospace'},
+        {id: 's', title: 'Strike'},
+        {id: 'sub', title: 'Subscript'},
+        {id: 'sup', title: 'Superscript'},
+        {id: 'u', title: 'Underline'},
+        {},
+        {id: 'br', title: 'Linebreak'}
+    ].map(function(item, i) {
+        var form, format;
+        if (item.id == 'img') {
+            form = [
+                Ox.Input({
+                    id: 'url',
+                    label: 'URL',
+                    labelWidth: 128,
+                    width: 384
+                })
+            ];
+            format = function(values) {
+                return '<img src="' + values.url + '"/>';
+            };
+        } else if (item.id == 'a') {
+            form = [
+                Ox.Input({
+                    id: 'text',
+                    label: 'Text',
+                    labelWidth: 128,
+                    width: 384,
+                    value: self.options.selection
+                }),
+                Ox.Input({
+                    id: 'url',
+                    label: 'URL',
+                    labelWidth: 128,
+                    width: 384
+                })
+            ];
+            format = function(values) {
+                return '<a href="' + values.url + '">' + values.text + '</a>';
+            };
+         } else if (item.id == 'li') {
+            form = [
+                Ox.Select({
+                    id: 'style',
+                    items: [
+                        {id: 'ul', title: 'Bullets'},
+                        {id: 'ol', title: 'Numbers'}
+                    ],
+                    label: 'Style',
+                    labelWidth: 128,
+                    width: 384
+                }),
+                Ox.ArrayInput({
+                    id: 'items',
+                    label: 'Items',
+                    max: 10,
+                    width: 384
+                })
+            ];
+            format = function(values) {
+                return '<' + values.style + '>\n' + values.items.map(function(value) {
+                    return '<li>' + value + '</li>\n';
+                }).join('') + '</' + values.style + '>';
+            };
+        } else if (['p', 'blockquote', 'div'].indexOf(item.id) > -1) {
+            form = [
+                Ox.Input({
+                    id: 'text',
+                    height: 128,
+                    type: 'textarea',
+                    width: 384,
+                    value: self.options.selection
+                })
+            ];
+            format = function(values) {
+                return '<' + item.id + (
+                    item.id == 'div' ? ' style="direction: rtl"' : ''
+                ) + '>' + values.text + '</' + item.id + '>';
+            };
+        } else if (['h1', 'b', 'i', 'code', 's', 'sub', 'sup', 'u'].indexOf(item.id) > -1) {
+            form = [
+                Ox.Input({
+                    id: 'text',
+                    label: 'Text',
+                    labelWidth: 128,
+                    width: 384,
+                    value: self.options.selection
+                })
+            ];
+            format = function(values) {
+                return '<' + item.id + '>' + values.text + '</' + item.id + '>';
+            };
+        } else if (item.id == 'br') {
+            form = [];
+            format = function() {
+                return '<br/>';
+            };
+        }
+        return item.id ? Ox.extend(item, {
+            form: form,
+            format: format
+        }) : item;
+    });
+
+    self.$content = $('<div>')
+        .css({padding: '16px'});
+
+    self.$select = Ox.Select({
+            items: self.items,
+            label: 'Insert',
+            labelWidth: 128,
+            value: 'img',
+            width: 384
+        })
+        .bindEvent({
+            change: renderForm
+        })
+        .appendTo(self.$content);
+
+    renderForm();
+
+    that = Ox.Dialog({
+        buttons: [
+            Ox.Button({
+                    id: 'cancel',
+                    title: 'Cancel',
+                    width: 64
+                })
+                .bindEvent({
+                    click: function() {
+                        that.close();
+                    }
+                }),
+            Ox.Button({
+                    id: 'insert',
+                    title: 'Insert',
+                    width: 64
+                })
+                .bindEvent({
+                    click: function() {
+                        Ox.print('SFV:::::', self.$form.values())
+                        var item = Ox.getObjectById(self.items, self.$select.value()),
+                            value = item.format(
+                                item.form.length ? self.$form.values() : void 0
+                            );
+                        self.options.callback({
+                            position: self.options.start + value.length,
+                            value: self.options.value.substr(0, self.options.start)
+                                + value
+                                + self.options.value.substr(self.options.end)
+                        });
+                        that.close();
+                    }
+                })
+        ],
+        content: self.$content,
+        height: 184,
+        keys: {enter: 'insert', escape: 'cancel'},
+        title: 'Insert HTML',
+        width: 416 + Ox.UI.SCROLLBAR_SIZE
+    });
+
+    function renderForm() {
+        var items = Ox.getObjectById(self.items, self.$select.value()).form;
+        self.$form && self.$form.remove();
+        if (items.length) {
+            self.$form = Ox.Form({
+                    items: items
+                })
+                .css({paddingTop: '8px'})
+                .appendTo(self.$content);
+        }
+    }
+
+    return that;
+
+};

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

@@ -226,6 +226,9 @@ Ox.AnnotationFolder = function(options, self) {
                 self.editing = true;
                 that.triggerEvent('edit');
             },
+            insert: function(data) {
+                that.triggerEvent('insert', data);
+            },
             select: selectAnnotation,
             selectafter: function() {
                 that.triggerEvent('selectafter');

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

@@ -148,8 +148,6 @@ Ox.AnnotationPanel = function(options, self) {
                     that.triggerEvent('add', Ox.extend({layer: layer.id}, data));
                 },
                 blur: function() {
-                    self.editing = false;
-                    renderEditMenu();
                     that.triggerEvent('blur');
                 },
                 change: function(data) {
@@ -163,6 +161,7 @@ Ox.AnnotationPanel = function(options, self) {
                 info: function(data) {
                     that.triggerEvent('info', {layer: layer.id});
                 },
+                insert: insert,
                 remove: function(data) {
                     that.triggerEvent('remove', Ox.extend({layer: layer.id}, data));
                 },
@@ -258,6 +257,18 @@ Ox.AnnotationPanel = function(options, self) {
         return folder;
     }
 
+    function insert(data) {
+        var id = data.id;
+        Ox.InsertHTMLDialog(Ox.extend({
+            callback: function(data) {
+                Ox.UI.elements[id]
+                    .value(data.value)
+                    .focusInput(data.position)
+                    .triggerEvent('change', data.value);
+            }
+        }, data)).open();
+    }
+
     function renderEditMenu() {
         Ox.print('RENDER EDIT MENU')
         var annotation, annotationTitle, folder,
@@ -288,7 +299,7 @@ Ox.AnnotationPanel = function(options, self) {
                     {id: 'edit', title: 'Edit Annotation', disabled: !self.options.selected || !isEditable || self.editing, keyboard: 'return'},
                     {id: 'delete', title: 'Delete Annotation', disabled: !self.options.selected || !isEditable, keyboard: 'delete'},
                     {},
-                    {id: 'insert', title: 'Insert...', disabled: isString || !self.editing},
+                    {id: 'insert', title: 'Insert...', disabled: isString || !self.editing, keyboard: 'control i'},
                     {id: 'undo', title: 'Undo Changes', disabled: !self.editing, keyboard: 'escape'},
                     {id: 'save', title: 'Save Changes', disabled: !self.editing, keyboard: isString ? 'return' : 'shift return'},
                 ],
@@ -322,6 +333,8 @@ Ox.AnnotationPanel = function(options, self) {
                     that.triggerEvent('find', {value: value});
                 } else if (data.id == 'findannotations') {
                     that.triggerEvent('findannotations', {key: key, value: value});
+                } else if (data.id == 'insert') {
+                    insert({});
                 } else if (data.id == 'manage') {
                     that.triggerEvent('define', {
                         id: self.options.selected,

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

@@ -191,7 +191,7 @@ Ox.VideoEditor = function(options, self) {
     self.results = [];
     self.words = getWords();
 
-    Ox.print('VIDEO EDITOR OPTIONS', self.options)
+    //Ox.print('VIDEO EDITOR OPTIONS', self.options)
 
     self.$editor = Ox.Element()
         .addClass('OxVideoEditor')
@@ -606,9 +606,13 @@ Ox.VideoEditor = function(options, self) {
             },
             blur: function(data) {
                 Ox.print('VIDEO EDITOR BLUR')
-                // Only blur if neither the video editor
+                // Only blur if the video editor did not receive the click,
-                // nor an active menu layer received the click
+                // no dialog is open, and no menu was visible
-                if (!self.focused && !$('.OxMenuLayer').length) {
+                if (
+                    !self.focused
+                    && !$('.OxDialogLayer').length
+                    && !$('.OxMenuLayer').length
+                ) {
                     blurAnnotation();
                 }
             },