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

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;
                    updateSelection();
                }
            });
            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});
    }
    function updateSelection() {
        var range, selection;
        selection = window.getSelection();
        selection.removeAllRanges();
        range = document.createRange();
        range.selectNodeContents(self.$input[0]);
        selection.addRange(range);
        if (self.options.type != 'span') {
            setTimeout(function() {
                selection.collapseToEnd();
            }, 0);
        }
    }

    that.css = function(css) {
        that.$element.css(css);
        self.$value.css(css);
        self.$input.css(css);
        return that;
    }

    return that;

};