From b10105f2a7e16c18c75032d89a0c408f7cc56ad4 Mon Sep 17 00:00:00 2001 From: Taka Date: Sat, 23 Jul 2022 19:19:08 +1000 Subject: [PATCH] Improved the positioning and sizing of dialogs. --- vasl_templates/webapp/static/lfa-upload.js | 11 ++++++--- vasl_templates/webapp/static/main.js | 10 ++++++-- vasl_templates/webapp/static/roar.js | 8 +++++++ .../webapp/static/scenario-upload.js | 10 ++++++-- vasl_templates/webapp/static/scenarios.js | 24 +++++++++++++------ vasl_templates/webapp/static/snippets.js | 7 ++++++ vasl_templates/webapp/static/turn_track.js | 8 +++++++ vasl_templates/webapp/static/utils.js | 21 ++++++++++++++++ vasl_templates/webapp/static/vassal.js | 10 +++++++- vasl_templates/webapp/static/vo.js | 7 ++++++ vasl_templates/webapp/static/vo2.js | 11 +++++++-- 11 files changed, 110 insertions(+), 17 deletions(-) diff --git a/vasl_templates/webapp/static/lfa-upload.js b/vasl_templates/webapp/static/lfa-upload.js index 07fb930..ebbe0a2 100644 --- a/vasl_templates/webapp/static/lfa-upload.js +++ b/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() ; diff --git a/vasl_templates/webapp/static/main.js b/vasl_templates/webapp/static/main.js index 27703da..57fcdee 100644 --- a/vasl_templates/webapp/static/main.js +++ b/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" ) ; diff --git a/vasl_templates/webapp/static/roar.js b/vasl_templates/webapp/static/roar.js index a4b8a50..0ace1df 100644 --- a/vasl_templates/webapp/static/roar.js +++ b/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 diff --git a/vasl_templates/webapp/static/scenario-upload.js b/vasl_templates/webapp/static/scenario-upload.js index 23d06b3..be2d517 100644 --- a/vasl_templates/webapp/static/scenario-upload.js +++ b/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 ) ; diff --git a/vasl_templates/webapp/static/scenarios.js b/vasl_templates/webapp/static/scenarios.js index fe31465..2e07fe8 100644 --- a/vasl_templates/webapp/static/scenarios.js +++ b/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() ; diff --git a/vasl_templates/webapp/static/snippets.js b/vasl_templates/webapp/static/snippets.js index 9a0271b..36acb45 100644 --- a/vasl_templates/webapp/static/snippets.js +++ b/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 ) ; }, diff --git a/vasl_templates/webapp/static/turn_track.js b/vasl_templates/webapp/static/turn_track.js index 3f66479..f1468d5 100644 --- a/vasl_templates/webapp/static/turn_track.js +++ b/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']" ) ; diff --git a/vasl_templates/webapp/static/utils.js b/vasl_templates/webapp/static/utils.js index a0c35bc..4b62859 100644 --- a/vasl_templates/webapp/static/utils.js +++ b/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 diff --git a/vasl_templates/webapp/static/vassal.js b/vasl_templates/webapp/static/vassal.js index 69e9379..45c78de 100644 --- a/vasl_templates/webapp/static/vassal.js +++ b/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" ) ; }, }, diff --git a/vasl_templates/webapp/static/vo.js b/vasl_templates/webapp/static/vo.js index 4ea8c51..80444b1 100644 --- a/vasl_templates/webapp/static/vo.js +++ b/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 diff --git a/vasl_templates/webapp/static/vo2.js b/vasl_templates/webapp/static/vo2.js index 4bbc070..810f7d0 100644 --- a/vasl_templates/webapp/static/vo2.js +++ b/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