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

290 lines
9 KiB
JavaScript
Raw Normal View History

2012-01-03 10:25:15 +00:00
'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)
2012-01-03 10:25:15 +00:00
.defaults({
editable: true,
itemName: 'item',
items: [],
position: -1,
selected: '',
2012-01-11 11:11:13 +00:00
sort: [],
2012-01-09 20:25:38 +00:00
submitOnBlur: true,
type: 'input',
2012-01-03 10:25:15 +00:00
width: 256
})
.options(options || {})
2012-01-10 14:49:28 +00:00
.addClass('OxArrayEditable OxArrayEditable' + Ox.toTitleCase(self.options.type))
2012-01-03 10:25:15 +00:00
.css({width: self.options.width - 8 + 'px'}) // 2 x 4 px padding
.bindEvent({
anyclick: anyclick,
doubleclick: doubleclick,
key_delete: deleteItem,
2012-01-12 10:39:05 +00:00
key_enter: function() {
that.editItem();
},
key_escape: selectNone,
2012-01-10 14:49:28 +00:00
key_down: self.options.type == 'input' ? selectLast : selectNext,
key_left: self.options.type == 'input' ? selectPrevious : selectFirst,
key_right: self.options.type == 'input' ? selectNext : selectLast,
key_up: self.options.type == 'input' ? selectFirst : selectPrevious
2012-01-03 10:25:15 +00:00
});
self.$items = [];
renderItems();
2012-01-11 11:54:58 +00:00
self.selected = getSelectedPosition();
function anyclick(e) {
var $target = $(e.target),
$parent = $target.parent(),
position = $parent.data('position');
2012-01-09 20:25:38 +00:00
//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
if ($parent.is('.OxEditableElement')) {
selectItem(
e.metaKey && position == self.selected
? '' : $parent.data('position')
);
}
that.gainFocus();
}
}
function deleteItem() {
2012-01-12 19:04:32 +00:00
if (self.options.editable) {
self.options.items.splice(self.selected, 1);
renderItems();
that.triggerEvent('delete', {
id: self.options.selected
});
}
}
2012-01-03 10:25:15 +00:00
function doubleclick(e) {
var $target = $(e.target),
$parent = $target.parent();
if ($parent.is('.OxEditableElement')) {
2012-01-12 10:39:05 +00:00
that.editItem();
2012-01-12 19:04:32 +00:00
} else if (!$target.is('.OxInput')) {
that.triggerEvent('add');
2012-01-03 10:25:15 +00:00
}
}
function getSelectedId() {
return self.selected > -1 ? self.options.items[self.selected].id : '';
}
function getSelectedPosition() {
return Ox.getIndexById(self.options.items, self.options.selected);
}
2012-01-03 10:25:15 +00:00
function renderItems() {
that.empty();
2012-01-11 11:54:58 +00:00
sortItems();
self.options.items.forEach(function(item, i) {
i && self.options.type == 'input'
&& $('<span>')
.html(', ')
.appendTo(that);
2012-01-03 10:25:15 +00:00
self.$items[i] = Ox.Editable({
2012-01-12 19:04:32 +00:00
editable: self.options.editable && item.editable,
2012-01-03 10:25:15 +00:00
format: function(value) {
return value || '&nbsp;'
},
2012-01-09 20:25:38 +00:00
submitOnBlur: self.options.submitOnBlur,
2012-01-03 10:25:15 +00:00
tooltip: 'Click to select' + (
item.editable ? ', doubleclick to edit' : ''
),
type: self.options.type,
value: item.value,
2012-01-10 14:49:28 +00:00
width: self.options.type == 'input' ? 0 : self.options.width - 8
2012-01-03 10:25:15 +00:00
})
.addClass(item.id == self.options.selected ? 'OxSelected' : '')
2012-01-03 10:25:15 +00:00
.data({position: i})
.bindEvent({
2012-01-09 20:25:38 +00:00
blur: function(data) {
2012-01-12 10:39:05 +00:00
that.gainFocus();
2012-01-09 20:25:38 +00:00
that.triggerEvent('blur', data);
},
2012-01-03 10:25:15 +00:00
cancel: function(data) {
2012-01-12 10:39:05 +00:00
that.gainFocus();
Ox.print("GAINING FOCUS!")
that.triggerEvent('blur', data);
},
edit: function(data) {
2012-01-09 20:25:38 +00:00
self.editing = true;
that.triggerEvent('edit', data);
2012-01-03 10:25:15 +00:00
},
submit: function(data) {
2012-01-12 10:39:05 +00:00
that.gainFocus();
submitItem(i, data.value);
2012-01-03 10:25:15 +00:00
}
})
.appendTo(that);
});
}
function selectFirst() {
self.selected > -1 && selectItem(0);
}
2012-01-09 20:25:38 +00:00
function selectItem(idOrPosition) {
if (Ox.isString(idOrPosition)) {
self.options.selected = idOrPosition;
self.selected = getSelectedPosition();
} else {
self.selected = idOrPosition;
self.options.selected = getSelectedId();
}
2012-01-12 19:04:32 +00:00
if (self.options.selected == '' && self.editing) {
self.editing = false;
that.blurItem();
}
2012-01-12 10:39:05 +00:00
Ox.print('SELECT ITEM', self.options.selected, self.selected);
2012-01-09 20:25:38 +00:00
that.find('.OxSelected').removeClass('OxSelected');
self.selected > -1 && self.$items[self.selected].addClass('OxSelected');
2012-01-10 14:49:28 +00:00
triggerSelectEvent();
}
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);
}
2012-01-11 11:54:58 +00:00
function sortItems() {
if (!Ox.isEmpty(self.options.sort)) {
self.options.items = Ox.sortBy(self.options.items, self.options.sort);
self.selected = getSelectedPosition();
}
}
2012-01-12 10:39:05 +00:00
function submitItem(position, value) {
var item = self.options.items[position];
2012-01-03 10:25:15 +00:00
if (value === '') {
deleteItem();
2012-01-12 10:39:05 +00:00
} else if (item.value === value) {
2012-01-09 20:25:38 +00:00
that.triggerEvent('blur');
2012-01-12 10:39:05 +00:00
} else {
2012-01-09 20:25:38 +00:00
that.triggerEvent('submit', {
id: item.id,
value: value
});
item.value = value;
}
}
2012-01-10 14:49:28 +00:00
function triggerSelectEvent() {
if (!self.triggered) {
that.triggerEvent('select', Ox.extend({
id: self.options.selected
}, self.options.selected ? {
top: self.$items[self.selected].offset().top
} : {}));
2012-01-10 14:49:28 +00:00
self.triggered = true;
setTimeout(function() {
self.triggered = false;
}, 250);
}
}
2012-01-10 14:49:28 +00:00
self.setOption = function(key, value) {
if (key == 'items') {
renderItems();
} else if (key == 'selected') {
2012-01-09 20:25:38 +00:00
selectItem(value);
2012-01-11 11:11:13 +00:00
} else if (key == 'sort') {
renderItems();
2012-01-12 19:04:32 +00:00
} else if (key == 'width') {
that.css({width: value - 8 + 'px'}); // 2 x 4 px padding
self.options.type == 'textarea' && self.$items.forEach(function($item) {
$item.options({width: value})
});
2012-01-03 10:25:15 +00:00
}
}
that.addItem = function(position, item) {
2012-01-12 19:04:32 +00:00
if (self.options.editable) {
self.options.items.splice(position, 0, item);
renderItems();
}
//that.triggerEvent('add');
/*
2012-01-03 10:25:15 +00:00
self.values = Ox.filter(values, function(value) {
return value;
});
self.values.push('');
renderItems();
Ox.last(self.$items).triggerEvent('doubleclick');
*/
2012-01-03 10:25:15 +00:00
};
2012-01-09 20:25:38 +00:00
that.blurItem = function() {
2012-01-12 19:04:32 +00:00
if (self.options.selected) {
self.$items[self.selected].options({editing: false});
} else {
self.$items.forEach(function($item) {
$item.options({editing: false});
});
}
};
2012-01-12 10:39:05 +00:00
that.editItem = function() {
2012-01-12 19:04:32 +00:00
if (self.options.editable && self.options.selected) {
2012-01-12 10:39:05 +00:00
Ox.forEach(self.$items, function($item) {
if ($item.data('position') == self.selected) {
2012-01-12 19:04:32 +00:00
Ox.print('DBLCLICK')
2012-01-12 10:39:05 +00:00
$item.triggerEvent('doubleclick');
return false;
}
});
}
};
that.reloadItems = function() {
renderItems();
2012-01-03 10:25:15 +00:00
};
that.removeItem = function(position) {
2012-01-12 19:04:32 +00:00
if (self.options.editable) {
}
2012-01-03 10:25:15 +00:00
};
return that;
};