0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

Editables: make placeholder not selectable; don't html-entity-decode value in input fields (makes <br> stay after subsequent edit, makes broken tags appear encoded)

Browse source
This commit is contained in:
rolux 2014-02-04 07:58:52 +00:00
parent 0d0999805c
commit b34a0cfeac
2 changed files with 15 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
source/Ox.UI/js/Form/Editable.js
View file

@ -93,7 +93,7 @@ Ox.Editable = function(options, self) {
self.css = {};
self.$value = Ox.Element(self.options.type == 'input' ? '<span>' : '<div>')
.addClass('OxValue OxSelectable')
.addClass('OxValue')
.html(formatValue())
.appendTo(that);
@ -188,13 +188,9 @@ Ox.Editable = function(options, self) {
}
function formatInputValue() {
return Ox.decodeHTMLEntities(
self.options.type == 'input'
return self.options.type == 'input'
? self.options.value
: self.options.value.replace(/<br\/?><br\/?>/g, '\n\n')
.replace(/&lt;/g, '&amp;lt;')
.replace(/&gt;/g, '&amp;gt;')
);
: self.options.value.replace(/<br\/?><br\/?>/g, '\n\n');
}
function formatTestValue() {
@ -222,6 +218,12 @@ Ox.Editable = function(options, self) {
value, self.options.highlight, 'OxHighlight', true
);
}
// timeout needed since formatValue is used when assinging self.$value
setTimeout(function() {
self.$value[
self.options.value === '' ? 'removeClass' : 'addClass'
]('OxSelectable');
})
return value;
}

13
source/Ox.UI/js/Form/EditableContent.js
View file

@ -43,7 +43,7 @@ Ox.EditableContent = function(options, self) {
!self.options.editing && that.html(formatValue());
}
})
.addClass('OxEditableContent OxSelectable')
.addClass('OxEditableContent')
.on({
blur: self.options.submitOnBlur ? submit : blur,
click: function(e) {
@ -159,13 +159,9 @@ Ox.EditableContent = function(options, self) {
}
function formatInputValue() {
return Ox.decodeHTMLEntities(
self.options.type == 'input'
return self.options.type == 'input'
? self.options.value
: self.options.value.replace(/<br\/?><br\/?>/g, '\n\n')
.replace(/&lt;/g, '&amp;lt;')
.replace(/&gt;/g, '&amp;gt;')
);
: self.options.value.replace(/<br\/?><br\/?>/g, '\n\n');
}
function formatValue() {
@ -182,6 +178,9 @@ Ox.EditableContent = function(options, self) {
value, self.options.highlight, 'OxHighlight', true
);
}
that[
self.options.value === '' ? 'removeClass' : 'addClass'
]('OxSelectable');
return value;
}