public
/
vasl-templates
1
0
Fork 0
Code Issues Pull Requests Projects Releases 29 Wiki Activity

Converted droplist's to be jQuery selectmenu's.

Browse Source
master
Pacman Ghost 6 years ago
parent 977f45faaa
commit b46e7dcd49
9 changed files with 133 additions and 64 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 8
      vasl_templates/webapp/static/css/main.css
  2. 12
      vasl_templates/webapp/static/css/tabs-scenario.css
  3. 83
      vasl_templates/webapp/static/main.js
  4. 24
      vasl_templates/webapp/static/snippets.js
  5. 2
      vasl_templates/webapp/templates/index.html
  6. 5
      vasl_templates/webapp/tests/test_ob.py
  7. 7
      vasl_templates/webapp/tests/test_players.py
  8. 27
      vasl_templates/webapp/tests/test_template_packs.py
  9. 29
      vasl_templates/webapp/tests/utils.py

8
vasl_templates/webapp/static/css/main.css
Unescape View File

@ -84,12 +84,14 @@ input[type="text"] { margin-bottom: 0.25em ; }
/* FUDGE! Fix vertical alignment between labels and their input boxes :-/ */
div.label { border: 1px dotted transparent ; }
.ui-selectmenu-button { padding: 2px 5px ; }
.snippet-control button.generate { height: 26px ; padding: 2px 10px 2px 5px ; }
.snippet-control button.generate img { height: 20px ; margin-right: 3px ; vertical-align: middle ; }
.snippet-control .ui-selectmenu-button { padding: 2px 10px ; }
.snippet-control-menu-item { font-size: 75% ; }
.ui-selectmenu-button-closed { height: 26px ; }
.ui-selectmenu-icon.ui-icon { margin-top: -7px; }
.snippet-control-menu-item { font-size: 75% ; font-style: italic ; }
.snippet-control .ui-selectmenu-button-closed { height: 26px ; }
.snippet-control .ui-selectmenu-icon.ui-icon { margin-top: -8px ; }
button.edit-template { height: 30px ; padding: 4px 10px ; }
button.edit-template img { height: 18px ; vertical-align: middle ; margin-right: 0.25em ; }

12
vasl_templates/webapp/static/css/tabs-scenario.css
Unescape View File

@ -26,13 +26,13 @@
#panel-players div[data-labelfor="ELR"] { -ms-grid-row: 1 ; -ms-grid-column: 3 ; }
#panel-players div[data-labelfor="SAN"] { -ms-grid-row: 1 ; -ms-grid-column: 4 ; }
#panel-players div[data-labelfor="PLAYER_1"] { -ms-grid-row: 2 ; -ms-grid-column: 1 ; }
#panel-players select[name="PLAYER_1"] { -ms-grid-row: 2 ; -ms-grid-column: 2 ; }
#panel-players select[name="PLAYER_1_ELR"] { -ms-grid-row: 2 ; -ms-grid-column: 3 ; }
#panel-players select[name="PLAYER_1_SAN"] { -ms-grid-row: 2 ; -ms-grid-column: 4 ; }
#panel-players .ui-selectmenu-button.player1 { -ms-grid-row: 2 ; -ms-grid-column: 2 ; }
#panel-players .ui-selectmenu-button.player1_elr { -ms-grid-row: 2 ; -ms-grid-column: 3 ; }
#panel-players .ui-selectmenu-button.player1_san { -ms-grid-row: 2 ; -ms-grid-column: 4 ; }
#panel-players div[data-labelfor="PLAYER_2"] { -ms-grid-row: 3 ; -ms-grid-column: 1 ; }
#panel-players select[name="PLAYER_2"] { -ms-grid-row: 3 ; -ms-grid-column: 2 ; }
#panel-players select[name="PLAYER_2_ELR"] { -ms-grid-row: 3 ; -ms-grid-column: 3 ; }
#panel-players select[name="PLAYER_2_SAN"] { -ms-grid-row: 3 ; -ms-grid-column: 4 ; }
#panel-players .ui-selectmenu-button.player2 { -ms-grid-row: 3 ; -ms-grid-column: 2 ; }
#panel-players .ui-selectmenu-button.player2_elr { -ms-grid-row: 3 ; -ms-grid-column: 3 ; }
#panel-players .ui-selectmenu-button.player2_san { -ms-grid-row: 3 ; -ms-grid-column: 4 ; }
#panel-players .footer { -ms-grid-row: 4 ; -ms-grid-column: 1 ; -ms-grid-column-span: 4 ; }
#panel-players div[data-labelfor="ELR"] { margin-left: 0.25em ; }

83
vasl_templates/webapp/static/main.js
Unescape View File

