Show an indicator when an HTML textbox goes multi-line.

vasl_templates/webapp/static/html-editor.js

@@ -112,15 +112,6 @@ function initTrumbowyg( $ctrl, buttons, $parentDlg )
                     "max-height": $ctrl.height() + 5
                 } ) ;
             }
-            // FUDGE! We also need to stop the HTML textboxes that are in a flexbox from expanding out
-            // if they contain long words with no spaces. The layout still isn't quite right, but this
-            // isn't something that will happen often, so we just live with it :-/
-            // NOTE: Things work when the SCENARIO panel gets wider, but not when it narrows (because
-            // the HTML textbox has expanded out, and doesn't want to narrow when the parent element
-            // narrows, and so the panel doesn't narrow). We work-around this by checking the width
-            // of the SCENARIO NOTES panel, which will always be the same width as the SCENARIO panel.
-            var $panel = $( "fieldset[name='scenario_notes']" ) ;
-            $( ".row" ).css( "max-width", $panel.width() ) ;
         } ) ;
         resizeObserver.observe( $parent[0] ) ;
         $parent.data( "resizeObserver", resizeObserver ) ;
@@ -251,6 +242,14 @@ function initHtmlTextbox( $ctrl, objName, small )
         evt.preventDefault() ;
     }
 
+    function updateOverflowIcon() {
+        setTimeout( function() {
+            // check if the content is multi-line
+            var isOverflow = $ctrl.prop( "scrollHeight" ) > $ctrl.height() * 1.5 ;
+            $ctrl.data( "overflowIcon" ).css( "opacity", isOverflow?0.6:0 ) ;
+        }, 20 ) ;
+    }
+
     // make the HTML textbox editable
     var htbId = gNextHtmlTextboxId ++ ;
     $ctrl.attr( {
@@ -270,24 +269,42 @@ function initHtmlTextbox( $ctrl, objName, small )
         } else if ( evt.keyCode == $.ui.keyCode.ENTER )
             evt.preventDefault() ; // nb: disable ENTER
     } ) ;
+    ( new MutationObserver( updateOverflowIcon ) ).observe(
+        $ctrl[0], { characterData: true, childList: true, subtree: true }
+    ) ;
+    $ctrl.data( "updateOverflowIcon", updateOverflowIcon ) ;
+
+    // add a container for the associated icons
+    var $icons = $( "<div class='icons'></div>" ).css( {
+        position: "relative",
+        "margin-right": "-2px",
+    } ) ;
+    $ctrl.after( $icons ) ;
 
     // add an icon to open the "edit html textbox" dialog
-    var paramName = $ctrl.attr( "name" ) ;
     var $img = $( "<svg class='edit-html-textbox' data-htb-id='" + htbId + "'>" +
         "<use xlink:href='#trumbowyg-view-html'></use>" +
         "<title> Edit HTML (Ctrl-M) </title>" +
         "</svg>"
     ).css( {
         width: "10px", height: "15px",
-        position: "relative", top: small?"-2px":"-4px", right: "13px",
-        "margin-right": "-10px",
+        position: "absolute", top: small?"-10px":"-12px", right: small?"2px":"3px",
         opacity: 0.5,
         cursor: "pointer",
     } ) ;
-    $ctrl.after( $img ) ;
     $img.click( function( evt ) {
         onActivate( evt ) ;
     } ) ;
