forked from 0x2620/oxjs
update VideoEditor/AnnotationPanel/Editable/...; update OxJS array functions
This commit is contained in:
rlx
parent
d64e39c5b2
commit
85652471c6
8 changed files with 280 additions and 120 deletions
|
|
@ -8,42 +8,88 @@ Ox.ArrayEditable = function(options, self) {
|
|||
|
||||
self = self || {};
|
||||
var that = Ox.Element(options.editable === false ? {} : {
|
||||
tooltip: 'Doubleclick to add ' + (options.itemName : 'item')
|
||||
})
|
||||
tooltip: 'Doubleclick to add ' + (options.itemName || 'item')
|
||||
}, self)
|
||||
.defaults({
|
||||
editable: true,
|
||||
itemName: 'item',
|
||||
items: [],
|
||||
position: -1,
|
||||
selected: -1,
|
||||
selected: '',
|
||||
width: 256
|
||||
})
|
||||
.options(options || {})
|
||||
.addClass('OxArrayEditable')
|
||||
.css({width: self.options.width - 8 + 'px'}) // 2 x 4 px padding
|
||||
.bindEvent({
|
||||
doubleclick: doubleclick
|
||||
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.values = [];
|
||||
self.selected = getSelectedPosition();
|
||||
|
||||
renderItems();
|
||||
|
||||
function anyclick(e) {
|
||||
var $target = $(e.target),
|
||||
$parent = $target.parent();
|
||||
$target.is(':not(input)') && that.gainFocus();
|
||||
if ($parent.is('.OxEditableElement')) {
|
||||
selectItem($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);
|
||||
if ($target.is('.OxEditable')) {
|
||||
that.editItem($target.data('position'));
|
||||
var $parent = $(e.target).parent();
|
||||
if ($parent.is('.OxEditableElement')) {
|
||||
that.editItem(self.options.selected);
|
||||
} else {
|
||||
that.addItem(position == -1 ? self.options.items.length : position);
|
||||
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.getPositionById(self.options.items, self.options.selected);
|
||||
}
|
||||
|
||||
function renderItems() {
|
||||
that.empty();
|
||||
self.options.items.forEach(function(item, i) {
|
||||
self.values[i] = item.value;
|
||||
i && $('<div>')
|
||||
.css({float: 'left'})
|
||||
.html(', ')
|
||||
i && $('<span>')
|
||||
.html(', ')
|
||||
.appendTo(that);
|
||||
self.$items[i] = Ox.Editable({
|
||||
editable: item.editable,
|
||||
|
|
@ -55,49 +101,92 @@ Ox.ArrayEditable = function(options, self) {
|
|||
),
|
||||
value: item.value
|
||||
})
|
||||
.css({float: 'left'})
|
||||
.addClass(item.id == self.options.selected ? 'OxSelected' : '')
|
||||
.data({position: i})
|
||||
.bindEvent({
|
||||
anyclick: function() {
|
||||
that.find('.OxSelected').removeClass('.OxSelected');
|
||||
self.$items[i].addClass('OxSelected');
|
||||
},
|
||||
cancel: function(data) {
|
||||
|
||||
},
|
||||
submit: function(data) {
|
||||
submit(position, data.value);
|
||||
submit(i, data.value);
|
||||
}
|
||||
})
|
||||
.appendTo(that);
|
||||
});
|
||||
}
|
||||
|
||||
function submit(position, value) {
|
||||
if (value === '') {
|
||||
self.values.splice(position, 1);
|
||||
} else {
|
||||
Array.prototype.splice.apply(self.values, Ox.merge(
|
||||
[position, 1],
|
||||
value.split(',').map(function(v) {
|
||||
return v.trim();
|
||||
})
|
||||
));
|
||||
}
|
||||
renderItems();
|
||||
function selectFirst() {
|
||||
self.selected > -1 && selectItem(0);
|
||||
}
|
||||
|
||||
that.addItem = function(position) {
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
||||
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) {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ Ox.Editable = function(options, self) {
|
|||
|
||||
self = self || {};
|
||||
var that = Ox.Element({
|
||||
element: '<div>',
|
||||
element: options.type == 'textarea' ? '<div>' : '<span>',
|
||||
tooltip: options.tooltip
|
||||
}, self)
|
||||
.defaults({
|
||||
|
|
@ -25,6 +25,7 @@ Ox.Editable = function(options, self) {
|
|||
format: null,
|
||||
height: 0,
|
||||
placeholder: '',
|
||||
submitOnBlur: true,
|
||||
tooltip: '',
|
||||
value: '',
|
||||
width: 0,
|
||||
|
|
@ -125,18 +126,19 @@ Ox.Editable = function(options, self) {
|
|||
.appendTo(that.$element);
|
||||
self.$input = Ox.Input({
|
||||
changeOnKeypress: true,
|
||||
element: self.options.type == 'input' ? '<span>' : '<div>',
|
||||
style: 'square',
|
||||
type: self.options.type,
|
||||
value: formatInputValue(),
|
||||
})
|
||||
.css(self.css)
|
||||
.bindEvent({
|
||||
blur: submit,
|
||||
cancel: cancel,
|
||||
change: change,
|
||||
submit: submit
|
||||
})
|
||||
.appendTo(that.$element);
|
||||
self.options.submitOnBlur && self.$input.bindEvent({blur: submit});
|
||||
self.$input.find('input').css(self.css);
|
||||
}
|
||||
self.$input.options({
|
||||
|
|
|
|||
|
|
@ -65,7 +65,9 @@ Ox.Input <f:Ox.Element> Input Element
|
|||
Ox.Input = function(options, self) {
|
||||
|
||||
self = self || {};
|
||||
var that = Ox.Element({}, self)
|
||||
var that = Ox.Element({
|
||||
element: options.element || '<div>'
|
||||
}, self)
|
||||
.defaults({
|
||||
arrows: false,
|
||||
arrowStep: 1,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue