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

471 lines
16 KiB
JavaScript
Raw Normal View History

2012-01-03 10:25:15 +00:00
'use strict';
/*@
2012-05-31 10:32:54 +00:00
Ox.ArrayEditable <f> Array Editable
options <o> Options object
self <o> Shared private variable
2012-05-31 10:32:54 +00:00
([options[, self]]) -> <o:Ox.Element> Array Editable
2012-06-17 22:38:26 +00:00
add <!> add
blur <!> blur
change <!> change
delete <!> delete
edit <!> edit
insert <!> insert
open <!> open
selectnext <!> selectnext
selectprevious <!> selectprevious
2012-06-17 22:38:26 +00:00
selectnone <!> selectnone
select <!> select
submit <!> submit
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,
2014-12-16 20:23:17 +00:00
format: null,
getSortValue: null,
2013-12-26 16:43:03 +00:00
globalAttributes: [],
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',
2014-12-16 20:38:41 +00:00
unformat: null,
2012-01-03 10:25:15 +00:00
width: 256
})
.options(options || {})
.options({tooltip: tooltip})
2012-05-28 19:35:41 +00:00
.update({
highlight: function() {
self.$items.forEach(function($item) {
$item.options({highlight: self.options.highlight})
});
},
items: function() {
if (self.options.selected && getSelectedPosition() == -1) {
selectNone();
}
renderItems(true);
},
placeholder: function() {
if (self.options.items.length == 0) {
self.$items[0].options({
placeholder: self.options.placeholder,
value: ''
});
}
},
2012-05-28 19:35:41 +00:00
selected: function() {
selectItem(self.options.selected);
},
sort: renderItems,
width: function() {
var width = self.options.width;
that.css({width: width - 8 + 'px'}); // 2 x 4 px padding
self.options.type == 'textarea' && self.$items.forEach(function($item) {
$item.options({width: width})
});
}
})
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();
2012-01-16 11:22:34 +00:00
}, 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,
touchstart: 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) {
self.$items = [Ox.Editable({
editable: false,
placeholder: self.options.placeholder,
2012-01-27 14:29:11 +00:00
type: self.options.type,
value: ''
})
.appendTo(that)];
} else {
sortItems();
self.$items = self.options.items.map(function appendItem(item, i) {
if (i && self.options.type == 'input') {
$('<span>')
.addClass('OxSeparator')
.html(self.options.separator + ' ')
.appendTo(that);
}
return Ox.Editable({
autocomplete: self.options.autocomplete,
autocompleteReplace: self.options.autocompleteReplace,
autocompleteReplaceCorrect: self.options.autocompleteReplaceCorrect,
autocompleteSelect: self.options.autocompleteSelect,
autocompleteSelectHighlight: self.options.autocompleteSelectHighlight,
autocompleteSelectMaxWidth: self.options.autocompleteSelectMaxWidth,
2014-12-17 15:38:16 +00:00
autocompleteSelectOffset: self.options.autocompleteSelectOffset,
autocompleteSelectSubmit: self.options.autocompleteSelectSubmit,
2014-12-17 15:38:16 +00:00
autocompleteSelectUpdate: self.options.autocompleteSelectUpdate,
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,
2014-12-16 20:23:17 +00:00
format: self.options.format,
2013-12-26 16:43:03 +00:00
globalAttributes: self.options.globalAttributes,
highlight: self.options.highlight,
maxHeight: self.options.maxHeight,
submitOnBlur: self.options.submitOnBlur,
type: self.options.type,
2014-12-16 20:38:41 +00:00
unformat: self.options.unformat,
value: item.value,
width: self.options.type == 'input' ? 0 : self.options.width - 9
})
.addClass(item.id == self.options.selected ? 'OxSelected' : '')
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('selectprevious');
}
}
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('selectnext');
}
}
function selectNext() {
if (self.selected > -1) {
self.selected < self.options.items.length - 1
? selectItem(self.selected + 1)
: that.triggerEvent('selectnext');
}
}
function selectNone() {
selectItem(-1);
}
function selectPrevious() {
if (self.selected > -1) {
self.selected > 0
? selectItem(self.selected - 1)
: that.triggerEvent('selectprevious');
}
}
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'),
2014-09-22 11:23:42 +00:00
position;
2012-01-27 14:29:11 +00:00
if (!$target.is('.OxInput')) {
if ($element.length) {
2014-09-22 11:23:42 +00:00
position = $element.data('position');
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;
}
}
function tooltip(e) {
var $target = $(e.target),
$element = $target.closest('.OxEditableElement'),
position = $element.data('position'),
item = self.options.items[position],
isLink = $target.closest('a').length,
click = isLink ? 'Shift-click' : 'Click',
doubleclick = isLink ? 'shift-doubleclick' : 'doubleclick';
return item === undefined
? ''
: (
self.options.tooltipText
? self.options.tooltipText(item) + '<br>'
: ''
) + (
self.options.editable
? Ox._(click + ' to select') + (
item.editable ? Ox._(', ' + doubleclick + ' to edit') : ''
)
: ''
);
}
var triggerSelectEvent = Ox.debounce(function() {
that.triggerEvent('select', {
id: self.options.selected
});
}, true);
2012-01-10 14:49:28 +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});
}
}
*/
that.updateItem = function(value) {
if (self.options.selected) {
self.$items[self.selected].options({value: value});
}
};
2012-01-03 10:25:15 +00:00
return that;
};