diff --git a/vasl_templates/webapp/static/html-editor.js b/vasl_templates/webapp/static/html-editor.js index 7dab187..507a4d2 100644 --- a/vasl_templates/webapp/static/html-editor.js +++ b/vasl_templates/webapp/static/html-editor.js @@ -232,6 +232,7 @@ function initVictoryConditionsTrumbowyg() function updateTrumbowygFlagsDropdown( $ctrl ) { + // FUDGE! For convenience, we show the flags for the current players at the start of the dropdown list, // and while we can do this in makeDropdown() in our plugin, this only happens once for the Victory Conditions // control. There doesn't seem to be a way to dynamically generate the list each time it drops down, @@ -251,26 +252,48 @@ function updateTrumbowygFlagsDropdown( $ctrl ) return ; // remove the dropdown's flag buttons from the DOM - var $btns = {} ; + var $btns = { small: {}, large: {} } ; $dropdown.find( "button" ).detach().each( function() { - var nat = $(this).find( "img" ).data( "nat" ) ; - $btns[ nat ] = $(this) ; + var $img = $(this).find( "img" ) ; + var nat = $img.data( "nat" ) ; + var size ; + if ( $img.hasClass( "small" ) ) + size = "small" ; + else if ( $img.hasClass( "large" ) ) + size = "large" ; + else { + console.log( "INTERNAL ERROR: Unknown flag type:", $img ) ; + return ; + } + $btns[ size ][ nat ] = $(this) ; } ) ; // add the flag buttons back into the DOM - plugin.nationalities.forEach( function( nat ) { - if ( nat === nat1 || nat === nat2 ) + var clearLeft = false ; + function addButton( $btn ) { + if ( ! $btn ) return ; - var $btn = $btns[ nat ] ; - if ( $btn ) - $dropdown.append( $btn ) ; - } ) ; - var $btn = $btns[ nat2 ] ; - if ( $btn ) - $dropdown.prepend( $btn ) ; - $btn = $btns[ nat1 ] ; - if ( $btn ) - $dropdown.prepend( $btn ) ; + if ( clearLeft ) { + $btn.css( "clear", "left" ) ; + clearLeft = false ; + } + $dropdown.append( $btn ) ; + } + function addButtons( size ) { + Object.values( $btns[size] ).forEach( function( $btn ) { + $btn.css( "clear", "none" ) ; + } ) ; + addButton( $btns[size][ nat1 ] ) ; + addButton( $btns[size][ nat2 ] ) ; + plugin.nationalities.forEach( function( nat ) { + if ( nat === nat1 || nat === nat2 ) + return ; + addButton( $btns[size][ nat ] ) ; + } ) ; + } + addButtons( "small" ) ; + clearLeft = true ; + addButtons( "large" ) ; } // -------------------------------------------------------------------- diff --git a/vasl_templates/webapp/static/trumbowyg/plugins/flags.css b/vasl_templates/webapp/static/trumbowyg/plugins/flags.css index de169e0..e7119a2 100644 --- a/vasl_templates/webapp/static/trumbowyg/plugins/flags.css +++ b/vasl_templates/webapp/static/trumbowyg/plugins/flags.css @@ -3,3 +3,5 @@ float: left ; line-height: 30px ; } +.trumbowyg-dropdown-flags img.small { width: 11px ; height: 11px ; } +.trumbowyg-dropdown-flags img.large { width: 13px ; height: 13px ; } diff --git a/vasl_templates/webapp/static/trumbowyg/plugins/flags.js b/vasl_templates/webapp/static/trumbowyg/plugins/flags.js index 177e834..cbbbfbf 100644 --- a/vasl_templates/webapp/static/trumbowyg/plugins/flags.js +++ b/vasl_templates/webapp/static/trumbowyg/plugins/flags.js @@ -31,23 +31,29 @@ var flags = [] ; // add an entry for each nationality - $.each( plugin.nationalities, function( index, nat ) { - var displayName = get_nationality_display_name( nat ) ; - trumbowyg.addBtnDef( nat, { - fn: function () { - var url = plugin.makeFlagHtml( nat, false ) ; - var size = 11 ; - var html = "" ; - trumbowyg.execCmd( "insertHtml", html ) ; - }, - hasIcon: false, - title: "" , + function addFlags( isSmall ) { + $.each( plugin.nationalities, function( index, nat ) { + var key = nat + "-" + (isSmall ? "small" : "large") ; + var displayName = get_nationality_display_name( nat ) ; + var size = isSmall ? 11 : 13 ; + trumbowyg.addBtnDef( key, { + fn: function () { + var url = plugin.makeFlagHtml( nat, false ) ; + var html = "" ; + trumbowyg.execCmd( "insertHtml", html ) ; + }, + hasIcon: false, + title: "" , + } ) ; + flags.push( key ) ; } ) ; - flags.push( nat ) ; - } ) ; + } + addFlags( true ) ; + addFlags( false ) ; return flags ; } diff --git a/vasl_templates/webapp/tests/test_snippets.py b/vasl_templates/webapp/tests/test_snippets.py index f432281..36fa5a0 100644 --- a/vasl_templates/webapp/tests/test_snippets.py +++ b/vasl_templates/webapp/tests/test_snippets.py @@ -555,7 +555,7 @@ def test_player_flags_in_trumbowyg( webapp, webdriver ): def insert_flag( nat ): find_child( "#panel-vc .trumbowyg-flags-button" ).click() wait_for_elem( 2, "#panel-vc .trumbowyg-dropdown-flags" ) - find_child( "button.trumbowyg-{}-dropdown-button".format( nat ) ).click() + find_child( "button.trumbowyg-{}-small-dropdown-button".format( nat ) ).click() def wait_for_flag( expected ): if expected.search( unload_trumbowyg( editor ) ): return True