Improved the positioning and sizing of dialogs.

vasl_templates/webapp/static/lfa-upload.js

@@ -4,6 +4,8 @@ var $gLogFilesToUpload ;
 var gEventHandlers ;
 var gDisableClickToAddTimestamp = new Date() ;
 
+var gLfaUploadDialogState = null ;
+
 // --------------------------------------------------------------------
 
 window.on_analyze_vlog = function()
@@ -84,11 +86,11 @@ window.on_analyze_vlog = function()
         title: "Analyze log files",
         dialogClass: "lfa-upload",
         modal: true,
-        width: $(window).innerWidth() / 2,
+        position: gLfaUploadDialogState ? gLfaUploadDialogState.position : { my: "center", at: "center", of: window },
+        width: gLfaUploadDialogState ? gLfaUploadDialogState.width : $(window).width() / 2,
+        height: gLfaUploadDialogState ? gLfaUploadDialogState.height : $(window).height() / 2,
         minWidth: 400,
-        height: $(window).innerHeight() / 2,
         minHeight: 300,
-        position: { my: "center", at: "center", of: window },
         create: function() {
             // initialize the dialog
             init_dialog( $(this), "OK", false ) ;
@@ -110,6 +112,9 @@ window.on_analyze_vlog = function()
             gEventHandlers.addHandler( $dlg.find(".hint"), "click", onAddFile ) ;
             updateUi() ;
         },
+        beforeClose: function() {
+            gLfaUploadDialogState = getDialogState( $(this) ) ;
+        },
         close: function() {
             // clean up handlers
             gEventHandlers.cleanUp() ;

vasl_templates/webapp/static/main.js

@@ -1172,6 +1172,8 @@ function findTopmostDialog()
 
 // --------------------------------------------------------------------
 
+var gProgramInfoDlgState = null ;
+
 function show_program_info()
 {
     // show the PROGRAM INFO dialog
@@ -1185,9 +1187,10 @@ function show_program_info()
         title: caption,
         dialogClass: "program-info",
         modal: true,
-        width: $(window).width() * 0.8,
+        position: gProgramInfoDlgState ? gProgramInfoDlgState.position : { my: "center", at: "center", of: window },
+        width: gProgramInfoDlgState ? gProgramInfoDlgState.width : $(window).width() * 0.8,
+        height: gProgramInfoDlgState ? gProgramInfoDlgState.height : $(window).height() * 0.8,
         minWidth: 750,
-        height: $(window).height() * 0.8,
         minHeight: 400,
         open: function() {
             var $dlg = $(this) ;
@@ -1202,6 +1205,9 @@ function show_program_info()
                 $dlg.dialog( "close" ) ;
             } ) ;
         },
