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

272 lines
9 KiB
JavaScript
Raw Normal View History

2011-11-05 16:46:53 +00:00
'use strict';
2012-05-21 10:38:18 +00:00
2011-08-12 21:01:19 +00:00
/*@
2012-05-31 10:32:54 +00:00
Ox.Editable <f> Editable element
([options[, self]]) -> <o:Ox.Element> Input Element
2011-08-12 21:01:19 +00:00
options <o> Options object
editing <b|false> If true, loads in editing state
format <f|null> Format function
(value) -> <s> Formatted value
value <s> Input value
self <o> Shared private variable
@*/
Ox.Editable = function(options, self) {
self = self || {};
2011-10-24 15:58:51 +00:00
var that = Ox.Element({
element: options.type == 'textarea' ? '<div>' : '<span>',
2011-10-24 15:58:51 +00:00
tooltip: options.tooltip
}, self)
2011-08-12 21:01:19 +00:00
.defaults({
blurred: false,
clickLink: null,
2011-10-24 15:58:51 +00:00
editable: true,
2011-08-12 21:01:19 +00:00
editing: false,
format: null,
height: 0,
highlight: null,
maxHeight: void 0,
2011-10-25 14:40:02 +00:00
placeholder: '',
submitOnBlur: true,
2011-10-24 15:58:51 +00:00
tooltip: '',
2011-08-12 21:01:19 +00:00
value: '',
2011-10-27 13:13:28 +00:00
width: 0,
2011-08-12 21:01:19 +00:00
type: 'input'
})
.options(options || {})
2012-05-28 19:35:41 +00:00
.update({
editing: function() {
if (self.options.editing) {
// edit will toggle self.options.editing
self.options.editing = false;
edit();
} else {
submit();
}
},
height: function() {
setCSS({height: self.options.height + 'px'});
},
width: function() {
setCSS({width: self.options.width + 'px'});
},
highlight: function() {
self.$value.html(formatValue());
},
value: function() {
self.$value.html(formatValue());
}
})
.addClass('OxEditableElement' + (self.options.editable ? ' OxEditable' : ''))
2012-05-28 14:06:22 +00:00
.on({
click: function() {
return false;
2011-10-24 15:58:51 +00:00
}
})
2011-08-12 21:01:19 +00:00
.bindEvent({
2011-10-24 15:58:51 +00:00
doubleclick: edit,
singleclick: function(e) {
2012-01-27 14:29:11 +00:00
var $target = $(e.target);
if ($target.is('a') || ($target = $target.parents('a')).length) {
if (self.options.clickLink) {
2012-01-17 15:43:46 +00:00
e.target = $target[0];
self.options.clickLink(e);
} else {
2012-01-17 15:43:46 +00:00
document.location.href = $target.attr('href');
}
}
2011-10-24 15:58:51 +00:00
}
2011-08-12 21:01:19 +00:00
});
2011-08-15 16:41:54 +00:00
self.options.value = self.options.value.toString();
self.css = {};
2011-08-12 21:01:19 +00:00
self.$value = Ox.Element(self.options.type == 'input' ? '<span>' : '<div>')
.addClass('OxValue')
2011-10-27 08:47:31 +00:00
.html(formatValue())
2011-08-12 21:01:19 +00:00
.appendTo(that);
if (self.options.editing) {
// need timeout so that when determining height
// the element is actually in the DOM
setTimeout(function() {
// edit will toggle self.options.editing
self.options.editing = false;
edit();
}, 0);
2011-08-12 21:01:19 +00:00
}
function blur(data) {
self.options.value = parseValue();
if (self.options.value !== self.originalValue) {
self.originalValue = self.options.value;
that.triggerEvent('change', {value: self.options.value});
}
that.triggerEvent('blur', data);
2012-01-09 20:25:38 +00:00
}
2011-08-12 21:01:19 +00:00
function cancel() {
2012-01-12 19:04:32 +00:00
self.options.editing = false;
2012-01-16 11:22:34 +00:00
that.removeClass('OxEditing');
2011-10-27 13:13:28 +00:00
self.options.value = self.originalValue;
2011-12-21 15:33:52 +00:00
self.$input.value(formatInputValue()).hide();
2011-10-27 13:13:28 +00:00
self.$test.html(formatTestValue());
self.$value.html(formatValue()).show();
2012-01-03 10:25:15 +00:00
that.triggerEvent('cancel', {value: self.options.value});
2011-08-12 21:01:19 +00:00
}
function change(data) {
2012-01-16 11:22:34 +00:00
self.options.value = parseValue(data.value);
self.$value.html(formatValue());
self.$test.html(formatTestValue());
setSizes();
2011-08-12 21:01:19 +00:00
}
function edit() {
var height, width;
2011-10-24 15:58:51 +00:00
if (self.options.editable && !self.options.editing) {
2011-11-06 12:26:12 +00:00
self.options.editing = true;
2012-01-16 11:22:34 +00:00
that.addClass('OxEditing');
2011-10-27 13:13:28 +00:00
self.originalValue = self.options.value;
2012-01-16 11:22:34 +00:00
if (!self.$input) {
self.$input = Ox.Input({
changeOnKeypress: true,
element: self.options.type == 'input' ? '<span>' : '<div>',
style: 'square',
type: self.options.type,
2012-05-26 15:48:19 +00:00
value: formatInputValue()
})
.css(self.css)
.bindEvent({
2012-01-16 11:22:34 +00:00
blur: self.options.submitOnBlur ? submit : blur,
cancel: cancel,
change: change,
2012-02-16 16:35:59 +00:00
insert: function(data) {
that.triggerEvent('insert', data);
},
submit: submit
})
.appendTo(that.$element);
self.$input.find('input').css(self.css);
2012-01-16 11:22:34 +00:00
self.$test = self.$value.$element.clone()
.css(Ox.extend({display: 'inline-block'}, self.css))
.html(formatTestValue())
.css({background: 'rgb(192, 192, 192)'})
.appendTo(that.$element);
}
self.minWidth = 8;
self.maxWidth = that.parent().width();
self.minHeight = 13;
self.maxHeight = self.options.type == 'input'
? self.minHeight
: self.options.maxHeight || that.parent().height();
setSizes();
self.$value.hide();
self.$input.show();
if (!self.options.blurred) {
setTimeout(function() {
self.$input.focusInput(self.options.type == 'input');
}, 0);
that.$tooltip && that.$tooltip.options({title: ''});
that.triggerEvent('edit');
2011-08-12 21:01:19 +00:00
}
} else if (!self.options.editable) {
that.triggerEvent('open');
2011-08-12 21:01:19 +00:00
}
self.options.blurred = false;
2011-08-12 21:01:19 +00:00
}
2011-10-27 08:47:31 +00:00
function formatInputValue() {
return Ox.decodeHTMLEntities(
self.options.type == 'input'
? self.options.value
: self.options.value.replace(/<br\/?><br\/?>/g, '\n\n')
);
2011-08-15 16:41:54 +00:00
}
2011-10-27 08:47:31 +00:00
function formatTestValue() {
var value = Ox.encodeHTMLEntities(self.$input.options('value'));
2012-01-16 11:22:34 +00:00
return !value ? '&nbsp;'
: self.options.type == 'input'
? value.replace(/ /g, '&nbsp;')
: value.replace(/\n$/, '\n ')
.replace(/ /g, ' &nbsp;')
.replace(/(^ | $)/, '&nbsp;')
.replace(/\n/g, '<br/>')
2011-10-27 08:47:31 +00:00
}
function formatValue() {
2011-11-03 16:53:29 +00:00
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) {
2012-06-03 08:41:18 +00:00
value = Ox.highlight(
value, self.options.highlight, 'OxHighlight', true
);
}
2011-11-03 16:53:29 +00:00
return value;
2011-10-27 08:47:31 +00:00
}
function parseValue() {
2012-01-16 11:22:34 +00:00
var value = Ox.clean(
self.$input.value().replace(/\n\n+/g, '\0')
).replace(/\0/g, '\n\n').trim();
return (self.options.type == 'input'
? Ox.encodeHTMLEntities(value)
: Ox.sanitizeHTML(value)
2012-01-16 11:22:34 +00:00
);
}
2012-05-28 19:35:41 +00:00
function setCSS(css) {
self.$test && self.$test.css(css);
self.$input && self.$input.css(css);
self.$input && self.$input.find(self.options.type).css(css);
}
function setSizes() {
var height, width;
self.$test.css({display: 'inline-block'});
height = self.options.height || Ox.limit(self.$test.height(), self.minHeight, self.maxHeight);
width = self.$test.width();
//+Ox.UI.SCROLLBAR_SIZE to prevent scrollbar from showing up
if (self.options.type == 'textarea') {
width += Ox.UI.SCROLLBAR_SIZE;
}
width = self.options.width || Ox.limit(width, self.minWidth, self.maxWidth);
self.$test.css({display: 'none'});
self.$input.options({
width: width,
height: height
});
self.$input.find(self.options.type).css({
height: height + 'px',
width: width + 'px'
});
}
2011-10-27 08:47:31 +00:00
function submit() {
2011-11-06 12:26:12 +00:00
self.options.editing = false;
2012-01-16 11:22:34 +00:00
that.removeClass('OxEditing');
2011-12-21 15:33:52 +00:00
self.$input.value(formatInputValue()).hide();
2011-10-27 13:13:28 +00:00
self.$test.html(formatTestValue());
self.$value.html(formatValue()).show();
that.$tooltip && that.$tooltip.options({title: self.options.tooltip});
2012-01-16 11:22:34 +00:00
that.triggerEvent('submit', {value: self.options.value});
2011-08-12 21:01:19 +00:00
}
that.css = function(css) {
self.css = css;
that.$element.css(css);
self.$value.css(css);
self.$test && self.$test.css(css);
self.$input && self.$input.css(css);
return that;
2011-08-12 21:01:19 +00:00
};
return that;
};