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

fix issues with type textarea editables

Browse source
This commit is contained in:
rolux 2012-01-16 12:39:16 +05:30
parent 8384fcc913
commit 0423800b05
4 changed files with 200 additions and 141 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
source/Ox.UI/css/Ox.UI.css
View file

@ -631,6 +631,9 @@ OxArrayEditable
padding: 4px;
border-top: 1px solid rgb(128, 128, 128);
}
.OxArrayEditable.OxArrayEditableTextarea textarea {
padding: 4px;
}
.OxArrayEditable.OxArrayEditableTextarea .OxEditableElement:first-child {
border-top: 0px
}

192
source/Ox.UI/js/Form/Ox.ArrayEditable.js
View file

@ -14,8 +14,11 @@ Ox.ArrayEditable = function(options, self) {
editable: true,
itemName: 'item',
items: [],
maxHeight: void 0,
placeholder: '',
position: -1,
selected: '',
separator: ',',
sort: [],
submitOnBlur: true,
type: 'input',
@ -23,7 +26,7 @@ Ox.ArrayEditable = function(options, self) {
})
.options(options || {})
.addClass('OxArrayEditable OxArrayEditable' + Ox.toTitleCase(self.options.type))
.css({width: self.options.width - 8 + 'px'}) // 2 x 4 px padding
.css({width: self.options.width - (self.options.type == 'input' ? 8 : 0) + 'px'}) // 2 x 4 px padding
.bindEvent({
anyclick: anyclick,
doubleclick: doubleclick,
@ -39,33 +42,35 @@ Ox.ArrayEditable = function(options, self) {
});
self.$items = [];
self.editing = false;
renderItems();
self.selected = getSelectedPosition();
function anyclick(e) {
Ox.print('SELF EDITING', self.editing)
var $target = $(e.target),
$parent = $target.parent(),
position = $parent.data('position');
//ignore clicks while editing
if (!$target.is('.OxInput')) {
if (self.selected > -1) {
//end editing but keep selected if clicked next to a keyword
if (self.editing || self.$items[self.selected].options('editing')) {
self.editing = false;
self.$items[self.selected].options({editing: false});
//deselect if not editing and not going to select antoher one
} else if (!$parent.is('.OxEditableElement')) {
selectNone();
}
}
//select if clicked on other editable element
Ox.print('BLURRED EDITING', self.blurred, self.editing)
if ($parent.is('.OxEditableElement')) {
// select another item
Ox.print('AAAAA')
selectItem(
e.metaKey && position == self.selected
? '' : $parent.data('position')
);
} else if (!self.blurred) {
// if there wasn't an active input element
if (self.editing) {
// blur if still in editing mode
that.blurItem();
} else {
// othewise deselect selected
selectNone();
}
}
that.gainFocus();
}
@ -78,6 +83,8 @@ Ox.ArrayEditable = function(options, self) {
that.triggerEvent('delete', {
id: self.options.selected
});
self.selected = -1;
self.options.selected = '';
}
}
@ -99,50 +106,87 @@ Ox.ArrayEditable = function(options, self) {
return Ox.getIndexById(self.options.items, self.options.selected);
}
function renderItems() {
function renderItems(blur) {
if (self.editing) {
self.options.items[getSelectedPosition()].value = that.find(self.options.type + ':visible').val();
}
that.empty();
sortItems();
self.options.items.forEach(function(item, i) {
i && self.options.type == 'input'
&& $('<span>')
.html(', ')
if (self.options.items.length == 0) {
Ox.Editable({
editable: false,
type: 'text',
value: self.options.placeholder
})
.addClass('OxPlaceholder')
.appendTo(that);
} else {
sortItems();
self.options.items.forEach(function(item, i) {
if (i && self.options.type == 'input') {
$('<span>')
.addClass('OxSeparator')
.html(self.options.separator + ' ')
.appendTo(that);
}
self.$items[i] = Ox.Editable({
blurred: self.editing && i == self.selected ? blur : false,
editable: self.options.editable && item.editable,
editing: self.editing && i == self.selected,
/*
format: function(value) {
return value || '&nbsp;'
},
*/
maxHeight: self.options.maxHeight,
submitOnBlur: self.options.submitOnBlur,
tooltip: 'Click to select' + (
item.editable ? ', doubleclick to edit' : ''
),
type: self.options.type,
value: item.value,
width: self.options.type == 'input' ? 0 : self.options.width - 9
})
.addClass(item.id == self.options.selected ? 'OxSelected' : '')
//.css(self.options.type == 'textarea' ? {padding: '4px'} : {})
.data({position: i})
.bindEvent({
blur: function(data) {
// fixme: remove data
that.gainFocus();
that.triggerEvent('blur', {
id: item.id,
value: data.value
});
self.blurred = true;
setTimeout(function() {
self.blurred = false;
}, 250);
},
cancel: function(data) {
self.editing = false;
that.gainFocus();
that.triggerEvent('blur', data);
},
change: function(data) {
that.triggerEvent('change', {
id: item.id,
value: data.value
});
},
edit: function(data) {
self.editing = true;
that.triggerEvent('edit', data);
},
submit: function(data) {
self.editing = false;
that.gainFocus();
submitItem(i, data.value);
}
})
.appendTo(that);
self.$items[i] = Ox.Editable({
editable: self.options.editable && item.editable,
format: function(value) {
return value || '&nbsp;'
},
submitOnBlur: self.options.submitOnBlur,
tooltip: 'Click to select' + (
item.editable ? ', doubleclick to edit' : ''
),
type: self.options.type,
value: item.value,
width: self.options.type == 'input' ? 0 : self.options.width - 8
})
.addClass(item.id == self.options.selected ? 'OxSelected' : '')
.data({position: i})
.bindEvent({
blur: function(data) {
that.gainFocus();
that.triggerEvent('blur', data);
},
cancel: function(data) {
that.gainFocus();
Ox.print("GAINING FOCUS!")
that.triggerEvent('blur', data);
},
edit: function(data) {
self.editing = true;
that.triggerEvent('edit', data);
},
submit: function(data) {
that.gainFocus();
submitItem(i, data.value);
}
})
.appendTo(that);
});
});
}
//self.editing && that.editItem(blur);
}
function selectFirst() {
@ -150,7 +194,6 @@ Ox.ArrayEditable = function(options, self) {
}
function selectItem(idOrPosition) {
Ox.print('???????', self.editing)
if (Ox.isString(idOrPosition)) {
self.options.selected = idOrPosition;
self.selected = getSelectedPosition();
@ -197,10 +240,8 @@ Ox.ArrayEditable = function(options, self) {
var item = self.options.items[position];
if (value === '') {
deleteItem();
} else if (item.value === value) {
that.triggerEvent('blur');
} else {
that.triggerEvent('submit', {
that.triggerEvent(item.value === value ? 'blur' : 'submit', {
id: item.id,
value: value
});
@ -224,7 +265,7 @@ Ox.ArrayEditable = function(options, self) {
self.setOption = function(key, value) {
if (key == 'items') {
renderItems();
renderItems(true);
} else if (key == 'selected') {
selectItem(value);
} else if (key == 'sort') {
@ -242,6 +283,7 @@ Ox.ArrayEditable = function(options, self) {
self.options.items.splice(position, 0, item);
renderItems();
}
return that;
//that.triggerEvent('add');
/*
self.values = Ox.filter(values, function(value) {
@ -259,34 +301,44 @@ Ox.ArrayEditable = function(options, self) {
self.$items[self.selected].options({editing: false});
} else {
*/
self.$items.forEach(function($item) {
$item.options({editing: false});
});
self.editing = false;
self.$items.forEach(function($item) {
$item.options({editing: false});
});
//}
return that;
};
that.editItem = function() {
Ox.print('AE EDIT ITEM')
if (self.options.editable && self.options.selected) {
Ox.forEach(self.$items, function($item) {
if ($item.data('position') == self.selected) {
Ox.print('DBLCLICK')
$item.triggerEvent('doubleclick');
return false;
}
});
self.editing = true;
self.$items[self.selected].options({editing: true});
}
return that;
};
that.reloadItems = function() {
renderItems();
return that;
};
that.removeItem = function(position) {
if (self.options.editable) {
}
return that;
};
/*
that.submitItem = function() {
if (self.editing) {
self.editing = false;
self.$items[self.selected].options({editing: false});
}
}
*/
return that;
};

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

@ -19,11 +19,13 @@ Ox.Editable = function(options, self) {
tooltip: options.tooltip
}, self)
.defaults({
blurred: false,
clickLink: null,
editable: true,
editing: false,
format: null,
height: 0,
maxHeight: void 0,
placeholder: '',
submitOnBlur: true,
tooltip: '',
@ -62,13 +64,22 @@ Ox.Editable = function(options, self) {
.appendTo(that);
if (self.options.editing) {
// edit will toggle self.options.editing
self.options.editing = false;
edit();
// 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() {
that.triggerEvent('blur');
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() {
@ -80,55 +91,29 @@ Ox.Editable = function(options, self) {
that.triggerEvent('cancel', {value: self.options.value});
}
function change(event) {
var height, width;
self.options.value = event.value;
self.$value.html(formatValue());
self.$test.html(formatTestValue());
//height = self.options.height || Ox.limit(self.$test.height() + 2, self.minHeight, self.maxHeight);
height = self.options.height || Math.max(self.$test.height() + 2, self.minHeight);
width = self.options.width || Ox.limit(self.$test.width() + 2, self.minWidth, self.maxWidth);
Ox.Log('Form', self.options.width, self.$test.html(), self.$test.width(), self.$test.height(), 'wxh', width, height)
if (self.options.type == 'input') {
self.$input.options({
width: width
});
self.$input.find('input').css({width: width + 'px'});
} else {
self.$input.options({
height: height,
width: width
});
self.$input.find('textarea').css({
height: height + 'px',
width: width + 'px'
});
}
/*
that.triggerEvent('change', {
value: event.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.minWidth = 8;
self.maxWidth = that.parent().width();
self.minHeight = 14;
self.maxHeight = that.parent().height();
height = self.options.height || self.$value.height();
width = self.options.width || self.$value.width();
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())
.hide()
.css({background: 'rgb(192, 192, 192)'})
.appendTo(that.$element);
self.$input = Ox.Input({
changeOnKeypress: true,
@ -149,29 +134,23 @@ Ox.Editable = function(options, self) {
});
self.$input.find('input').css(self.css);
}
self.$input.options({
width: width,
height: height
})
.show();
if (self.options.type == 'input') {
self.$input.find('input').css({
height: height + 'px',
width: width + 'px'
});
} else {
self.$input.find('textarea').css({
height: height + 'px',
width: width + 'px'
});
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');
}
// fixme: why can't this be chained?
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() {
@ -184,7 +163,7 @@ Ox.Editable = function(options, self) {
function formatTestValue() {
return self.options.type == 'input'
? self.options.value.replace(/ /g, '&nbsp;')
? Ox.encodeHTML(self.options.value) //.replace(/ /g, '&nbsp;')
: Ox.encodeHTML(self.options.value || '&nbsp;')
.replace(/\n$/, '\n&nbsp;')
.replace(/\n/g, '<br/>')
@ -195,18 +174,46 @@ Ox.Editable = function(options, self) {
}
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 = Ox.parseHTML(self.$input.value());
//self.options.value = parseValue();
self.$input.value(formatInputValue()).hide();
self.$test.html(formatTestValue());
self.$value.html(formatValue()).show();

11
source/Ox.UI/js/Form/Ox.Input.js
View file

@ -114,13 +114,12 @@ Ox.Input = function(options, self) {
height: self.options.height + 'px'
} : {})
)
.bindEvent(Ox.extend(self.options.type == 'textarea' ? {
key_shift_enter: submit
} : {
.bindEvent(Ox.extend(self.options.type == 'input' ? {
key_enter: submit
}, {
} : {}, {
key_control_v: paste,
key_escape: cancel
key_escape: cancel,
key_shift_enter: submit
}));
if (
@ -1942,5 +1941,3 @@ Ox.Range_ = function(options, self) {
return that;
};