From b24b62eccb7b4fb6d522766694774d96ed9eb654 Mon Sep 17 00:00:00 2001 From: rolux Date: Thu, 18 Sep 2014 16:44:57 +0200 Subject: [PATCH] update annotation import/export dialogs --- static/js/exportAnnotationsDialog.js | 98 +++++++++++++++++++++++++++- static/js/importAnnotationsDialog.js | 50 +++++++------- 2 files changed, 119 insertions(+), 29 deletions(-) diff --git a/static/js/exportAnnotationsDialog.js b/static/js/exportAnnotationsDialog.js index fd14c88b..2b3102ab 100644 --- a/static/js/exportAnnotationsDialog.js +++ b/static/js/exportAnnotationsDialog.js @@ -1,5 +1,101 @@ 'use strict'; -pandora.ui.exportAnnotationsDialog = function() { +pandora.ui.exportAnnotationsDialog = function(options) { + + var annotations = pandora.$ui.editor.getCurrentAnnotations(), + + layers = pandora.site.layers.map(function(layer) { + return { + disabled: annotations[layer.id].length == 0, + id: layer.id, + title: layer.title + } + }), + + enabledLayers = layers.filter(function(layer) { + return layer.disabled == false; + }), + + layer = (enabledLayers.length ? enabledLayers : layers)[0].id, + + $content = Ox.Element().css({margin: '16px'}), + + $layerSelect = Ox.Select({ + items: layers, + label: Ox._('Layer'), + labelWidth: 128, + value: layer, + width: 384 + }) + .css({ + marginTop: '16px' + }) + .bindEvent({ + change: function() { + updateStatus(); + that.enableButton('export'); + } + }) + .appendTo($content), + + $status = Ox.$('
') + .css({ + marginTop: '16px' + }) + .appendTo($content), + + that = Ox.Dialog({ + buttons: [ + Ox.Button({ + id: 'dontExport', + title: Ox._('Don\'t Export') + }) + .bindEvent({ + click: function() { + that.close(); + } + }), + Ox.Button({ + disabled: enabledLayers.length == 0, + id: 'export', + title: Ox._('Export') + }) + .bindEvent({ + click: exportAnnotations + }) + ], + closeButton: true, + content: $content, + fixedSize: true, + height: 80, + removeOnClose: true, + title: Ox._('Export Annotations'), + width: 416 + }); + + updateStatus(); + + function exportAnnotations() { + Ox.print( + Ox.formatSRT(annotations[$layerSelect.value()].map(function(annotation) { + return { + 'in': annotation['in'], + out: annotation.out, + text: annotation.value + .replace(/\n/g, ' ') + .replace(/\s+/g, ' ') + .replace(/
/g, '\n') + }; + })) + ); + } + + function updateStatus() { + $status.html(Ox._('All {0} currently shown will be exported.', [ + Ox.getObjectById(layers, $layerSelect.value()).title.toLowerCase() + ])); + } + + return that; }; \ No newline at end of file diff --git a/static/js/importAnnotationsDialog.js b/static/js/importAnnotationsDialog.js index e617b97a..6dfcc3f8 100644 --- a/static/js/importAnnotationsDialog.js +++ b/static/js/importAnnotationsDialog.js @@ -1,7 +1,7 @@ // vim: et:ts=4:sw=4:sts=4:ft=javascript 'use strict'; -pandora.ui.importAnnotationsDialog = function(duration) { +pandora.ui.importAnnotationsDialog = function(options) { var layers = pandora.site.layers.filter(function(layer) { return layer.canAddAnnotations[pandora.user.level]; @@ -11,8 +11,7 @@ pandora.ui.importAnnotationsDialog = function(duration) { return {id: language.code, title: language.name}; }), 'title'), - $content = Ox.Element() - .css({margin: '16px'}), + $content = Ox.Element().css({margin: '16px'}), $layerSelect = Ox.Select({ items: layers, @@ -80,11 +79,12 @@ pandora.ui.importAnnotationsDialog = function(duration) { id: 'import', title: Ox._('Import') }).bindEvent({ - click: addAnnotations + click: importAnnotations }) ], closeButton: true, content: $content, + fixedSize: true, height: 144, keys: { escape: 'dontImport' @@ -96,7 +96,17 @@ pandora.ui.importAnnotationsDialog = function(duration) { updateLanguageSelect(); - function addAnnotations() { + function disableButtons() { + that.disableButtons(); + that.disableCloseButton(); + } + + function enableButtons() { + that.enableButtons(); + that.enableCloseButton(); + } + + function importAnnotations() { var annotations = [], language = $languageSelect.value(), @@ -111,7 +121,7 @@ pandora.ui.importAnnotationsDialog = function(duration) { annotations = parseSRT(this.result); } if (annotations.length) { - setStatus(Ox._( + $status.html(Ox._( 'Importing {0} annotation' + (annotations.length == 1 ? '' : 's') + '...', [annotations.length] @@ -139,57 +149,41 @@ pandora.ui.importAnnotationsDialog = function(duration) { if (result.data.taskId) { pandora.wait(result.data.taskId, function(result) { if (result.data.status == 'SUCCESS') { - setStatus(Ox._('Import succeeded.')); + $status.html(Ox._('Import succeeded.')); Ox.Request.clearCache(pandora.user.ui.item); pandora.$ui.contentPanel.replaceElement( 1, pandora.$ui.item = pandora.ui.item() ); } else { - setStatus(Ox._('Import failed.')); + $status.html(Ox._('Import failed.')); } enableButtons(); }); } else { - setStatus(Ox._('Import failed.')); + $status.html(Ox._('Import failed.')); enableButtons(); } }); } else { - setStatus(Ox._('No valid annotations found.')); + $status.html(Ox._('No valid annotations found.')); enableButtons(); } }; - setTimeout(function() { - reader.readAsText(file); - }, 250); + reader.readAsText(file); } - function disableButtons() { - that.disableButtons(); - that.disableCloseButton(); - } - - function enableButtons() { - that.enableButtons(); - that.enableCloseButton(); - } - function parseSRT(srt) { return Ox.parseSRT(srt).filter(function(annotation) { return !Ox.isUndefined(annotation['in']) && !Ox.isUndefined(annotation.out) && annotation['in'] <= annotation.out - && annotation.out <= duration + && annotation.out <= options.duration && annotation.text; }); } - function setStatus(status) { - $status.html(status); - } - function updateLanguageSelect() { var layerType = Ox.getObjectById( pandora.site.layers, $layerSelect.value()