Added large flags to the WYSIWYG editor's dropdown.

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" ) ;
 }
 
 // --------------------------------------------------------------------

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 ; }

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 = "<img src='" + url + "?prefh=" + size + "' width='" + size + "' height='" + size + "'>" ;
-                    trumbowyg.execCmd( "insertHtml", html ) ;
-                },
-                hasIcon: false,
-                title: "<img src='" + plugin.makeFlagHtml(nat,true) + "'" +
-                         " title='" + displayName + "'" +
-                         " data-nat='" + nat + "'" +
-                         ">" ,
+        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 = "<img src='" + url + "?prefh=" + size + "' width='" + size + "' height='" + size + "'>" ;
+                        trumbowyg.execCmd( "insertHtml", html ) ;
+                    },
+                    hasIcon: false,
+                    title: "<img src='" + plugin.makeFlagHtml(nat,true) + "'" +
+                             " class='" + (isSmall ? "small" : "large") + "'" +
+                             " title='" + displayName + "'" +
+                             " data-nat='" + nat + "'" +
+                             ">" ,
+                } ) ;
+                flags.push( key ) ;
             } ) ;
-            flags.push( nat ) ;
-        } ) ;
+        }
+        addFlags( true ) ;
+        addFlags( false ) ;
 
         return flags ;
     }

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