Show flags in the player droplist's.

master
Pacman Ghost 6 years ago
parent cedd5b4eac
commit ca30238615
  1. 6
      vasl_templates/webapp/static/css/main.css
  2. 2
      vasl_templates/webapp/static/css/select-vo-dialog.css
  3. 9
      vasl_templates/webapp/static/css/tabs-scenario.css
  4. 61
      vasl_templates/webapp/static/main.js
  5. 6
      vasl_templates/webapp/static/snippets.js
  6. 30
      vasl_templates/webapp/static/utils.js
  7. 2
      vasl_templates/webapp/templates/tabs-scenario.html
  8. 24
      vasl_templates/webapp/tests/utils.py

@ -2,9 +2,11 @@
html { height: 100% ; }
body { height: 100% ; overflow: hidden ; }
body { font-family: Arial, Helvetica, sans-serif ; font-size: 16px ; }
ul, ol { margin: 0.5em 0 0 1.25em ; }
input[type="text"] { height: 1.25em ; border: 1px solid #c5c5c5 ; }
input[type="text"] { height: 20px ; border: 1px solid #c5c5c5 ; }
label { height: 1.25em ; margin-top: -3px ; }
/* -------------------------------------------------------------------- */
@ -22,7 +24,7 @@ label { height: 1.25em ; margin-top: -3px ; }
/* -------------------------------------------------------------------- */
.ui-selectmenu-button { padding: 2px 5px ; }
.select2-dropdown { color: #444 ; }
.snippet-control button.generate { height: 26px ; padding: 2px 10px 2px 5px ; }
.snippet-control button.generate img { height: 20px ; margin-right: 5px ; vertical-align: middle ; }

@ -6,7 +6,7 @@
#select-vo .select2-search { padding: 0 0 5px 0 ; }
#select-vo .select2-results__options { max-height: none ; }
#select-vo .select2-dropdown { border: none ; }
#select-vo .select2-dropdown .vo-entry { display: flex ; }
#select-vo .select2-dropdown .vo-entry { display: flex ; color: #444 ; }
#select-vo .select2-dropdown .vo-entry img { height: 3.5em ; margin-right: 0.5em ; }
#select-vo .select2-dropdown .vo-entry .content { display: flex ; flex-direction: column ; justify-content: center ; }
#select-vo .select2-dropdown .vo-entry.small-piece img { height: 2.7em ; margin-left: 0.4em ; margin-right: 0.9em ; }

@ -5,7 +5,6 @@
#panel-scenario .row { display: flex ; align-items: center ; }
#panel-scenario input { flex-grow: 1 ; }
#panel-scenario input[name='SCENARIO_ID'] { margin-left: 0.25em ; width: 80px ; flex-grow: 0 ; }
#panel-scenario .ui-selectmenu-button.scenario_theater { margin: -3px 0 0 0.25em ; width: 70px ; flex-grow: 0 ; }
#panel-scenario input[name='SCENARIO_DATE'] { width: 6em ; flex-grow: 0 ; }
#panel-scenario label[for='PLAYER_1'], label[for='PLAYER_2'] { margin-top: 2px ; }
@ -14,6 +13,14 @@
#panel-scenario label.header { font-weight: bold ; width: 3em ; text-align: center ; }
#panel-scenario input { margin-bottom: 0.25em ; }
#panel-scenario .select2-container { margin: 2px ; }
#panel-scenario .select2-selection__rendered { height: 24px ; margin-top: -3px ; }
#panel-scenario .select2-selection__arrow { margin-top: -2px ; }
#panel-scenario .select2-selection { height: 24px !important ; border-radius: 0 !important ; }
#panel-scenario .select2-container[name="SCENARIO_THEATER"] .select2-selection { height: 22px !important ; margin-top: -4px ;}
#panel-scenario .select2-container[name="SCENARIO_THEATER"] .select2-selection__arrow { margin-top: -6px ; }
/* -------------------------------------------------------------------- */
#panel-vc { height: 100% ; display: flex ; flex-direction: column ; }

@ -99,9 +99,7 @@ $(document).ready( function () {
$("#tabs .ui-tabs-nav a").click( function() { $(this).blur() ; } ) ;
// initialize the scenario theater
$( "select[name='SCENARIO_THEATER']" ).selectmenu( {
classes: { "ui-selectmenu-button": "scenario_theater" },
} ) ;
init_select2( $("select[name='SCENARIO_THEATER']"), "5em", false, null ) ;
// initialize the scenario date picker
$("input[name='SCENARIO_DATE']").datepicker( {
@ -177,22 +175,33 @@ $(document).ready( function () {
} ) ;
$("#select-vo").dblclick( function(evt) { auto_select_vo(evt) ; } ) ;
// add player change handlers
// initialize the player droplists
function on_player_droplist_open( $sel ) {
// remember the current selection
$sel.data( "prev-val", $sel.val() ) ;
// limit the droplist's height to the available space
restrict_droplist_height( $sel ) ;
}
$("select[name='PLAYER_1']").selectmenu( {
width: "7.5em",
open: function(evt,ui) { on_player_droplist_open($(this)) ; },
select: function() { on_player_change_with_confirm( 1 ) ; },
function format_player_droplist_item( opt ) {
var url = gImagesBaseUrl + "/flags/" + opt.id + ".png" ;
return $( "<div style='display:flex;align-items:center;'>" +
"<img src='" + url + "' style='height:0.9em;margin-right:0.25em;'>" +
" " + opt.text +
"</div>" ) ;
}
init_select2( $( "select[name='PLAYER_1']" ),
"9em", false, format_player_droplist_item
).on( "select2:open", function() {
on_player_droplist_open( $(this) ) ;
} ).on( "change", function() {
on_player_change_with_confirm( 1 ) ;
} ) ;
$("select[name='PLAYER_2']").selectmenu( {
width: "7.5em",
open: function(evt,ui) { on_player_droplist_open($(this)) ; },
select: function() { on_player_change_with_confirm( 2 ) ; },
init_select2( $( "select[name='PLAYER_2']" ),
"9em", false, format_player_droplist_item
).on( "select2:open", function() {
on_player_droplist_open( $(this) ) ;
} ).on( "change", function() {
on_player_change_with_confirm( 2 ) ;
} ) ;
// load the ELR's and SAN's
@ -200,21 +209,21 @@ $(document).ready( function () {
for ( var i=0 ; i <= 5 ; ++i ) // nb: A19.1: ELR is 0-5
buf.push( "<option value='" + i + "'>" + i + "</option>" ) ;
buf = buf.join( "" ) ;
for ( var player_no=1 ; player_no <= 2 ; ++player_no ) {
$( "select[name='PLAYER_" + player_no + "_ELR']" ).html( buf ).selectmenu( {
classes: { "ui-selectmenu-button": "player" + player_no + "_elr" },
width: "3em"
} ) ;
var player_no, $sel ;
for ( player_no=1 ; player_no <= 2 ; ++player_no ) {
init_select2( $( "select[name='PLAYER_" + player_no + "_ELR']" ),
"3em", false, null
).html( buf ) ;
}
buf = [ "<option value=''></option>" ] ; // nb: allow scenarios that have no SAN
buf = [ "<option value=''>-</option>" ] ; // nb: allow scenarios that have no SAN
for ( i=2 ; i <= 7 ; ++i ) // nb: A14.1: SAN is 2-7
buf.push( "<option value='" + i + "'>" + i + "</option>" ) ;
buf = buf.join( "" ) ;
for ( player_no=1 ; player_no <= 2 ; ++player_no ) {
$( "select[name='PLAYER_" + player_no + "_SAN']" ).html( buf ).selectmenu( {
classes: { "ui-selectmenu-button": "player" + player_no + "_san" },
width: "3em"
} ) ;
$sel = init_select2( $( "select[name='PLAYER_" + player_no + "_SAN']" ),
"3em", false, null
).html( buf ) ;
$sel.data( "select2" ).$results.css( "max-height", "15em" ) ;
}
// get the vehicle/ordnance listings
@ -471,11 +480,9 @@ function install_template_pack( data )
buf = buf.join( "" ) ;
for ( var player_no=1 ; player_no <= 2 ; ++player_no ) {
var $sel = $( "select[name='PLAYER_" + player_no + "']" ) ;
$sel.html( buf ).selectmenu( {
classes: { "ui-selectmenu-button": "player" + player_no },
} ) ;
$sel.html( buf ) ;
if ( curSel[player_no] )
$sel.val( curSel[player_no] ).selectmenu( "refresh" ) ;
$sel.val( curSel[player_no] ) ; // nb: we don't trigger a "change" event
}
// update the OB tab headers
@ -510,7 +517,7 @@ function on_player_change_with_confirm( player_no )
"<p>Do you want to change this player's nationality?<p>You will lose changes made to their OB.", {
ok: function() { on_player_change( player_no ) ; },
cancel: function() {
$select.val( $select.data("prev-val") ).selectmenu( "refresh" ) ;
$select.val( $select.data("prev-val") ).trigger( "change" ) ;
},
} ) ;
}

@ -702,7 +702,7 @@ function do_load_scenario_data( params )
else
$elem.val( params[key] ) ;
if ( $elem[0].nodeName.toLowerCase() === "select" )
$elem.selectmenu( "refresh" ) ;
$elem.trigger( "change" ) ;
params_loaded[key] = true ;
return $elem ;
} ;
@ -966,8 +966,8 @@ function reset_scenario()
var player_no ;
for ( player_no=1 ; player_no <= 2 ; ++player_no ) {
on_player_change( player_no ) ;
$("select[name='PLAYER_" + player_no + "_ELR']").val( 0 ).selectmenu( "refresh" ) ;
$("select[name='PLAYER_" + player_no + "_SAN']").val( "" ).selectmenu( "refresh" ) ;
$("select[name='PLAYER_" + player_no + "_ELR']").val( 0 ).trigger( "change" ) ;
$("select[name='PLAYER_" + player_no + "_SAN']").val( "" ).trigger( "change" ) ;
}
// reset all the template parameters

@ -252,24 +252,36 @@ function makeBulletListMsg( caption, items, li_class )
// --------------------------------------------------------------------
function init_select2( $sel, width, search_box, format )
{
// initialize the select2 droplist
var name = $sel.attr( "name" ) ;
args = { width: width, height: "22px" } ;
if ( ! search_box )
args.minimumResultsForSearch = Infinity ; // nb: this disables the search box :-/
if ( format ) {
args.templateResult = format ;
args.templateSelection = format ;
}
$sel = $sel.select2( args ) ;
$sel.data( "select2" ).$container.attr( "name", name ) ;
return $sel ;
}
function restrict_droplist_height( $sel )
{
// restrict the selectmenu's droplist height to the available space
// restrict the select2's droplist height to the available space
// NOTE: The user can circumvent this by resizing the window after opening
// the droplist, but we can live with that... :-/
// figure out how much space is available
var $droplist = $( "#" + $sel.attr("id") + "-menu" ) ;
var $droplist = $sel.data( "select2" ).$dropdown ;
var avail = $(window).height() - $droplist.offset().top - 5 ;
// make sure the currently-selected item will be visible
$droplist.css( "max-height", "" );
var $elem = $droplist.find( ".ui-menu-item-wrapper.ui-state-active" ) ;
var offset = $elem.offset().top - $droplist.offset().top - avail/3 ;
// set the max-height for the droplist
$droplist.css( "max-height", Math.floor(avail)+"px" ) ;
$droplist.animate({ scrollTop: offset }, 0 ) ;
var $results = $sel.data( "select2" ).$results ;
$results.css( "max-height", Math.floor(avail)+"px" ) ;
}
// --------------------------------------------------------------------

@ -30,7 +30,7 @@
</div>
<div class='row'>
<label></label>
<span style='width:7em'></span>
<span style='width:9.45em'></span>
<label class="header">ELR</label>
<label class="header">SAN</label>
</div>

@ -335,30 +335,20 @@ def find_children( sel, parent=None ):
def select_droplist_val( sel, val ):
"""Select a droplist option by value."""
options = get_droplist_vals_index( sel )
_do_select_droplist( sel, options[val] )
_do_select_droplist( sel, val )
def select_droplist_index( sel, index ):
"""Select a droplist option by index."""
options = get_droplist_vals( sel )
_do_select_droplist( sel, options[index][1] )
_do_select_droplist( sel, options[index][0] )
def _do_select_droplist( sel, val ):
"""Select a droplist option."""
# open the jQuery droplist
sel_id = sel._el.get_attribute( "id" ) #pylint: disable=protected-access
elem = find_child( "#{}-button .ui-selectmenu-icon".format( sel_id ) )
elem.click()
# select the requested option
elems = [
e for e in find_children( "#{}-menu.ui-menu .ui-menu-item-wrapper".format( sel_id ) )
if e.text == val
]
assert len(elems) == 1
_webdriver.execute_script( "arguments[0].scrollIntoView()", elems[0] )
ActionChains(_webdriver).click( elems[0] ).perform()
sel_name = sel._el.get_attribute( "name" ) #pylint: disable=protected-access
_webdriver.execute_script(
"$(arguments[0]).val( '{}' ).trigger( 'change' )".format( val ),
find_child( "select[name='{}']".format( sel_name ) )
)
def get_droplist_vals_index( sel ):
"""Get the value/text for each option in a droplist."""

Loading…
Cancel
Save