Added large flags to the WYSIWYG editor's dropdown.

master
Pacman Ghost 5 months ago
parent 569edbc48a
commit 8388cec67e
  1. 53
      vasl_templates/webapp/static/html-editor.js
  2. 2
      vasl_templates/webapp/static/trumbowyg/plugins/flags.css
  3. 38
      vasl_templates/webapp/static/trumbowyg/plugins/flags.js
  4. 2
      vasl_templates/webapp/tests/test_snippets.py

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

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

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

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

Loading…
Cancel
Save