@ -139,23 +139,35 @@ $(document).ready( function () {
} ) ;
$("#select-vo").dblclick( function(evt) { auto_select_vo(evt) ; } ) ;
// add player change handlers
$("select[name='PLAYER_1']").selectmenu( {
select: function() { on_player_change( $(this) ) ; },
} ) ;
$("select[name='PLAYER_2']").selectmenu( {
select: function() { on_player_change( $(this) ) ; },
} ) ;
// load the ELR's and SAN's
var buf = [] ;
for ( var i=0 ; i <= 5 ; ++i ) // nb: A19.1: ELR is 0-5
buf.push( "<option value='" + i + "'>" + i + "</option>" ) ;
buf = buf.join( "" ) ;
$("select[name='PLAYER_1_ELR']").html( buf ) ;
$("select[name='PLAYER_2_ELR']").html( buf ) ;
for ( var player_id=1 ; player_id <= 2 ; ++player_id ) {
$( "select[name='PLAYER_" + player_id + "_ELR']" ).html( buf ).selectmenu( {
classes: { "ui-selectmenu-button": "player" + player_id + "_elr" },
width: "3em"
} ) ;
}
buf = [ "<option></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( "" ) ;
$("select[name='PLAYER_1_SAN']").html( buf ) ;
$("select[name='PLAYER_2_SAN']").html( buf ) ;
// add handlers for player changes
$("select[name='PLAYER_1']").change( function() { on_player_change($(this)) ; } ) ;
$("select[name='PLAYER_2']").change( function() { on_player_change($(this)) ; } ) ;
for ( player_id=1 ; player_id <= 2 ; ++player_id ) {
$( "select[name='PLAYER_" + player_id + "_SAN']" ).html( buf ).selectmenu( {
classes: { "ui-selectmenu-button": "player" + player_id + "_san" },
width: "3em"
} ) ;
}
// get the vehicle/ordnance listings
$.getJSON( gVehicleListingsUrl, function(data) {
@ -329,21 +341,27 @@ function install_template_pack( data )
gTemplatePack = data ;
// update the player droplists
var curSel1 = $("select[name='PLAYER_1']").val() ;
var curSel2 = $("select[name='PLAYER_2']").val() ;
var curSel = {
1: $("select[name='PLAYER_1']").val(),
2: $("select[name='PLAYER_2']").val()
} ;
var buf = [] ;
var nationalities = gTemplatePack.nationalities ;
for ( var id in nationalities )
buf.push( "<option value='" + id + "'>" + nationalities[id].display_name + "</option>" ) ;
buf = buf.join( "" ) ;
$("select[name='PLAYER_1']").html( buf ).val( curSel1 ) ;
$("select[name='PLAYER_2']").html( buf ).val( curSel2 ) ;
// update the OB tabs
if ( curSel1 )
on_player_change( $("select[name='PLAYER_1']") ) ;
if ( curSel2 )
on_player_change( $("select[name='PLAYER_2']") ) ;
for ( var player_id=1 ; player_id <= 2 ; ++player_id ) {
var $sel = $( "select[name='PLAYER_" + player_id + "']" ) ;
$sel.html( buf ).selectmenu( {
classes: { "ui-selectmenu-button": "player" + player_id },
} ) ;
if ( curSel[player_id] )
$sel.val( curSel[player_id] ).selectmenu( "refresh" ) ;
}
// update the OB tab headers
update_ob_tab_header( 1 ) ;
update_ob_tab_header( 2 ) ;
}
// --------------------------------------------------------------------
@ -355,20 +373,13 @@ function on_player_change( $select )
var player_id = name.substring( name.length-1 ) ;
// update the tab label
var player_nat = $select.find( "option:selected" ).val() ;
var $elem = $("#tabs .ui-tabs-nav a[href='#tabs-ob" + player_id + "']") ;
var image_url = gImagesBaseUrl + "/flags/" + player_nat + ".png" ;
var nationalities = gTemplatePack.nationalities ;
$elem.html(
"<img src='" + image_url + "'>&nbsp;" +
"<span>" + escapeHTML(nationalities[player_nat].display_name) + " OB</span>"
) ;
var player_nat = update_ob_tab_header( player_id ) ;
// show/hide the nationality-specific buttons
for ( var nat in _NATIONALITY_SPECIFIC_BUTTONS ) {
for ( var i=0 ; i < _NATIONALITY_SPECIFIC_BUTTONS[nat].length ; ++i ) {
var button_id = _NATIONALITY_SPECIFIC_BUTTONS[nat][i] ;
$elem = $( "#panel-ob_notes" + player_id + " div.snippet-control[data-id='" + button_id + "']" ) ;
var $elem = $( "#panel-ob_notes" + player_id + " div.snippet-control[data-id='" + button_id + "']" ) ;
$elem.css( "display", nat == player_nat ? "block" : "none" ) ;
}
}
@ -381,3 +392,21 @@ function on_player_change( $select )
$( "#ordnance-sortable_" + player_id ).sortable2( "delete-all" ) ;
$("input[name='ORDNANCE_WIDTH_"+player_id+"']").val( "" ) ;
}
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
function update_ob_tab_header( player_id )
{
// update the OB tab header for the specified player
var $sel = $( "select[name='PLAYER_" + player_id + "']" ) ;
var player_nat = $sel.find( "option:selected" ).val() ;
var display_name = gTemplatePack.nationalities[ player_nat ].display_name ;
var image_url = gImagesBaseUrl + "/flags/" + player_nat + ".png" ;
var $elem = $("#tabs .ui-tabs-nav a[href='#tabs-ob" + player_id + "']") ;
$elem.html(
"<img src='" + image_url + "'>&nbsp;" +
"<span>" + escapeHTML(display_name) + " OB</span>"
) ;
return player_nat ;
}

24
vasl_templates/webapp/static/snippets.js
Unescape View File

@ -625,21 +625,23 @@ function on_new_scenario( verbose )
$("textarea.param").each( function() { $(this).val("") ; } ) ;
// reset all the template parameters
on_player_change( $("select[name='PLAYER_1']").val( "german" ) ) ;
$("select[name='PLAYER_1_ELR']").val( 5 ) ;
$("select[name='PLAYER_1_SAN']").val( 2 ) ;
on_player_change( $("select[name='PLAYER_2']").val( "russian" ) ) ;
$("select[name='PLAYER_2_ELR']").val( 5 ) ;
$("select[name='PLAYER_2_SAN']").val( 2 ) ;
$("select[name='PLAYER_1']").val( "german" ).selectmenu( "refresh" ) ;
$("select[name='PLAYER_2']").val( "russian" ).selectmenu( "refresh" ) ;
var player_id ;
for ( player_id=1 ; player_id <= 2 ; ++player_id ) {
on_player_change( $( "select[name='PLAYER_" + player_id + "']" ) ) ;
$("select[name='PLAYER_" + player_id + "_ELR']").val( 5 ).selectmenu( "refresh" ) ;
$("select[name='PLAYER_" + player_id + "_SAN']").val( 2 ).selectmenu( "refresh" ) ;
}
// reset all the template parameters
$("#scenario_notes-sortable").sortable2( "delete-all" ) ;
$("#ssr-sortable").sortable2( "delete-all" ) ;
for ( var i=1 ; i <= 2 ; ++i ) {
$( "#ob_setups-sortable_" + i ).sortable2( "delete-all" ) ;
$( "#ob_notes-sortable_" + i ).sortable2( "delete-all" ) ;
$( "#vehicles-sortable_" + i ).sortable2( "delete-all" ) ;
$( "#ordnance-sortable_" + i ).sortable2( "delete-all" ) ;
for ( player_id=1 ; player_id <= 2 ; ++player_id ) {
$( "#ob_setups-sortable_" + player_id ).sortable2( "delete-all" ) ;
$( "#ob_notes-sortable_" + player_id ).sortable2( "delete-all" ) ;
$( "#vehicles-sortable_" + player_id ).sortable2( "delete-all" ) ;
$( "#ordnance-sortable_" + player_id ).sortable2( "delete-all" ) ;
}
// provide some feedback to the user

2
vasl_templates/webapp/templates/index.html
Unescape View File

@ -150,7 +150,7 @@
<button class="generate" data-id="pf">PF</button>
<button class="generate" data-id="psk">PSK</button>
<button class="generate" data-id="atmm">ATMM</button>
<button class="generate" data-id="baz">BAZ"</button>
<button class="generate" data-id="baz">BAZ</button>
<button class="generate" data-id="piat">PIAT</button>
</div>
</div>

5
vasl_templates/webapp/tests/test_ob.py
Unescape View File

@ -7,7 +7,8 @@ from selenium.webdriver.support.ui import Select
from vasl_templates.webapp.tests.utils import \
get_nationalities, get_clipboard, get_stored_msg, select_tab, find_child, find_children, \
add_simple_note, edit_simple_note, get_sortable_entry_count, drag_sortable_entry_to_trash
add_simple_note, edit_simple_note, get_sortable_entry_count, drag_sortable_entry_to_trash, \
select_droplist_val
# ---------------------------------------------------------------------
@ -176,7 +177,7 @@ def test_nationality_specific( webapp, webdriver ):
# change the nationality for player 1
select_tab( "scenario" )
player1_sel.select_by_value( nat )
select_droplist_val( player1_sel, nat )
# check the nationality-specific buttons
select_tab( "ob1" )

7
vasl_templates/webapp/tests/test_players.py
Unescape View File

@ -2,7 +2,8 @@
from selenium.webdriver.support.ui import Select
from vasl_templates.webapp.tests.utils import get_nationalities, select_tab, find_child
from vasl_templates.webapp.tests.utils import get_nationalities, select_tab, find_child, \
select_droplist_val
# ---------------------------------------------------------------------
@ -29,9 +30,9 @@ def test_player_change( webapp, webdriver ):
assert ob_tabs[player_no].text.strip() == expected
# change player 1
player_sel[1].select_by_value( "finnish" )
select_droplist_val( player_sel[1], "finnish" )
assert ob_tabs[1].text.strip() == "{} OB".format( nationalities["finnish"]["display_name"] )
# change player 2
player_sel[2].select_by_value( "japanese" )
select_droplist_val( player_sel[2], "japanese" )
assert ob_tabs[2].text.strip() == "{} OB".format( nationalities["japanese"]["display_name"] )

27
vasl_templates/webapp/tests/test_template_packs.py
Unescape View File

@ -10,7 +10,8 @@ from selenium.webdriver.support.ui import Select
from vasl_templates.webapp import snippets
from vasl_templates.webapp.tests.utils import \
select_tab, select_menu_option, dismiss_notifications, get_clipboard, \
get_stored_msg, set_stored_msg, add_simple_note, for_each_template, find_child, find_children
get_stored_msg, set_stored_msg, add_simple_note, for_each_template, find_child, find_children, \
select_droplist_val, get_droplist_vals
# ---------------------------------------------------------------------
@ -109,11 +110,15 @@ def test_nationality_data( webapp, webdriver ):
# select the British as player 1
player1_sel = Select( find_child( "select[name='PLAYER_1']" ) )
player1_sel.select_by_value( "british" )
select_droplist_val( player1_sel, "british" )
tab_ob1 = find_child( "a[href='#tabs-ob1']" )
assert tab_ob1.text.strip() == "British OB"
assert player1_sel.first_selected_option.text == "British"
players = [ o.text for o in player1_sel.options ]
# FUDGE! player1_sel.first_selected_option.text doesn't contain the right value
# if we're using jQuery selectmenu's :-/
assert player1_sel.first_selected_option.get_attribute( "value" ) == "british"
droplist_vals = get_droplist_vals( player1_sel )
assert droplist_vals["british"] == "British"
# upload a template pack that contains nationality data
zip_data = _make_zip_from_files( "with-nationality-data" )
@ -122,13 +127,17 @@ def test_nationality_data( webapp, webdriver ):
# check that the UI was updated correctly
assert tab_ob1.text.strip() == "Poms! OB"
assert player1_sel.first_selected_option.text == "Poms!"
assert player1_sel.first_selected_option.get_attribute( "value" ) == "british"
droplist_vals2 = get_droplist_vals( player1_sel )
assert droplist_vals2["british"] == "Poms!"
# check that there is a new Korean player
players2 = [ o.text for o in player1_sel.options ]
players2.remove( "Korean" )
players2 = [ "British" if o == "Poms!" else o for o in players2 ]
assert players2 == players
del droplist_vals2["korean"]
droplist_vals2 = {
k: "British" if v == "Poms!" else v
for k,v in droplist_vals2.items()
}
assert droplist_vals2 == droplist_vals
# ---------------------------------------------------------------------

29
vasl_templates/webapp/tests/utils.py
Unescape View File

@ -67,7 +67,7 @@ def for_each_template( func ): #pylint: disable=too-many-branches
player1_sel = Select( find_child( "select[name='PLAYER_1']" ) )
for nat,template_ids in _NAT_TEMPLATES.items():
select_tab( "scenario" )
player1_sel.select_by_value( nat )
select_droplist_val( player1_sel, nat )
select_tab( "ob1" )
for template_id in template_ids:
func( template_id, template_id )
@ -142,7 +142,7 @@ def set_template_params( params ): #pylint: disable=too-many-branches
# set the parameter value
if elem.tag_name == "select":
Select(elem).select_by_value( val )
select_droplist_val( Select(elem), val )
else:
elem.clear()
if val:
@ -261,6 +261,31 @@ def find_children( sel, parent=None ):
# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
def select_droplist_val( sel, val ):
"""Select a droplist option by value."""
# get the options from the original <select>
sel_id = sel._el.get_attribute( "id" ) #pylint: disable=protected-access
options = get_droplist_vals( sel )
# open the jQuery droplist
elem = find_child( "#{}-button .ui-selectmenu-icon".format( sel_id ) )
elem.click()
# select the requested option (nb: clicking on the child option doesn't work :shrug:)
elem = find_child( "#{}-button".format( sel_id ) )
elem.send_keys( options[val] )
elem.send_keys( Keys.RETURN )
def get_droplist_vals( sel ):
"""Get the value/text for each option in a droplist."""
return {
opt.get_attribute("value"): opt.get_attribute("text")
for opt in sel.options
}
# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
def dismiss_notifications():
"""Dismiss all notifications."""
while True:

Write Preview
Loading…
Cancel
Save