From ca3023861551d33b17c74662a7d6e5470c67f2f3 Mon Sep 17 00:00:00 2001 From: Taka Date: Thu, 18 Oct 2018 04:18:43 +0000 Subject: [PATCH] Show flags in the player droplist's. --- vasl_templates/webapp/static/css/main.css | 6 +- .../webapp/static/css/select-vo-dialog.css | 2 +- .../webapp/static/css/tabs-scenario.css | 9 ++- vasl_templates/webapp/static/main.js | 61 +++++++++++-------- vasl_templates/webapp/static/snippets.js | 6 +- vasl_templates/webapp/static/utils.js | 30 ++++++--- .../webapp/templates/tabs-scenario.html | 2 +- vasl_templates/webapp/tests/utils.py | 24 +++----- 8 files changed, 79 insertions(+), 61 deletions(-) diff --git a/vasl_templates/webapp/static/css/main.css b/vasl_templates/webapp/static/css/main.css index f470bd5..f40a5e4 100644 --- a/vasl_templates/webapp/static/css/main.css +++ b/vasl_templates/webapp/static/css/main.css @@ -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 ; } diff --git a/vasl_templates/webapp/static/css/select-vo-dialog.css b/vasl_templates/webapp/static/css/select-vo-dialog.css index 43f4daf..3e08342 100644 --- a/vasl_templates/webapp/static/css/select-vo-dialog.css +++ b/vasl_templates/webapp/static/css/select-vo-dialog.css @@ -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 ; } diff --git a/vasl_templates/webapp/static/css/tabs-scenario.css b/vasl_templates/webapp/static/css/tabs-scenario.css index 56d5950..fd19f96 100644 --- a/vasl_templates/webapp/static/css/tabs-scenario.css +++ b/vasl_templates/webapp/static/css/tabs-scenario.css @@ -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 ; } diff --git a/vasl_templates/webapp/static/main.js b/vasl_templates/webapp/static/main.js index def4f05..e192ab1 100644 --- a/vasl_templates/webapp/static/main.js +++ b/vasl_templates/webapp/static/main.js @@ -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 $( "
" + + "" + + " " + opt.text + + "
" ) ; + } + 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( "" ) ; 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 = [ "" ] ; // nb: allow scenarios that have no SAN + buf = [ "" ] ; // nb: allow scenarios that have no SAN for ( i=2 ; i <= 7 ; ++i ) // nb: A14.1: SAN is 2-7 buf.push( "" ) ; 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 ) "

Do you want to change this player's nationality?

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" ) ; }, } ) ; } diff --git a/vasl_templates/webapp/static/snippets.js b/vasl_templates/webapp/static/snippets.js index eab107f..cf0b9de 100644 --- a/vasl_templates/webapp/static/snippets.js +++ b/vasl_templates/webapp/static/snippets.js @@ -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 diff --git a/vasl_templates/webapp/static/utils.js b/vasl_templates/webapp/static/utils.js index 9aa6d74..3d746ea 100644 --- a/vasl_templates/webapp/static/utils.js +++ b/vasl_templates/webapp/static/utils.js @@ -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" ) ; } // -------------------------------------------------------------------- diff --git a/vasl_templates/webapp/templates/tabs-scenario.html b/vasl_templates/webapp/templates/tabs-scenario.html index 13bcac7..ab6a8f3 100644 --- a/vasl_templates/webapp/templates/tabs-scenario.html +++ b/vasl_templates/webapp/templates/tabs-scenario.html @@ -30,7 +30,7 @@

- +
diff --git a/vasl_templates/webapp/tests/utils.py b/vasl_templates/webapp/tests/utils.py index d7e530b..327bddd 100644 --- a/vasl_templates/webapp/tests/utils.py +++ b/vasl_templates/webapp/tests/utils.py @@ -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."""