+        beforeClose: function() {
+            gProgramInfoDlgState = getDialogState( $(this) ) ;
+        },
         buttons: {
             OK: function() {
                 $(this).dialog( "close" ) ;

vasl_templates/webapp/static/roar.js

@@ -2,6 +2,8 @@
 
 ( function() { // nb: put the entire file into its own local namespace, global stuff gets added to window.
 
+var gSelectRoarScenarioDlgState = null ;
+
 // --------------------------------------------------------------------
 
 window.selectRoarScenario = function( onSelected )
@@ -53,6 +55,9 @@ window.selectRoarScenario = function( onSelected )
             dialogClass: "select-roar-scenario",
             modal: true,
             closeOnEscape: false, // nb: handled in handle_escape()
+            position: gSelectRoarScenarioDlgState ? gSelectRoarScenarioDlgState.position : { my: "right bottom", at: "right-5 bottom-5", of: window },
+            width: gSelectRoarScenarioDlgState ? gSelectRoarScenarioDlgState.width : $(window).width() * 0.6,
+            height: gSelectRoarScenarioDlgState ? gSelectRoarScenarioDlgState.height : $(window).height() * 0.8,
             minWidth: 400,
             minHeight: 350,
             create: function() {
@@ -81,6 +86,9 @@ window.selectRoarScenario = function( onSelected )
                 onResize( $(this) ) ;
             },
             resize: function() { onResize( $(this) ) ; },
+            beforeClose: function() {
+                gSelectRoarScenarioDlgState = getDialogState( $(this) ) ;
+            },
             buttons: {
                 OK: { text: "OK", class: "ok", click: function() {
                     // notify the caller about the selected scenario

vasl_templates/webapp/static/scenario-upload.js

@@ -4,6 +4,7 @@
 
 var gVsavData, gScreenshotData ;
 var $gDialog, $gVsavContainer, $gScreenshotContainer ;
+var gScenarioUploadDlgState = null ;
 
 // --------------------------------------------------------------------
 
@@ -144,8 +145,10 @@ window.uploadScenario = function() {
         title: "Upload to the ASL Scenario Archive",
         dialogClass: "scenario-upload",
         modal: true,
-        width: 800, minWidth: 800,
-        height: 500, minHeight: 500,
+        position: gScenarioUploadDlgState ? gScenarioUploadDlgState.position : { my: "center", at: "center", of: window },
+        width: gScenarioUploadDlgState ? gScenarioUploadDlgState.width: $(window).width() * 0.8,
+        height: gScenarioUploadDlgState ? gScenarioUploadDlgState.height: $(window).height() * 0.8,
+        minWidth: 800, minHeight: 500,
         create: function() {
             // add handlers to add files to be uploaded
             $gVsavContainer = $(this).find( ".vsav-container" ) ;
@@ -210,6 +213,9 @@ window.uploadScenario = function() {
             updateUi() ;
         },
         resize: onResize,
+        beforeClose: function() {
+            gScenarioUploadDlgState = getDialogState( $(this) ) ;
+        },
         buttons: {
             Upload: { text: "Upload", class: "upload", click: function() {
                 uploadFiles( asaScenarioId ) ;

vasl_templates/webapp/static/scenarios.js

@@ -6,6 +6,8 @@ var gIsFirstSearch ;
 var $gDialog, $gScenariosSelect, $gSearchQueryInputBox, $gScenarioCard, $gFooter ;
 var $gImportControl, $gDownloadsButton, $gImportScenarioButton, $gConfirmImportButton, $gCancelImportButton, $gImportWarnings ;
 
+var gScenarioSearchDlgState=null, gScenarioInfoDlgState=null ;
+
 // At time of writing, there are ~8600 scenarios, and loading them all into a select2 makes it a bit sluggish.
 // The problem is when the user types the first 1 or 2 characters of the search query, which can result in
 // thousands of results being loaded into the DOM. We work-around this by limiting the number of results
@@ -36,11 +38,11 @@ window.searchForScenario = function()
             dialogClass: "scenario-search",
             modal: true,
             closeOnEscape: false, // nb: handled in handle_escape()
-            width: $(window).width() * 0.8,
+            position: gScenarioSearchDlgState ? gScenarioSearchDlgState.position : { my: "center", at: "center", of: window },
+            width: gScenarioSearchDlgState ? gScenarioSearchDlgState.width : $(window).width() * 0.8,
+            height: gScenarioSearchDlgState ? gScenarioSearchDlgState.height : $(window).height() * 0.8,
             minWidth: 760,
-            height: $(window).height() * 0.8,
             minHeight: 400,
-            position: { my: "center center", at: "center center", of: window },
             create: function() {
                 initDialog( $(this), scenarios ) ;
                 // FUDGE! This works around a weird layout problem. The very first time the dialog opens,
@@ -71,6 +73,9 @@ window.searchForScenario = function()
                 gActiveScenaridCardRequest = null ;
                 gScenarioCardRequestTimerId = null ;
             },
+            beforeClose: function() {
+                gScenarioSearchDlgState = getDialogState( $(this) ) ;
+            },
             close: function() {
                 // clean up
                 eventHandlers.cleanUp() ;
@@ -1064,6 +1069,7 @@ function onDownloads() {
         dialogClass: "scenario-downloads",
         title: "Downloads for this scenario:",
         modal: true,
+        // NOTE: We auto-size this dialog based on its content, so we don't need to save/restore its state.
         width: 450, minWidth: 300,
         height: 200, minHeight: 132,
         draggable: false,
@@ -1279,10 +1285,11 @@ window.showScenarioInfo = function()
                 dialogClass: "scenario-info",
                 modal: true,
                 closeOnEscape: false, // nb: handled in handle_escape()
-                width: $(window).width() * 0.8,
-                minWidth: 570,
-                height: $(window).height() * 0.8,
-                minHeight: 300,
+                position: gScenarioInfoDlgState ? gScenarioInfoDlgState.position : { my: "center", at: "center", of: window },
+                width: gScenarioInfoDlgState ? gScenarioInfoDlgState.width : $(window).width() * 0.8,
+                height: gScenarioInfoDlgState ? gScenarioInfoDlgState.height : $(window).height() * 0.8,
+                minWidth: 600,
+                minHeight: 450,
                 create: function() {
                     addAsaCreditPanel( $(".ui-dialog.scenario-info"), null ) ;
                 },
@@ -1330,6 +1337,9 @@ window.showScenarioInfo = function()
                     // set initial focus
                     $btnPane.find( "button.ok" ).focus() ;
                 },
+                beforeClose: function() {
+                    gScenarioInfoDlgState = getDialogState( $(this) ) ;
+                },
                 close: function() {
                     // clean up
                     eventHandlers.cleanUp() ;

vasl_templates/webapp/static/snippets.js

@@ -33,6 +33,7 @@ var gDefaultScenario = null ;
 var gLastSavedScenario = null ;
 var gLastSavedScenarioFilename = null ;
 var gScenarioCreatedTime = null ;
+var gEditTemplateDlgState = null ;
 
 // --------------------------------------------------------------------
 
@@ -1612,6 +1613,9 @@ function edit_template( template_id )
         dialogClass: "edit-template",
         title: "Editing template: " + escapeHTML(template_id),
         modal: false,
+        position: gEditTemplateDlgState ? gEditTemplateDlgState.position : { my: "center", at: "center", of: window },
+        width: gEditTemplateDlgState ? gEditTemplateDlgState.width : $(window).width() * 0.8,
+        height: gEditTemplateDlgState ? gEditTemplateDlgState.height : $(window).height() * 0.8,
         minWidth: 600, minHeight: 300,
         create: function() {
             init_dialog( $(this), "Close", true ) ;
@@ -1621,6 +1625,9 @@ function edit_template( template_id )
             $(this).height( $(this).height() ) ; // fudge: force the textarea to resize
             $("#edit-template textarea").change( on_template_change ) ;
         },
+        beforeClose: function() {
+            gEditTemplateDlgState = getDialogState( $(this) ) ;
+        },
         close: function() {
             $("#edit-template textarea").off( "change", on_template_change ) ;
         },

vasl_templates/webapp/static/turn_track.js

@@ -7,6 +7,8 @@ _MAX_TURN_TRACK_TURNS = 100 ;
 gTurnTrackReinforcements = null ;
 gTurnTrackShadings = null ;
 
+gTurnTrackDlgState = null ;
+
 // --------------------------------------------------------------------
 
 function editTurnTrackSettings()
@@ -231,6 +233,9 @@ function editTurnTrackSettings()
         "title": "Turn track",
         dialogClass: "turn-track",
         modal: true,
+        position: gTurnTrackDlgState ? gTurnTrackDlgState.position : { my: "center", at: "center", of: window },
+        width: gTurnTrackDlgState ? gTurnTrackDlgState.width : $(window).width() * 0.8,
+        height: gTurnTrackDlgState ? gTurnTrackDlgState.height : $(window).height() * 0.5,
         minWidth: 500, minHeight: 280,
         resizable: true,
         create: function() {
@@ -274,6 +279,9 @@ function editTurnTrackSettings()
             $iframe = $dlg.find( "iframe#turn-track-preview" ) ;
             loadControls() ;
         },
+        beforeClose: function() {
+            gTurnTrackDlgState = getDialogState( $(this) ) ;
+        },
         buttons: {
             Snippet: { text:" Snippet", class: "snippet", click: function( evt ) {
                 var $btn = $( "button.generate[data-id='turn_track']" ) ;

vasl_templates/webapp/static/utils.js

@@ -430,6 +430,27 @@ function restrict_droplist_height( $sel )
 
 // --------------------------------------------------------------------
 
+function getDialogState( $dlg )
+{
+    // FUDGE! Setting a dialog's initial size is easy (by setting the width/height parameters
+    // in the initial dialog() call, but it gets applied every time the dialog is opened
+    // i.e. if the user resizes the dialog, the change is not remembered. We work around this
+    // by saving the dialog's state when it is closed, and restoring it the next time it's opened.
+    var $parent = $dlg.parent() ;
+    return {
+        position: {
+            my: "left top",
+            at: "left+" + $parent.offset().left + " top+" + $parent.offset().top,
+            of: window,
+            collision: "fit"
+        },
+        width: $dlg.dialog( "option", "width" ),
+        height: $dlg.dialog( "option", "height" ),
+    } ;
+}
+
+// --------------------------------------------------------------------
+
 function add_flag_to_dialog_titlebar( $dlg, player_no )
 {
     // add a flag to the dialog's titlebar

vasl_templates/webapp/static/vassal.js

@@ -1,4 +1,5 @@
 gLoadVsavHandler = null ;
+gVassalShimErrorDlgState = null ;
 
 // --------------------------------------------------------------------
 
@@ -533,7 +534,11 @@ function show_vassal_shim_error_dlg( resp, caption )
         dialogClass: "vassal-shim-error",
         title: caption,
         modal: true,
-        minWidth: 600, minHeight: 250,
+        position: gVassalShimErrorDlgState ? gVassalShimErrorDlgState.position : { my: "center", at: "center", of: window },
+        width: gVassalShimErrorDlgState ? gVassalShimErrorDlgState.width : $(window).width() * 0.8,
+        height: gVassalShimErrorDlgState ? gVassalShimErrorDlgState.height : $(window).height() * 0.8,
+        minWidth: 600,
+        minHeight: 400,
         open: function() {
             $( "#vassal-shim-error .message" ).html( resp.error ) ;
             var log = "" ;
@@ -548,6 +553,9 @@ function show_vassal_shim_error_dlg( resp, caption )
             else
                 $( "#vassal-shim-error .log" ).hide() ;
         },
+        beforeClose: function() {
+            gVassalShimErrorDlgState = getDialogState( $(this) ) ;
+        },
         buttons: {
             Close: function() { $(this).dialog( "close" ) ; },
         },

vasl_templates/webapp/static/vo.js

@@ -1,3 +1,4 @@
+var gSelectVoDlgState = null ;
 
 // --------------------------------------------------------------------
 
@@ -79,6 +80,9 @@ function add_vo( vo_type, player_no )
         dialogClass: "select-vo",
         closeOnEscape: false, // nb: this is handled by handle_escape()
         modal: true,
+        position: gSelectVoDlgState ? gSelectVoDlgState.position : { my: "left top", at: "left+30 top+30", of: window },
+        width: gSelectVoDlgState ? gSelectVoDlgState.width : $(window).width() * 0.3,
+        height: gSelectVoDlgState ? gSelectVoDlgState.height : $(window).height() - 60,
         minWidth: 400,
         minHeight: 350,
         create: function() {
@@ -112,6 +116,9 @@ function add_vo( vo_type, player_no )
             on_resize( $(this) ) ;
         },
         resize: function() { on_resize( $(this) ) ; },
+        beforeClose: function() {
+            gSelectVoDlgState = getDialogState( $(this) ) ;
+        },
         buttons: {
             OK: function() {
                 // get the selected vehicle/ordnance

vasl_templates/webapp/static/vo2.js

@@ -1,5 +1,6 @@
 var gEditVoDialogSplitter = null ;
 var gPrevEditVoDialogEntry = null ;
+var gEditVoDlgState = null ;
 
 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 
@@ -142,8 +143,11 @@ function _do_edit_ob_vo( $entry, player_no, vo_type )
     var $dlg = $( "#edit-vo" ).dialog( {
         dialogClass: "edit-vo",
         title: "Edit "+vo_type,
-        minWidth: 500,
-        minHeight: 500,
+        position: gEditVoDlgState ? gEditVoDlgState.position : { my: "left top", at: "left+30 top+30", of: window },
+        width: gEditVoDlgState ? gEditVoDlgState.width : $(window).width() * 0.4,
+        height: gEditVoDlgState ? gEditVoDlgState.height : $(window).height() - 60,
+        minWidth: 480,
+        minHeight: 440,
         modal: true,
         create: function() {
             // initialize the dialog
@@ -205,6 +209,9 @@ function _do_edit_ob_vo( $entry, player_no, vo_type )
                 gPrevEditVoDialogEntry = $entry ;
             }
         },
+        beforeClose: function() {
+            gEditVoDlgState = getDialogState( $(this) ) ;
+        },
         buttons: {
             OK: function() {
                 // save the V/O image ID