add OxEditableContent
This commit is contained in:
parent
d2d98f49a7
commit
9460f78053
1 changed files with 138 additions and 0 deletions
138
source/Ox.UI/js/Form/EditableContent.js
Normal file
138
source/Ox.UI/js/Form/EditableContent.js
Normal file
|
@ -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;
|
||||||
|
|
||||||
|
};
|
Loading…
Reference in a new issue