add OxEditableContent

source/Ox.UI/js/Form/EditableContent.js

@@ -0,0 +1,138 @@
+Ox.EditableContent = function(options, self) {
+
+    self = self || {};
+    var that = Ox.Element({
+            element: options.type == 'div' ? '<div>' : '<span>',
+            tooltip: options.tooltip
+        }, self)
+        .defaults({
+            clickLink: null,
+            editable: true,
+            placeholder: '',
+            tooltip: '',
+            type: 'span',
+            value: ''
+        })
+        .options(options || {})
+        .update({
+            highlight: function() {
+                self.$value.html(formatValue());
+            },
+            value: function() {
+                self.$value.html(formatValue());
+            }
+        })
+        .addClass('OxEditableContent')
+        .on({
+            click: edit
+        });
+
+    self.options.value = self.options.value.toString();
+
+    self.editing = false;
+
+    self.$value = Ox.Element(self.options.type == 'span' ? '<span>' : '<div>')
+        .html(formatValue(self.options.value))
+        .appendTo(that);
+
+    self.$input = Ox.Element(self.options.type == 'span' ? '<span>' : '<div>')
+        .addClass('OxEditableContentInput')
+        .attr({contenteditable: true})
+        .text(formatInputValue(self.options.value))
+        .hide()
+        .on({
+            blur: submit,
+            keydown: function(e) {
+                if (self.options.type == 'span' && e.keyCode == 13) {
+                    submit();
+                    return false;
+                }
+            }
+        })
+        .appendTo(that);
+    
+    function edit(e) {
+        var $target = $(e.target);
+        e.preventDefault();
+        if (!e.shiftKey && ($target.is('a') || ($target = $target.parents('a')).length)) {
+            if (self.options.clickLink) {
+                e.target = $target[0];
+                self.options.clickLink(e);
+            } else {
+                document.location.href = $target.attr('href');
+            }
+        } else if (self.options.editable && !self.editing) {
+            that.gainFocus();
+            self.$value.hide();
+            self.$input.show().on({
+                focus: function() {
+                    self.editing = true;
+                }
+            });
+            setTimeout(function() {
+                if (!self.editing) {
+                    self.$input.hide();
+                    self.$value.show();
+                }
+            }, 250);
+        }
+        return false;
+    }
+
+    function formatInputValue() {
+        return Ox.decodeHTMLEntities(
+            self.options.type == 'span'
+            ? self.options.value
+            : self.options.value.replace(/<br\/?><br\/?>/g, '\n\n')
+        );
+    }
+
+    function formatValue() {
+        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);
+        }
+        if (self.options.highlight) {
+            value = Ox.highlight(
+                value, self.options.highlight, 'OxHighlight', true
+            );
+        }
+        return value;
+    }
+
+    function parseValue() {
+        var value = Ox.clean(
+            self.$input.text().replace(/\n\n+/g, '\0')
+        ).replace(/\0/g, '\n\n').trim();
+        return (
+            self.options.type == 'span'
+            ? Ox.encodeHTMLEntities(value)
+            : Ox.sanitizeHTML(value, self.options.tags, self.options.replaceTags)
+        );
+    }
+
+    function setCSS() {
+        
+    }
+
+    function submit() {
+        that.loseFocus();
+        self.editing = false;
+        self.options.value = self.$input.text();
+        self.$input.text(formatInputValue()).hide();
+        self.$value.html(formatValue()).show();
+        that.triggerEvent('submit', {value: self.options.value});
+    }
+
+    that.css = function(css) {
+        that.$element.css(css);
+        self.$value.css(css);
+        self.$input.css(css);
+        return that;
+    }
+
+    return that;
+
+};