oxjs/source/Ox.UI/js/Form/Ox.ArrayEditable.js
j 093edd57d0 - remove editItem from Ox.List
- use ArrayEditable for text too
2012-01-04 22:57:32 +05:30

212 lines
5.9 KiB
JavaScript

'use strict';
/*@
Ox.ArrayEditable <f> Array Editable Object
@*/
Ox.ArrayEditable = function(options, self) {
self = self || {};
var that = Ox.Element(options.editable === false ? {} : {
tooltip: 'Doubleclick to add ' + (options.itemName || 'item')
}, self)
.defaults({
editable: true,
itemName: 'item',
items: [],
position: -1,
selected: '',
type: 'input',
width: 256
})
.options(options || {})
.addClass('OxArrayEditable')
.css({width: self.options.width - 8 + 'px'}) // 2 x 4 px padding
.bindEvent({
anyclick: anyclick,
doubleclick: doubleclick,
key_delete: deleteItem,
key_enter: editItem,
key_escape: selectNone,
key_down: selectLast,
key_left: selectPrevious,
key_right: selectNext,
key_up: selectFirst
});
self.$items = [];
self.selected = getSelectedPosition();
renderItems();
function anyclick(e) {
var $target = $(e.target),
$parent = $target.parent(),
position = $parent.data('position');
!$target.is('.OxInput') && that.gainFocus();
if ($parent.is('.OxEditableElement')) {
selectItem(
e.metaKey && position == self.selected
? -1 : $parent.data('position')
);
} else {
selectNone();
}
}
function deleteItem() {
self.options.items.splice(self.selected, 1);
renderItems();
that.triggerEvent('delete', {
id: self.options.selected
});
}
function doubleclick(e) {
var $target = $(e.target),
$parent = $target.parent();
if ($parent.is('.OxEditableElement')) {
that.editItem(self.options.selected);
} else if(!$target.is('.OxInput')) {
that.triggerEvent('add');
}
}
function editItem() {
if (self.selected > -1) {
Ox.forEach(self.$items, function($item) {
if ($item.data('position') == self.selected) {
$item.triggerEvent('doubleclick');
return false;
}
});
}
}
function getSelectedId() {
return self.selected > -1 ? self.options.items[self.selected].id : '';
}
function getSelectedPosition() {
return Ox.getIndexById(self.options.items, self.options.selected);
}
function renderItems() {
that.empty();
self.options.items.forEach(function(item, i) {
i && self.options.type == 'input'
&& $('<span>')
.html(', ')
.appendTo(that);
self.$items[i] = Ox.Editable({
editable: item.editable,
format: function(value) {
return value || '&nbsp;'
},
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
})
.addClass(item.id == self.options.selected ? 'OxSelected' : '')
.data({position: i})
.bindEvent({
cancel: function(data) {
},
edit: function(data) {
that.triggerEvent('edit', data);
},
submit: function(data) {
submit(i, data.value);
}
})
.appendTo(that);
});
}
function selectFirst() {
self.selected > -1 && selectItem(0);
}
function selectItem(position) {
self.selected = position;
self.options.selected = getSelectedId();
that.selectItem(self.options.selected);
}
function selectLast() {
self.selected > -1 && selectItem(self.options.items.length - 1);
}
function selectNext() {
self.selected > -1
&& self.selected < self.options.items.length - 1
&& selectItem(self.selected + 1);
}
function selectNone() {
selectItem(-1);
}
function selectPrevious() {
self.selected > 0 && selectItem(self.selected - 1);
}
function submit(position, value) {
var item = self.options.items[position];
if (value === '') {
deleteItem();
} else {
item.value != value && that.triggerEvent('submit', {
id: item.id,
value: value
});
item.value = value;
}
}
self.setOption = function(key, value) {
if (key == 'items') {
renderItems();
} else if (key == 'selected') {
that.selectItem(value);
}
}
that.addItem = function(position, item) {
self.options.items.splice(position, 0, item);
renderItems();
//that.triggerEvent('add');
/*
self.values = Ox.filter(values, function(value) {
return value;
});
self.values.push('');
renderItems();
Ox.last(self.$items).triggerEvent('doubleclick');
*/
};
that.editItem = function(position) {
selectItem(position);
editItem();
};
that.selectItem = function(id) {
self.options.selected = id;
self.selected = getSelectedPosition();
that.find('.OxSelected').removeClass('OxSelected');
self.selected > -1 && self.$items[self.selected].addClass('OxSelected');
that.triggerEvent('select', {id: self.options.selected});
};
that.removeItem = function(position) {
};
return that;
};