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