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

153 lines
4.4 KiB
JavaScript
Raw Normal View History

2013-02-25 16:39:46 +00:00
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();
2013-02-25 16:39:46 +00:00
}
});
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);
}
}
2013-02-25 16:39:46 +00:00
that.css = function(css) {
that.$element.css(css);
self.$value.css(css);
self.$input.css(css);
return that;
}
return that;
};