0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

update video editor and css

Browse source
This commit is contained in:
rlx 2012-01-11 13:22:01 +05:30
parent 88f31a5ae3
commit e4dd393834
5 changed files with 65 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
source/Ox.UI/js/Form/Ox.Editable.js
View file

@ -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/>')
/*

6
source/Ox.UI/js/Video/Ox.AnnotationPanel.js
View file

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

48
source/Ox.UI/js/Video/Ox.VideoEditor.js
View file

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

8
source/Ox.UI/themes/classic/css/classic.css
View file

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

11
source/Ox.UI/themes/modern/css/modern.css
View file

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