forked from 0x2620/pandora
update importAnnotationsDialog
This commit is contained in:
parent
72fce725d7
commit
699f417cc8
1 changed files with 67 additions and 35 deletions
|
@ -3,14 +3,16 @@
|
||||||
|
|
||||||
pandora.ui.importAnnotationsDialog = function(data) {
|
pandora.ui.importAnnotationsDialog = function(data) {
|
||||||
|
|
||||||
var layers = pandora.site.layers.filter(function(layer) {
|
var srt,
|
||||||
|
|
||||||
|
layers = pandora.site.layers.filter(function(layer) {
|
||||||
return layer.canAddAnnotations[pandora.user.level];
|
return layer.canAddAnnotations[pandora.user.level];
|
||||||
}),
|
}),
|
||||||
|
|
||||||
languages = Ox.sortBy(Ox.LANGUAGES.map(function(language) {
|
languages = Ox.sortBy(Ox.LANGUAGES.map(function(language) {
|
||||||
return {id: language.code, title: language.name};
|
return {id: language.code, title: language.name};
|
||||||
}), 'title'),
|
}), 'title'),
|
||||||
|
|
||||||
$content = Ox.Element()
|
$content = Ox.Element()
|
||||||
.css({margin: '16px'}),
|
.css({margin: '16px'}),
|
||||||
|
|
||||||
|
@ -23,12 +25,18 @@ pandora.ui.importAnnotationsDialog = function(data) {
|
||||||
.css({
|
.css({
|
||||||
marginTop: '16px'
|
marginTop: '16px'
|
||||||
})
|
})
|
||||||
|
.bindEvent({
|
||||||
|
change: function() {
|
||||||
|
updateLanguageSelect();
|
||||||
|
}
|
||||||
|
})
|
||||||
.appendTo($content),
|
.appendTo($content),
|
||||||
|
|
||||||
$languageSelect = Ox.Select({
|
$languageSelect = Ox.Select({
|
||||||
items: languages,
|
items: languages,
|
||||||
label: Ox._('Language'),
|
label: Ox._('Language'),
|
||||||
labelWidth: 128,
|
labelWidth: 128,
|
||||||
|
value: pandora.site.language,
|
||||||
width: 384
|
width: 384
|
||||||
})
|
})
|
||||||
.css({
|
.css({
|
||||||
|
@ -37,6 +45,8 @@ pandora.ui.importAnnotationsDialog = function(data) {
|
||||||
.appendTo($content),
|
.appendTo($content),
|
||||||
|
|
||||||
$fileInput = Ox.FileInput({
|
$fileInput = Ox.FileInput({
|
||||||
|
label: Ox._('SRT File'),
|
||||||
|
labelWidth: 128,
|
||||||
maxFiles: 1,
|
maxFiles: 1,
|
||||||
width: 384
|
width: 384
|
||||||
})
|
})
|
||||||
|
@ -48,24 +58,24 @@ pandora.ui.importAnnotationsDialog = function(data) {
|
||||||
var reader;
|
var reader;
|
||||||
if (data.value.length) {
|
if (data.value.length) {
|
||||||
reader = new FileReader();
|
reader = new FileReader();
|
||||||
reader.onloadend = function(event) {
|
reader.onloadend = function(e) {
|
||||||
srt = parseSRT(this.result);
|
if (this.result) {
|
||||||
total = srt.length;
|
srt = parseSRT(this.result);
|
||||||
if (total && layer) {
|
if (srt.length) {
|
||||||
importButton.options({disabled: false});
|
$importButton.options({disabled: false});
|
||||||
selectLayer.hide();
|
//selectLayer.hide();
|
||||||
selectFile.hide();
|
//selectFile.hide();
|
||||||
|
}
|
||||||
|
setStatus(
|
||||||
|
Ox._('File contains {0} annotation'
|
||||||
|
+ (srt.length == 1 ? '' : 's') + '.', [srt.length])
|
||||||
|
);
|
||||||
}
|
}
|
||||||
setStatus(
|
|
||||||
Ox._('File contains {0} annotation'
|
|
||||||
+ (total == 1 ? '' : 's') + '.', [total])
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
reader.readAsText(data.value[0]);
|
reader.readAsText(data.value[0]);
|
||||||
} else {
|
} else {
|
||||||
srt = [];
|
srt = [];
|
||||||
total = 0;
|
$importButton.options({
|
||||||
importButton.options({
|
|
||||||
disabled: true
|
disabled: true
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -75,14 +85,13 @@ pandora.ui.importAnnotationsDialog = function(data) {
|
||||||
|
|
||||||
$status = Ox.$('<div>')
|
$status = Ox.$('<div>')
|
||||||
.css({
|
.css({
|
||||||
marginTop: '16px'
|
marginTop: '48px' // FIXME
|
||||||
})
|
})
|
||||||
.html('foo')
|
|
||||||
.appendTo($content),
|
.appendTo($content),
|
||||||
|
|
||||||
$closeButton = Ox.Button({
|
$dontImportButton = Ox.Button({
|
||||||
id: 'close',
|
id: 'dontImport',
|
||||||
title: Ox._('Close')
|
title: Ox._('Don\'t Import')
|
||||||
})
|
})
|
||||||
.bindEvent({
|
.bindEvent({
|
||||||
click: function() {
|
click: function() {
|
||||||
|
@ -96,41 +105,51 @@ pandora.ui.importAnnotationsDialog = function(data) {
|
||||||
title: Ox._('Import')
|
title: Ox._('Import')
|
||||||
}).bindEvent({
|
}).bindEvent({
|
||||||
click: function() {
|
click: function() {
|
||||||
// ...
|
addAnnotations();
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
|
|
||||||
that = Ox.Dialog({
|
that = Ox.Dialog({
|
||||||
buttons: [
|
buttons: [
|
||||||
$closeButton,
|
$dontImportButton,
|
||||||
$importButton
|
$importButton
|
||||||
],
|
],
|
||||||
|
closeButton: true,
|
||||||
content: $content,
|
content: $content,
|
||||||
height: 144,
|
height: 144,
|
||||||
keys: {
|
keys: {
|
||||||
escape: 'close'
|
escape: 'dontImport'
|
||||||
},
|
},
|
||||||
removeOnClose: true,
|
removeOnClose: true,
|
||||||
title: Ox._('Import Annotations'),
|
title: Ox._('Import Annotations'),
|
||||||
width: 416
|
width: 416
|
||||||
});
|
});
|
||||||
|
|
||||||
|
updateLanguageSelect()
|
||||||
|
|
||||||
function addAnnotations() {
|
function addAnnotations() {
|
||||||
var annotations, task;
|
var annotations,
|
||||||
|
language = $languageSelect.value(),
|
||||||
|
layer = $layerSelect.value(),
|
||||||
|
task;
|
||||||
if (srt.length > 0) {
|
if (srt.length > 0) {
|
||||||
setStatus(Ox._('Loading...'));
|
setStatus(Ox._('Importing {0} annotations...', [srt.length]));
|
||||||
var annotations = srt.filter(function(data) {
|
annotations = srt.filter(function(data) {
|
||||||
return !Ox.isUndefined(data['in'])
|
return !Ox.isUndefined(data['in'])
|
||||||
&& !Ox.isUndefined(data.out)
|
&& !Ox.isUndefined(data.out)
|
||||||
&& data.text;
|
&& data.text;
|
||||||
}).map(function(data) {
|
}).map(function(data) {
|
||||||
|
var value = Ox.sanitizeHTML(data.text)
|
||||||
|
.replace(/<br[ /]*?>\n/g, '\n')
|
||||||
|
.replace(/\n\n/g, '<br>\n')
|
||||||
|
.replace(/\n/g, '<br>\n');
|
||||||
|
if (language != pandora.site.language) {
|
||||||
|
value = '<span lang="' + language + '">' + value + '</span>';
|
||||||
|
}
|
||||||
return {
|
return {
|
||||||
'in': data['in'],
|
'in': data['in'],
|
||||||
out: data.out,
|
out: data.out,
|
||||||
value: Ox.sanitizeHTML(data.text)
|
value: value
|
||||||
.replace(/<br[ /]*?>\n/g, '\n')
|
|
||||||
.replace(/\n\n/g, '<br>\n')
|
|
||||||
.replace(/\n/g, '<br>\n')
|
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
pandora.api.addAnnotations({
|
pandora.api.addAnnotations({
|
||||||
|
@ -139,9 +158,7 @@ pandora.ui.importAnnotationsDialog = function(data) {
|
||||||
layer: layer
|
layer: layer
|
||||||
}, function(result) {
|
}, function(result) {
|
||||||
if (result.data.taskId) {
|
if (result.data.taskId) {
|
||||||
$status.html('').append(Ox.LoadingScreen({
|
setStatus(Ox._('Importing {0} annotations...', [srt.length]));
|
||||||
text: Ox._('Importing {0} annotations...', [srt.length])
|
|
||||||
}).start());
|
|
||||||
pandora.wait(result.data.taskId, function(result) {
|
pandora.wait(result.data.taskId, function(result) {
|
||||||
if (result.data.status == 'SUCCESS') {
|
if (result.data.status == 'SUCCESS') {
|
||||||
setStatus(Ox._('{0} annotations imported.', [annotations.length]));
|
setStatus(Ox._('{0} annotations imported.', [annotations.length]));
|
||||||
|
@ -150,11 +167,11 @@ pandora.ui.importAnnotationsDialog = function(data) {
|
||||||
1, pandora.$ui.item = pandora.ui.item()
|
1, pandora.$ui.item = pandora.ui.item()
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
setStatus(Ox._('Importing annotations failed.'));
|
setStatus(Ox._('Import failed.'));
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
setStatus(Ox._('Importing annotations failed.'));
|
setStatus(Ox._('Import failed.'));
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -179,6 +196,21 @@ pandora.ui.importAnnotationsDialog = function(data) {
|
||||||
$status.html(status);
|
$status.html(status);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function updateLanguageSelect() {
|
||||||
|
var layerType = Ox.getObjectById(
|
||||||
|
pandora.site.layers, $layerSelect.value()
|
||||||
|
).type;
|
||||||
|
if (layerType != 'text') {
|
||||||
|
$languageSelect.value(pandora.site.language);
|
||||||
|
}
|
||||||
|
languages.forEach(function(language) {
|
||||||
|
$languageSelect[
|
||||||
|
language.id == pandora.site.language || layerType == 'text'
|
||||||
|
? 'enableItem' : 'disableItem'
|
||||||
|
](language.id);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
return that;
|
return that;
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in a new issue