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

master
Pacman Ghost 9 months ago
parent 2d317c57bd
commit b31f64ed7f
  1. 43
      vasl_templates/webapp/static/html-editor.js
  2. BIN
      vasl_templates/webapp/static/images/ellipsis.png
  3. 41
      vasl_templates/webapp/static/main.js
  4. 2
      vasl_templates/webapp/static/vo2.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 ) {

Binary file not shown.

After

Width:  |  Height:  |  Size: 382 B

@ -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.

@ -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.

Loading…
Cancel
Save