Permalink
Browse files

Selectmenu: Implement classes option

Fixes gh-7731
Closes gh-8309
  • Loading branch information...
gabrielschulhof authored and arschmitz committed Sep 8, 2015
1 parent 669e085 commit 649b09fb6696811d58fcb015042e77b3fab65fc6
Showing with 1,529 additions and 649 deletions.
  1. +14 −3 css/structure/jquery.mobile.controlgroup.css
  2. +29 −30 css/structure/jquery.mobile.forms.select.css
  3. +1 −1 css/structure/jquery.mobile.grid.css
  4. +1 −1 css/themes/default/jquery.mobile.theme.css
  5. +9 −6 demos/controlgroup-dynamic/index.php
  6. +28 −28 demos/controlgroup/index.php
  7. +30 −30 demos/forms-disabled/index.php
  8. +28 −28 demos/forms-field-contain/index.php
  9. +30 −30 demos/forms-gallery/index.php
  10. +24 −24 demos/forms-label-hidden-accessible/index.php
  11. +3 −3 demos/forms/index.php
  12. +5 −5 demos/selectmenu-custom-filter/index.php
  13. +14 −14 demos/selectmenu-custom/index.php
  14. +14 −14 demos/selectmenu/index.php
  15. +1 −1 demos/theme-classic/theme-classic.css
  16. +2 −0 js/index.php
  17. +2 −1 js/jquery.mobile.js
  18. +2 −1 js/widgets/controlgroup.backcompat.js
  19. +74 −0 js/widgets/controlgroup.js
  20. +50 −0 js/widgets/forms/select.backcompat.js
  21. +40 −0 js/widgets/forms/select.custom.backcompat.js
  22. +262 −158 js/widgets/forms/select.custom.js
  23. +105 −111 js/widgets/forms/select.js
  24. +6 −2 js/widgets/page.js
  25. +59 −0 tests/css/controlgroup/controlgroup_core.js
  26. +81 −0 tests/css/controlgroup/index.html
  27. +2 −2 tests/integration/dialog-extension/dialog_events.js
  28. +7 −4 tests/integration/forms/forms_core.js
  29. +2 −2 tests/integration/forms/index.html
  30. +3 −2 tests/integration/select/button-focus-tests.html
  31. +57 −57 tests/integration/select/cached-dom-cache-true.html
  32. +2 −1 tests/integration/select/cached-tests.html
  33. +3 −3 tests/integration/select/cached.html
  34. +58 −41 tests/integration/select/index.html
  35. +6 −8 tests/integration/select/select_cached.js
  36. +28 −16 tests/integration/select/select_core.js
  37. +2 −3 tests/integration/select/select_events.js
  38. +3 −3 tests/integration/select/uncached-dom-cached-false.html
  39. +2 −1 tests/integration/select/weird-characters-in-id-tests.html
  40. +60 −0 tests/unit/select/controlgroup-interaction-tests.html
  41. +61 −0 tests/unit/select/controlgroup_interaction_core.js
  42. +8 −8 tests/unit/select/index.html
  43. +93 −0 tests/unit/select/new-backcompat-tests.html
  44. +49 −0 tests/unit/select/new-tests.html
  45. +90 −0 tests/unit/select/new_backcompat_core.js
  46. +50 −0 tests/unit/select/new_core.js
  47. +29 −7 tests/unit/select/select_core.js
