update video editor and css
This commit is contained in:
parent
88f31a5ae3
commit
e4dd393834
5 changed files with 65 additions and 9 deletions
|
@ -185,7 +185,6 @@ Ox.Editable = function(options, self) {
|
|||
return self.options.type == 'input'
|
||||
? self.options.value.replace(/ /g, ' ')
|
||||
: Ox.encodeHTML(self.options.value || ' ')
|
||||
//.replace(/ /g, ' ')
|
||||
.replace(/\n$/, '\n ')
|
||||
.replace(/\n/g, '<br/>')
|
||||
/*
|
||||
|
|
|
@ -22,6 +22,7 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
self = self || {};
|
||||
var that = Ox.Element({}, self)
|
||||
.defaults({
|
||||
collapsed: false,
|
||||
editable: false,
|
||||
id: '',
|
||||
items: [],
|
||||
|
@ -50,7 +51,7 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
|
||||
that.setElement(
|
||||
Ox.CollapsePanel({
|
||||
collapsed: false,
|
||||
collapsed: self.options.collapsed,
|
||||
extras: self.options.editable ? [
|
||||
Ox.Button({
|
||||
id: 'add',
|
||||
|
@ -147,7 +148,8 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
}
|
||||
|
||||
function togglePanel() {
|
||||
|
||||
self.options.collapsed = !self.options.collapsed;
|
||||
that.triggerEvent('toggle', {collapsed: self.options.collapsed});
|
||||
}
|
||||
|
||||
self.setOption = function(key, value) {
|
||||
|
|
|
@ -43,6 +43,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
selected: '',
|
||||
showAnnotations: false,
|
||||
showLargeTimeline: true,
|
||||
showLayers: {},
|
||||
subtitles: [],
|
||||
tooltips: false,
|
||||
videoRatio: 16/9,
|
||||
|
@ -90,6 +91,9 @@ Ox.VideoEditor = function(options, self) {
|
|||
editAnnotation();
|
||||
}
|
||||
},
|
||||
key_equal: function() {
|
||||
self.options.videoSize == 'small' && toggleSize();
|
||||
},
|
||||
key_escape: function() {
|
||||
if (self.editing) {
|
||||
blurAnnotation();
|
||||
|
@ -111,6 +115,9 @@ Ox.VideoEditor = function(options, self) {
|
|||
key_left: function() {
|
||||
movePositionBy(-0.04);
|
||||
},
|
||||
key_minus: function() {
|
||||
self.options.videoSize == 'large' && toggleSize();
|
||||
},
|
||||
key_o: function() {
|
||||
setPoint('out', self.options.position);
|
||||
},
|
||||
|
@ -347,6 +354,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
selected = item ? item.id : '';
|
||||
self.$annotationPanel[i] = Ox.AnnotationPanel(
|
||||
Ox.extend({
|
||||
collapsed: !self.options.showLayers[layer.id],
|
||||
font: self.options.annotationsFont,
|
||||
'in': self.options['in'],
|
||||
out: self.options.out,
|
||||
|
@ -393,7 +401,13 @@ Ox.VideoEditor = function(options, self) {
|
|||
// ...
|
||||
}
|
||||
},
|
||||
submit: submitAnnotation
|
||||
submit: submitAnnotation,
|
||||
toggle: function(data) {
|
||||
that.triggerEvent('togglelayer', {
|
||||
collapsed: data.collapsed,
|
||||
layer: layer.id
|
||||
});
|
||||
}
|
||||
})
|
||||
.appendTo(self.$annotations);
|
||||
});
|
||||
|
@ -724,6 +738,31 @@ Ox.VideoEditor = function(options, self) {
|
|||
})
|
||||
.appendTo(self.$annotationsbar);
|
||||
|
||||
self.$editMenuButton = Ox.MenuButton({
|
||||
items: [
|
||||
{id: 'edit', title: 'Edit Selected Annotation', disabled: !self.options.selected, keyboard: 'return'},
|
||||
{id: 'delete', title: 'Delete Selected Annotation', disabled: !self.options.selected, keyboard: 'delete'},
|
||||
{},
|
||||
{id: 'save', title: 'Save Changes', disabled: true, keyboard: 'shift return'},
|
||||
{id: 'undo', title: 'Undo Changes', disabled: true, keyboard: 'escape'}
|
||||
],
|
||||
style: 'square',
|
||||
title: 'edit',
|
||||
tooltip: 'Editing Options',
|
||||
type: 'image'
|
||||
})
|
||||
.css({float: 'right'})
|
||||
.bindEvent({
|
||||
click: function(data) {
|
||||
if (data.id == 'delete') {
|
||||
|
||||
} else if (data.id == 'edit') {
|
||||
editAnnotation();
|
||||
}
|
||||
}
|
||||
})
|
||||
.appendTo(self.$annotationsbar);
|
||||
|
||||
that.setElement(
|
||||
Ox.SplitPanel({
|
||||
elements: [
|
||||
|
@ -1065,6 +1104,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
getPanel(self.options.selected).options({selected: self.options.selected});
|
||||
}
|
||||
setTimelineState();
|
||||
updateEditMenu();
|
||||
that.triggerEvent('select', {
|
||||
id: self.options.selected
|
||||
});
|
||||
|
@ -1252,6 +1292,12 @@ Ox.VideoEditor = function(options, self) {
|
|||
});
|
||||
}
|
||||
|
||||
function updateEditMenu() {
|
||||
var action = self.options.selected ? 'enableItem' : 'disableItem';
|
||||
self.$editMenuButton[action]('edit');
|
||||
self.$editMenuButton[action]('delete');
|
||||
}
|
||||
|
||||
self.setOption = function(key, value) {
|
||||
if (key == 'width' || key == 'height') {
|
||||
Ox.Log('Video', 'XXXX setSizes', key, value, self.options.width, self.options.height)
|
||||
|
|
|
@ -740,15 +740,17 @@ Video
|
|||
}
|
||||
|
||||
.OxThemeClassic .OxAnnotationPanel .OxEditableElement.OxSelected {
|
||||
background: rgb(192, 192, 255);
|
||||
box-shadow: 0 0 1px rgb(96, 96, 96);
|
||||
background: rgb(128, 128, 255);
|
||||
box-shadow: 0 0 1px rgb(64, 64, 64);
|
||||
}
|
||||
.OxThemeClassic .OxAnnotationPanel .OxEditableElement input {
|
||||
background: rgb(160, 224, 160);
|
||||
box-shadow: 0 0 1px rgb(96, 96, 96);
|
||||
color: rgb(0, 0, 0);
|
||||
box-shadow: 0 0 1px rgb(64, 64, 64);
|
||||
}
|
||||
.OxThemeClassic .OxAnnotationPanel .OxEditableElement textarea {
|
||||
background: rgb(160, 224, 160);
|
||||
color: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
|
@ -761,10 +761,17 @@ Video
|
|||
}
|
||||
|
||||
.OxThemeModern .OxAnnotationPanel .OxEditableElement.OxSelected {
|
||||
background: rgb(0, 128, 0);
|
||||
background: rgb(64, 64, 192);
|
||||
box-shadow: 0 0 1px rgb(255, 255, 255);
|
||||
}
|
||||
.OxThemeModern .OxAnnotationPanel .OxEditableElement input {
|
||||
background: rgb(64, 64, 192);
|
||||
background: rgb(64, 128, 64);
|
||||
color: rgb(255, 255, 255);
|
||||
box-shadow: 0 0 1px rgb(255, 255, 255);
|
||||
}
|
||||
.OxThemeModern .OxAnnotationPanel .OxEditableElement textarea {
|
||||
background: rgb(64, 128, 64);
|
||||
color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
Loading…
Reference in a new issue