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 = $( "" ).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 = $( ""
).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 = $( "" ).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 0000000..ff7d40a
Binary files /dev/null and b/vasl_templates/webapp/static/images/ellipsis.png differ
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 )
""
) ;
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.
![](" + make_app_url("/static/images/ellipsis.png") + " "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 0000000..ff7d40a
Binary files /dev/null and b/vasl_templates/webapp/static/images/ellipsis.png differ
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 )
""
) ;
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.