From bbee2fdb2b81f1e8e047b33b849f82d43ecbb0b1 Mon Sep 17 00:00:00 2001 From: chrsMon Date: Sun, 13 Feb 2011 21:11:53 +0100 Subject: [PATCH 01/10] Fixes issue #1036 partially offscreen rendering of select menu https://github.com/jquery/jquery-mobile/issues/issue/1036 The css styles the select menu with a width of 80% with a max-width of 350px. This fix checks if width of select menu is less than max-width. If that is the case the select menu is centered on screen. If not it checks if the rigth or left side of the select menu are outside the viewport and if so moves the select menu inside the viewport with a 30px tolerance. --- js/jquery.mobile.forms.select.js | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/js/jquery.mobile.forms.select.js b/js/jquery.mobile.forms.select.js index 508d1d2f..0b115e9b 100644 --- a/js/jquery.mobile.forms.select.js +++ b/js/jquery.mobile.forms.select.js @@ -405,8 +405,8 @@ $.widget( "mobile.selectmenu", $.mobile.widget, { if( this.options.disabled || this.options.nativeMenu ){ return; } var self = this, - menuHeight = self.list.outerHeight(), - menuWidth = self.list.outerWidth(), + menuHeight = self.list.parent().outerHeight(), + menuWidth = self.list.parent().outerWidth(), scrollTop = $(window).scrollTop(), btnOffset = self.button.offset().top, screenHeight = window.innerHeight, @@ -455,6 +455,7 @@ $.widget( "mobile.selectmenu", $.mobile.widget, { var roomtop = btnOffset - scrollTop, roombot = scrollTop + screenHeight - btnOffset, halfheight = menuHeight / 2, + maxwidth = parseFloat(self.list.parent().css('max-width')), newtop,newleft; if( roomtop > menuHeight / 2 && roombot > menuHeight / 2 ){ @@ -465,8 +466,17 @@ $.widget( "mobile.selectmenu", $.mobile.widget, { newtop = roomtop > roombot ? scrollTop + screenHeight - menuHeight - 30 : scrollTop + 30; } - newleft = self.button.offset().left + self.button.outerWidth() / 2 - menuWidth / 2; - + if (menuWidth < maxwidth) { + newleft = (screenWidth - menuWidth) / 2; + } else { + newleft = self.button.offset().left + self.button.outerWidth() / 2 - menuWidth / 2; + // 30px tolerance off the edges + if (newleft < 30) { + newleft = 30; + } else if ((newleft + menuWidth) > screenWidth) { + newleft = screenWidth - menuWidth - 30; + } + } self.listbox .append( self.list ) From 183ec771d2d8a015506cdc09f2b460f40cce7e63 Mon Sep 17 00:00:00 2001 From: toddparker Date: Sat, 12 Mar 2011 16:24:48 -0500 Subject: [PATCH 02/10] Fixed -msfilter: css rules to use the correct ms-filter: syntax. Not an issue with valencia, only the default theme. Closes #1020 --- themes/default/jquery.mobile.theme.css | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/themes/default/jquery.mobile.theme.css b/themes/default/jquery.mobile.theme.css index eea445fb..e1b2c3cb 100755 --- a/themes/default/jquery.mobile.theme.css +++ b/themes/default/jquery.mobile.theme.css @@ -21,7 +21,7 @@ background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #3c3c3c), color-stop(1, #111111)); - -msfilter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#3c3c3c', EndColorStr='#111111')"; + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#3c3c3c', EndColorStr='#111111')"; } .ui-bar-a, .ui-bar-a input, @@ -352,7 +352,7 @@ background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #eeeeee), color-stop(1, #fdfdfd)); - -msfilter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#fdfdfd')"; + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#fdfdfd')"; } .ui-btn-down-c a.ui-link-inherit { color: #2F3E46; @@ -439,7 +439,7 @@ background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #fdfdfd), color-stop(1, #eeeeee)); - -msfilter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fdfdfd', EndColorStr='#eeeeee')"; + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fdfdfd', EndColorStr='#eeeeee')"; } .ui-btn-hover-d a.ui-link-inherit { color: #222; @@ -456,7 +456,7 @@ background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #eeeeee), color-stop(1, #ffffff)); - -msfilter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#ffffff')"; + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#ffffff')"; } .ui-btn-down-d a.ui-link-inherit { border: 1px solid #808080; @@ -470,7 +470,7 @@ background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #cccccc), color-stop(1, #eeeeee)); - -msfilter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#cccccc', EndColorStr='#eeeeee')"; + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#cccccc', EndColorStr='#eeeeee')"; } .ui-btn-up-d, .ui-btn-hover-d, @@ -493,7 +493,7 @@ background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #fceda7), color-stop(1, #fadb4e)); - -msfilter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fceda7', EndColorStr='#fadb4e')"; + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fceda7', EndColorStr='#fadb4e')"; } .ui-bar-e, .ui-bar-e input, @@ -520,7 +520,7 @@ background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #fff), color-stop(1, #faeb9e)); - -msfilter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#faeb9e')"; + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#faeb9e')"; } .ui-body-e, .ui-body-e input, @@ -569,7 +569,7 @@ background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #fcf0b5), color-stop(1, #fbe26f)); - -msfilter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fcf0b5', EndColorStr='#fbe26f')"; + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fcf0b5', EndColorStr='#fbe26f')"; } .ui-btn-hover-e a.ui-link-inherit { @@ -624,7 +624,7 @@ a.ui-link-inherit { background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #85bae4), color-stop(1, #5393c5)); - -msfilter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#85bae4', EndColorStr='#5393c5')"; + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#85bae4', EndColorStr='#5393c5')"; outline: none; } .ui-btn-active a.ui-link-inherit { From f555a27e341b0d6041ef4ebea1c6500b06aca069 Mon Sep 17 00:00:00 2001 From: John Bender Date: Sat, 12 Mar 2011 13:57:46 -0800 Subject: [PATCH 03/10] fix for protocol and host included as params in path.clean --- js/jquery.mobile.navigation.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/js/jquery.mobile.navigation.js b/js/jquery.mobile.navigation.js index c4a7568e..40803695 100644 --- a/js/jquery.mobile.navigation.js +++ b/js/jquery.mobile.navigation.js @@ -47,7 +47,9 @@ //return a url path with the window's location protocol/hostname removed clean: function( url ){ - return url.replace( location.protocol + "//" + location.host, ""); + // Replace the protocol and host only once at the beginning of the path to avoid + // problems when it's included as a part of a param + return url.replace(new RegExp("^" + location.protocol + "//" + location.host), ""); }, //just return the url without an initial # From 1911dba7d7f9e1262eeb13095dd67567655a61b7 Mon Sep 17 00:00:00 2001 From: John Bender Date: Sat, 12 Mar 2011 14:07:18 -0800 Subject: [PATCH 04/10] small refactor for clean --- js/jquery.mobile.navigation.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/js/jquery.mobile.navigation.js b/js/jquery.mobile.navigation.js index 40803695..ee8dbc27 100644 --- a/js/jquery.mobile.navigation.js +++ b/js/jquery.mobile.navigation.js @@ -47,9 +47,10 @@ //return a url path with the window's location protocol/hostname removed clean: function( url ){ - // Replace the protocol and host only once at the beginning of the path to avoid + // Replace the protocol and host only once at the beginning of the url to avoid // problems when it's included as a part of a param - return url.replace(new RegExp("^" + location.protocol + "//" + location.host), ""); + var leadingUrlRootRegex = new RegExp("^" + location.protocol + "//" + location.host); + return url.replace(leadingUrlRootRegex, ""); }, //just return the url without an initial # From 129b5866662181ec4f418dd1f57e60f44e3c9070 Mon Sep 17 00:00:00 2001 From: John Bender Date: Sat, 12 Mar 2011 14:08:12 -0800 Subject: [PATCH 05/10] tests for url root in params / path.clean Fixes #1039 --- tests/unit/navigation/navigation_core.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/tests/unit/navigation/navigation_core.js b/tests/unit/navigation/navigation_core.js index c48ab2ef..032d7c24 100644 --- a/tests/unit/navigation/navigation_core.js +++ b/tests/unit/navigation/navigation_core.js @@ -86,11 +86,13 @@ var localroot = location.href.split("/").slice(0, 3).join("/"), remoteroot = "http://google.com/", fakepath = "foo/bar/baz.html", + pathWithParam = localroot + "/bar?baz=" + localroot, localpath = localroot + fakepath, remotepath = remoteroot + fakepath; same( $.mobile.path.clean( localpath ), fakepath, "removes location protocol, host, port from same-domain path"); same( $.mobile.path.clean( remotepath ), remotepath, "does nothing to an external domain path"); + same( $.mobile.path.clean( pathWithParam ), "/bar?baz=" + localroot, "doesn't remove params with localroot value"); }); test( "path.stripHash is working properly", function(){ @@ -242,7 +244,7 @@ function(){ $("#dup-history-second a:last").click(); }, function(){ $("#dup-history-dialog .ui-icon-delete").click(); }, function(){ - + // third page in the stack to account for first page being hash manipulation same($.mobile.urlHistory.activeIndex, 3, "should be the third page in the stack"); start(); From e3000e2decde5ba795584678f26755a42663bd3c Mon Sep 17 00:00:00 2001 From: John Bender Date: Sat, 12 Mar 2011 22:52:44 -0800 Subject: [PATCH 06/10] added failing test for on screen custom select menu rendering --- tests/unit/select/index.html | 21 +++++++++++++++++++++ tests/unit/select/select_core.js | 21 +++++++++++++++++++++ tests/unit/select/select_events.js | 4 ++-- 3 files changed, 44 insertions(+), 2 deletions(-) create mode 100644 tests/unit/select/select_core.js diff --git a/tests/unit/select/index.html b/tests/unit/select/index.html index 7a052285..7a9d75b2 100644 --- a/tests/unit/select/index.html +++ b/tests/unit/select/index.html @@ -14,6 +14,7 @@ + @@ -106,5 +107,25 @@ + +
+ + + +
+ diff --git a/tests/unit/select/select_core.js b/tests/unit/select/select_core.js new file mode 100644 index 00000000..7af1a850 --- /dev/null +++ b/tests/unit/select/select_core.js @@ -0,0 +1,21 @@ +/* + * mobile select unit tests + */ + +(function($){ + var libName = "jquery.mobile.forms.select.js"; + + module(libName); + + asyncTest( "custom select menu always renders screen from the left", function(){ + expect( 2 ); + var select = $("ul#select-offscreen-menu"); + + $('#select-offscreen-container a').trigger($.support.touch ? "touchend" : "mouseup"); + + setTimeout(function(){ + ok(select.offset().left >= 30); + start(); + }, 1000); + }); +})(jQuery); \ No newline at end of file diff --git a/tests/unit/select/select_events.js b/tests/unit/select/select_events.js index fdcc2ee6..5de5d7be 100644 --- a/tests/unit/select/select_events.js +++ b/tests/unit/select/select_events.js @@ -45,7 +45,7 @@ stop(); }); - + test( "selects marked with data-native-menu=true should use a div as their button", function(){ same($("#select-choice-native-container div.ui-btn").length, 1); }); @@ -53,7 +53,7 @@ test( "selects marked with data-native-menu=true should not have a custom menu", function(){ same($("#select-choice-native-container ul").length, 0); }); - + test( "selects marked with data-native-menu=true should sit inside the button", function(){ same($("#select-choice-native-container div.ui-btn select").length, 1); }); From 648be47a0760b0387182401493384104a31f1ea9 Mon Sep 17 00:00:00 2001 From: John Bender Date: Sat, 12 Mar 2011 22:55:48 -0800 Subject: [PATCH 07/10] reset location hash in select menu tests --- tests/unit/select/select_core.js | 7 +++++-- tests/unit/select/select_events.js | 4 +++- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/tests/unit/select/select_core.js b/tests/unit/select/select_core.js index 7af1a850..a21b4993 100644 --- a/tests/unit/select/select_core.js +++ b/tests/unit/select/select_core.js @@ -5,10 +5,13 @@ (function($){ var libName = "jquery.mobile.forms.select.js"; - module(libName); + module(libName, { + teardown: function(){ location.hash = ""; } + }); + asyncTest( "custom select menu always renders screen from the left", function(){ - expect( 2 ); + expect( 1 ); var select = $("ul#select-offscreen-menu"); $('#select-offscreen-container a').trigger($.support.touch ? "touchend" : "mouseup"); diff --git a/tests/unit/select/select_events.js b/tests/unit/select/select_events.js index 5de5d7be..75f6eca6 100644 --- a/tests/unit/select/select_events.js +++ b/tests/unit/select/select_events.js @@ -6,7 +6,9 @@ var mouseUpTouchEnd = $.support.touch ? "touchend" : "mouseup", libName = "jquery.mobile.forms.select.js"; - module(libName); + module(libName, { + teardown: function(){ location.hash = ""; } + }); test( "a large select menu should come up in a dialog many times", function(){ var menu, select = $("#select-choice-many-container a"); From bc70fedb20cadc0a399924fa602722fa114d35ff Mon Sep 17 00:00:00 2001 From: John Bender Date: Sat, 12 Mar 2011 22:56:36 -0800 Subject: [PATCH 08/10] select whitespace cleanup --- js/jquery.mobile.forms.select.js | 96 ++++++++++++++++---------------- 1 file changed, 48 insertions(+), 48 deletions(-) diff --git a/js/jquery.mobile.forms.select.js b/js/jquery.mobile.forms.select.js index 0b115e9b..7c225023 100644 --- a/js/jquery.mobile.forms.select.js +++ b/js/jquery.mobile.forms.select.js @@ -29,9 +29,9 @@ $.widget( "mobile.selectmenu", $.mobile.widget, { select = this.element .wrap( "
" ), - - selectID = select.attr( "id" ), - + + selectID = select.attr( "id" ), + label = $( "label[for="+ selectID +"]" ).addClass( "ui-select" ), button = ( self.options.nativeMenu ? $( "
" ) : $( "", { @@ -52,31 +52,31 @@ $.widget( "mobile.selectmenu", $.mobile.widget, { shadow: o.shadow, iconshadow: o.iconshadow }), - + //multi select or not isMultiple = self.isMultiple = select[0].multiple; - + //Opera does not properly support opacity on select elements //In Mini, it hides the element, but not its text //On the desktop,it seems to do the opposite //for these reasons, using the nativeMenu option results in a full native select in Opera if( o.nativeMenu && window.opera && window.opera.version ){ select.addClass( "ui-select-nativeonly" ); - } - - //vars for non-native menus - if( !o.nativeMenu ){ + } + + //vars for non-native menus + if( !o.nativeMenu ){ var options = select.find("option"), - + buttonId = selectID + "-button", - + menuId = selectID + "-menu", - + thisPage = select.closest( ".ui-page" ), - + //button theme theme = /ui-btn-up-([a-z])/.exec( button.attr("class") )[1], - + menuPage = $( "
" + "
" + "
" + label.text() + "
"+ @@ -85,17 +85,17 @@ $.widget( "mobile.selectmenu", $.mobile.widget, { "
" ) .appendTo( $.mobile.pageContainer ) .page(), - + menuPageContent = menuPage.find( ".ui-content" ), - + menuPageClose = menuPage.find( ".ui-header a" ), - + screen = $( "
", {"class": "ui-selectmenu-screen ui-screen-hidden"}) .appendTo( thisPage ), - + listbox = $( "
", { "class": "ui-selectmenu ui-selectmenu-hidden ui-overlay-shadow ui-corner-all pop ui-body-" + o.overlayTheme } ) .insertAfter(screen), - + list = $( "