+    $icons.append( $img ) ;
+
+    // add an icon for the HTML preview
+    $img = $( "<img src='" + make_app_url("/static/images/ellipsis.png") + "' class='preview-html' title='Multi-line content'>" ).css( {
+        width: "8px",
+        position: "absolute", bottom: small?"-5px":"-7px", right: small?"3px":"4px",
+        opacity: 0,
+    } ) ;
+    $icons.append( $img ) ;
+    $ctrl.data( "overflowIcon", $img ) ;
 }
 
 function onEditHtmlTextbox( $ctrl, objName ) {

vasl_templates/webapp/static/main.js

@@ -254,10 +254,28 @@ $(document).ready( function () {
     // initialize the splitters
     initSplitters() ;
 
-    // FUDGE! We show some fields in contenteditable div's, which want to auto-grow with their content.
-    // This doesn't play well when they're in a flexbox, so we set overflow-y to "hidden" to stop this
-    // from happening vertically, but have to dynamically set max-width to stop it horizontally :-/
-    var resizeObserver = new ResizeObserver( function( entries ) {
+    // initialize the HTML textbox's
+    [ "SCENARIO_NAME", "SCENARIO_ID", "SCENARIO_LOCATION", "PLAYER_1_DESCRIPTION", "PLAYER_2_DESCRIPTION" ].forEach( function( key ) {
+        var $elem = $( "div.html-textbox[name='" + key + "']" ) ;
+        var caption = $elem.attr( "title" ) ;
+        initHtmlTextbox( $elem,
+            caption[0].toLowerCase() + caption.substring(1),
+            key.substr( 0, 7 ) === "PLAYER_"
+        ) ;
+    } ) ;
+    // FUDGE! We also need to stop the HTML textboxes that are in a flexbox from expanding out
+    // if they contain long words with no spaces. The layout still isn't quite right, but this
+    // isn't something that will happen often, so we just live with it :-/
+    // NOTE: Things work when the SCENARIO panel gets wider, but not when it narrows (because
+    // the HTML textbox has expanded out, and doesn't want to narrow when the parent element
+    // narrows, and so the panel doesn't narrow). We work-around this by checking the width
+    // of the SCENARIO NOTES panel, which will always be the same width as the SCENARIO panel.
+    var $panel2 = $("fieldset[name='scenario_notes']" ) ;
+    ( new ResizeObserver( function() {
+        // limit the horizontal width of the rows in the SCENARIO panel
+        var $panel = $( "fieldset[name='scenario']" ) ;
+        $panel.find( ".row" ).css( "max-width", $panel2.width() ) ;
+        // limit the width of the individual HTML textbox's
         $( "div.html-textbox[name='SCENARIO_NAME']" ).css( {
             "max-width": "calc(100% - 210px)"
         } ) ;
@@ -269,8 +287,11 @@ $(document).ready( function () {
                 "max-width": "calc(100% - 7em - 8px)"
             } ) ;
         }
+        // update the overflow icons
+        $panel.find( "div.html-textbox" ).each( function() {
+            $(this).data( "updateOverflowIcon" )() ;
         } ) ;
-    resizeObserver.observe( $( "#tabs-scenario .tl" )[0] ) ;
+    } ) ).observe( $panel2[0] ) ;
 
     // get the application config
     $.getJSON( gAppConfigUrl, function(data) {
@@ -852,14 +873,6 @@ function update_page_load_status( id )
         // initialize the HTML WYSIWYG editors (nb: we do it here, since we need the app config
         // and template pack (for the player flags))
         initVictoryConditionsTrumbowyg() ;
-        [ "SCENARIO_NAME", "SCENARIO_ID", "SCENARIO_LOCATION", "PLAYER_1_DESCRIPTION", "PLAYER_2_DESCRIPTION" ].forEach( function( key ) {
-            var $elem = $( "div.html-textbox[name='" + key + "']" ) ;
-            var caption = $elem.attr( "title" ) ;
-            initHtmlTextbox( $elem,
-                caption[0].toLowerCase() + caption.substring(1),
-                key.substr( 0, 7 ) === "PLAYER_"
-            ) ;
-        } ) ;
         // FUDGE! There are problems with the layout jumping around during startup in the desktop app,
         // so we hide the footers on the scenario tab (which is the one visible during startup),
         // and only show them them when we're ready.

vasl_templates/webapp/static/vo2.js

@@ -122,6 +122,7 @@ function _do_edit_ob_vo( $entry, player_no, vo_type )
             "</div>"
         ) ;
         var $htmlTextbox = $elem.children( "div.html-textbox" ) ;
+        initHtmlTextbox( $htmlTextbox, objName, false ) ;
         $htmlTextbox.html( val ).keydown( function( evt ) {
             auto_dismiss_dialog( $dlg, evt, "OK" ) ;
         } ) ;
@@ -134,7 +135,6 @@ function _do_edit_ob_vo( $entry, player_no, vo_type )
             objName = vo_type + " capability" ;
         else if ( $sortable === $comments )
             objName = vo_type + " comment" ;
-        initHtmlTextbox( $htmlTextbox, objName, false ) ;
         // FUDGE! This works around a weird presentation error if there are superscripts and daggers
         // in the content, where ths text won't be vertically aligned properly. Moving the cursor around
         // seems to fix the layout, so we move to the start of the content, which will be a "normal" character.