simplify Ox.EditableContent, update CSS
This commit is contained in:
parent
dfe316b76a
commit
feae953311
3 changed files with 28 additions and 35 deletions
|
@ -913,7 +913,7 @@ OxEditableContent
|
||||||
--------------------------------------------------------------------------------
|
--------------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.OxEditableContent > .OxEditableContentInput:focus {
|
.OxEditableContent {
|
||||||
outline: none;
|
outline: none;
|
||||||
-moz-user-select: text;
|
-moz-user-select: text;
|
||||||
-o-user-select: text;
|
-o-user-select: text;
|
||||||
|
|
|
@ -456,7 +456,7 @@ Forms
|
||||||
border-top-color: $bodyBorder;
|
border-top-color: $bodyBorder;
|
||||||
}
|
}
|
||||||
|
|
||||||
.$themeClass .OxEditableContent > .OxEditableContentInput:focus {
|
.$themeClass .OxEditableContent.OxEditableContentInput:focus {
|
||||||
background-image: -moz-linear-gradient(top, $inputGradient);
|
background-image: -moz-linear-gradient(top, $inputGradient);
|
||||||
background-image: -o-linear-gradient(top, $inputGradient);
|
background-image: -o-linear-gradient(top, $inputGradient);
|
||||||
background-image: -webkit-linear-gradient(top, $inputGradient);
|
background-image: -webkit-linear-gradient(top, $inputGradient);
|
||||||
|
@ -470,7 +470,7 @@ Forms
|
||||||
.$themeClass .OxEditableElement .OxHighlight, {
|
.$themeClass .OxEditableElement .OxHighlight, {
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
.$themeClass .OxEditableContent.OxPlaceholder .OxValue,
|
.$themeClass .OxEditableContent.OxPlaceholder,
|
||||||
.$themeClass .OxEditableElement.OxPlaceholder .OxValue {
|
.$themeClass .OxEditableElement.OxPlaceholder .OxValue {
|
||||||
color: $inputPlaceholderColor;
|
color: $inputPlaceholderColor;
|
||||||
}
|
}
|
||||||
|
|
|
@ -30,6 +30,7 @@ Ox.EditableContent = function(options, self) {
|
||||||
})
|
})
|
||||||
.addClass('OxEditableContent')
|
.addClass('OxEditableContent')
|
||||||
.on({
|
.on({
|
||||||
|
blur: self.options.submitOnBlur ? submit : blur,
|
||||||
click: function(e) {
|
click: function(e) {
|
||||||
var $target = $(e.target);
|
var $target = $(e.target);
|
||||||
if (!e.shiftKey && ($target.is('a') || ($target = $target.parents('a')).length)) {
|
if (!e.shiftKey && ($target.is('a') || ($target = $target.parents('a')).length)) {
|
||||||
|
@ -42,18 +43,7 @@ Ox.EditableContent = function(options, self) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
}
|
},
|
||||||
})
|
|
||||||
.bindEvent({
|
|
||||||
doubleclick: edit
|
|
||||||
});
|
|
||||||
|
|
||||||
self.options.value = self.options.value.toString();
|
|
||||||
|
|
||||||
self.$value = Ox.Element(self.options.type == 'span' ? '<span>' : '<div>')
|
|
||||||
.html(formatValue())
|
|
||||||
.on({
|
|
||||||
blur: self.options.submitOnBlur ? submit : blur,
|
|
||||||
keydown: function(e) {
|
keydown: function(e) {
|
||||||
if (self.options.editing) {
|
if (self.options.editing) {
|
||||||
if (e.keyCode == 13 && self.options.type == 'span') {
|
if (e.keyCode == 13 && self.options.type == 'span') {
|
||||||
|
@ -63,10 +53,22 @@ Ox.EditableContent = function(options, self) {
|
||||||
cancel();
|
cancel();
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
/*
|
||||||
|
setTimeout(function() {
|
||||||
|
Ox.print('TEXT', that.text())
|
||||||
|
Ox.print('HTML', that.html())
|
||||||
|
});
|
||||||
|
*/
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.appendTo(that);
|
.bindEvent({
|
||||||
|
doubleclick: edit
|
||||||
|
});
|
||||||
|
|
||||||
|
self.options.value = self.options.value.toString();
|
||||||
|
|
||||||
|
that.html(formatValue());
|
||||||
|
|
||||||
function blur() {
|
function blur() {
|
||||||
Ox.print('BLUR!')
|
Ox.print('BLUR!')
|
||||||
|
@ -77,9 +79,8 @@ Ox.EditableContent = function(options, self) {
|
||||||
Ox.print('CANCEL!')
|
Ox.print('CANCEL!')
|
||||||
that.loseFocus();
|
that.loseFocus();
|
||||||
self.options.editing = false;
|
self.options.editing = false;
|
||||||
self.$value
|
that.removeClass('OxEditableContentInput')
|
||||||
.attr({contenteditable: false})
|
.attr({contenteditable: false})
|
||||||
.removeClass('OxEditableContentInput')
|
|
||||||
.html(formatValue());
|
.html(formatValue());
|
||||||
that.triggerEvent('cancel', {value: self.options.value});
|
that.triggerEvent('cancel', {value: self.options.value});
|
||||||
}
|
}
|
||||||
|
@ -87,15 +88,14 @@ Ox.EditableContent = function(options, self) {
|
||||||
|
|
||||||
function edit() {
|
function edit() {
|
||||||
if (self.options.editable && !self.options.editing) {
|
if (self.options.editable && !self.options.editing) {
|
||||||
Ox.print('EDIT!')
|
|
||||||
var value = formatInputValue();
|
var value = formatInputValue();
|
||||||
self.$value
|
that.addClass('OxEditableContentInput')
|
||||||
.addClass('OxEditableContentInput')
|
.removeClass('OxPlaceholder')
|
||||||
.attr({contenteditable: true});
|
.attr({contenteditable: true});
|
||||||
if (value) {
|
if (value) {
|
||||||
self.$value.text(value);
|
that.text(value);
|
||||||
} else {
|
} else {
|
||||||
self.$value.html(' ');
|
that.html(' ');
|
||||||
}
|
}
|
||||||
self.options.editing = true;
|
self.options.editing = true;
|
||||||
that.gainFocus();
|
that.gainFocus();
|
||||||
|
@ -130,7 +130,7 @@ Ox.EditableContent = function(options, self) {
|
||||||
|
|
||||||
function parseValue() {
|
function parseValue() {
|
||||||
var value = Ox.clean(
|
var value = Ox.clean(
|
||||||
self.$value.text().replace(/\n\n+/g, '\0')
|
that.text().replace(/\n\n+/g, '\0')
|
||||||
).replace(/\0/g, '\n\n').trim();
|
).replace(/\0/g, '\n\n').trim();
|
||||||
return (
|
return (
|
||||||
self.options.type == 'span'
|
self.options.type == 'span'
|
||||||
|
@ -148,14 +148,13 @@ Ox.EditableContent = function(options, self) {
|
||||||
Ox.print('SUBMIT!')
|
Ox.print('SUBMIT!')
|
||||||
that.loseFocus();
|
that.loseFocus();
|
||||||
self.options.editing = false;
|
self.options.editing = false;
|
||||||
self.options.value = self.$value.text();
|
self.options.value = that.text();
|
||||||
if (self.options.value.charCodeAt(0) == 160) {
|
if (self.options.value.charCodeAt(0) == 160) {
|
||||||
// remove nbsp
|
// remove nbsp
|
||||||
self.options.value = self.options.value.substr(1);
|
self.options.value = self.options.value.substr(1);
|
||||||
}
|
}
|
||||||
self.$value
|
that.removeClass('OxEditableContentInput')
|
||||||
.attr({contenteditable: false})
|
.attr({contenteditable: false})
|
||||||
.removeClass('OxEditableContentInput')
|
|
||||||
.html(formatValue());
|
.html(formatValue());
|
||||||
that.triggerEvent('submit', {value: self.options.value});
|
that.triggerEvent('submit', {value: self.options.value});
|
||||||
}
|
}
|
||||||
|
@ -163,11 +162,11 @@ Ox.EditableContent = function(options, self) {
|
||||||
|
|
||||||
function updateSelection() {
|
function updateSelection() {
|
||||||
var range, selection;
|
var range, selection;
|
||||||
self.$value[0].focus();
|
that.$element[0].focus();
|
||||||
selection = window.getSelection();
|
selection = window.getSelection();
|
||||||
selection.removeAllRanges();
|
selection.removeAllRanges();
|
||||||
range = document.createRange();
|
range = document.createRange();
|
||||||
range.selectNodeContents(self.$value[0]);
|
range.selectNodeContents(that.$element[0]);
|
||||||
selection.addRange(range);
|
selection.addRange(range);
|
||||||
if (self.options.type == 'div') {
|
if (self.options.type == 'div') {
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
|
@ -176,12 +175,6 @@ Ox.EditableContent = function(options, self) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
that.css = function(css) {
|
|
||||||
that.$element.css(css);
|
|
||||||
self.$value.css(css);
|
|
||||||
return that;
|
|
||||||
}
|
|
||||||
|
|
||||||
return that;
|
return that;
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in a new issue