Added a popup menu item to generate a snippet as an image,

vasl_templates/webapp/static/main.js

@@ -28,6 +28,7 @@ var NATIONALITY_SPECIFIC_BUTTONS = {
 } ;
 
 GENERATE_SNIPPET_HINT = "Generate an HTML snippet (shift-click to get an image)." ;
+EDIT_TEMPLATE_HINT = "Edit the template that will generate this snippet." ;
 
 // --------------------------------------------------------------------
 
@@ -358,7 +359,7 @@ $(document).ready( function () {
     $("button.edit-template").click( function() {
         edit_template( $(this).data( "id" ) ) ;
     } ).html( "<div><img src='" + gImagesBaseUrl + "/edit-template.png'>Edit</div>" )
-        .attr( "title", "Edit the template." )
+        .attr( "title", EDIT_TEMPLATE_HINT )
         .button( {} ) ;
 
     // watch for changes to the scenario details
@@ -459,7 +460,10 @@ function init_snippet_button( $btn )
     var buf = [ "<div class='snippet-control' data-id='" + template_id + "'>",
         $btn.prop( "outerHTML" ),
         "<select data-id='" + template_id2 + "'>",
-        "<option value='edit' class='edit-template' title='Edit the template that will generate this snippet.'>Edit</option>",
+        // NOTE: We use really short captions so they don't get truncated if the popup menu
+        // is opened near the right-hand edge of the window :-/
+        "<option value='edit' class='edit-template' title='" + EDIT_TEMPLATE_HINT + "'>Edit</option>",
+        "<option value='as-image' class='as-image' title='Generate the snippet as an image.'>Image</option>",
         "</select>",
         "</div>"
     ] ;
@@ -472,7 +476,7 @@ function init_snippet_button( $btn )
     $newBtn.find( "button" )
         .prepend( $( "<img src='" + gImagesBaseUrl + "/" + fname + "' style='" + style + "'>" ) )
         .click( function( evt ) {
-            generate_snippet( $(this), evt, null ) ;
+            generate_snippet( $(this), evt.shiftKey, null ) ;
             return false ;
         } )
         .attr( "title", GENERATE_SNIPPET_HINT ) ;
@@ -491,8 +495,11 @@ function init_snippet_button( $btn )
     $newBtn.children( ".ui-selectmenu-button" ).click( function() { $btn.blur() ; } ) ;
 
     // handle requests to edit the template
-    $newBtn.children( "select" ).on( "selectmenuselect", function() {
-        edit_template( $(this).attr("data-id") ) ;
+    $newBtn.children( "select" ).on( "selectmenuselect", function( evt, ui ) {
+        if ( ui.item.value === "edit" )
+            edit_template( $(this).attr("data-id") ) ;
+        else if ( ui.item.value === "as-image" )
+            generate_snippet( $newBtn, true, null ) ;
     } ) ;
 
     // replace the existing button with the new replacement button

vasl_templates/webapp/static/simple_notes.js

@@ -149,7 +149,7 @@ function _make_simple_note( note_type, caption )
     // add a handler for the snippet button
     $content.children("img.snippet").click( function( evt ) {
         var extra_params = get_simple_note_snippet_extra_params( $(this) ) ;
-        generate_snippet( $(this), evt, extra_params ) ;
+        generate_snippet( $(this), evt.shiftKey, extra_params ) ;
         return false ;
     } ) ;
 

vasl_templates/webapp/static/snippets.js

@@ -33,7 +33,7 @@ var gScenarioCreatedTime = null ;
 
 // --------------------------------------------------------------------
 
-function generate_snippet( $btn, evt, extra_params )
+function generate_snippet( $btn, as_image, extra_params )
 {
     // generate the snippet
     var template_id = $btn.data( "id" ) ;
@@ -41,7 +41,7 @@ function generate_snippet( $btn, evt, extra_params )
     var snippet = make_snippet( $btn, params, extra_params, true ) ;
 
     // check if the user is requesting the snippet as an image
-    if ( evt.shiftKey ) {
+    if ( as_image ) {
         // yup - send the snippet to the backend to generate the image
         var $dlg = null ;
         var timeout_id = setTimeout( function() {

vasl_templates/webapp/static/vo.js

@@ -231,7 +231,7 @@ function do_add_vo( vo_type, player_no, vo_entry, vo_image_id, elite, custom_cap
 
     // add a handler for the snippet button
     $content.children("img.snippet").click( function( evt ) {
-        generate_snippet( $(this), evt, {} ) ;
+        generate_snippet( $(this), evt.shiftKey, {} ) ;
         return false ;
     } ) ;
 }