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.css = {};
self.$value = Ox.Element(self.options.type == 'input' ? '<span>' : '<div>') self.$value = Ox.Element(self.options.type == 'input' ? '<span>' : '<div>')
.addClass('OxValue OxSelectable') .addClass('OxValue')
.html(formatValue()) .html(formatValue())
.appendTo(that); .appendTo(that);
@ -188,13 +188,9 @@ Ox.Editable = function(options, self) {
} }
function formatInputValue() { function formatInputValue() {
return Ox.decodeHTMLEntities( return self.options.type == 'input'
self.options.type == 'input'
? self.options.value ? self.options.value
: self.options.value.replace(/<br\/?><br\/?>/g, '\n\n') : self.options.value.replace(/<br\/?><br\/?>/g, '\n\n');
.replace(/&lt;/g, '&amp;lt;')
.replace(/&gt;/g, '&amp;gt;')
);
} }
function formatTestValue() { function formatTestValue() {
@ -222,6 +218,12 @@ Ox.Editable = function(options, self) {
value, self.options.highlight, 'OxHighlight', true 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; 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()); !self.options.editing && that.html(formatValue());
} }
}) })
.addClass('OxEditableContent OxSelectable') .addClass('OxEditableContent')
.on({ .on({
blur: self.options.submitOnBlur ? submit : blur, blur: self.options.submitOnBlur ? submit : blur,
click: function(e) { click: function(e) {
@ -159,13 +159,9 @@ Ox.EditableContent = function(options, self) {
} }
function formatInputValue() { function formatInputValue() {
return Ox.decodeHTMLEntities( return self.options.type == 'input'
self.options.type == 'input'
? self.options.value ? self.options.value
: self.options.value.replace(/<br\/?><br\/?>/g, '\n\n') : self.options.value.replace(/<br\/?><br\/?>/g, '\n\n');
.replace(/&lt;/g, '&amp;lt;')
.replace(/&gt;/g, '&amp;gt;')
);
} }
function formatValue() { function formatValue() {
@ -182,6 +178,9 @@ Ox.EditableContent = function(options, self) {
value, self.options.highlight, 'OxHighlight', true value, self.options.highlight, 'OxHighlight', true
); );
} }
that[
self.options.value === '' ? 'removeClass' : 'addClass'
]('OxSelectable');
return value; return value;
} }