add Ox.ArrayEditable

This commit is contained in:
rolux 2012-01-03 15:57:54 +05:30
commit d64e39c5b2
5 changed files with 61 additions and 52 deletions

View file

@ -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);

View file

@ -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;
};

View file

@ -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;

View file

@ -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);
}
/*
================================================================================

View file

@ -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);
}
/*
================================================================================