Tightened up how dialogs are initialized.

vasl_templates/webapp/static/css/main.css

@@ -88,6 +88,8 @@ button.edit-template img { height: 18px ; vertical-align: middle ; margin-right:
 .ui-dialog-titlebar { padding: 0.2em 0.5em 0.2em 0.5em !important ; }
 .ui-dialog-titlebar-close { margin-top: -10px !important ; }
 .ui-dialog-content p { margin-bottom: 0.5em ; }
+.ui-dialog-buttonpane button.ok { background: #ddd ; }
+.ui-dialog-buttonpane button.ok:hover { background: #ccc ; }
 
 #edit-template { overflow: hidden ; padding: 2px ; }
 .ui-dialog.edit-template .ui-dialog-titlebar { background: #f8d868 ; }

vasl_templates/webapp/static/main.js

@@ -294,7 +294,6 @@ $(document).ready( function () {
     $("div.snippet-control select").on( "selectmenuselect", function() {
         edit_template( $(this).attr("data-id") ) ;
     } ) ;
-    enable_ctrl_enter( $("#edit-template"), "Close" ) ;
 
     // handle requests to edit the templates
     $("button.edit-template").click( function() {
@@ -303,9 +302,6 @@ $(document).ready( function () {
         .attr( "title", "Edit the template." )
         .addClass( "ui-button" ) ;
 
-    // enable Ctrl-Enter when editing simple notes
-    enable_ctrl_enter( $("#edit-simple_note"), "OK" ) ;
-
     // watch for changes to the scenario name
     $("input[name='SCENARIO_NAME']").on( "input propertychange paste", function() {
         on_scenario_name_change() ;

vasl_templates/webapp/static/simple_notes.js

@@ -36,8 +36,12 @@ function _do_edit_simple_note( $sortable2, $entry, default_width )
         modal: true,
         minWidth: 400,
         minHeight: 150,
+        create: function() {
+            init_dialog( $(this), "OK", true ) ;
+        },
         open: function() {
             // initialize
+            on_dialog_open( $(this) ) ;
             $caption = $(this).children( "textarea" ) ;
             var $btn_pane = $(".ui-dialog.edit-simple_note .ui-dialog-buttonpane") ;
             $width = $btn_pane.children( "input[name='width']" ) ;
@@ -50,6 +54,9 @@ function _do_edit_simple_note( $sortable2, $entry, default_width )
             var show = (note_type !== "ssr") ;
             $btn_pane.children( "label[for='width']" ).css( "display", show?"inline":"none" ) ;
             $width.css( "display", show?"inline":"none" ) ;
+            // enable auto-dismiss for the dialog
+            var $dlg = $(this) ;
+            $width.keydown( function(evt) { auto_dismiss_dialog( $dlg, evt, "OK" ) ; } ) ;
             // set the titlebar color
             var colors = get_player_colors_for_element( $sortable2 ) ;
             if ( ! colors )
@@ -60,10 +67,9 @@ function _do_edit_simple_note( $sortable2, $entry, default_width )
             } ) ;
             // load the dialog
             var data = $entry ? $entry.data("sortable2-data") : null ;
-            $caption.val( data ? data.caption : "" ) ;
+            $caption.val( data ? data.caption : "" ).focus() ;
             $width.val( data ? data.width : default_width ) ;
             $(this).height( $(this).height() ) ; // fudge: force the textarea to resize
-            $width.keydown( function(evt) { auto_dismiss_dialog( evt, "OK" ) ; } ) ;
         },
         buttons: {
             OK: function() {

vasl_templates/webapp/static/snippets.js

@@ -424,7 +424,11 @@ function edit_template( template_id )
         title: "Editing template: " + escapeHTML(template_id),
         modal: false,
         minWidth: 400, minHeight: 200,
+        create: function() {
+            init_dialog( $(this), "Close", true ) ;
+        },
         open: function() {
+            on_dialog_open( $(this) ) ;
             $(this).height( $(this).height() ) ; // fudge: force the textarea to resize
             $("#edit-template textarea").change( on_template_change ) ;
         },

vasl_templates/webapp/static/sortable.js

@@ -131,7 +131,14 @@ $.fn.sortable2 = function( action, args )
         var caption = $entry.data( "sortable2-data" ).caption ;
         if ( ! caption )
             caption = $entry.html() ;
-        ask( "OK to delete?", escapeHTML(caption), {
+        var display_name = SORTABLE_DISPLAY_NAMES[ get_sortable2_type($sortable2) ] ;
+        var buf = [
+            "OK to delete this " + display_name[0] + "?",
+            "<div style='margin-top:1em;font-size:80%;font-style:italic;'>",
+            escapeHTML( caption ),
+            "</div>"
+        ] ;
+        ask( "Delete "+display_name[0], buf.join(""), {
             "ok": function() {
                 // yup - make it so
                 $entry.remove() ;

vasl_templates/webapp/static/utils.js

@@ -102,20 +102,41 @@ $.fn.filterByText = function( $textbox )
 
 // --------------------------------------------------------------------
 
-function enable_ctrl_enter( $dlg, btn_text )
+function init_dialog( $dlg, ok_button_text, auto_dismiss )
 {
-    // allow Ctrl-Enter to dismiss a dialog
-    $dlg.find("textarea").keydown( function(evt) {
-        auto_dismiss_dialog( evt, btn_text ) ;
-    } ) ;
+    // initialize the dialog
+    $dlg.data( "ok-button-text", ok_button_text ) ;
+
+    // allow Ctrl-Enter to dismiss the dialog
+    if ( auto_dismiss ) {
+        $dlg.find("input[type='text']").keydown( function(evt) {
+            auto_dismiss_dialog( $dlg, evt, ok_button_text ) ;
+        } ) ;
+        $dlg.find("textarea").keydown( function(evt) {
+            auto_dismiss_dialog( $dlg, evt, ok_button_text ) ;
+        } ) ;
+    }
+}
+
+function on_dialog_open( $dlg )
+{
+    // initialize the dialog
+    var ok_button_text = $dlg.data( "ok-button-text" ) ;
+    $( ".ui-dialog-buttonpane button:contains(" + ok_button_text + ")" ).addClass( "ok" ) ;
+    $( ".ui-dialog-buttonpane button:contains(Cancel)" ).addClass( "cancel" ) ;
+
+    // set initial focus
+    var $cancel = $( ".ui-dialog-buttonpane button:contains(Cancel)" ) ;
+    $cancel.focus() ;
 }
 
-function auto_dismiss_dialog( evt, btn_text )
+function auto_dismiss_dialog( $dlg, evt, btn_text )
 {
     // check if the user pressed Ctrl-Enter
     if ( evt.keyCode == 13 && evt.ctrlKey ) {
         // yup - locate the target button and click it
-        $( ".ui-dialog-buttonpane button:contains('"+btn_text+"')" ).click() ;
+        var $dlg2 = $( ".ui-dialog." + $dlg.dialog("option","dialogClass") ) ;
+        $( $dlg2.find( ".ui-dialog-buttonpane button:contains('" + btn_text + "')" ) ).click() ;
         evt.preventDefault() ;
     }
 }
@@ -133,6 +154,7 @@ function ask( title, msg, args )
         closeOnEscape:false,
         title: title,
         create: function() {
+            init_dialog( $(this), "OK", false ) ;
             // we handle ESCAPE ourself, to make it the same as clicking Cancel, not just closing the dialog
             $(this).closest( ".ui-dialog" ).keydown( function( evt ) {
                 if ( evt.keyCode == $.ui.keyCode.ESCAPE )
@@ -140,7 +162,7 @@ function ask( title, msg, args )
             } ) ;
         },
         open: function() {
-            $(".ui-dialog.ask button:contains(Cancel)").focus();
+            on_dialog_open( $(this) ) ;
         },
         buttons: {
             OK: function() {

vasl_templates/webapp/static/vo.js

@@ -35,9 +35,13 @@ function add_vo( vo_type, player_no )
         modal: true,
         minWidth: 300,
         minHeight: 300,
+        create: function() {
+            init_dialog( $(this), "OK", false ) ;
+        },
         open: function() {
             // initialize
-            $("#select-vo input[type='text']").val( "" ) ;
+            on_dialog_open( $(this) ) ;
+            $("#select-vo input[type='text']").val( "" ).focus() ;
             $(this).height( $(this).height() ) ; // fudge: force the select to resize
             $("#select-vo select").filterByText( $("#select-vo input[type='text']") ) ;
             // set the titlebar color
@@ -51,6 +55,8 @@ function add_vo( vo_type, player_no )
             OK: function() {
                 // add the new vehicle/ordnance
                 var val = $listbox.val() ;
+                if ( ! val )
+                    return ;
                 do_add_vo( vo_type, player_no, entries[val] ) ;
                 $(this).dialog( "close" ) ;
             },