update video editor (editables)

2012-01-16 16:52:34 +05:30 · 2012-01-16 16:52:34 +05:30 · 408ebf54cb
commit 408ebf54cb
parent 43cfc1f0b5
7 changed files with 55 additions and 51 deletions
--- a/source/Ox.UI/js/Form/Ox.ArrayEditable.js
+++ b/source/Ox.UI/js/Form/Ox.ArrayEditable.js
@ -32,7 +32,11 @@ Ox.ArrayEditable = function(options, self) {
            doubleclick: doubleclick,
            key_delete: deleteItem,
            key_enter: function() {
-                that.editItem();
+                // make sure the newline does
+                // not end up in the textarea
+                setTimeout(function() {
+                    that.editItem();                    
+                }, 0);
            },
            key_escape: selectNone,
            key_down: self.options.type == 'input' ? selectLast : selectNext,
--- a/source/Ox.UI/js/Form/Ox.Editable.js
+++ b/source/Ox.UI/js/Form/Ox.Editable.js
@ -58,9 +58,7 @@ Ox.Editable = function(options, self) {
    self.css = {};
    self.$value = Ox.Element(self.options.type == 'input' ? '<span>' : '<div>')
        .addClass('OxValue')
-        //.css({background: 'red'})
        .html(formatValue())
-        //[self.options.editing ? 'hide' : 'show']()
        .appendTo(that);

    if (self.options.editing) {
@ -84,6 +82,7 @@ Ox.Editable = function(options, self) {

    function cancel() {
        self.options.editing = false;
+        that.removeClass('OxEditing');
        self.options.value = self.originalValue;
        self.$input.value(formatInputValue()).hide();
        self.$test.html(formatTestValue());
@ -92,29 +91,20 @@ Ox.Editable = function(options, self) {
    }

    function change(data) {
-        setTimeout(function() {
-            var height, width;
-            self.options.value = data.value;
-            self.$value.html(formatValue());
-            self.$test.html(formatTestValue());
-            setSizes();
-        }, 25);
+        self.options.value = parseValue(data.value);
+        self.$value.html(formatValue());
+        self.$test.html(formatTestValue());
+        setSizes();
    }

    function edit() {
-        Ox.print('E EDIT! editable editing', self.options.editable, self.options.editing)
        var height, width;
        if (self.options.editable && !self.options.editing) {
            self.options.editing = true;
+            that.addClass('OxEditing');
            self.originalValue = self.options.value;
            self.$value.hide();
-            Ox.Log('Form', 'H:::', self.options.height, height)
-            if (!self.$test) {
-                self.$test = self.$value.$element.clone()
-                    .css(Ox.extend({display: 'inline-block'}, self.css))
-                    .html(formatTestValue())
-                    .css({background: 'rgb(192, 192, 192)'})
-                    .appendTo(that.$element);
+            if (!self.$input) {
                self.$input = Ox.Input({
                        changeOnKeypress: true,
                        element: self.options.type == 'input' ? '<span>' : '<div>',
@ -124,15 +114,18 @@ Ox.Editable = function(options, self) {
                    })
                    .css(self.css)
                    .bindEvent({
+                        blur: self.options.submitOnBlur ? submit : blur,
                        cancel: cancel,
                        change: change,
                        submit: submit
                    })
                    .appendTo(that.$element);
-                self.$input.bindEvent({
-                    blur: self.options.submitOnBlur ? submit : blur
-                });
                self.$input.find('input').css(self.css);
+                self.$test = self.$value.$element.clone()
+                    .css(Ox.extend({display: 'inline-block'}, self.css))
+                    .html(formatTestValue())
+                    .css({background: 'rgb(192, 192, 192)'})
+                    .appendTo(that.$element);
            }
            self.minWidth = 8;
            self.maxWidth = that.parent().width();
@ -162,35 +155,34 @@ Ox.Editable = function(options, self) {
    }

    function formatTestValue() {
-        return self.options.type == 'input'
-            ? Ox.encodeHTML(self.options.value) //.replace(/ /g, '&nbsp;')
-            : Ox.encodeHTML(self.options.value || '&nbsp;')
-                .replace(/\n$/, '\n&nbsp;')
-                .replace(/\n/g, '<br/>')
-            /*
-            : Ox.parseHTML(self.options.value || '&nbsp;')
-                .replace(/(\n|<br\/?>)$/, '<br/>&nbsp;');
-            */
+        var value = Ox.encodeHTML(self.$input.options('value'));
+        return !value ? '&nbsp;'
+            : self.options.type == 'input'
+                ? value.replace(/ /g, '&nbsp;')
+                : value.replace(/\n$/, '\n ')
+                    .replace(/  /g, ' &nbsp;')
+                    .replace(/(^ | $)/, '&nbsp;')
+                    .replace(/\n/g, '<br/>')
    }

    function formatValue() {
-        Ox.print('HUH?', self.options.value, self.options.format);
        var value = self.options.value;
        if (self.options.value === '' && self.options.placeholder) {
            value = self.options.placeholder;
        } else if (self.options.format) {
            value = self.options.format(self.options.value)
-        } else if (self.options.type == 'input') {
-            Ox.print('HELLO??')
-            value = Ox.encodeHTML(self.options.value);
        }
        return value;
    }

    function parseValue() {
-        return self.options.type == 'input'
-            ? Ox.encodeHTML(self.$input.value())
-            : Ox.parseHTML(self.$input.value());
+        var value = Ox.clean(
+            self.$input.value().replace(/\n\n+/g, '\0')
+        ).replace(/\0/g, '\n\n').trim();
+        return (self.options.type == 'input'
+            ? Ox.encodeHTML(value)
+            : Ox.parseHTML(value)
+        );
    }

    function setSizes() {
@ -198,7 +190,6 @@ Ox.Editable = function(options, self) {
        self.$test.show();
        height = self.options.height || Ox.limit(self.$test.height(), self.minHeight, self.maxHeight);
        width = self.options.width || Ox.limit(self.$test.width(), self.minWidth, self.maxWidth);
-        Ox.print('stH', self.$test.height(), self.options.value)
        self.$test.hide();
        self.$input.options({
                width: width,
@ -212,14 +203,12 @@ Ox.Editable = function(options, self) {

    function submit() {
        self.options.editing = false;
-        //self.options.value = parseValue();
+        that.removeClass('OxEditing');
        self.$input.value(formatInputValue()).hide();
        self.$test.html(formatTestValue());
        self.$value.html(formatValue()).show();
        that.$tooltip && that.$tooltip.options({title: self.options.tooltip});
-        that.triggerEvent('submit', {
-            value: self.options.value
-        });
+        that.triggerEvent('submit', {value: self.options.value});
    }

    self.setOption = function(key, value) {
--- a/source/Ox.UI/js/Video/Ox.AnnotationFolder.js
+++ b/source/Ox.UI/js/Video/Ox.AnnotationFolder.js
@ -99,7 +99,6 @@ Ox.AnnotationFolder = function(options, self) {

    if (self.widget) {
        self.widgetSize = self.options.showWidget * self.options.widgetSize;
-        Ox.print('FOO', self.widgetSize, self.options.showWidget, self.options.widgetSize)
        self.$outer = Ox.Element()
            .css({
                display: 'table-cell',
@ -179,7 +178,7 @@ Ox.AnnotationFolder = function(options, self) {
            separator: ';',
            sort: self.sort,
            submitOnBlur: false,
-            width: self.options.type == 'text' ? self.options.width + 8 : self.options.width,
+            width: self.options.width,
            type: self.options.type == 'text' ? 'textarea' : 'input'
        })
        //.css({marginTop: '256px'})
--- a/source/Ox.UI/themes/classic/css/classic.css
+++ b/source/Ox.UI/themes/classic/css/classic.css
@ -747,14 +747,22 @@ Video
 .OxThemeClassic .OxAnnotationFolder .OxEditableElement.OxPlaceholder .OxValue {
    color: rgb(160, 160, 160);
 }
-.OxThemeClassic .OxAnnotationFolder .OxEditableElement.OxSelected {
+.OxThemeClassic .OxAnnotationFolder .OxArrayEditable .OxEditableElement.OxSelected {
    background: rgb(192, 192, 255);
+}
+.OxThemeClassic .OxAnnotationFolder .OxArrayEditableInput .OxEditableElement.OxSelected {
    box-shadow: 0 0 1px rgb(64, 64, 64);
 }
+.OxThemeClassic .OxAnnotationFolder .OxArrayEditableTextarea .OxEditableElement.OxEditing {
+    background: rgb(160, 224, 160);
+}
+.OxThemeClassic .OxAnnotationFolder .OxArrayEditable .OxInput.OxFocus {
+    box-shadow: none;
+}
 .OxThemeClassic .OxAnnotationFolder .OxEditableElement input {
    background: rgb(160, 224, 160);
    color: rgb(0, 0, 0);
-    box-shadow: 0 0 1px rgb(64, 64, 64);
+    //box-shadow: 0 0 1px rgb(64, 64, 64);
 }
 .OxThemeClassic .OxAnnotationFolder .OxEditableElement textarea {
    background: rgb(160, 224, 160);