forked from 0x2620/oxjs
update video editor
This commit is contained in:
rlx
parent
56cf323110
commit
688ae65cf1
8 changed files with 413 additions and 176 deletions
|
|
@ -14,8 +14,10 @@ Ox.ArrayEditable = function(options, self) {
|
|||
editable: true,
|
||||
itemName: 'item',
|
||||
items: [],
|
||||
placeholder: '',
|
||||
position: -1,
|
||||
selected: '',
|
||||
separator: ',',
|
||||
sort: [],
|
||||
submitOnBlur: true,
|
||||
type: 'input',
|
||||
|
|
@ -39,33 +41,35 @@ Ox.ArrayEditable = function(options, self) {
|
|||
});
|
||||
|
||||
self.$items = [];
|
||||
self.editing = false;
|
||||
|
||||
renderItems();
|
||||
|
||||
self.selected = getSelectedPosition();
|
||||
|
||||
function anyclick(e) {
|
||||
Ox.print('SELF EDITING', self.editing)
|
||||
var $target = $(e.target),
|
||||
$parent = $target.parent(),
|
||||
position = $parent.data('position');
|
||||
//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
|
||||
Ox.print('BLURRED EDITING', self.blurred, self.editing)
|
||||
if ($parent.is('.OxEditableElement')) {
|
||||
// select another item
|
||||
Ox.print('AAAAA')
|
||||
selectItem(
|
||||
e.metaKey && position == self.selected
|
||||
? '' : $parent.data('position')
|
||||
);
|
||||
} else if (!self.blurred) {
|
||||
// if there wasn't an active input element
|
||||
if (self.editing) {
|
||||
// blur if still in editing mode
|
||||
that.blurItem();
|
||||
} else {
|
||||
// othewise deselect selected
|
||||
selectNone();
|
||||
}
|
||||
}
|
||||
that.gainFocus();
|
||||
}
|
||||
|
|
@ -78,6 +82,8 @@ Ox.ArrayEditable = function(options, self) {
|
|||
that.triggerEvent('delete', {
|
||||
id: self.options.selected
|
||||
});
|
||||
self.selected = -1;
|
||||
self.options.selected = '';
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -99,50 +105,83 @@ Ox.ArrayEditable = function(options, self) {
|
|||
return Ox.getIndexById(self.options.items, self.options.selected);
|
||||
}
|
||||
|
||||
function renderItems() {
|
||||
function renderItems(blur) {
|
||||
if (self.editing) {
|
||||
self.options.items[getSelectedPosition()].value = that.find('input:visible').val();
|
||||
}
|
||||
that.empty();
|
||||
sortItems();
|
||||
self.options.items.forEach(function(item, i) {
|
||||
i && self.options.type == 'input'
|
||||
&& $('<span>')
|
||||
.html(', ')
|
||||
if (self.options.items.length == 0) {
|
||||
Ox.Editable({
|
||||
editable: false,
|
||||
type: 'text',
|
||||
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,
|
||||
editable: self.options.editable && item.editable,
|
||||
editing: self.editing && i == self.selected,
|
||||
format: function(value) {
|
||||
return value || ' '
|
||||
},
|
||||
submitOnBlur: self.options.submitOnBlur,
|
||||
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 - 8
|
||||
})
|
||||
.addClass(item.id == self.options.selected ? 'OxSelected' : '')
|
||||
.data({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();
|
||||
that.triggerEvent('blur', data);
|
||||
},
|
||||
change: function(data) {
|
||||
that.triggerEvent('change', {
|
||||
id: item.id,
|
||||
value: data.value
|
||||
});
|
||||
},
|
||||
edit: function(data) {
|
||||
self.editing = true;
|
||||
that.triggerEvent('edit', data);
|
||||
},
|
||||
submit: function(data) {
|
||||
self.editing = false;
|
||||
that.gainFocus();
|
||||
submitItem(i, data.value);
|
||||
}
|
||||
})
|
||||
.appendTo(that);
|
||||
self.$items[i] = Ox.Editable({
|
||||
editable: self.options.editable && item.editable,
|
||||
format: function(value) {
|
||||
return value || ' '
|
||||
},
|
||||
submitOnBlur: self.options.submitOnBlur,
|
||||
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 - 8
|
||||
})
|
||||
.addClass(item.id == self.options.selected ? 'OxSelected' : '')
|
||||
.data({position: i})
|
||||
.bindEvent({
|
||||
blur: function(data) {
|
||||
that.gainFocus();
|
||||
that.triggerEvent('blur', data);
|
||||
},
|
||||
cancel: function(data) {
|
||||
that.gainFocus();
|
||||
Ox.print("GAINING FOCUS!")
|
||||
that.triggerEvent('blur', data);
|
||||
},
|
||||
edit: function(data) {
|
||||
self.editing = true;
|
||||
that.triggerEvent('edit', data);
|
||||
},
|
||||
submit: function(data) {
|
||||
that.gainFocus();
|
||||
submitItem(i, data.value);
|
||||
}
|
||||
})
|
||||
.appendTo(that);
|
||||
});
|
||||
});
|
||||
}
|
||||
//self.editing && that.editItem(blur);
|
||||
}
|
||||
|
||||
function selectFirst() {
|
||||
|
|
@ -150,7 +189,6 @@ Ox.ArrayEditable = function(options, self) {
|
|||
}
|
||||
|
||||
function selectItem(idOrPosition) {
|
||||
Ox.print('???????', self.editing)
|
||||
if (Ox.isString(idOrPosition)) {
|
||||
self.options.selected = idOrPosition;
|
||||
self.selected = getSelectedPosition();
|
||||
|
|
@ -197,10 +235,8 @@ Ox.ArrayEditable = function(options, self) {
|
|||
var item = self.options.items[position];
|
||||
if (value === '') {
|
||||
deleteItem();
|
||||
} else if (item.value === value) {
|
||||
that.triggerEvent('blur');
|
||||
} else {
|
||||
that.triggerEvent('submit', {
|
||||
that.triggerEvent(item.value === value ? 'blur' : 'submit', {
|
||||
id: item.id,
|
||||
value: value
|
||||
});
|
||||
|
|
@ -224,7 +260,7 @@ Ox.ArrayEditable = function(options, self) {
|
|||
|
||||
self.setOption = function(key, value) {
|
||||
if (key == 'items') {
|
||||
renderItems();
|
||||
renderItems(true);
|
||||
} else if (key == 'selected') {
|
||||
selectItem(value);
|
||||
} else if (key == 'sort') {
|
||||
|
|
@ -242,6 +278,7 @@ Ox.ArrayEditable = function(options, self) {
|
|||
self.options.items.splice(position, 0, item);
|
||||
renderItems();
|
||||
}
|
||||
return that;
|
||||
//that.triggerEvent('add');
|
||||
/*
|
||||
self.values = Ox.filter(values, function(value) {
|
||||
|
|
@ -259,34 +296,44 @@ Ox.ArrayEditable = function(options, self) {
|
|||
self.$items[self.selected].options({editing: false});
|
||||
} else {
|
||||
*/
|
||||
self.$items.forEach(function($item) {
|
||||
$item.options({editing: false});
|
||||
});
|
||||
self.editing = false;
|
||||
self.$items.forEach(function($item) {
|
||||
$item.options({editing: false});
|
||||
});
|
||||
//}
|
||||
return that;
|
||||
};
|
||||
|
||||
that.editItem = function() {
|
||||
Ox.print('AE EDIT ITEM')
|
||||
if (self.options.editable && self.options.selected) {
|
||||
Ox.forEach(self.$items, function($item) {
|
||||
if ($item.data('position') == self.selected) {
|
||||
Ox.print('DBLCLICK')
|
||||
$item.triggerEvent('doubleclick');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
self.editing = true;
|
||||
self.$items[self.selected].options({editing: true});
|
||||
}
|
||||
return that;
|
||||
};
|
||||
|
||||
that.reloadItems = function() {
|
||||
renderItems();
|
||||
return that;
|
||||
};
|
||||
|
||||
that.removeItem = function(position) {
|
||||
if (self.options.editable) {
|
||||
|
||||
}
|
||||
return that;
|
||||
};
|
||||
|
||||
/*
|
||||
that.submitItem = function() {
|
||||
if (self.editing) {
|
||||
self.editing = false;
|
||||
self.$items[self.selected].options({editing: false});
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ Ox.Editable = function(options, self) {
|
|||
tooltip: options.tooltip
|
||||
}, self)
|
||||
.defaults({
|
||||
blurred: false,
|
||||
clickLink: null,
|
||||
editable: true,
|
||||
editing: false,
|
||||
|
|
@ -62,13 +63,22 @@ Ox.Editable = function(options, self) {
|
|||
.appendTo(that);
|
||||
|
||||
if (self.options.editing) {
|
||||
// edit will toggle self.options.editing
|
||||
self.options.editing = false;
|
||||
edit();
|
||||
// need timeout so that when determining height
|
||||
// the element is actually in the DOM
|
||||
setTimeout(function() {
|
||||
// edit will toggle self.options.editing
|
||||
self.options.editing = false;
|
||||
edit();
|
||||
}, 0);
|
||||
}
|
||||
|
||||
function blur() {
|
||||
that.triggerEvent('blur');
|
||||
function blur(data) {
|
||||
self.options.value = parseValue();
|
||||
if (self.options.value !== self.originalValue) {
|
||||
self.originalValue = self.options.value;
|
||||
that.triggerEvent('change', {value: self.options.value});
|
||||
}
|
||||
that.triggerEvent('blur', data);
|
||||
}
|
||||
|
||||
function cancel() {
|
||||
|
|
@ -104,14 +114,10 @@ Ox.Editable = function(options, self) {
|
|||
width: width + 'px'
|
||||
});
|
||||
}
|
||||
/*
|
||||
that.triggerEvent('change', {
|
||||
value: event.value
|
||||
});
|
||||
*/
|
||||
}
|
||||
|
||||
function edit() {
|
||||
Ox.print('E EDIT! editable editing', self.options.editable, self.options.editing)
|
||||
var height, width;
|
||||
if (self.options.editable && !self.options.editing) {
|
||||
self.options.editing = true;
|
||||
|
|
@ -166,12 +172,15 @@ Ox.Editable = function(options, self) {
|
|||
});
|
||||
}
|
||||
// fixme: why can't this be chained?
|
||||
setTimeout(function() {
|
||||
self.$input.focusInput(self.options.type == 'input');
|
||||
}, 0);
|
||||
that.$tooltip && that.$tooltip.options({title: ''});
|
||||
that.triggerEvent('edit');
|
||||
if (!self.options.blurred) {
|
||||
setTimeout(function() {
|
||||
self.$input.focusInput(self.options.type == 'input');
|
||||
}, 0);
|
||||
that.$tooltip && that.$tooltip.options({title: ''});
|
||||
that.triggerEvent('edit');
|
||||
}
|
||||
}
|
||||
self.options.blurred = false;
|
||||
}
|
||||
|
||||
function formatInputValue() {
|
||||
|
|
@ -204,9 +213,15 @@ Ox.Editable = function(options, self) {
|
|||
return value;
|
||||
}
|
||||
|
||||
function parseValue() {
|
||||
return self.options.type == 'input'
|
||||
? Ox.encodeHTML(self.$input.value())
|
||||
: Ox.parseHTML(self.$input.value());
|
||||
}
|
||||
|
||||
function submit() {
|
||||
self.options.editing = false;
|
||||
self.options.value = Ox.parseHTML(self.$input.value());
|
||||
self.options.value = parseValue();
|
||||
self.$input.value(formatInputValue()).hide();
|
||||
self.$test.html(formatTestValue());
|
||||
self.$value.html(formatValue()).show();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue