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

425 lines
14 KiB
JavaScript
Raw Normal View History

2012-01-03 10:25:15 +00:00
'use strict';
/*@
Ox.ArrayEditable <function> Array Editable
(options, self) -> <f> Array Editable
options <o> Options object
self <o> Shared private variable
2012-01-03 10:25:15 +00:00
@*/
Ox.ArrayEditable = function(options, self) {
self = self || {};
2012-01-27 14:29:11 +00:00
var that = Ox.Element({}, self)
2012-01-03 10:25:15 +00:00
.defaults({
2012-01-17 15:43:46 +00:00
clickLink: null,
2012-01-03 10:25:15 +00:00
editable: true,
getSortValue: null,
highlight: '',
2012-01-03 10:25:15 +00:00
itemName: 'item',
items: [],
maxHeight: void 0,
placeholder: '',
2012-01-03 10:25:15 +00:00
position: -1,
selected: '',
separator: ',',
2012-01-11 11:11:13 +00:00
sort: [],
2012-01-09 20:25:38 +00:00
submitOnBlur: true,
tooltipText: '',
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))
.css({width: self.options.width - (self.options.type == 'input' ? 8 : 0) + 'px'}) // 2 x 4 px padding
2012-01-03 10:25:15 +00:00
.bindEvent({
key_delete: deleteItem,
2012-01-12 10:39:05 +00:00
key_enter: function() {
2012-01-16 11:22:34 +00:00
// make sure the newline does
// not end up in the textarea
setTimeout(function() {
that.editItem();
}, 0);
2012-01-12 10:39:05 +00:00
},
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,
2012-01-27 14:29:11 +00:00
key_up: self.options.type == 'input' ? selectFirst : selectPrevious,
singleclick: singleclick
2012-01-03 10:25:15 +00:00
});
self.$items = [];
self.editing = false;
renderItems();
2012-01-11 11:54:58 +00:00
self.selected = getSelectedPosition();
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
});
self.editing = false;
self.selected = -1;
self.options.selected = '';
2012-01-12 19:04:32 +00:00
}
}
2012-01-03 10:25:15 +00:00
function doubleclick(e) {
2012-01-27 14:29:11 +00:00
// fixme: unused
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);
}
function renderItems(blur) {
if (self.editing) {
self.options.items[getSelectedPosition()].value = that.find(self.options.type + ':visible').val();
}
2012-01-03 10:25:15 +00:00
that.empty();
if (self.options.items.length == 0) {
Ox.Editable({
editable: false,
2012-01-27 14:29:11 +00:00
type: self.options.type,
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,
2012-01-17 15:43:46 +00:00
clickLink: self.options.clickLink,
editable: self.options.editable && item.editable,
editing: self.editing && i == self.selected,
/*
format: function(value) {
return value || '&nbsp;'
},
*/
highlight: self.options.highlight,
maxHeight: self.options.maxHeight,
submitOnBlur: self.options.submitOnBlur,
tooltip: (
self.options.tooltipText
? self.options.tooltipText(item) + '<br>'
: ''
) + (
self.options.editable
? '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'} : {})
2012-01-17 11:50:31 +00:00
.data({id: item.id, 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();
2012-02-04 11:44:19 +00:00
data.value === ''
? submitItem(i, '')
: that.triggerEvent('blur', data);
},
change: function(data) {
that.triggerEvent('change', {
id: item.id,
value: data.value
});
},
edit: function() {
2012-01-27 14:29:11 +00:00
if (item.id != self.options.selected) {
selectItem(item.id);
}
self.editing = true;
that.triggerEvent('edit');
},
2012-02-16 16:35:59 +00:00
insert: function(data) {
that.triggerEvent('insert', data);
},
open: function(data) {
that.triggerEvent('open');
},
submit: function(data) {
self.editing = false;
that.gainFocus();
submitItem(i, data.value);
}
})
.appendTo(that);
});
}
//self.editing && that.editItem(blur);
2012-01-03 10:25:15 +00:00
}
function selectFirst() {
if (self.selected > -1) {
self.selected > 0
? selectItem(0)
: that.triggerEvent('selectbefore');
}
}
2012-01-09 20:25:38 +00:00
function selectItem(idOrPosition) {
2012-01-16 17:51:53 +00:00
if (Ox.isString(idOrPosition)) {
self.options.selected = idOrPosition;
self.selected = getSelectedPosition();
} else {
self.selected = idOrPosition;
self.options.selected = getSelectedId();
}
if (/*self.options.selected == '' && */self.editing) {
self.editing = false;
that.blurItem();
2012-01-12 19:04:32 +00:00
}
2012-01-16 17:51:53 +00:00
that.find('.OxSelected').removeClass('OxSelected');
self.selected > -1 && self.$items[self.selected].addClass('OxSelected');
triggerSelectEvent();
}
function selectLast() {
if (self.selected > -1) {
self.selected < self.options.items.length - 1
? selectItem(self.options.items.length - 1)
: that.triggerEvent('selectafter');
}
}
function selectNext() {
if (self.selected > -1) {
self.selected < self.options.items.length - 1
? selectItem(self.selected + 1)
: that.triggerEvent('selectafter');
}
}
function selectNone() {
selectItem(-1);
}
function selectPrevious() {
if (self.selected > -1) {
self.selected > 0
? selectItem(self.selected - 1)
: that.triggerEvent('selectbefore');
}
}
2012-01-27 14:29:11 +00:00
function singleclick(e) {
var $target = $(e.target),
2012-01-29 09:29:30 +00:00
$element = $target.is('.OxEditableElement')
? $target : $target.parents('.OxEditableElement'),
2012-01-27 14:29:11 +00:00
position = $element.data('position');
if (!$target.is('.OxInput')) {
if ($element.length) {
2012-02-05 01:56:23 +00:00
// if clicked on an element
if (position != self.selected) {
2012-01-27 14:29:11 +00:00
// select another item
2012-02-05 01:56:23 +00:00
selectItem(position);
} else if (e.metaKey) {
// or deselect current item
selectNone();
2012-01-27 14:29:11 +00:00
}
} else if (!self.blurred) {
2012-02-05 01:56:23 +00:00
// otherwise, if there wasn't an active input element
2012-01-27 14:29:11 +00:00
if (self.editing) {
// blur if still in editing mode
that.blurItem();
} else {
// otherwise
if (self.selected > -1) {
// deselect selected
selectNone();
} else {
// or trigger event
that.triggerEvent('selectnone');
}
2012-01-27 14:29:11 +00:00
}
}
that.gainFocus();
}
}
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.options.getSortValue
? {value: self.options.getSortValue}
: {}
);
2012-01-11 11:54:58 +00:00
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 {
that.triggerEvent(item.value === value ? 'blur' : 'submit', {
id: item.id,
value: value
});
item.value = value;
}
}
2012-01-10 14:49:28 +00:00
function triggerSelectEvent() {
if (!self.triggered) {
2012-01-17 09:25:58 +00:00
that.triggerEvent('select', {
id: self.options.selected
2012-01-17 09:25:58 +00:00
});
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 == 'highlight') {
self.$items.forEach(function($item) {
$item.options({highlight: value})
});
} else if (key == 'items') {
2012-01-16 14:02:30 +00:00
if (self.options.selected && getSelectedPosition() == -1) {
selectNone();
}
renderItems(true);
} 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
}
}
2012-05-21 10:38:18 +00:00
/*@
addItem <f> addItem
(position, item) -> <o> add item at position
@*/
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();
}
return that;
//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-05-21 10:38:18 +00:00
/*@
blurItem <f> blurItem
@*/
2012-01-09 20:25:38 +00:00
that.blurItem = function() {
2012-01-13 16:25:47 +00:00
/*
2012-01-12 19:04:32 +00:00
if (self.options.selected) {
self.$items[self.selected].options({editing: false});
} else {
2012-01-13 16:25:47 +00:00
*/
self.editing = false;
self.$items.forEach(function($item) {
$item.options({editing: false});
});
2012-01-13 16:25:47 +00:00
//}
return that;
};
2012-05-21 10:38:18 +00:00
/*@
editItem <f> editItem
@*/
2012-01-12 10:39:05 +00:00
that.editItem = function() {
Ox.Log('AE', 'EDIT ITEM', self.options.editable, self.options.selected);
2012-01-12 19:04:32 +00:00
if (self.options.editable && self.options.selected) {
self.editing = true;
self.$items[self.selected].options({editing: true});
} else if (!self.options.editable) {
that.triggerEvent('open');
2012-01-12 10:39:05 +00:00
}
return that;
2012-01-12 10:39:05 +00:00
};
2012-05-21 10:38:18 +00:00
/*@
reloadItems <f> reloadItems
@*/
2012-01-12 10:39:05 +00:00
that.reloadItems = function() {
renderItems();
return that;
2012-01-03 10:25:15 +00:00
};
2012-05-21 10:38:18 +00:00
/*@
removeItem <f> removeItem
@*/
that.removeItem = function() {
if (self.options.editable && self.options.selected) {
deleteItem();
2012-01-12 19:04:32 +00:00
}
return that;
2012-01-03 10:25:15 +00:00
};
/*
that.submitItem = function() {
if (self.editing) {
self.editing = false;
self.$items[self.selected].options({editing: false});
}
}
*/
2012-01-03 10:25:15 +00:00
return that;
};