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

217 lines
7 KiB
JavaScript
Raw Normal View History

2013-02-25 16:39:46 +00:00
Ox.EditableContent = function(options, self) {
self = self || {};
2013-02-27 07:33:10 +00:00
if (options.tooltip) {
self.tooltip = options.tooltip;
options.tooltip = function(e) {
2013-02-28 05:03:20 +00:00
return that.hasClass('OxEditing') ? ''
2013-02-27 07:33:10 +00:00
: Ox.isString(self.tooltip) ? self.tooltip
: self.tooltip(e);
}
}
2013-02-27 10:00:28 +00:00
var that = Ox.Element(options.type == 'textarea' ? '<div>' : '<span>', self)
2013-02-25 16:39:46 +00:00
.defaults({
clickLink: null,
editable: true,
editing: false,
format: null,
highlight: null,
2013-02-25 16:39:46 +00:00
placeholder: '',
replaceTags: {},
submitOnBlur: true,
tags: null,
2013-02-25 16:39:46 +00:00
tooltip: '',
2013-02-27 10:00:28 +00:00
type: 'input',
2013-02-25 16:39:46 +00:00
value: ''
})
.options(options || {})
.update({
2013-02-27 07:33:10 +00:00
editing: function() {
if (self.options.editing) {
// edit will toggle self.options.editing
self.options.editing = false;
edit();
} else {
submit();
}
},
2013-02-25 16:39:46 +00:00
highlight: function() {
!self.options.editing && self.$value.html(formatValue());
2013-02-25 16:39:46 +00:00
},
value: function() {
!self.options.editing && self.$value.html(formatValue());
2013-02-25 16:39:46 +00:00
}
})
.addClass('OxEditableContent OxSelectable')
2013-02-25 16:39:46 +00:00
.on({
blur: self.options.submitOnBlur ? submit : blur,
click: function(e) {
var $target = $(e.target);
if (!e.shiftKey && ($target.is('a') || ($target = $target.parents('a')).length)) {
e.preventDefault();
if (self.options.clickLink) {
e.target = $target[0];
self.options.clickLink(e);
} else {
document.location.href = $target.attr('href');
}
}
return false;
},
2013-02-25 16:39:46 +00:00
keydown: function(e) {
2013-02-27 07:33:10 +00:00
if (e.keyCode == 13) {
2013-02-27 10:00:28 +00:00
if (e.shiftKey || self.options.type == 'input') {
submit();
2013-02-27 07:33:10 +00:00
} else {
var selection = window.getSelection(),
node = selection.anchorNode,
offset = selection.anchorOffset,
range = document.createRange(),
text = node.textContent;
e.preventDefault();
node.textContent = text.substr(0, offset)
+ '\n' + (text.substr(offset) || ' ');
range.setStart(node, offset + 1);
range.setEnd(node, offset + 1);
selection.removeAllRanges();
selection.addRange(range);
}
2013-02-27 07:33:10 +00:00
return false;
} else if (e.keyCode == 27) {
cancel();
return false;
2013-02-25 16:39:46 +00:00
}
2013-02-27 07:33:10 +00:00
setTimeout(function() {
that.css({padding: that.text() ? 0 : '0 2px'});
});
},
paste: function(e) {
Ox.print('PASTE', e);
2013-02-25 16:39:46 +00:00
}
})
.bindEvent({
2013-02-28 05:03:20 +00:00
doubleclick: edit
});
self.options.value = self.options.value.toString();
that.html(formatValue());
2013-02-27 07:33:10 +00:00
if (self.options.editing) {
// wait for the element to be in the DOM
setTimeout(function() {
// edit will toggle self.options.editing
self.options.editing = false;
edit();
});
}
function blur() {
2013-02-27 07:33:10 +00:00
// ...
}
function cancel() {
if (self.options.editing) {
that.loseFocus();
self.options.editing = false;
2013-02-28 05:03:20 +00:00
that.removeClass('OxEditing')
.attr({contenteditable: false})
.html(formatValue());
2013-02-27 10:00:28 +00:00
if (self.options.type == 'input') {
2013-02-27 07:33:10 +00:00
that.css({padding: 0});
}
that.triggerEvent('cancel', {value: self.options.value});
}
}
function edit() {
if (self.options.editable && !self.options.editing) {
2013-02-25 21:11:39 +00:00
var value = formatInputValue();
2013-02-27 07:33:10 +00:00
that.$tooltip && that.$tooltip.remove();
2013-02-28 05:03:20 +00:00
that.addClass('OxEditing')
.removeClass('OxPlaceholder')
.attr({contenteditable: true});
2013-02-25 21:11:39 +00:00
if (value) {
that.text(value);
2013-02-25 21:11:39 +00:00
} else {
2013-02-27 04:15:18 +00:00
that.text('');
2013-02-27 10:00:28 +00:00
if (self.options.type == 'input') {
2013-02-27 04:15:18 +00:00
that.css({padding: '0 2px'});
}
2013-02-25 21:11:39 +00:00
}
self.options.editing = true;
2013-02-25 16:39:46 +00:00
that.gainFocus();
setTimeout(updateSelection);
that.triggerEvent('edit');
} else if (!self.options.editable) {
that.triggerEvent('open');
2013-02-25 16:39:46 +00:00
}
}
function formatInputValue() {
return Ox.decodeHTMLEntities(
2013-02-27 10:00:28 +00:00
self.options.type == 'input'
2013-02-25 16:39:46 +00:00
? self.options.value
: self.options.value.replace(/<br\/?><br\/?>/g, '\n\n')
);
}
function formatValue() {
var value = self.options.value;
that.removeClass('OxPlaceholder');
2013-02-25 16:39:46 +00:00
if (self.options.value === '' && self.options.placeholder) {
value = self.options.placeholder;
that.addClass('OxPlaceholder');
2013-02-25 16:39:46 +00:00
} 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(
that.text().replace(/\n\n+/g, '\0')
2013-02-25 16:39:46 +00:00
).replace(/\0/g, '\n\n').trim();
return (
2013-02-27 10:00:28 +00:00
self.options.type == 'input'
2013-02-25 16:39:46 +00:00
? Ox.encodeHTMLEntities(value)
: Ox.sanitizeHTML(value, self.options.tags, self.options.replaceTags)
);
}
function submit() {
if (self.options.editing) {
that.loseFocus();
self.options.editing = false;
2013-02-27 07:33:10 +00:00
self.options.value = parseValue();
2013-02-28 05:03:20 +00:00
that.removeClass('OxEditing')
.attr({contenteditable: false})
.html(formatValue());
2013-02-27 10:00:28 +00:00
if (self.options.type == 'input') {
2013-02-27 04:15:18 +00:00
that.css({padding: 0});
}
that.triggerEvent('submit', {value: self.options.value});
}
2013-02-25 16:39:46 +00:00
}
function updateSelection() {
var range = document.createRange(),
selection = window.getSelection();
that.$element[0].focus();
selection.removeAllRanges();
range.selectNodeContents(that.$element[0]);
selection.addRange(range);
2013-02-27 07:33:10 +00:00
setTimeout(function() {
selection.collapseToEnd();
});
}
2013-02-25 16:39:46 +00:00
return that;
};