Tidied up the UI for the player droplists.

vasl_templates/webapp/static/main.js

@@ -167,14 +167,20 @@ $(document).ready( function () {
     $("#select-vo").dblclick( function(evt) { auto_select_vo(evt) ; } ) ;
 
     // add player change handlers
+    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: "7em",
-        open: function() { $(this).data("prev-val",$(this).val()) ; },
+        width: "7.5em",
+        open: function(evt,ui) { on_player_droplist_open($(this)) ; },
         select: function() { on_player_change_with_confirm( 1 ) ; },
     } ) ;
     $("select[name='PLAYER_2']").selectmenu( {
-        width: "7em",
-        open: function() { $(this).data("prev-val",$(this).val()) ; },
+        width: "7.5em",
+        open: function(evt,ui) { on_player_droplist_open($(this)) ; },
         select: function() { on_player_change_with_confirm( 2 ) ; },
     } ) ;
 

vasl_templates/webapp/static/utils.js

@@ -237,6 +237,28 @@ function makeBulletListMsg( caption, items, li_class )
 
 // --------------------------------------------------------------------
 
+function restrict_droplist_height( $sel )
+{
+    // restrict the selectmenu'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 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 }) ;
+}
+
+// --------------------------------------------------------------------
+
 function getUrlParam( param )
 {
     // look for the specified URL parameter