Don't reuse node-edit dialog for library export ui

Fixes #762

editor/js/ui/clipboard.js

@@ -35,9 +35,7 @@ RED.clipboard = (function() {
                         id: "clipboard-dialog-ok",
                         text: RED._("common.label.ok"),
                         click: function() {
-                            if (/Import/.test(dialog.dialog("option","title"))) {
                             RED.view.importNodes($("#clipboard-import").val());
-                            }
                             $( this ).dialog( "close" );
                         }
                     },

editor/js/ui/editor.js

@@ -306,22 +306,6 @@ RED.editor = (function() {
                                 editing_node.dirty = true;
                                 validateNode(editing_node);
                                 RED.view.redraw();
-                            } else if (/Export nodes to library/.test($( "#dialog" ).dialog("option","title"))) {
-                                //TODO: move this to RED.library
-                                var flowName = $("#node-input-filename").val();
-                                if (!/^\s*$/.test(flowName)) {
-                                    $.ajax({
-                                        url:'library/flows/'+flowName,
-                                        type: "POST",
-                                        data: $("#node-input-filename").attr('nodes'),
-                                        contentType: "application/json; charset=utf-8"
-                                    }).done(function() {
-                                            RED.library.loadFlowLibrary();
-                                            RED.notify(RED._("library.savedNodes"),"success");
-                                    }).fail(function(xhr,textStatus,err) {
-                                        RED.notify(RED._("library.saveFailed",{message:xhr.responseText}),"error");
-                                    });
-                                }
                             }
                             $( this ).dialog( "close" );
                         }

editor/js/ui/library.js

@@ -16,6 +16,8 @@
 RED.library = (function() {
 
 
+    var exportToLibraryDialog;
+
     function loadFlowLibrary() {
         $.getJSON("library/flows",function(data) {
             //console.log(data);
@@ -382,10 +384,8 @@ RED.library = (function() {
     function exportFlow() {
         //TODO: don't rely on the main dialog
         var nns = RED.nodes.createExportableNodeSet(RED.view.selection().nodes);
-        $("#dialog-form").html($("script[data-template-name='export-library-dialog']").html());
         $("#node-input-filename").attr('nodes',JSON.stringify(nns));
-        $("#dialog").i18n();
+        exportToLibraryDialog.dialog( "open" );
-        $("#dialog").dialog("option","title",RED._("library.exportToLibrary")).dialog( "open" );
     }
 
     return {
@@ -405,6 +405,61 @@ RED.library = (function() {
             if (RED.settings.theme("menu.menu-item-import-library") !== false) {
                 loadFlowLibrary();
             }
+
+            exportToLibraryDialog = $('<div id="library-dialog" class="hide"><form class="dialog-form form-horizontal"></form></div>')
+                .appendTo("body")
+                .dialog({
+                    modal: true,
+                    autoOpen: false,
+                    width: 500,
+                    resizable: false,
+                    title: RED._("library.exportToLibrary"),
+                    buttons: [
+                        {
+                            id: "library-dialog-ok",
+                            text: RED._("common.label.ok"),
+                            click: function() {
+                                //TODO: move this to RED.library
+                                var flowName = $("#node-input-filename").val();
+                                if (!/^\s*$/.test(flowName)) {
+                                    $.ajax({
+                                        url:'library/flows/'+flowName,
+                                        type: "POST",
+                                        data: $("#node-input-filename").attr('nodes'),
+                                        contentType: "application/json; charset=utf-8"
+                                    }).done(function() {
+                                            RED.library.loadFlowLibrary();
+                                            RED.notify(RED._("library.savedNodes"),"success");
+                                    }).fail(function(xhr,textStatus,err) {
+                                        RED.notify(RED._("library.saveFailed",{message:xhr.responseText}),"error");
+                                    });
+                                }
+                                $( this ).dialog( "close" );
+                            }
+                        },
+                        {
+                            id: "library-dialog-cancel",
+                            text: RED._("common.label.cancel"),
+                            click: function() {
+                                $( this ).dialog( "close" );
+                            }
+                        }
+                    ],
+                    open: function(e) {
+                        $(this).parent().find(".ui-dialog-titlebar-close").hide();
+                        RED.keyboard.disable();
+                    },
+                    close: function(e) {
+                        RED.keyboard.enable();
+                    }
+            });
+            exportToLibraryDialog.children(".dialog-form").append($(
+                '<div class="form-row">'+
+                '<label for="node-input-filename" data-i18n="[append]editor:library.filename"><i class="fa fa-file"></i> </label>'+
+                '<input type="text" id="node-input-filename" data-i18n="[placeholder]editor:library.fullFilenamePlaceholder">'+
+                '<input type="text" style="display: none;" />'+ // Second hidden input to prevent submit on Enter
+                '</div>'
+            ));
         },
         create: createUI,
         loadFlowLibrary: loadFlowLibrary,

editor/templates/index.mst

@@ -162,13 +162,6 @@
     </form>
 </div>
 
-<script type="text/x-red" data-template-name="export-library-dialog">
-    <div class="form-row">
-        <label for="node-input-filename" data-i18n="[append]editor:library.filename"><i class="fa fa-file"></i> </label>
-        <input type="text" id="node-input-filename" data-i18n="[placeholder]editor:library.fullFilenamePlaceholder">
-    </div>
-</script>
-
 <script type="text/x-red" data-template-name="subflow">
     <div class="form-row">
         <label for="node-input-name" data-i18n="[append]editor:common.label.name"><i class="fa fa-tag"></i> </label>