update annotation import/export dialogs

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.$('<div>')
+        .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(/<br>/g, '\n')
+                };
+            }))
+        );
+    }
+
+    function updateStatus() {
+        $status.html(Ox._('All {0} currently shown will be exported.', [
+            Ox.getObjectById(layers, $layerSelect.value()).title.toLowerCase()
+        ]));
+    }
+
+    return that;
 
 };

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()
+        $content = Ox.Element().css({margin: '16px'}),
-            .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);
-            reader.readAsText(file);
-        }, 250);
 
     }
 
-    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()