forked from 0x2620/oxjs
fix issues with type textarea editables
This commit is contained in:
rolux
parent
8384fcc913
commit
0423800b05
4 changed files with 200 additions and 141 deletions
|
|
@ -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 || ' '
|
||||
},
|
||||
*/
|
||||
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 || ' '
|
||||
},
|
||||
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;
|
||||
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue