Add data-overlay-type to select options

[ladar]

I have custom select dropdowns and I'd like to force them to be full screen overlays instead of popovers. In my case I don't know ahead of time if there will be enough options to force the full screen styling, and I'd prefer to keep it consistent. I managed to force this behavior by changing:

if ( menuHeight > screenHeight - 80 || !$.support.scrollTop ) {

to

if ( true || menuHeight > screenHeight - 80 || !$.support.scrollTop ) {

But the long term solution is to add data-overlay-type or a similar option that would allow me to switch between the popover and full screen styles... I started working on a patch that extends the select widget, but its not worth the effort to maintain... if it won't get accepted upstream.

Also not sure how to add the feature request label...

[ladar]

Here's a patch to add data-dialog, when set to true it forces the dialog overlay. When set to false the current height based logic is used...

diff -r 478c12f5ca2e www/lib/jquery.mobile/jquery.mobile.js
--- a/www/lib/jquery.mobile/jquery.mobile.js    Wed May 16 04:04:46 2012 -0500
+++ b/www/lib/jquery.mobile/jquery.mobile.js    Wed May 16 18:31:52 2012 -0500
@@ -5776,10 +5776,11 @@
         shadow: true,
         iconshadow: true,
         overlayTheme: "a",
         hidePlaceholderMenuItems: true,
         closeText: "Close",
+               dialog: false,
         nativeMenu: true,
         // This option defaults to true on iOS devices.
         preventFocusZoom: /iPhone|iPad|iPod/.test(navigator.platform) && navigator.userAgent.indexOf("AppleWebKit") > -1,
         initSelector: "select:not(:jqmData(role='slider'))",
         mini: false
@@ -5824,10 +5825,11 @@

         this.select = this.element.wrap("<div class='ui-select" + classes + "'>");
         this.selectID = this.select.attr("id");
         this.label = $("label[for='" + this.selectID + "']").addClass("ui-select");
         this.isMultiple = this.select[0].multiple;
+               this.isDialog = this.options.dialog;
         if (!this.options.theme) {
           this.options.theme = $.mobile.getInheritedTheme(this.select, "c");
         }
       },

@@ -5983,11 +5985,11 @@
   (function($, undefined) {
     var extendSelect = function(widget) {

       var select = widget.select, selectID = widget.selectID, label = widget.label, thisPage = widget.select.closest(".ui-page"), screen = $("<div>", {
         "class": "ui-selectmenu-screen ui-screen-hidden"
-      }).appendTo(thisPage), selectOptions = widget._selectOptions(), isMultiple = widget.isMultiple = widget.select[0].multiple, buttonId = selectID + "-button", menuId = selectID + "-menu", menuPage = $("<div data-" + $.mobile.ns + "role='dialog' data-" + $.mobile.ns + "theme='" + widget.options.theme + "' data-" + $.mobile.ns + "overlay-theme='" + widget.options.overlayTheme + "'>" +
+      }).appendTo(thisPage), selectOptions = widget._selectOptions(), isMultiple = widget.isMultiple = widget.select[0].multiple, isDialog = widget.isDialog, buttonId = selectID + "-button", menuId = selectID + "-menu", menuPage = $("<div data-" + $.mobile.ns + "role='dialog' data-" + $.mobile.ns + "theme='" + widget.options.theme + "' data-" + $.mobile.ns + "overlay-theme='" + widget.options.overlayTheme + "'>" +
       "<div data-" +
       $.mobile.ns +
       "role='header'>" +
       "<div class='ui-title'>" +
       label.getEncodedText() +
@@ -6026,10 +6028,11 @@
         menuPage: menuPage,
         label: label,
         screen: screen,
         selectOptions: selectOptions,
         isMultiple: isMultiple,
+               isDialog: isDialog,
         theme: widget.options.theme,
         listbox: listbox,
         list: list,
         header: header,
         headerTitle: headerTitle,
@@ -6268,11 +6271,11 @@

           function focusMenuItem() {
             self.list.find("." + $.mobile.activeBtnClass + " a").focus();
           }

-          if (true || menuHeight > screenHeight - 80 || !$.support.scrollTop) {
+          if (this.isDialog || menuHeight > screenHeight - 80 || !$.support.scrollTop) {

             self.menuPage.appendTo($.mobile.pageContainer).page();
             self.menuPageContent = menuPage.find(".ui-content");
             self.menuPageClose = menuPage.find(".ui-header a");

[jaspermdegroot]

hi @ladar

Custom select menus are going to use the new popup widget. See #4329
Since allowing for full screen menu sounds like a nice feature to me I suggest to leave a comment there so it can be taken into account during development.

In general: you can't add a label here, but you can add your feature request to the wiki page (https://github.com/jquery/jquery-mobile/wiki/Feature-Requests).

[toddparker]

Thanks for the suggestion and patch. We close all feature requests until we decide to implement the feature, but please do add it to the wiki page as @uGoMobi suggested.