255 lines
8.4 KiB
JavaScript
255 lines
8.4 KiB
JavaScript
'use strict';
|
|
/*@
|
|
Ox.Editable <f> Editable element
|
|
() -> <f> Input Element
|
|
(options) -> <f> Input Element
|
|
(options, self) -> <f> Input Element
|
|
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 || {};
|
|
var that = Ox.Element({
|
|
element: options.type == 'textarea' ? '<div>' : '<span>',
|
|
tooltip: options.tooltip
|
|
}, self)
|
|
.defaults({
|
|
blurred: false,
|
|
clickLink: null,
|
|
editable: true,
|
|
editing: false,
|
|
format: null,
|
|
height: 0,
|
|
maxHeight: void 0,
|
|
placeholder: '',
|
|
submitOnBlur: true,
|
|
tooltip: '',
|
|
value: '',
|
|
width: 0,
|
|
type: 'input'
|
|
})
|
|
.options(options || {})
|
|
.addClass('OxEditableElement')
|
|
.bind({
|
|
click: function() {
|
|
return false;
|
|
}
|
|
})
|
|
.bindEvent({
|
|
doubleclick: edit,
|
|
singleclick: function(e) {
|
|
if ($(e.target).is('a')) {
|
|
if (self.options.clickLink) {
|
|
self.options.clickLink(e);
|
|
} else {
|
|
document.location.href = $(e.target).attr('href');
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
self.options.value = self.options.value.toString();
|
|
|
|
self.css = {};
|
|
self.$value = Ox.Element(self.options.type == 'input' ? '<span>' : '<div>')
|
|
.addClass('OxValue')
|
|
//.css({background: 'red'})
|
|
.html(formatValue())
|
|
//[self.options.editing ? 'hide' : 'show']()
|
|
.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);
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
function cancel() {
|
|
self.options.editing = false;
|
|
self.options.value = self.originalValue;
|
|
self.$input.value(formatInputValue()).hide();
|
|
self.$test.html(formatTestValue());
|
|
self.$value.html(formatValue()).show();
|
|
that.triggerEvent('cancel', {value: self.options.value});
|
|
}
|
|
|
|
function change(data) {
|
|
setTimeout(function() {
|
|
var height, width;
|
|
self.options.value = data.value;
|
|
self.$value.html(formatValue());
|
|
self.$test.html(formatTestValue());
|
|
setSizes();
|
|
}, 25);
|
|
}
|
|
|
|
function edit() {
|
|
Ox.print('E EDIT! editable editing', self.options.editable, self.options.editing)
|
|
var height, width;
|
|
if (self.options.editable && !self.options.editing) {
|
|
self.options.editing = true;
|
|
self.originalValue = self.options.value;
|
|
self.$value.hide();
|
|
Ox.Log('Form', 'H:::', self.options.height, height)
|
|
if (!self.$test) {
|
|
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.$input = Ox.Input({
|
|
changeOnKeypress: true,
|
|
element: self.options.type == 'input' ? '<span>' : '<div>',
|
|
style: 'square',
|
|
type: self.options.type,
|
|
value: formatInputValue(),
|
|
})
|
|
.css(self.css)
|
|
.bindEvent({
|
|
cancel: cancel,
|
|
change: change,
|
|
submit: submit
|
|
})
|
|
.appendTo(that.$element);
|
|
self.$input.bindEvent({
|
|
blur: self.options.submitOnBlur ? submit : blur
|
|
});
|
|
self.$input.find('input').css(self.css);
|
|
}
|
|
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.$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');
|
|
}
|
|
}
|
|
self.options.blurred = false;
|
|
}
|
|
|
|
function formatInputValue() {
|
|
return Ox.decodeHTML(
|
|
self.options.type == 'input'
|
|
? self.options.value
|
|
: self.options.value.replace(/<br\/?><br\/?>/g, '\n\n')
|
|
);
|
|
}
|
|
|
|
function formatTestValue() {
|
|
return self.options.type == 'input'
|
|
? Ox.encodeHTML(self.options.value) //.replace(/ /g, ' ')
|
|
: Ox.encodeHTML(self.options.value || ' ')
|
|
.replace(/\n$/, '\n ')
|
|
.replace(/\n/g, '<br/>')
|
|
/*
|
|
: Ox.parseHTML(self.options.value || ' ')
|
|
.replace(/(\n|<br\/?>)$/, '<br/> ');
|
|
*/
|
|
}
|
|
|
|
function formatValue() {
|
|
Ox.print('HUH?', self.options.value, self.options.format);
|
|
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)
|
|
} else if (self.options.type == 'input') {
|
|
Ox.print('HELLO??')
|
|
value = Ox.encodeHTML(self.options.value);
|
|
}
|
|
return value;
|
|
}
|
|
|
|
function parseValue() {
|
|
return self.options.type == 'input'
|
|
? Ox.encodeHTML(self.$input.value())
|
|
: Ox.parseHTML(self.$input.value());
|
|
}
|
|
|
|
function setSizes() {
|
|
var height, width;
|
|
self.$test.show();
|
|
height = self.options.height || Ox.limit(self.$test.height(), self.minHeight, self.maxHeight);
|
|
width = self.options.width || Ox.limit(self.$test.width(), self.minWidth, self.maxWidth);
|
|
Ox.print('stH', self.$test.height(), self.options.value)
|
|
self.$test.hide();
|
|
self.$input.options({
|
|
width: width,
|
|
height: height
|
|
})
|
|
//.show();
|
|
self.$input.find(self.options.type).css({
|
|
height: height + 'px',
|
|
width: width + 'px'
|
|
});
|
|
}
|
|
|
|
function submit() {
|
|
self.options.editing = false;
|
|
//self.options.value = parseValue();
|
|
self.$input.value(formatInputValue()).hide();
|
|
self.$test.html(formatTestValue());
|
|
self.$value.html(formatValue()).show();
|
|
that.$tooltip && that.$tooltip.options({title: self.options.tooltip});
|
|
that.triggerEvent('submit', {
|
|
value: self.options.value
|
|
});
|
|
}
|
|
|
|
self.setOption = function(key, value) {
|
|
if (key == 'editing') {
|
|
if (value) {
|
|
// edit will toggle self.options.editing
|
|
self.options.editing = false;
|
|
edit();
|
|
} else {
|
|
submit();
|
|
}
|
|
} else if (key == 'height' || key == 'width') {
|
|
var css = {};
|
|
css[key] = value + 'px';
|
|
self.$test && self.$test.css(css);
|
|
self.$input && self.$input.css(css);
|
|
self.$input && self.$input.find(self.options.type).css(css);
|
|
}
|
|
};
|
|
|
|
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;
|
|
};
|
|
|
|
return that;
|
|
|
|
};
|