diff --git a/static/js/editor.js b/static/js/editor.js index 3c7faebbf..38652e99c 100644 --- a/static/js/editor.js +++ b/static/js/editor.js @@ -169,6 +169,9 @@ pandora.ui.editor = function(data) { pandora.$ui.embedVideoDialog && pandora.$ui.embedVideoDialog.remove(); pandora.$ui.embedVideoDialog = pandora.ui.embedVideoDialog().open(); }, + exportannotations: function() { + // ... + }, find: function(data) { pandora.UI.set({itemFind: data.find}); }, @@ -186,7 +189,7 @@ pandora.ui.editor = function(data) { pandora.$ui.mainMenu.replaceItemMenu(); }, importannotations: function(data) { - pandora.ui.importAnnotations().open(); + pandora.ui.importAnnotationsDialog().open(); }, info: function(data) { pandora.ui.annotationDialog( diff --git a/static/js/importAnnotations.js b/static/js/importAnnotationsDialog.js similarity index 65% rename from static/js/importAnnotations.js rename to static/js/importAnnotationsDialog.js index 7bd53f667..1523a3988 100644 --- a/static/js/importAnnotations.js +++ b/static/js/importAnnotationsDialog.js @@ -1,68 +1,127 @@ // vim: et:ts=4:sw=4:sts=4:ft=javascript 'use strict'; -pandora.ui.importAnnotations = function(data) { - var content = Ox.Element().css({margin: '16px'}), - file, - height = 128, - layers = pandora.site.layers.filter(function(layer) { +pandora.ui.importAnnotationsDialog = function(data) { + + var layers = pandora.site.layers.filter(function(layer) { return layer.canAddAnnotations[pandora.user.level]; }), - layer, - srt = [], - total = 0, - importButton, - selectLayer, - selectFile, - that = Ox.Dialog({ - buttons: [ - Ox.Button({ - id: 'close', - title: Ox._('Close') - }).bindEvent({ - click: function() { - that.close(); - } - }), - importButton = Ox.Button({ - disabled: true, - id: 'import', - title: Ox._('Import') - }).bindEvent({ - click: function() { - importButton.hide(); - addAnnotations(); - } - }) - ], - closeButton: true, - content: content, - keys: { - 'escape': 'close' - }, - height: 128, - removeOnClose: true, - width: 368, - title: Ox._('Import Annotations') + + languages = Ox.sortBy(Ox.LANGUAGES.map(function(language) { + return {id: language.code, title: language.name}; + }, 'title')), + + $content = Ox.Element() + .css({margin: '16px'}), + + $layerSelect = Ox.Select({ + items: layers, + label: Ox._('Layer'), + labelWidth: 128 + width: 384 + }) + .css({ + marginTop: '16px' + }) + .appendTo($content), + + $languageSelect = Ox.Select({ + items: layers, + label: Ox._('Language'), + labelWidth: 128 + width: 384 + }) + .css({ + marginTop: '16px' + }) + .appendTo($content), + + $fileInput = Ox.FileInput({ + max: 1, + width: 384 + }) + .css({ + marginTop: '16px' }) .bindEvent({ - close: function(data) { + change: function(data) { + if (data.files.length) { + var reader = new FileReader(); + reader.onloadend = function(event) { + srt = parseSRT(this.result); + total = srt.length; + if (total && layer) { + importButton.options({disabled: false}); + selectLayer.hide(); + selectFile.hide(); + } + setStatus( + Ox._('File contains {0} annotation' + + (total == 1 ? '' : 's') + '.', [total]) + ); + }; + reader.readAsText(data.files[0]); + } else { + srt = []; + total = 0; + importButton.options({ + disabled: true + }); + } + } + }) + .appendTo($content), + + $status = Ox.$('
') + .css({ + marginTop: '16px' + }) + .html('foo') + .appendTo($content), + + $closeButton = Ox.Button({ + id: 'close', + title: Ox._('Close') + }) + .bindEvent({ + click: function() { that.close(); } }), - $status = $('
').css({ - padding: '4px', - paddingBottom: '8px' - }).appendTo(content); - setStatus(Ox._('Please select layer and .srt file')) + $importButton = Ox.Button({ + disabled: true, + id: 'import', + title: Ox._('Import') + }).bindEvent({ + click: function() { + // ... + } + }), + + that = Ox.Dialog({ + buttons: [ + $closeButton, + $importButton + ], + content: $content, + height: 144, + keys: { + escape: 'close' + }, + removeOnClose: true, + title: Ox._('Import Annotations'), + width: 416 + }); + function addAnnotations() { var annotations, task; if (srt.length > 0) { setStatus(Ox._('Loading...')); var annotations = srt.filter(function(data) { - return !Ox.isUndefined(data['in']) && !Ox.isUndefined(data.out) && data.text; - + return !Ox.isUndefined(data['in']) + && !Ox.isUndefined(data.out) + && data.text; }).map(function(data) { return { 'in': data['in'], @@ -99,6 +158,7 @@ pandora.ui.importAnnotations = function(data) { }); } } + function parseSRT(data) { var srt = Ox.parseSRT(data), length = srt.length - 1; @@ -118,61 +178,6 @@ pandora.ui.importAnnotations = function(data) { $status.html(status); } - selectLayer = Ox.Select({ - items: layers, - title: Ox._('Select Layer'), - }) - .css({ - margin: '4px 2px 4px 4px' - }) - .bindEvent({ - change: function(data) { - selectLayer.options({ - title: null - }); - layer = data.value; - total && layer && importButton.options({disabled: false}); - } - }) - .appendTo(content); - - selectFile = Ox.FileButton({ - image: 'upload', - lbael: 'File', - title: Ox._('Select SRT...'), - width: 156 - }) - .css({ - margin: '4px 2px 4px 4px' - }) - .bindEvent({ - click: function(data) { - if (data.files.length) { - var reader = new FileReader(); - reader.onloadend = function(event) { - srt = parseSRT(this.result); - total = srt.length; - if (total && layer) { - importButton.options({disabled: false}); - selectLayer.hide(); - selectFile.hide(); - } - setStatus( - Ox._('File contains {0} annotation' - + (total == 1 ? '' : 's') + '.', [total]) - ); - }; - reader.readAsText(data.files[0]); - } else { - srt = []; - total = 0; - importButton.options({ - disabled: true - }); - } - } - }) - .appendTo(content); - return that; + };