@@ -2,7 +2,8 @@
margin: .5em 0;
}
.ui-controlgroup .ui-button {
.ui-controlgroup .ui-button,
.ui-controlgroup .ui-selectmenu {
margin: 0;
}
@@ -55,22 +56,32 @@
}
.ui-controlgroup-horizontal > .ui-button,
.ui-controlgroup-horizontal > .ui-selectmenu .ui-button,
.ui-controlgroup-horizontal > li > .ui-button {
border-left-width: 0;
}
.ui-controlgroup-horizontal > .ui-corner-left,
.ui-controlgroup-horizontal > li > .ui-corner-left {
.ui-controlgroup-horizontal > .ui-corner-all,
.ui-controlgroup-horizontal > .ui-selectmenu .ui-corner-left,
.ui-controlgroup-horizontal > .ui-selectmenu .ui-corner-all,
.ui-controlgroup-horizontal > li > .ui-corner-left,
.ui-controlgroup-horizontal > li > .ui-corner-all {
border-left-width: 1px;
}
.ui-controlgroup-vertical > .ui-button,
.ui-controlgroup-vertical > .ui-selectmenu .ui-button,
.ui-controlgroup-vertical > li > .ui-button {
border-top-width: 0;
}
.ui-controlgroup-vertical > .ui-corner-top,
.ui-controlgroup-vertical > li > .ui-corner-top {
.ui-controlgroup-vertical > .ui-corner-all,
.ui-controlgroup-vertical > .ui-selectmenu .ui-corner-top,
.ui-controlgroup-vertical > .ui-selectmenu .ui-corner-all,
.ui-controlgroup-vertical > li > .ui-corner-top,
.ui-controlgroup-vertical > li > .ui-corner-all {
border-top-width: 1px;
}
@@ -1,20 +1,19 @@
.ui-select {
.ui-selectmenu {
margin-top: .5em;
margin-bottom: .5em; /* no shorthand for margin because it would override margin-right for inline selects */
position: relative;
}
.ui-select > select {
.ui-selectmenu > select {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px,1px,1px,1px);
}
.ui-select .ui-button {
.ui-selectmenu .ui-button {
margin: 0;
opacity: 1; /* Fixes #2588: When Windows Phone 7.5 (Mango) tries to calculate a numeric opacity for a select (including "inherit") without explicitly specifying an opacity on the parent to give it context, a bug appears where clicking elsewhere on the page after opening the select will open the select again. */
}
.ui-select .ui-button select {
.ui-selectmenu .ui-button select {
position: absolute;
top: 0;
left: 0;
@@ -35,114 +34,114 @@
}
/* Display none because of issues with IE/WP's filter alpha opacity */
.ui-select .ui-state-disabled select {
.ui-selectmenu .ui-state-disabled select {
display: none;
}
/* Because we add all classes of the select and option elements to the span... */
.ui-select span.ui-state-disabled {
.ui-selectmenu span.ui-state-disabled {
filter: Alpha(Opacity=100);
opacity: 1;
}
.ui-select .ui-button.ui-select-nativeonly {
.ui-selectmenu .ui-button.ui-selectmenu-nativeonly {
border-radius: 0;
border: 0;
}
.ui-select .ui-button.ui-select-nativeonly select {
.ui-selectmenu .ui-button.ui-selectmenu-nativeonly select {
opacity: 1;
text-indent: 0;
display: block;
}
/* ui-listview-item-count is styled in the listview CSS. We set padding and offset here because
select supports icon position while listview doesn't. */
.ui-select .ui-listview-item-has-count.ui-button {
.ui-selectmenu .ui-listview-item-has-count.ui-button {
padding-right: 2.8125em;
}
.ui-select .ui-listview-item-has-count.ui-icon-end {
.ui-selectmenu .ui-listview-item-has-count.ui-icon-end {
padding-right: 4.6875em;
}
.ui-select .ui-icon-end .ui-listview-item-count-bubble {
.ui-selectmenu .ui-icon-end .ui-listview-item-count-bubble {
right: 3.2em;
}
/* Count indicator position must be different for mini version. */
.ui-select.ui-mini .ui-btn-icon-right .ui-listview-item-count-bubble {
.ui-selectmenu.ui-mini .ui-btn-icon-right .ui-listview-item-count-bubble {
right: 2.5em;
}
/* We set the rules for the span as well to fix an issue on Chrome with text-overflow ellipsis for the button in combination with text-align center. */
.ui-select .ui-button > span:not(.ui-listview-item-count-bubble) {
display: block;
.ui-selectmenu .ui-button > span:not(.ui-listview-item-count-bubble) {
text-overflow: ellipsis;
overflow: hidden !important;
white-space: nowrap;
}
.ui-selectmenu.ui-popup {
.ui-selectmenu-custom.ui-popup {
min-width: 11em;
}
.ui-selectmenu .ui-page-dialog-contain {
.ui-selectmenu-custom .ui-page-dialog-contain {
overflow: hidden;
}
.ui-selectmenu .ui-header {
.ui-selectmenu-custom .ui-toolbar-header {
margin: 0;
padding: 0;
border-width: 0;
}
.ui-selectmenu.ui-page-dialog .ui-header {
.ui-selectmenu-custom.ui-page-dialog .ui-toolbar-header {
z-index: 1;
position: relative;
}
.ui-selectmenu.ui-popup .ui-header {
.ui-selectmenu-custom.ui-popup .ui-toolbar-header {
-webkit-border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
border-bottom-left-radius: 0;
}
/* when no placeholder is defined in a multiple select, the header height doesn't even extend past the close button. this shim's content in there */
.ui-selectmenu.ui-popup .ui-header h1:after {
.ui-selectmenu-custom.ui-popup .ui-toolbar-header h1:after {
content: ".";
visibility: hidden;
}
.ui-selectmenu .ui-header .ui-title {
.ui-selectmenu-custom .ui-toolbar-header .ui-toolbar-title {
margin: 0 2.875em;
}
.ui-selectmenu.ui-page-dialog .ui-content {
.ui-selectmenu-custom.ui-page-dialog .ui-content {
overflow: visible;
z-index: 1;
}
.ui-selectmenu .ui-selectmenu-list {
.ui-selectmenu-custom .ui-selectmenu-custom-list {
margin: 0;
-webkit-border-radius: inherit;
border-radius: inherit;
}
.ui-header:not(.ui-screen-hidden) + .ui-selectmenu-list {
.ui-toolbar-header:not(.ui-screen-hidden) + .ui-selectmenu-custom-list {
-webkit-border-top-right-radius: 0;
border-top-right-radius: 0;
-webkit-border-top-left-radius: 0;
border-top-left-radius: 0;
}
.ui-header.ui-screen-hidden + .ui-selectmenu-list li.ui-first-child .ui-button {
.ui-toolbar-header.ui-screen-hidden + .ui-selectmenu-custom-list li.ui-first-child .ui-button {
border-top-width: 0;
}
.ui-selectmenu .ui-selectmenu-list li.ui-last-child .ui-button {
.ui-selectmenu-custom .ui-selectmenu-custom-list li.ui-last-child .ui-button {
border-bottom-width: 0;
}
.ui-selectmenu .ui-button.ui-listview-item-divider {
.ui-selectmenu-custom .ui-button.ui-listview-item-divider {
cursor: default;
}
.ui-selectmenu .ui-selectmenu-placeholder {
.ui-selectmenu-custom .ui-selectmenu-custom-placeholder {
display: none;
}
/* This is necessary because multi inline select menu hides if width exceeds device width. */
.ui-select.ui-btn-inline {
.ui-selectmenu.ui-button-inline {
float: left;
max-width: 100% ;
}
@@ -58,7 +58,7 @@ li.ui-block-e {
margin-left: 0;
}
[class*="ui-block-"] > .ui-button,
[class*="ui-block-"] > .ui-select,
[class*="ui-block-"] > .ui-selectmenu,
[class*="ui-block-"] > .ui-checkbox,
[class*="ui-block-"] > .ui-radio,
[class*="ui-block-"] > button.ui-button-inline,
@@ -599,7 +599,7 @@ html head + body .ui-body-b.ui-focus {
.ui-disabled,
.ui-state-disabled,
button[disabled],
.ui-select .ui-button.ui-state-disabled {
.ui-selectmenu .ui-button.ui-state-disabled {
filter: Alpha(Opacity=30);
opacity: .3;
cursor: default !important;
@@ -24,7 +24,7 @@
action = function() {
var action = $( "[name='radio-action']:checked" ).attr( "id" );
if ( $( $el[1] ).is( "select" ) && action === "hide" ) {
$el = $( $el[1] ).parents( ".ui-select" );
$el = $( $el[1] ).parents( ".ui-selectmenu" );
}
$el[ action ]();
group.controlgroup( "refresh" );
@@ -34,11 +34,14 @@
$el = $( "<a href='#'>Link " + counter + "</a>" ).bind( "click", action );
$( "#my-controlgroup" ).controlgroup( "container" )[ $( this ).attr( "id" ) ]( $el );
$el.buttonMarkup();
} else if ( widgetType === "select" ) {
$el = $( "<label for='widget" + counter + "'>Select " + counter + "</label><select id='widget" + counter + "'><option value='option1'>Select " + counter + "</option><option value='option2'>Select option</option></select>" );
$el = $( "<label for='widget" + counter + "' class='ui-hidden-accessible'>Select " + counter + "</label>" +
"<select id='widget" + counter + "'>" +
"<option value='option1'>Select " + counter + "</option>" +
"<option value='option2'>Select option</option>" +
"</select>" );
$( $el[ 1 ] ).bind( "change", action);
$( "#my-controlgroup" ).controlgroup( "container" )[ $( this ).attr( "id" ) ]( $el );
$( $el[ 1 ] ).selectmenu();
@@ -96,7 +99,7 @@
<form action="#" method="get">
<div class="ui-field-contain">
<fieldset data-role="controlgroup" data-mini="true">
<fieldset data-role="controlgroup" data-mini="true" data-type="horizontal">
<legend>Widget type</legend>
<input type="radio" name="radio-widget" id="link" value="link" checked="checked">
@@ -111,7 +114,7 @@
</div>
<div class="ui-field-contain">
<fieldset data-role="controlgroup" data-mini="true">
<fieldset data-role="controlgroup" data-mini="true" data-type="horizontal">
<legend>Action<br><small>on click/change</small></legend>
<input type="radio" name="radio-action" id="remove" value="remove" checked="checked">
@@ -126,7 +129,7 @@
</div>
<div class="ui-field-contain">
<fieldset data-role="controlgroup" data-mini="true">
<fieldset data-role="controlgroup" data-mini="true" data-type="horizontal">
<legend>Switch orientation</legend>
<input type="radio" name="radio-orientation" id="isVertical" value="isVertical" checked="checked">
Oops, something went wrong.

0 comments on commit 649b09f

Please sign in to comment.