refactor import annotations dialog

This commit is contained in:
j 2012-02-16 18:41:27 +05:30
parent 9a41061124
commit 3f2536dc75
2 changed files with 100 additions and 57 deletions

View file

@ -22,7 +22,6 @@ pandora.ui.embedDialog = function(data) {
keys: { keys: {
'escape': 'close' 'escape': 'close'
}, },
maximizeButton: true,
removeOnClose: true, removeOnClose: true,
title: 'Embed Video', title: 'Embed Video',
width: 600 width: 600

View file

@ -4,8 +4,17 @@
pandora.ui.importAnnotations = function(data) { pandora.ui.importAnnotations = function(data) {
var content = Ox.Element().css({margin: '16px'}), var content = Ox.Element().css({margin: '16px'}),
file, file,
height = 180, height = 192,
width = 640, layers = pandora.site.layers.filter(function(layer) {
return layer.canAddAnnotations[pandora.user.level];
}),
layer = layers[0].id,
width = 384,
srt = [],
total = 0,
importButton,
selectLayer,
selectFile,
that = Ox.Dialog({ that = Ox.Dialog({
buttons: [ buttons: [
Ox.Button({ Ox.Button({
@ -15,6 +24,18 @@ pandora.ui.importAnnotations = function(data) {
click: function() { click: function() {
that.close(); that.close();
} }
}),
importButton = Ox.Button({
disabled: true,
id: 'import',
title: 'Import',
}).bindEvent({
click: function() {
importButton.hide();
selectLayer.hide();
selectFile.hide();
addAnnotation();
}
}) })
], ],
closeButton: true, closeButton: true,
@ -22,7 +43,6 @@ pandora.ui.importAnnotations = function(data) {
keys: { keys: {
'escape': 'close' 'escape': 'close'
}, },
maximizeButton: true,
height: height, height: height,
removeOnClose: true, removeOnClose: true,
width: width, width: width,
@ -30,35 +50,18 @@ pandora.ui.importAnnotations = function(data) {
}) })
.bindEvent({ .bindEvent({
close: function(data) { close: function(data) {
that.close();
} }
}),
$status = $('<div>').css({
padding: '4px'
}); });
Ox.Select({
items: Ox.merge([{id: '', title: 'Select Layer'}], pandora.site.layers),
value: '',
})
.bindEvent({
change: function(data) {
var layer = data.value;
$('<input>')
.attr({
type: 'file'
})
.css({
padding: '8px'
})
.bind({
change: function(event) {
file = this.files[0];
var reader = new FileReader();
reader.onloadend = function(event) {
var srt = Ox.parseSRT(this.result),
total = srt.length;
function addAnnotation() { function addAnnotation() {
if(srt.length>0) { if(srt.length>0) {
var data = srt.shift(); var data = srt.shift();
data.text = Ox.parseHTML(data.text); data.text = Ox.parseHTML(data.text);
content.html('Importing '+total+' <b>'+ layer +'</b>: <br>\n' $status.html(Ox.formatDuration(data['in'])
+ Ox.formatDuration(data['in'])
+ ' to ' + Ox.formatDuration(data.out) + '<br>\n' + ' to ' + Ox.formatDuration(data.out) + '<br>\n'
+ data.text); + data.text);
pandora.api.addAnnotation({ pandora.api.addAnnotation({
@ -75,21 +78,62 @@ pandora.ui.importAnnotations = function(data) {
} }
}); });
} else { } else {
content.html('Done'); $status.html(total + ' annotations imported.');
Ox.Request.clearCache(pandora.user.ui.item); Ox.Request.clearCache(pandora.user.ui.item);
pandora.$ui.contentPanel.replaceElement( pandora.$ui.contentPanel.replaceElement(
1, pandora.$ui.item = pandora.ui.item() 1, pandora.$ui.item = pandora.ui.item()
); );
} }
} }
addAnnotation(); content.append($('<div>').css({
padding: '4px',
paddingBottom: '16px'
}).html('Import annotations from .srt file:'));
selectLayer = Ox.Select({
items: layers,
value: layer,
label: 'Layer',
})
.bindEvent({
change: function(data) {
layer = data.value;
}
})
.appendTo(content);
selectFile = $('<input>')
.attr({
type: 'file'
})
.css({
padding: '8px'
})
.bind({
change: function(event) {
if(this.files.length) {
file = this.files[0];
var reader = new FileReader();
reader.onloadend = function(event) {
srt = Ox.parseSRT(this.result);
total = srt.length;
if(total) {
importButton.options({
disabled: false
});
}
$status.html('File contains '+ total + ' annotations.');
}; };
reader.readAsText(file); reader.readAsText(file);
} else {
srt = [];
total = 0;
importButton.options({
disabled: true
});
}
} }
}) })
.appendTo(content); .appendTo(content);
} content.append($status);
})
.appendTo(content);
return that; return that;
}; };