152 lines
4.4 KiB
JavaScript
152 lines
4.4 KiB
JavaScript
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;
|
|
|
|
};
|