update importAnnotationsDialog

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(

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) {
+pandora.ui.importAnnotationsDialog = function(data) {
-    var content = Ox.Element().css({margin: '16px'}),
+
-        file,
+    var layers = pandora.site.layers.filter(function(layer) {
-        height = 128,
-        layers = pandora.site.layers.filter(function(layer) {
             return layer.canAddAnnotations[pandora.user.level];
         }),
-        layer,
+
-        srt = [],
+        languages = Ox.sortBy(Ox.LANGUAGES.map(function(language) {
-        total = 0,
+            return {id: language.code, title: language.name};
-        importButton,
+        }, 'title')),
-        selectLayer,
+    
-        selectFile,
+        $content = Ox.Element()
-        that = Ox.Dialog({
+            .css({margin: '16px'}),
-            buttons: [
+
-                Ox.Button({
+        $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({
+            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.$('<div>')
+        .css({
+            marginTop: '16px'
+        })
+        .html('foo')
+        .appendTo($content),
+
+        $closeButton = Ox.Button({
             id: 'close',
             title: Ox._('Close')
-                }).bindEvent({
+        })
+        .bindEvent({
             click: function() {
                 that.close();
             }
         }),
-                importButton = Ox.Button({
+
+        $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')
-        })
-        .bindEvent({
-            close: function(data) {
-                that.close();
             }
         }),
-        $status = $('<div>').css({
-            padding: '4px',
-            paddingBottom: '8px'
-        }).appendTo(content);
 
-    setStatus(Ox._('Please select layer and .srt file'))
+        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;
+
 };