From b31f64ed7f0bdf1ee4eb7a56a6357e8ee1b31688 Mon Sep 17 00:00:00 2001
From: Pacman Ghost <pacman-ghost@vm-linux-dev>
Date: Tue, 6 Sep 2022 13:06:34 +1000
Subject: [PATCH] Show an indicator when an HTML textbox goes multi-line.

---
 vasl_templates/webapp/static/html-editor.js   |  43 ++++++++++++------
 .../webapp/static/images/ellipsis.png         | Bin 0 -> 382 bytes
 vasl_templates/webapp/static/main.js          |  41 +++++++++++------
 vasl_templates/webapp/static/vo2.js           |   2 +-
 4 files changed, 58 insertions(+), 28 deletions(-)
 create mode 100644 vasl_templates/webapp/static/images/ellipsis.png

diff --git a/vasl_templates/webapp/static/html-editor.js b/vasl_templates/webapp/static/html-editor.js
index 2c8ce25..ffbf5fd 100644
--- a/vasl_templates/webapp/static/html-editor.js
+++ b/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 ) {
diff --git a/vasl_templates/webapp/static/images/ellipsis.png b/vasl_templates/webapp/static/images/ellipsis.png
new file mode 100644
index 0000000000000000000000000000000000000000..ff7d40aceb9fa91b0611be3134e6131fd6977303
GIT binary patch
literal 382
zcmeAS@N?(olHy`uVBq!ia0vp@K+Md+1|&Tmw(<Ze&H|6fVg?4jBOuH;Rhv&5D9B#o
z>Fdh=jFVMdhd1M0(k!r$Yeb1-X-P(Y5yQ%LXFPyHJS9LOm(=3qqRfJl%=|nCVNOM5
zpg0#u+&RCXvM4h>ql94%{~0TwC?8m~C^ZqJRG}m@H<iKkJ3l8-h7%+coS#-wo>-L1
z5L@scq?{XUcxG{OP9jig5ySQaTl#^*93bKF#G<^+ymW>G($Cs~V(bw8rA5i93}62@
zzlJGu&d<$F%`0K}c4pdspcorSSx9C{PAbEScbC+GBA%Wujv*W~TTd8@HaPIO9Q?n+
z|G?FYlho9d9@QLSQPa5K#B2MdyT!*c<SJ80sJGCh7kuURj5BYRdIwjzmq)wEFwETP
eUy)FA_wO?)hr_R|FP#S(%HZkh=d#Wzp$P!P1$y8B

literal 0
HcmV?d00001

diff --git a/vasl_templates/webapp/static/main.js b/vasl_templates/webapp/static/main.js
index 1b29f16..567c67f 100644
--- a/vasl_templates/webapp/static/main.js
+++ b/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)"
             } ) ;
         }
-    } ) ;
-    resizeObserver.observe( $( "#tabs-scenario .tl" )[0] ) ;
+        // update the overflow icons
+        $panel.find( "div.html-textbox" ).each( function() {
+            $(this).data( "updateOverflowIcon" )() ;
+        } ) ;
+    } ) ).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.
diff --git a/vasl_templates/webapp/static/vo2.js b/vasl_templates/webapp/static/vo2.js
index b58a216..fdd435d 100644
--- a/vasl_templates/webapp/static/vo2.js
+++ b/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.