add Ox.ArrayEditable
This commit is contained in:
commit
d64e39c5b2
5 changed files with 61 additions and 52 deletions
|
@ -287,8 +287,10 @@ Ox.Menu = function(options, self) {
|
|||
'min' in item ? item.min : 1,
|
||||
'max' in item ? item.max : 1
|
||||
);
|
||||
self.optionGroupOffset[item.group] = i + offset;
|
||||
offset += items[i].length - 1;
|
||||
self.optionGroupOffset[item.group] = offset;
|
||||
offset += items[i].length;
|
||||
} else if ('id' in item) {
|
||||
offset += 1;
|
||||
}
|
||||
});
|
||||
items = Ox.flatten(items);
|
||||
|
|
|
@ -75,8 +75,12 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
edit: function() {
|
||||
$item.removeClass('OxTarget');
|
||||
},
|
||||
submit: function(data) {
|
||||
$item.addClass('OxTarget')
|
||||
submit: function(newData) {
|
||||
$item.addClass('OxTarget');
|
||||
updateAnnotation({
|
||||
id: data.id,
|
||||
value: newData.value
|
||||
});
|
||||
}
|
||||
})
|
||||
)
|
||||
|
@ -102,8 +106,8 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
self.$annotations.editItem(pos);
|
||||
}
|
||||
},
|
||||
remove: function(data) {
|
||||
that.triggerEvent('remove', data);
|
||||
'delete': function(data) {
|
||||
that.triggerEvent('remove', {id: data.ids[0]});
|
||||
},
|
||||
select: selectAnnotation,
|
||||
submit: updateAnnotation
|
||||
|
@ -149,6 +153,7 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
}
|
||||
|
||||
function updateAnnotation(data) {
|
||||
Ox.print('updateAnnotation', data);
|
||||
var item = Ox.getObjectById(self.options.items, data.id);
|
||||
item.value = data.value;
|
||||
that.triggerEvent('submit', item);
|
||||
|
@ -188,13 +193,6 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
self.$annotations.editItem(pos);
|
||||
};
|
||||
|
||||
/*@
|
||||
removeItems <f> removeItems
|
||||
@*/
|
||||
that.removeItems = function(ids) {
|
||||
self.$annotations.removeItems(ids);
|
||||
};
|
||||
|
||||
/*@
|
||||
deselectItems <f> deselectItems
|
||||
@*/
|
||||
|
@ -202,6 +200,13 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
self.$annotations.options('selected', []);
|
||||
};
|
||||
|
||||
/*@
|
||||
removeItems <f> removeItems
|
||||
@*/
|
||||
that.removeItem = function(id) {
|
||||
self.$annotations.removeItems([id]);
|
||||
};
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
|
|
|
@ -323,11 +323,10 @@ Ox.VideoEditor = function(options, self) {
|
|||
that.triggerEvent('addannotation', data);
|
||||
},
|
||||
remove: function(data) {
|
||||
data = {
|
||||
ids: [data],
|
||||
that.triggerEvent('removeannotation', {
|
||||
id: data.id,
|
||||
layer: layer.id
|
||||
};
|
||||
that.triggerEvent('removeannotations', data);
|
||||
});
|
||||
},
|
||||
select: function(data) {
|
||||
self.options.layers.forEach(function(layer_, i_) {
|
||||
|
@ -339,7 +338,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
});
|
||||
selectAnnotation(data);
|
||||
},
|
||||
submit: updateAnnotation
|
||||
submit: editAnnotation
|
||||
})
|
||||
.appendTo(self.$annotations);
|
||||
});
|
||||
|
@ -410,27 +409,20 @@ Ox.VideoEditor = function(options, self) {
|
|||
});
|
||||
|
||||
self.$videoMenuButton = Ox.MenuButton({
|
||||
items: Ox.merge(
|
||||
[
|
||||
{id: 'toggleSize', title: 'Large Player', selected: self.options.playerSize == 'large', keyboard: 'shift +'},
|
||||
{}
|
||||
],
|
||||
{
|
||||
'id': 'resolution', title:'Resolution',
|
||||
items: [ { group: 'resolution', min: 1, max: 1, items: self.resolutions } ]
|
||||
},
|
||||
[
|
||||
{},
|
||||
{id: 'largeTimeline', title: 'Hide Large Timeline', disabled: true},
|
||||
{id: 'subtitlesTimeline', title: 'Hide Subtitles on Large Timeline', disabled: true},
|
||||
{},
|
||||
{id: 'downloadVideo', title: 'Download Video...', disabled: true},
|
||||
{id: 'downloadSelection', title: 'Download Selection...', disabled: true},
|
||||
{id: 'embedSelection', title: 'Embed Selection...', disabled: true},
|
||||
{},
|
||||
{id: 'keyboard', title: 'Keyboard Shortcuts...', keyboard: 'h'}
|
||||
]
|
||||
),
|
||||
items: [
|
||||
{id: 'toggleSize', title: 'Large Player', checked: self.options.playerSize == 'large', keyboard: 'shift +'},
|
||||
{},
|
||||
{group: 'resolution', min: 1, max: 1, items: self.resolutions},
|
||||
{},
|
||||
{id: 'largeTimeline', title: 'Hide Large Timeline', disabled: true},
|
||||
{id: 'subtitlesTimeline', title: 'Hide Subtitles on Large Timeline', disabled: true},
|
||||
{},
|
||||
{id: 'downloadVideo', title: 'Download Video...', disabled: true},
|
||||
{id: 'downloadSelection', title: 'Download Selection...', disabled: true},
|
||||
{id: 'embedSelection', title: 'Embed Selection...', disabled: true},
|
||||
{},
|
||||
{id: 'keyboard', title: 'Keyboard Shortcuts...', keyboard: 'h'}
|
||||
],
|
||||
style: 'square',
|
||||
title: 'set',
|
||||
tooltip: 'Actions and Settings',
|
||||
|
@ -440,9 +432,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
.bindEvent({
|
||||
click: function(data) {
|
||||
var id = data.id;
|
||||
if (id == 'toggleSize') {
|
||||
toggleSize();
|
||||
} else if (id == 'keyboard') {
|
||||
if (id == 'keyboard') {
|
||||
var dialog = Ox.Dialog({
|
||||
buttons: [
|
||||
Ox.Button({id: 'close', title: 'Close'})
|
||||
|
@ -454,7 +444,13 @@ Ox.VideoEditor = function(options, self) {
|
|||
title: 'Keyboard Shortcuts',
|
||||
width: 256
|
||||
}).open();
|
||||
} else if (id == 'resolution') {
|
||||
}
|
||||
},
|
||||
change: function(data) {
|
||||
var id = data.id;
|
||||
if (id == 'toggleSize') {
|
||||
toggleSize();
|
||||
} else if (data.id == 'resolution') {
|
||||
self.options.resolution = parseInt(data.checked[0].id);
|
||||
self.$player[0].options({resolution: self.options.resolution});
|
||||
}
|
||||
|
@ -717,6 +713,12 @@ Ox.VideoEditor = function(options, self) {
|
|||
submitFindInput(self.options.find, true);
|
||||
}, 0);
|
||||
|
||||
function editAnnotation(data) {
|
||||
data['in'] = self.options['in'];
|
||||
data.out = self.options.out;
|
||||
that.triggerEvent('editannotation', data);
|
||||
}
|
||||
|
||||
function find(query) {
|
||||
var results = [];
|
||||
if (query.length) {
|
||||
|
@ -913,11 +915,6 @@ Ox.VideoEditor = function(options, self) {
|
|||
setPoint('in', data['in']);
|
||||
setPoint('out', data.out);
|
||||
}
|
||||
function updateAnnotation(data) {
|
||||
data['in'] = self.options['in'];
|
||||
data.out = self.options.out;
|
||||
that.triggerEvent('updateannotation', data);
|
||||
}
|
||||
|
||||
function select(type) {
|
||||
self.options.points = getPoints(type);
|
||||
|
@ -1078,14 +1075,14 @@ Ox.VideoEditor = function(options, self) {
|
|||
};
|
||||
|
||||
/*@
|
||||
removeAnnotations <f> add annotation
|
||||
removeAnnotation <f> remove annotation
|
||||
(layer, ids) -> <o> remove annotation from layer
|
||||
layer <s> layer id
|
||||
ids <a> array of item ids to remove
|
||||
@*/
|
||||
that.removeAnnotations = function(layer, ids) {
|
||||
that.removeAnnotation = function(layer, id) {
|
||||
var i = Ox.getPositionById(self.options.layers, layer);
|
||||
self.$annotationPanel[i].removeItems(ids);
|
||||
self.$annotationPanel[i].removeItem(id);
|
||||
};
|
||||
|
||||
return that;
|
||||
|
|
|
@ -340,6 +340,9 @@ Forms
|
|||
background: -webkit-linear-gradient(top, rgb(160, 160, 160), rgb(192, 192, 192));
|
||||
}
|
||||
|
||||
.OxThemeClassic .OxEditableElement.OxSelected {
|
||||
background: rgb(208, 208, 208);
|
||||
}
|
||||
|
||||
/*
|
||||
================================================================================
|
||||
|
|
|
@ -329,7 +329,9 @@ Forms
|
|||
background: -webkit-linear-gradient(top, rgb(0, 0, 0), rgb(32, 32, 32) 10%, rgb(64, 64, 64));
|
||||
}
|
||||
|
||||
|
||||
.OxThemeModern .OxEditableElement.OxSelected {
|
||||
background: rgb(48, 48, 48);
|
||||
}
|
||||
|
||||
/*
|
||||
================================================================================
|
||||
|
|
Loading…
Reference in a new issue