Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Merge branch 'css-corner-styling'

  • Loading branch information...
commit 277556bd12b90e0b5def861dfcff2474f3525305 2 parents 1d077a0 + 9044789
@gabrielschulhof gabrielschulhof authored
View
7 css/structure/jquery.mobile.button.css
@@ -49,6 +49,13 @@
.ui-mini.ui-btn-icon-bottom .ui-btn-inner,
.ui-mini .ui-btn-icon-bottom .ui-btn-inner { padding-bottom: 30px; }
+/* Corner styling inheritance */
+.ui-btn-inner,
+.ui-btn-text {
+ -webkit-border-radius: inherit;
+ border-radius: inherit;
+}
+
/*btn icon positioning*/
.ui-btn-icon-notext .ui-icon { display: block; z-index: 0;}
.ui-btn-icon-left > .ui-btn-inner > .ui-icon, .ui-btn-icon-right > .ui-btn-inner > .ui-icon { position: absolute; top: 50%; margin-top: -9px; }
View
32 css/structure/jquery.mobile.collapsible.css
@@ -27,6 +27,36 @@
.ui-collapsible-inset .ui-collapsible-content { margin: 0; border-right-width: 1px; border-left-width: 1px; }
.ui-collapsible-content-collapsed { display: none; }
+.ui-collapsible-set > .ui-collapsible.ui-corner-all {
+ -webkit-border-radius: 0;
+ border-radius: 0;
+}
+.ui-collapsible-heading,
+.ui-collapsible-heading > .ui-btn {
+ -webkit-border-radius: inherit;
+ border-radius: inherit;
+}
+.ui-collapsible-set .ui-collapsible.ui-first-child {
+ -webkit-border-top-right-radius: inherit;
+ border-top-right-radius: inherit;
+ -webkit-border-top-left-radius: inherit;
+ border-top-left-radius: inherit;
+}
+.ui-collapsible-content,
+.ui-collapsible-set .ui-collapsible.ui-last-child {
+ -webkit-border-bottom-right-radius: inherit;
+ border-bottom-right-radius: inherit;
+ -webkit-border-bottom-left-radius: inherit;
+ border-bottom-left-radius: inherit;
+}
+
+.ui-collapsible-themed-content:not(.ui-collapsible-collapsed) > .ui-collapsible-heading {
+ -webkit-border-bottom-right-radius: 0;
+ border-bottom-right-radius: 0;
+ -webkit-border-bottom-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
+
.ui-collapsible-set { margin: .5em 0; }
.ui-collapsible-set .ui-collapsible { margin: -1px 0 0; }
-.ui-collapsible-set .ui-collapsible:first-child { margin-top: 0; }
+.ui-collapsible-set .ui-collapsible.ui-first-child { margin-top: 0; }
View
71 css/structure/jquery.mobile.controlgroup.css
@@ -4,12 +4,10 @@
.ui-bar .ui-controlgroup { margin: 0 5px; }
.ui-controlgroup-label { font-size: 16px; line-height: 1.4; font-weight: normal; margin: 0 0 .4em; }
-.ui-controlgroup li { list-style: none; }
-.ui-controlgroup-vertical .ui-btn,
-.ui-controlgroup-vertical .ui-checkbox, .ui-controlgroup-vertical .ui-radio { margin: 0; border-bottom-width: 0; }
-.ui-controlgroup-vertical .ui-controlgroup-last { border-bottom-width: 1px; }
.ui-controlgroup-controls label.ui-select { position: absolute; left: -9999px; }
+.ui-controlgroup li { list-style: none; }
+.ui-controlgroup .ui-btn { margin: 0; }
.ui-controlgroup .ui-btn-icon-notext { width: auto; height: auto; top: auto; }
.ui-controlgroup .ui-btn-icon-notext .ui-btn-inner { height: 20px; padding: .6em 20px .6em 20px }
.ui-controlgroup-horizontal .ui-btn-icon-notext .ui-btn-inner { width: 18px; }
@@ -17,20 +15,65 @@
.ui-header .ui-controlgroup .ui-btn-icon-notext .ui-btn-inner,
.ui-footer .ui-controlgroup .ui-btn-icon-notext .ui-btn-inner { height: 16px; padding: .55em 11px .5em 11px; }
.ui-controlgroup .ui-btn-icon-notext .ui-btn-inner .ui-icon { position: absolute; top: 50%; right: 50%; margin: -9px -9px 0 0; }
+.ui-controlgroup-horizontal .ui-btn-inner { text-align: center; }
+.ui-controlgroup-horizontal.ui-mini .ui-btn-inner { height: 16px; line-height: 16px; }
+.ui-controlgroup .ui-checkbox label, .ui-controlgroup .ui-radio label { font-size: 16px; }
.ui-controlgroup-horizontal .ui-controlgroup-controls:before,
.ui-controlgroup-horizontal .ui-controlgroup-controls:after { content: ""; display: table; }
.ui-controlgroup-horizontal .ui-controlgroup-controls:after { clear: both; }
.ui-controlgroup-horizontal .ui-controlgroup-controls { display: inline-block; vertical-align: middle; zoom: 1; }
-.ui-controlgroup-horizontal .ui-btn-inner { text-align: center; }
-.ui-controlgroup-horizontal.ui-mini .ui-btn-inner { height: 16px; line-height: 16px; }
-.ui-controlgroup-horizontal .ui-btn, .ui-controlgroup-horizontal .ui-select,
-.ui-controlgroup-horizontal .ui-checkbox, .ui-controlgroup-horizontal .ui-radio { float: left; clear: none; margin: 0 -1px 0 0; }
-.ui-controlgroup-horizontal .ui-select .ui-btn,
-.ui-controlgroup-horizontal .ui-checkbox .ui-btn, .ui-controlgroup-horizontal .ui-radio .ui-btn { float: none; margin: 0; }
-.ui-controlgroup-horizontal .ui-controlgroup-last, .ui-controlgroup-horizontal .ui-select:last-child,
-.ui-controlgroup-horizontal .ui-checkbox:last-child, .ui-controlgroup-horizontal .ui-radio:last-child { margin-right: 0; }
-.ui-controlgroup .ui-checkbox label, .ui-controlgroup .ui-radio label { font-size: 16px; }
+.ui-controlgroup-horizontal .ui-controlgroup-controls > .ui-btn, .ui-controlgroup-horizontal .ui-controlgroup-controls li > .ui-btn,
+.ui-controlgroup-horizontal .ui-checkbox, .ui-controlgroup-horizontal .ui-radio,
+.ui-controlgroup-horizontal .ui-select { float: left; clear: none; margin: 0; }
+
+.ui-controlgroup-vertical .ui-btn { border-bottom-width: 0; }
+.ui-controlgroup-vertical .ui-btn.ui-last-child { border-bottom-width: 1px; }
+.ui-controlgroup-horizontal .ui-btn { border-right-width: 0; }
+.ui-controlgroup-horizontal .ui-btn.ui-last-child { border-right-width: 1px; }
+
+.ui-controlgroup .ui-btn-corner-all {
+ -webkit-border-radius: 0;
+ border-radius: 0;
+}
+.ui-controlgroup .ui-controlgroup-controls,
+.ui-controlgroup .ui-radio,
+.ui-controlgroup .ui-checkbox,
+.ui-controlgroup .ui-select,
+.ui-controlgroup li {
+ -webkit-border-radius: inherit;
+ border-radius: inherit;
+}
+.ui-controlgroup-vertical .ui-btn.ui-first-child {
+ -webkit-border-top-left-radius: inherit;
+ border-top-left-radius: inherit;
+ -webkit-border-top-right-radius: inherit;
+ border-top-right-radius: inherit;
+}
+.ui-controlgroup-vertical .ui-btn.ui-last-child {
+ -webkit-border-bottom-left-radius: inherit;
+ border-bottom-left-radius: inherit;
+ -webkit-border-bottom-right-radius: inherit;
+ border-bottom-right-radius: inherit;
+}
+.ui-controlgroup-horizontal .ui-btn.ui-first-child {
+ -webkit-border-top-left-radius: inherit;
+ border-top-left-radius: inherit;
+ -webkit-border-bottom-left-radius: inherit;
+ border-bottom-left-radius: inherit;
+}
+.ui-controlgroup-horizontal .ui-btn.ui-last-child {
+ -webkit-border-top-right-radius: inherit;
+ border-top-right-radius: inherit;
+ -webkit-border-bottom-right-radius: inherit;
+ border-bottom-right-radius: inherit;
+}
+
+.ui-controlgroup .ui-shadow:not(.ui-focus) {
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
@media all and (min-width: 450px){
.ui-field-contain .ui-controlgroup-label { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0; }
@@ -38,4 +81,4 @@
.ui-field-contain .ui-controlgroup .ui-select { width: 100%; display: block; }
.ui-field-contain .ui-controlgroup-horizontal .ui-select { width: auto; }
.ui-hide-label .ui-controlgroup-controls { width: 100%; }
-}
+}
View
20 css/structure/jquery.mobile.core.css
@@ -65,9 +65,27 @@ div.ui-mobile-viewport { overflow-x: hidden; }
.ui-header .ui-title, .ui-footer .ui-title { min-height: 1.1em; text-align: center; font-size: 16px; display: block; margin: .6em 30% .8em; padding: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; outline: 0 !important; }
.ui-footer .ui-title { margin: .6em 15px .8em; }
-/*content area*/
+/* content area*/
.ui-content { border-width: 0; overflow: visible; overflow-x: hidden; padding: 15px; }
+/* corner styling for dialogs and popups */
+.ui-corner-all > .ui-header:first-child,
+.ui-corner-all > .ui-content:first-child,
+.ui-corner-all > .ui-footer:first-child {
+ -webkit-border-top-left-radius: inherit;
+ border-top-left-radius: inherit;
+ -webkit-border-top-right-radius: inherit;
+ border-top-right-radius: inherit;
+}
+.ui-corner-all > .ui-header:last-child,
+.ui-corner-all > .ui-content:last-child,
+.ui-corner-all > .ui-footer:last-child {
+ -webkit-border-bottom-left-radius: inherit;
+ border-bottom-left-radius: inherit;
+ -webkit-border-bottom-right-radius: inherit;
+ border-bottom-right-radius: inherit;
+}
+
/* icons sizing */
.ui-icon { width: 18px; height: 18px; }
View
13 css/structure/jquery.mobile.forms.checkboxradio.css
@@ -3,15 +3,13 @@
.ui-checkbox .ui-btn.ui-mini, .ui-radio .ui-btn.ui-mini { margin: .25em 0; }
.ui-controlgroup .ui-checkbox .ui-btn, .ui-controlgroup .ui-radio .ui-btn { margin: 0; }
.ui-checkbox .ui-btn-inner, .ui-radio .ui-btn-inner { white-space: normal; }
+
.ui-checkbox .ui-btn-icon-left .ui-btn-inner,.ui-radio .ui-btn-icon-left .ui-btn-inner { padding-left: 45px; }
.ui-checkbox .ui-mini.ui-btn-icon-left .ui-btn-inner,.ui-radio .ui-mini.ui-btn-icon-left .ui-btn-inner { padding-left: 36px; }
-
.ui-checkbox .ui-btn-icon-right .ui-btn-inner, .ui-radio .ui-btn-icon-right .ui-btn-inner { padding-right: 45px; }
.ui-checkbox .ui-mini.ui-btn-icon-right .ui-btn-inner, .ui-radio .ui-mini.ui-btn-icon-right .ui-btn-inner { padding-right: 36px; }
-
-.ui-checkbox .ui-btn-icon-top .ui-btn-inner,.ui-radio .ui-btn-icon-top .ui-btn-inner { padding-right: 0; padding-left: 0; text-align: center; }
+.ui-checkbox .ui-btn-icon-top .ui-btn-inner, .ui-radio .ui-btn-icon-top .ui-btn-inner { padding-right: 0; padding-left: 0; text-align: center; }
.ui-checkbox .ui-btn-icon-bottom .ui-btn-inner, .ui-radio .ui-btn-icon-bottom .ui-btn-inner { padding-right: 0; padding-left: 0; text-align: center; }
-
.ui-checkbox .ui-icon, .ui-radio .ui-icon { top: 1.1em; }
.ui-checkbox .ui-btn-icon-left .ui-icon, .ui-radio .ui-btn-icon-left .ui-icon { left: 15px; }
.ui-checkbox .ui-mini.ui-btn-icon-left .ui-icon, .ui-radio .ui-mini.ui-btn-icon-left .ui-icon { left: 9px; }
@@ -22,5 +20,12 @@
.ui-checkbox .ui-btn-icon-right .ui-icon, .ui-radio .ui-btn-icon-right .ui-icon { right: 15px; }
.ui-checkbox .ui-mini.ui-btn-icon-right .ui-icon, .ui-radio .ui-mini.ui-btn-icon-right .ui-icon { right: 9px; }
+.ui-controlgroup-horizontal .ui-checkbox .ui-icon,
+.ui-controlgroup-horizontal .ui-radio .ui-icon { display: none; }
+.ui-controlgroup-horizontal .ui-checkbox .ui-btn-inner,
+.ui-controlgroup-horizontal .ui-radio .ui-btn-inner { padding: .6em 20px; }
+.ui-controlgroup-horizontal .ui-checkbox .ui-mini .ui-btn-inner,
+.ui-controlgroup-horizontal .ui-radio .ui-mini .ui-btn-inner { padding: .55em 11px .5em; }
+
/* input, label positioning */
.ui-checkbox input,.ui-radio input { position:absolute; left:20px; top:50%; width: 10px; height: 10px; margin:-5px 0 0 0; outline: 0 !important; z-index: 1; }
View
48 css/structure/jquery.mobile.listview.css
@@ -4,21 +4,51 @@ ol.ui-listview, ol.ui-listview .ui-li-divider { counter-reset: listnumbering; }
.ui-collapsible-content > .ui-listview { margin: -10px -15px; }
.ui-content .ui-listview-inset { margin: 1em 0; }
.ui-collapsible-content .ui-listview-inset { margin: .5em 0; }
-.ui-listview, .ui-li { list-style:none; padding:0; }
-.ui-li, .ui-li.ui-field-contain { display: block; margin:0; position: relative; overflow: visible; text-align: left; border-width: 0; border-top-width: 1px; }
-.ui-li.ui-btn { margin: 0; }
+.ui-listview, .ui-li { list-style: none; padding: 0; }
+.ui-li, .ui-li.ui-field-contain { display: block; margin: 0; position: relative; overflow: visible; text-align: left; border-width: 0; border-top-width: 1px; }
+.ui-li.ui-btn, .ui-li.ui-field-contain, .ui-li-divider, .ui-li-static { margin: 0; }
+.ui-listview-inset .ui-li { border-right-width: 1px; border-left-width: 1px; }
+.ui-li.ui-last-child, .ui-li.ui-field-contain.ui-last-child { border-bottom-width: 1px; }
+.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) > .ui-li.ui-first-child { border-top-width: 0; }
+.ui-collapsible-themed-content .ui-listview:not(.ui-listview-inset) > .ui-li.ui-last-child { border-bottom-width: 0; }
.ui-li .ui-btn-text a.ui-link-inherit { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.ui-li-static { background-image: none; }
.ui-li-divider { padding: .5em 15px; font-size: 14px; font-weight: bold; }
ol.ui-listview .ui-link-inherit:before, ol.ui-listview .ui-li-static:before, .ui-li-dec { font-size: .8em; display: inline-block; padding-right: .3em; font-weight: normal; counter-increment: listnumbering; content: counter(listnumbering) ". "; }
ol.ui-listview .ui-li-jsnumbering:before { content: "" !important; } /* to avoid chance of duplication */
-.ui-listview-inset .ui-li { border-right-width: 1px; border-left-width: 1px; }
-.ui-li-last, .ui-li.ui-field-contain.ui-li-last { border-bottom-width: 1px; }
-.ui-collapsible [class*="ui-body"] > .ui-listview:not(.ui-listview-inset) .ui-li-last { border-bottom-width: 0; }
-.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) .ui-li:first-child { border-top-width: 0; }
+
+.ui-listview > .ui-li.ui-first-child,
+.ui-listview .ui-btn.ui-first-child > .ui-li > .ui-btn-text > .ui-link-inherit {
+ -webkit-border-top-right-radius: inherit;
+ border-top-right-radius: inherit;
+ -webkit-border-top-left-radius: inherit;
+ border-top-left-radius: inherit;
+}
+.ui-listview > .ui-li.ui-last-child,
+.ui-listview .ui-btn.ui-last-child > .ui-li > .ui-btn-text > .ui-link-inherit,
.ui-collapsible-content > .ui-listview:not(.ui-listview-inset),
-.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) .ui-li-last { -webkit-border-bottom-left-radius: inherit; -webkit-border-bottom-right-radius: inherit; border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
-.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) .ui-li-last .ui-li-link-alt { -webkit-border-bottom-right-radius: inherit; border-bottom-right-radius: inherit; }
+.ui-collapsible-content > .ui-listview:not(.ui-listview-inset) .ui-li.ui-last-child {
+ -webkit-border-bottom-right-radius: inherit;
+ border-bottom-right-radius: inherit;
+ -webkit-border-bottom-left-radius: inherit;
+ border-bottom-left-radius: inherit;
+}
+.ui-listview > .ui-li.ui-first-child .ui-li-link-alt {
+ -webkit-border-top-right-radius: inherit;
+ border-top-right-radius: inherit;
+}
+.ui-listview > .ui-li.ui-last-child .ui-li-link-alt {
+ -webkit-border-bottom-right-radius: inherit;
+ border-bottom-right-radius: inherit;
+}
+.ui-listview > .ui-li.ui-first-child .ui-li-thumb:not(.ui-li-icon) {
+ -webkit-border-top-left-radius: inherit;
+ border-top-left-radius: inherit;
+}
+.ui-listview > .ui-li.ui-last-child .ui-li-thumb:not(.ui-li-icon) {
+ -webkit-border-bottom-left-radius: inherit;
+ border-bottom-left-radius: inherit;
+}
.ui-li>.ui-btn-inner { display: block; position: relative; padding: 0; }
.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li { padding: .7em 15px; display: block; }
.ui-li-has-thumb .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-thumb { min-height: 60px; padding-left: 100px; }
View
40 css/structure/jquery.mobile.popup.css
@@ -131,44 +131,4 @@
.ui-popup > .ui-btn-left { left: -9px; }
.ui-popup > .ui-btn-right { right: -9px; }
-.ui-popup.ui-corner-all > .ui-header,
-.ui-popup.ui-corner-all ~ .ui-content,
-.ui-popup.ui-corner-all > .ui-content:first-child {
- -webkit-border-top-left-radius: inherit;
- border-top-left-radius: inherit;
- -webkit-border-top-right-radius: inherit;
- border-top-right-radius: inherit;
-}
-
-.ui-popup.ui-corner-all > .ui-content,
-.ui-popup.ui-corner-all > .ui-footer,
-.ui-popup.ui-corner-all > .ui-header:nth-child(n):last-child {
- -webkit-border-bottom-left-radius: inherit;
- border-bottom-left-radius: inherit;
- -webkit-border-bottom-right-radius: inherit;
- border-bottom-right-radius: inherit;
-}
-
-.ui-popup.ui-corner-all > .ui-content:nth-child(2),
-.ui-popup.ui-corner-all > .ui-header:nth-child(2) {
- -webkit-border-top-left-radius: 0;
- border-top-left-radius: 0;
- -webkit-border-top-right-radius: 0;
- border-top-right-radius: 0;
-}
-
-.ui-popup.ui-corner-all > .ui-content:nth-last-child(1n+2),
-.ui-popup.ui-corner-all > .ui-footer:nth-last-child(1n+2) {
- -webkit-border-bottom-left-radius: 0;
- border-bottom-left-radius: 0;
- -webkit-border-bottom-right-radius: 0;
- border-bottom-right-radius: 0;
-}
-
-.ui-popup.ui-corner-all > .ui-header:only-child,
-.ui-popup.ui-corner-all > .ui-footer:only-child {
- -webkit-border-radius: inherit;
- border-radius: inherit;
-}
-
.ui-popup-hidden { top: -99999px; left: -9999px; }
View
128 css/themes/default/jquery.mobile.theme.css
@@ -798,68 +798,10 @@ a.ui-link-inherit {
/* corner rounding classes
-----------------------------------------------------------------------------------------------------------*/
-.ui-corner-tl {
- -moz-border-radius-topleft: .6em /*{global-radii-blocks}*/;
- -webkit-border-top-left-radius: .6em /*{global-radii-blocks}*/;
- border-top-left-radius: .6em /*{global-radii-blocks}*/;
-}
-.ui-corner-tr {
- -moz-border-radius-topright: .6em /*{global-radii-blocks}*/;
- -webkit-border-top-right-radius: .6em /*{global-radii-blocks}*/;
- border-top-right-radius: .6em /*{global-radii-blocks}*/;
-}
-.ui-corner-bl {
- -moz-border-radius-bottomleft: .6em /*{global-radii-blocks}*/;
- -webkit-border-bottom-left-radius: .6em /*{global-radii-blocks}*/;
- border-bottom-left-radius: .6em /*{global-radii-blocks}*/;
-}
-.ui-corner-br {
- -moz-border-radius-bottomright: .6em /*{global-radii-blocks}*/;
- -webkit-border-bottom-right-radius: .6em /*{global-radii-blocks}*/;
- border-bottom-right-radius: .6em /*{global-radii-blocks}*/;
-}
-.ui-corner-top {
- -moz-border-radius-topleft: .6em /*{global-radii-blocks}*/;
- -webkit-border-top-left-radius: .6em /*{global-radii-blocks}*/;
- border-top-left-radius: .6em /*{global-radii-blocks}*/;
- -moz-border-radius-topright: .6em /*{global-radii-blocks}*/;
- -webkit-border-top-right-radius: .6em /*{global-radii-blocks}*/;
- border-top-right-radius: .6em /*{global-radii-blocks}*/;
-}
-.ui-corner-bottom {
- -moz-border-radius-bottomleft: .6em /*{global-radii-blocks}*/;
- -webkit-border-bottom-left-radius: .6em /*{global-radii-blocks}*/;
- border-bottom-left-radius: .6em /*{global-radii-blocks}*/;
- -moz-border-radius-bottomright: .6em /*{global-radii-blocks}*/;
- -webkit-border-bottom-right-radius: .6em /*{global-radii-blocks}*/;
- border-bottom-right-radius: .6em /*{global-radii-blocks}*/;
- }
-.ui-corner-right {
- -moz-border-radius-topright: .6em /*{global-radii-blocks}*/;
- -webkit-border-top-right-radius: .6em /*{global-radii-blocks}*/;
- border-top-right-radius: .6em /*{global-radii-blocks}*/;
- -moz-border-radius-bottomright: .6em /*{global-radii-blocks}*/;
- -webkit-border-bottom-right-radius: .6em /*{global-radii-blocks}*/;
- border-bottom-right-radius: .6em /*{global-radii-blocks}*/;
-}
-.ui-corner-left {
- -moz-border-radius-topleft: .6em /*{global-radii-blocks}*/;
- -webkit-border-top-left-radius: .6em /*{global-radii-blocks}*/;
- border-top-left-radius: .6em /*{global-radii-blocks}*/;
- -moz-border-radius-bottomleft: .6em /*{global-radii-blocks}*/;
- -webkit-border-bottom-left-radius: .6em /*{global-radii-blocks}*/;
- border-bottom-left-radius: .6em /*{global-radii-blocks}*/;
-}
.ui-corner-all {
- -moz-border-radius: .6em /*{global-radii-blocks}*/;
-webkit-border-radius: .6em /*{global-radii-blocks}*/;
border-radius: .6em /*{global-radii-blocks}*/;
}
-.ui-corner-none {
- -moz-border-radius: 0;
- -webkit-border-radius: 0;
- border-radius: 0;
-}
/* Form field separator
-----------------------------------------------------------------------------------------------------------*/
@@ -1032,83 +974,13 @@ a.ui-link-inherit {
/* Button corner classes
-----------------------------------------------------------------------------------------------------------*/
-
-.ui-btn-corner-tl {
- -moz-border-radius-topleft: 1em /*{global-radii-buttons}*/;
- -webkit-border-top-left-radius: 1em /*{global-radii-buttons}*/;
- border-top-left-radius: 1em /*{global-radii-buttons}*/;
-}
-.ui-btn-corner-tr {
- -moz-border-radius-topright: 1em /*{global-radii-buttons}*/;
- -webkit-border-top-right-radius: 1em /*{global-radii-buttons}*/;
- border-top-right-radius: 1em /*{global-radii-buttons}*/;
-}
-.ui-btn-corner-bl {
- -moz-border-radius-bottomleft: 1em /*{global-radii-buttons}*/;
- -webkit-border-bottom-left-radius: 1em /*{global-radii-buttons}*/;
- border-bottom-left-radius: 1em /*{global-radii-buttons}*/;
-}
-.ui-btn-corner-br {
- -moz-border-radius-bottomright: 1em /*{global-radii-buttons}*/;
- -webkit-border-bottom-right-radius: 1em /*{global-radii-buttons}*/;
- border-bottom-right-radius: 1em /*{global-radii-buttons}*/;
-}
-.ui-btn-corner-top {
- -moz-border-radius-topleft: 1em /*{global-radii-buttons}*/;
- -webkit-border-top-left-radius: 1em /*{global-radii-buttons}*/;
- border-top-left-radius: 1em /*{global-radii-buttons}*/;
- -moz-border-radius-topright: 1em /*{global-radii-buttons}*/;
- -webkit-border-top-right-radius: 1em /*{global-radii-buttons}*/;
- border-top-right-radius: 1em /*{global-radii-buttons}*/;
-}
-.ui-btn-corner-bottom {
- -moz-border-radius-bottomleft: 1em /*{global-radii-buttons}*/;
- -webkit-border-bottom-left-radius: 1em /*{global-radii-buttons}*/;
- border-bottom-left-radius: 1em /*{global-radii-buttons}*/;
- -moz-border-radius-bottomright: 1em /*{global-radii-buttons}*/;
- -webkit-border-bottom-right-radius: 1em /*{global-radii-buttons}*/;
- border-bottom-right-radius: 1em /*{global-radii-buttons}*/;
-}
-.ui-btn-corner-right {
- -moz-border-radius-topright: 1em /*{global-radii-buttons}*/;
- -webkit-border-top-right-radius: 1em /*{global-radii-buttons}*/;
- border-top-right-radius: 1em /*{global-radii-buttons}*/;
- -moz-border-radius-bottomright: 1em /*{global-radii-buttons}*/;
- -webkit-border-bottom-right-radius: 1em /*{global-radii-buttons}*/;
- border-bottom-right-radius: 1em /*{global-radii-buttons}*/;
-}
-.ui-btn-corner-left {
- -moz-border-radius-topleft: 1em /*{global-radii-buttons}*/;
- -webkit-border-top-left-radius: 1em /*{global-radii-buttons}*/;
- border-top-left-radius: 1em /*{global-radii-buttons}*/;
- -moz-border-radius-bottomleft: 1em /*{global-radii-buttons}*/;
- -webkit-border-bottom-left-radius: 1em /*{global-radii-buttons}*/;
- border-bottom-left-radius: 1em /*{global-radii-buttons}*/;
-}
.ui-btn-corner-all {
- -moz-border-radius: 1em /*{global-radii-buttons}*/;
-webkit-border-radius: 1em /*{global-radii-buttons}*/;
border-radius: 1em /*{global-radii-buttons}*/;
}
/* radius clip workaround for cleaning up corner trapping */
-.ui-corner-tl,
-.ui-corner-tr,
-.ui-corner-bl,
-.ui-corner-br,
-.ui-corner-top,
-.ui-corner-bottom,
-.ui-corner-right,
-.ui-corner-left,
.ui-corner-all,
-.ui-btn-corner-tl,
-.ui-btn-corner-tr,
-.ui-btn-corner-bl,
-.ui-btn-corner-br,
-.ui-btn-corner-top,
-.ui-btn-corner-bottom,
-.ui-btn-corner-right,
-.ui-btn-corner-left,
.ui-btn-corner-all {
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
View
1  js/index.php
@@ -34,6 +34,7 @@
'widgets/dialog.js',
'widgets/page.sections.js',
'widgets/collapsible.js',
+ 'widgets/addFirstLastClasses.js',
'widgets/collapsibleSet.js',
'jquery.mobile.fieldContain.js',
'jquery.mobile.grid.js',
View
39 js/jquery.mobile.buttonMarkup.js
@@ -9,32 +9,6 @@ define( [ "jquery", "./jquery.mobile.core", "./jquery.mobile.vmouse" ], function
//>>excludeEnd("jqmBuildExclude");
(function( $, undefined ) {
-var cornerClasses = {
- "tl": " ui-btn-corner-tl",
- "tr": " ui-btn-corner-tr",
- "bl": " ui-btn-corner-bl",
- "br": " ui-btn-corner-br",
- "top": " ui-btn-corner-top",
- "bottom": " ui-btn-corner-bottom",
- "left": " ui-btn-corner-left",
- "right": " ui-btn-corner-right"
-};
-cornerClasses[true] = " ui-btn-corner-all";
-cornerClasses[false] = "";
-
-var groupCornerClasses = {
- "tl": " ui-corner-tl",
- "tr": " ui-corner-tr",
- "bl": " ui-corner-bl",
- "br": " ui-corner-br",
- "top": " ui-corner-top",
- "bottom": " ui-corner-bottom",
- "left": " ui-corner-left",
- "right": " ui-corner-right"
-};
-groupCornerClasses[true] = " ui-corner-all";
-groupCornerClasses[false] = "";
-
$.fn.buttonMarkup = function( options ) {
var $workingSet = this,
mapToDataAttr = function( key, value ) {
@@ -54,17 +28,14 @@ $.fn.buttonMarkup = function( options ) {
inline: options.inline !== undefined ? options.inline : el.jqmData( "inline" ),
shadow: options.shadow !== undefined ? options.shadow : el.jqmData( "shadow" ),
corners: options.corners !== undefined ? options.corners : el.jqmData( "corners" ),
- cornerstyle:options.cornerstyle!== undefined ? options.cornerstyle: el.jqmData( "cornerstyle" ),
iconshadow: options.iconshadow !== undefined ? options.iconshadow : el.jqmData( "iconshadow" ),
mini: options.mini !== undefined ? options.mini : el.jqmData( "mini" )
}, options ),
- // Lookup table from which to grab corner classes
- cornerLookup,
// Classes Defined
innerClass = "ui-btn-inner",
textClass = "ui-btn-text",
- buttonClass, iconClass, cornerClass,
+ buttonClass, iconClass,
hover = false,
state = "up",
// Button inner markup
@@ -109,14 +80,11 @@ $.fn.buttonMarkup = function( options ) {
o.theme = $.mobile.getInheritedTheme( el, "c" );
}
- cornerLookup = ( o.cornerstyle === "group" ? groupCornerClasses: cornerClasses );
- cornerClass = ( cornerLookup[ o.corners ] ? cornerLookup[ o.corners ] : "" );
-
buttonClass = "ui-btn ";
buttonClass += ( hover ? "ui-btn-hover-" + o.theme : "" );
buttonClass += ( state ? " ui-btn-" + state + "-" + o.theme : "" );
buttonClass += o.shadow ? " ui-shadow" : "";
- buttonClass += cornerClass;
+ buttonClass += o.corners ? " ui-btn-corner-all" : "";
if ( o.mini !== undefined ) {
// Used to control styling in headers/footers, where buttons default to `mini` style.
@@ -147,8 +115,6 @@ $.fn.buttonMarkup = function( options ) {
}
}
- innerClass += cornerClass;
-
if ( o.iconpos && o.iconpos === "notext" && !el.attr( "title" ) ) {
el.attr( "title", el.getEncodedText() );
}
@@ -159,7 +125,6 @@ $.fn.buttonMarkup = function( options ) {
el.removeClass( "ui-link" ).addClass( buttonClass );
buttonInner.className = innerClass;
-
buttonText.className = textClass;
if ( !buttonElements ) {
buttonInner.appendChild( buttonText );
View
38 js/widgets/addFirstLastClasses.js
@@ -0,0 +1,38 @@
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Mark first and last visible item with classes ui-first-child resp. ui-last-child.
+//>>label: addFirstLastClasses
+//>>group: Widgets
+
+define( [ "jquery", "../jquery.mobile.core" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, undefined ) {
+
+$.mobile.behaviors.addFirstLastClasses = {
+ _getVisibles: function( $els, create ) {
+ var visibles;
+
+ if ( create ) {
+ visibles = $els.not( ".ui-screen-hidden" );
+ } else {
+ visibles = $els.filter( ":visible" );
+ if ( visibles.length === 0 ) {
+ visibles = $els.not( ".ui-screen-hidden" );
+ }
+ }
+
+ return visibles;
+ },
+
+ _addFirstLastClasses: function( $els, $visibles, create ) {
+ $els.removeClass( "ui-first-child ui-last-child" );
+ $visibles.eq( 0 ).addClass( "ui-first-child" ).end().last().addClass( "ui-last-child" );
+ if ( !create ) {
+ this.element.trigger( "updatelayout" );
+ }
+ }
+};
+
+})( jQuery );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
View
37 js/widgets/collapsible.js
@@ -18,6 +18,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
theme: null,
contentTheme: null,
inset: true,
+ corners: true,
mini: false,
initSelector: ":jqmData(role='collapsible')"
},
@@ -30,7 +31,8 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
collapsedIcon = $el.jqmData( "collapsed-icon" ) || o.collapsedIcon,
expandedIcon = $el.jqmData( "expanded-icon" ) || o.expandedIcon,
collapsibleContent = collapsible.wrapInner( "<div class='ui-collapsible-content'></div>" ).children( ".ui-collapsible-content" ),
- collapsibleSet = $el.closest( ":jqmData(role='collapsible-set')" ).addClass( "ui-collapsible-set" );
+ collapsibleSet = $el.closest( ":jqmData(role='collapsible-set')" ).addClass( "ui-collapsible-set" ),
+ collapsibleClasses = "";
// Replace collapsibleHeading if it's a legend
if ( collapsibleHeading.is( "legend" ) ) {
@@ -67,6 +69,8 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
} else {
o.inset = true;
}
+ // Set corners for individual collapsibles to false when in a collapsible-set
+ o.corners = false;
// Gets the preference for mini in the set
if ( !o.mini ) {
o.mini = collapsibleSet.jqmData( "mini" );
@@ -77,13 +81,21 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
o.theme = $.mobile.getInheritedTheme( $el, "c" );
}
}
-
+
if ( !!o.inset ) {
- collapsible.addClass( "ui-collapsible-inset" );
+ collapsibleClasses += " ui-collapsible-inset";
+ if ( !!o.corners ) {
+ collapsibleClasses += " ui-corner-all" ;
+ }
+ }
+ if ( o.contentTheme ) {
+ collapsibleClasses += " ui-collapsible-themed-content";
+ collapsibleContent.addClass( "ui-body-" + o.contentTheme );
+ }
+ if ( collapsibleClasses !== "" ) {
+ collapsible.addClass( collapsibleClasses );
}
- collapsibleContent.addClass( ( o.contentTheme ) ? ( "ui-body-" + o.contentTheme ) : "");
-
collapsedIcon = $el.jqmData( "collapsed-icon" ) || o.collapsedIcon || "plus";
expandedIcon = $el.jqmData( "expanded-icon" ) || o.expandedIcon || "minus";
@@ -105,19 +117,12 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
theme: o.theme
});
- if ( !!o.inset ) {
- collapsibleHeading
- .find( "a" ).first().add( ".ui-btn-inner", $el )
- .addClass( "ui-corner-top ui-corner-bottom" );
- }
-
//events
collapsible
.bind( "expand collapse", function( event ) {
if ( !event.isDefaultPrevented() ) {
var $this = $( this ),
- isCollapse = ( event.type === "collapse" ),
- contentTheme = o.contentTheme;
+ isCollapse = ( event.type === "collapse" );
event.preventDefault();
@@ -136,12 +141,6 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
$this.toggleClass( "ui-collapsible-collapsed", isCollapse );
collapsibleContent.toggleClass( "ui-collapsible-content-collapsed", isCollapse ).attr( "aria-hidden", isCollapse );
- if ( contentTheme && !!o.inset && ( !collapsibleSet.length || collapsible.jqmData( "collapsible-last" ) ) ) {
- collapsibleHeading
- .find( "a" ).first().add( collapsibleHeading.find( ".ui-btn-inner" ) )
- .toggleClass( "ui-corner-bottom", isCollapse );
- collapsibleContent.toggleClass( "ui-corner-bottom", !isCollapse );
- }
collapsibleContent.trigger( "updatelayout" );
}
})
View
59 js/widgets/collapsibleSet.js
@@ -5,7 +5,7 @@
//>>css.structure: ../css/structure/jquery.mobile.collapsible.css
//>>css.theme: ../css/themes/default/jquery.mobile.theme.css
-define( [ "jquery", "../jquery.mobile.widget", "./collapsible" ], function( $ ) {
+define( [ "jquery", "../jquery.mobile.widget", "./collapsible", "./addFirstLastClasses" ], function( $ ) {
//>>excludeEnd("jqmBuildExclude");
(function( $, undefined ) {
@@ -30,24 +30,16 @@ $.widget( "mobile.collapsibleset", $.mobile.widget, {
o.inset = $el.jqmData( "inset" );
}
o.inset = o.inset !== undefined ? o.inset : true;
+ o.corners = o.corners !== undefined ? o.corners : true;
+
+ if ( !!o.corners && !!o.inset ) {
+ $el.addClass( "ui-corner-all" );
+ }
// Initialize the collapsible set if it's not already initialized
if ( !$el.jqmData( "collapsiblebound" ) ) {
$el
.jqmData( "collapsiblebound", true )
- .bind( "expand collapse", function( event ) {
- var isCollapse = ( event.type === "collapse" ),
- collapsible = $( event.target ).closest( ".ui-collapsible" ),
- widget = collapsible.data( "collapsible" );
- if ( collapsible.jqmData( "collapsible-last" ) && !!o.inset ) {
- collapsible.find( ".ui-collapsible-heading" ).first()
- .find( "a" ).first()
- .toggleClass( "ui-corner-bottom", isCollapse )
- .find( ".ui-btn-inner" )
- .toggleClass( "ui-corner-bottom", isCollapse );
- collapsible.find( ".ui-collapsible-content" ).toggleClass( "ui-corner-bottom", !isCollapse );
- }
- })
.bind( "expand", function( event ) {
var closestCollapsible = $( event.target )
.closest( ".ui-collapsible" );
@@ -64,49 +56,28 @@ $.widget( "mobile.collapsibleset", $.mobile.widget, {
var $el = this.element,
collapsiblesInSet = $el.children( ":jqmData(role='collapsible')" ),
expanded = collapsiblesInSet.filter( ":jqmData(collapsed='false')" );
- this.refresh();
+ this._refresh( "true" );
// Because the corners are handled by the collapsible itself and the default state is collapsed
// That was causing https://github.com/jquery/jquery-mobile/issues/4116
expanded.trigger( "expand" );
},
- refresh: function() {
- var $el = this.element,
- o = this.options,
- collapsiblesInSet = $el.children( ":jqmData(role='collapsible')" );
+ _refresh: function( create ) {
+ var collapsiblesInSet = this.element.children( ":jqmData(role='collapsible')" );
$.mobile.collapsible.prototype.enhance( collapsiblesInSet.not( ".ui-collapsible" ) );
- // clean up borders
- if ( !!o.inset ) {
- collapsiblesInSet.each(function() {
- $( this ).jqmRemoveData( "collapsible-last" )
- .find( ".ui-collapsible-heading" )
- .find( "a" ).first()
- .removeClass( "ui-corner-top ui-corner-bottom" )
- .find( ".ui-btn-inner" )
- .removeClass( "ui-corner-top ui-corner-bottom" );
- });
+ this._addFirstLastClasses( collapsiblesInSet, this._getVisibles( collapsiblesInSet, create ), create );
+ },
- collapsiblesInSet.first()
- .find( "a" )
- .first()
- .addClass( "ui-corner-top" )
- .find( ".ui-btn-inner" )
- .addClass( "ui-corner-top" );
-
- collapsiblesInSet.last()
- .jqmData( "collapsible-last", true )
- .find( "a" )
- .first()
- .addClass( "ui-corner-bottom" )
- .find( ".ui-btn-inner" )
- .addClass( "ui-corner-bottom" );
- }
+ refresh: function() {
+ this._refresh( false );
}
});
+$.widget( "mobile.collapsibleset", $.mobile.collapsibleset, $.mobile.behaviors.addFirstLastClasses );
+
//auto self-init widgets
$( document ).bind( "pagecreate create", function( e ) {
$.mobile.collapsibleset.prototype.enhanceWithin( e.target );
View
35 js/widgets/controlgroup.js
@@ -7,6 +7,7 @@
define( [ "jquery",
"../jquery.mobile.buttonMarkup",
+ "./addFirstLastClasses",
"../jquery.mobile.widget" ], function( $ ) {
//>>excludeEnd("jqmBuildExclude");
(function( $, undefined ) {
@@ -47,14 +48,6 @@ define( [ "jquery",
this._refresh( true );
},
- _flipClasses: function( els, flCorners ) {
- els.removeClass( "ui-controlgroup-last" )
- .buttonMarkup( { corners: false, shadow: false } )
- .eq( 0 ).buttonMarkup( { corners: flCorners[ 0 ], cornerstyle: "group" } )
- .end()
- .last().buttonMarkup( { corners: flCorners[ 1 ], cornerstyle: "group" } ).addClass( "ui-controlgroup-last" );
- },
-
_setOption: function( key, value ) {
var setter = "_set" + key.charAt( 0 ).toUpperCase() + key.slice( 1 );
@@ -70,14 +63,11 @@ define( [ "jquery",
this.element
.removeClass( "ui-controlgroup-horizontal ui-controlgroup-vertical" )
.addClass( "ui-controlgroup-" + value );
- this.options.type = value;
- this.refresh();
+ this._refresh( false );
},
_setCorners: function( value ) {
this.element.toggleClass( "ui-corner-all", value );
- this.options.corners = value;
- this.refresh();
},
_setShadow: function( value ) {
@@ -88,19 +78,16 @@ define( [ "jquery",
this.element.toggleClass( "ui-mini", value );
},
+ container: function() {
+ return this.element.children( ".ui-controlgroup-controls" );
+ },
+
_refresh: function( create ) {
- var els = this.element
- .find( ".ui-btn" + ( ( !create && this.options.excludeInvisible ) ? ":visible" : "" ) )
- .not( '.ui-slider-handle' ),
- corners = [ true, true ];
-
- if ( !this.options.corners ) {
- corners = [ false, false ];
- } else if ( els.length > 1 ) {
- corners = ( this.options.type === "horizontal" ? [ "left", "right" ] : [ "top", "bottom" ] );
+ var els = this.element.find( ".ui-btn" ).not( ".ui-slider-handle" );
+ if ( $.mobile.checkboxradio ) {
+ this.element.find( ":mobile-checkboxradio" ).checkboxradio( "refresh" );
}
-
- this._flipClasses( els, corners );
+ this._addFirstLastClasses( els, this.options.excludeInvisible ? this._getVisibles( els, create ) : els, create );
},
refresh: function() {
@@ -108,6 +95,8 @@ define( [ "jquery",
}
});
+ $.widget( "mobile.controlgroup", $.mobile.controlgroup, $.mobile.behaviors.addFirstLastClasses );
+
// TODO: Implement a mechanism to allow widgets to become enhanced in the
// correct order when their correct enhancement depends on other widgets in
// the page being correctly enhanced already.
View
12 js/widgets/dialog.js
@@ -13,15 +13,17 @@ $.widget( "mobile.dialog", $.mobile.widget, {
options: {
closeBtnText: "Close",
overlayTheme: "a",
+ corners: true,
initSelector: ":jqmData(role='dialog')"
},
_create: function() {
var self = this,
$el = this.element,
headerCloseButton = $( "<a href='#' data-" + $.mobile.ns + "icon='delete' data-" + $.mobile.ns + "iconpos='notext'>"+ this.options.closeBtnText + "</a>" ),
+ cornerClass = !!this.options.corners ? " ui-corner-all" : "",
dialogWrap = $( "<div/>", {
"role" : "dialog",
- "class" : "ui-dialog-contain ui-corner-all ui-overlay-shadow"
+ "class" : "ui-dialog-contain ui-overlay-shadow" + cornerClass
});
$el.addClass( "ui-dialog ui-overlay-" + this.options.overlayTheme );
@@ -32,13 +34,7 @@ $.widget( "mobile.dialog", $.mobile.widget, {
.wrapInner( dialogWrap )
.children()
.find( ":jqmData(role='header')" )
- .prepend( headerCloseButton )
- .end()
- .children( ':first-child')
- .addClass( "ui-corner-top" )
- .end()
- .children( ":last-child" )
- .addClass( "ui-corner-bottom" );
+ .prepend( headerCloseButton );
// this must be an anonymous function so that select menu dialogs can replace
// the close method. This is a change from previously just defining data-rel=back
View
22 js/widgets/forms/checkboxradio.js
@@ -34,13 +34,9 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
mini = inheritAttr( input, "mini" ) || o.mini,
checkedState = inputtype + "-on",
uncheckedState = inputtype + "-off",
- icon = input.parents( ":jqmData(type='horizontal')" ).length ? undefined : uncheckedState,
iconpos = inheritAttr( input, "iconpos" ),
- activeBtn = icon ? "" : " " + $.mobile.activeBtnClass,
- checkedClass = "ui-" + checkedState + activeBtn,
- uncheckedClass = "ui-" + uncheckedState,
- checkedicon = icon ? checkedState : undefined,
- uncheckedicon = icon ? uncheckedState : undefined;
+ checkedClass = "ui-" + checkedState,
+ uncheckedClass = "ui-" + uncheckedState;
if ( inputtype !== "checkbox" && inputtype !== "radio" ) {
return;
@@ -52,8 +48,8 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
inputtype: inputtype,
checkedClass: checkedClass,
uncheckedClass: uncheckedClass,
- checkedicon: checkedicon,
- uncheckedicon: uncheckedicon
+ checkedicon: checkedState,
+ uncheckedicon: uncheckedState
});
// If there's no selected theme check the data attr
@@ -63,7 +59,7 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
label.buttonMarkup({
theme: o.theme,
- icon: icon,
+ icon: uncheckedState,
shadow: false,
mini: mini,
iconpos: iconpos
@@ -180,13 +176,15 @@ $.widget( "mobile.checkboxradio", $.mobile.widget, {
},
refresh: function() {
- var input = this.element[0],
+ var input = this.element[ 0 ],
+ active = " " + $.mobile.activeBtnClass,
+ checkedClass = this.checkedClass + ( this.element.parents( ".ui-controlgroup-horizontal" ).length ? active : "" ),
label = this.label;
if ( input.checked ) {
- label.addClass( this.checkedClass ).removeClass( this.uncheckedClass ).buttonMarkup( { icon: this.checkedicon } );
+ label.removeClass( this.uncheckedClass + active ).addClass( checkedClass ).buttonMarkup( { icon: this.checkedicon } );
} else {
- label.removeClass( this.checkedClass ).addClass( this.uncheckedClass ).buttonMarkup( { icon: this.uncheckedicon } );;
+ label.removeClass( checkedClass ).addClass( this.uncheckedClass ).buttonMarkup( { icon: this.uncheckedicon } );
}
if ( input.disabled ) {
View
3  js/widgets/listview.filter.js
@@ -46,6 +46,7 @@ $( document ).delegate( "ul, ol", "listviewcreate", function() {
var $this = $( this ),
val = this.value.toLowerCase(),
listItems = null,
+ li = list.children(),
lastval = $this.jqmData( "lastval" ) + "",
childItems = false,
itemtext = "",
@@ -114,7 +115,7 @@ $( document ).delegate( "ul, ol", "listviewcreate", function() {
//filtervalue is empty => show all
listItems.toggleClass( "ui-screen-hidden", !!listview.options.filterReveal );
}
- listview._refreshCorners();
+ listview._addFirstLastClasses( li, listview._getVisibles( li, false ), false );
})
.appendTo( wrapper )
.textinput();
View
89 js/widgets/listview.js
@@ -5,7 +5,7 @@
//>>css.structure: ../css/structure/jquery.mobile.listview.css
//>>css.theme: ../css/themes/default/jquery.mobile.theme.css
-define( [ "jquery", "../jquery.mobile.widget", "../jquery.mobile.buttonMarkup", "./page", "./page.sections" ], function( $ ) {
+define( [ "jquery", "../jquery.mobile.widget", "../jquery.mobile.buttonMarkup", "./page", "./page.sections", "./addFirstLastClasses" ], function( $ ) {
//>>excludeEnd("jqmBuildExclude");
(function( $, undefined ) {
@@ -24,6 +24,8 @@ $.widget( "mobile.listview", $.mobile.widget, {
icon: "arrow-r",
splitIcon: "arrow-r",
splitTheme: "b",
+ corners: true,
+ shadow: true,
inset: false,
initSelector: ":jqmData(role='listview')"
},
@@ -32,81 +34,21 @@ $.widget( "mobile.listview", $.mobile.widget, {
var t = this,
listviewClasses = "";
- listviewClasses += t.options.inset ? " ui-listview-inset ui-corner-all ui-shadow " : "";
+ listviewClasses += t.options.inset ? " ui-listview-inset" : "";
+
+ if ( !!t.options.inset ) {
+ listviewClasses += t.options.corners ? " ui-corner-all" : "";
+ listviewClasses += t.options.shadow ? " ui-shadow" : "";
+ }
// create listview markup
t.element.addClass(function( i, orig ) {
- return orig + " ui-listview " + listviewClasses;
+ return orig + " ui-listview" + listviewClasses;
});
t.refresh( true );
},
- _removeCorners: function( li, which ) {
- var top = "ui-corner-top ui-corner-tr ui-corner-tl",
- bot = "ui-corner-bottom ui-corner-br ui-corner-bl";
-
- li = li.add( li.find( ".ui-btn-inner, .ui-li-link-alt, .ui-li-thumb" ) );
-
- if ( which === "top" ) {
- li.removeClass( top );
- } else if ( which === "bottom" ) {
- li.removeClass( bot );
- } else {
- li.removeClass( top + " " + bot );
- }
- },
-
- _refreshCorners: function( create ) {
- var $li,
- $visibleli,
- $topli,
- $bottomli;
-
- $li = this.element.children( "li" );
- // At create time and when autodividers calls refresh the li are not visible yet so we need to rely on .ui-screen-hidden
- $visibleli = create || $li.filter( ":visible" ).length === 0 ? $li.not( ".ui-screen-hidden" ) : $li.filter( ":visible" );
-
- // ui-li-last is used for setting border-bottom on the last li
- $li.filter( ".ui-li-last" ).removeClass( "ui-li-last" );
-
- if ( this.options.inset ) {
- this._removeCorners( $li );
-
- // Select the first visible li element
- $topli = $visibleli.first()
- .addClass( "ui-corner-top" );
-
- $topli.add( $topli.find( ".ui-btn-inner" )
- .not( ".ui-li-link-alt span:first-child" ) )
- .addClass( "ui-corner-top" )
- .end()
- .find( ".ui-li-link-alt, .ui-li-link-alt span:first-child" )
- .addClass( "ui-corner-tr" )
- .end()
- .find( ".ui-li-thumb" )
- .not( ".ui-li-icon" )
- .addClass( "ui-corner-tl" );
-
- // Select the last visible li element
- $bottomli = $visibleli.last()
- .addClass( "ui-corner-bottom ui-li-last" );
-
- $bottomli.add( $bottomli.find( ".ui-btn-inner" ) )
- .find( ".ui-li-link-alt" )
- .addClass( "ui-corner-br" )
- .end()
- .find( ".ui-li-thumb" )
- .not( ".ui-li-icon" )
- .addClass( "ui-corner-bl" );
- } else {
- $visibleli.last().addClass( "ui-li-last" );
- }
- if ( !create ) {
- this.element.trigger( "updatelayout" );
- }
- },
-
// This is a generic utility method for finding the first
// node with a given nodeName. It uses basic DOM traversal
// to be fast and is meant to be a substitute for simple
@@ -177,7 +119,7 @@ $.widget( "mobile.listview", $.mobile.widget, {
$list.find( ".ui-li-dec" ).remove();
}
- if ( ol ) {
+ if ( ol ) {
// Check if a start attribute has been set while taking a value of 0 into account
if ( start || start === 0 ) {
if ( !jsCount ) {
@@ -336,10 +278,9 @@ $.widget( "mobile.listview", $.mobile.widget, {
this._addThumbClasses( li );
this._addThumbClasses( $list.find( ".ui-link-inherit" ) );
-
- this._refreshCorners( create );
-
- // autodividers binds to this to redraw dividers after the listview refresh
+
+ this._addFirstLastClasses( li, this._getVisibles( li, create ), create );
+ // autodividers binds to this to redraw dividers after the listview refresh
this._trigger( "afterrefresh" );
},
@@ -439,6 +380,8 @@ $.widget( "mobile.listview", $.mobile.widget, {
}
});
+$.widget( "mobile.listview", $.mobile.listview, $.mobile.behaviors.addFirstLastClasses );
+
//auto self-init widgets
$( document ).bind( "pagecreate create", function( e ) {
$.mobile.listview.prototype.enhanceWithin( e.target );
View
97 tests/functional/controlgroup.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Button Markup Tester</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../../docs/_assets/css/jqm-docs.css" />
+ <script src="../../js/jquery.tag.inserter.js"></script>
+ <script src="../../js"></script>
+ <script>
+( function( $, undefined ) {
+ var counter = 0;
+ $( document ).bind( "pageinit", function( e ) {
+ $( "#prepend,#append", e.target ).bind( "click", function( e ) {
+ counter++;
+ var widgetType = $( "[name='radio-widget']:checked" ).attr( "id" ),
+ grp = $( "#controlgroup" ), $el,
+ action = function() {
+ var op = $( "[name='radio-op']:checked" ).attr( "id" );
+ $el[ op ](); grp.controlgroup( "refresh" );
+ };
+
+ if ( widgetType === "link" ) {
+ $el = $( "<a href='#'>Remove " + counter + "</a>" ).bind( "click", action );
+ $( "#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 id='widget" + counter + "' value='default'>Select " + counter + "</option><option value='remove'>Remove</option></select>" );
+ $( $el[ 1 ] ).bind( "change", action);
+ $( "#controlgroup" ).controlgroup( "container" )[ $( this ).attr( "id" ) ]( $el );
+ $( $el[ 1 ] ).selectmenu();
+ } else {
+ $el = $( "<label for='widget" + counter + "'>Remove " + counter + "</label><input type='checkbox' id='widget" + counter + "'></input>" );
+ $( $el[ 1 ] ).bind( "change", action );
+ $( "#controlgroup" ).controlgroup( "container" )[ $( this ).attr( "id" ) ]( $el );
+ $( $el[ 1 ] ).checkboxradio();
+ }
+
+ grp.controlgroup( "refresh" );
+ });
+ $( "#isHorizontal" ).bind( "change", function( e ) {
+ $( "#controlgroup" ).controlgroup( "option", "type", ( $( "#isHorizontal" ).is( ":checked" ) ? "horizontal" : "vertical" ) );
+ });
+ });
+})( jQuery );
+ </script>
+</head>
+
+<body>
+ <div data-role="page">
+ <div data-role="header">
+ <h1>Controlroup Dynamic Modification</h1>
+ </div>
+ <div data-role="contents">
+ <div class="ui-grid-a">
+ <div class="ui-block-a">
+ <div data-role="controlgroup" id="controlgroup">
+ </div>
+ </div>
+ <div class="ui-block-b">
+ <a href="#" id="prepend" data-role="button" data-corners="true" data-inline="true">Prepend</a>
+ <a href="#" id="append" data-role="button" data-corners="true" data-inline="true">Append</a>
+ <form action="#" method="get">
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <legend>Widget type</legend>
+ <input type="radio" name="radio-widget" id="link" value="link" checked="checked" />
+ <label for="link">Link</label>
+
+ <input type="radio" name="radio-widget" id="select" value="select" />
+ <label for="select">Select</label>
+
+ <input type="radio" name="radio-widget" id="checkbox" value="checkbox" />
+ <label for="checkbox">Checkbox</label>
+ </fieldset>
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <legend>Operation</legend>
+ <input type="radio" name="radio-op" id="remove" value="remove" checked="checked" />
+ <label for="remove">Remove</label>
+
+ <input type="radio" name="radio-op" id="hide" value="hide" />
+ <label for="hide">Hide</label>
+
+ <input type="radio" name="radio-op" id="width" value="width" />
+ <label for="width">Nothing</label>
+ </fieldset>
+ <div data-role="fieldcontain">
+ <input id="isHorizontal" data-inline="true" type="checkbox"></input>
+ <label for="isHorizontal">Horizontal</label>
+ </div>
+ </form>
+ </div>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
View
6 tests/unit/button-markup/buttonMarkup_core.js
@@ -19,9 +19,9 @@
linkCount = group.find( "a" ).length;
deepEqual( group.find("a.ui-btn").length, linkCount, "all 4 links should be buttons");
- deepEqual( group.find("a > span.ui-corner-left").length, 1, "only 1 left cornered button");
- deepEqual( group.find("a > span.ui-corner-right").length, 1, "only 1 right cornered button");
- deepEqual( group.find("a > span:not(.ui-corner-left):not(.ui-corner-right)").length, linkCount - 2, "only 2 buttons are cornered");
+ deepEqual( group.find("a.ui-first-child").length, 1, "only 1 left cornered button");
+ deepEqual( group.find("a.ui-last-child").length, 1, "only 1 right cornered button");
+ deepEqual( group.find("a:not(.ui-first-child):not(.ui-last-child)").length, linkCount - 2, "only 2 buttons are cornered");
});
test( "control group buttons should respect theme-related data attributes", function(){
View
59 tests/unit/collapsible/collapsible_core.js
@@ -7,6 +7,7 @@
module( "Collapsible section", {});
asyncTest( "The page should be enhanced correctly", function(){
+ expect( 5 );
$.testHelper.pageSequence([
function(){
$.testHelper.openPage( "#basic-collapsible-test" );
@@ -19,13 +20,13 @@
ok($page.find( ".ui-content >:eq(0) > div" ).hasClass( "ui-collapsible-content" ), ".ui-collapsible-content class added to collapsible content" );
ok($page.find( ".ui-content >:eq(0)" ).hasClass( "ui-collapsible-collapsed" ), ".ui-collapsible-collapsed added to collapsed elements" );
ok(!$page.find( ".ui-content >:eq(1)" ).hasClass( "ui-collapsible-collapsed" ), ".ui-collapsible-collapsed not added to expanded elements" );
- ok($page.find( ".ui-collapsible.ui-collapsible-collapsed" ).find( ".ui-collapsible-heading-toggle > .ui-btn-inner" ).hasClass( "ui-corner-top ui-corner-bottom" ), "Collapsible header button should have class ui-corner-all" );
start();
}
]);
});
asyncTest( "Expand/Collapse", function(){
+ expect( 3 );
$.testHelper.pageSequence([
function(){
$.testHelper.openPage( "#basic-collapsible-test" );
@@ -45,6 +46,7 @@
module( "Collapsible set", {});
asyncTest( "The page should be enhanced correctly", function(){
+ var nTests = 2;
$.testHelper.pageSequence([
function(){
$.testHelper.openPage( "#basic-collapsible-set-test" );
@@ -57,16 +59,19 @@
ok($page.find( ".ui-content >:eq(0) > div" ).hasClass( "ui-collapsible" ), ".ui-collapsible class added to collapsible elements" );
$page.find( ".ui-collapsible-set" ).each(function() {
var $this = $( this );
- ok($this.find( ".ui-collapsible" ).first().find( ".ui-collapsible-heading-toggle > .ui-btn-inner" ).hasClass( "ui-corner-top" ), "First collapsible header button should have class ui-corner-top" );
- ok($this.find( ".ui-collapsible" ).last().find( ".ui-collapsible-heading-toggle > .ui-btn-inner" ).hasClass( "ui-corner-bottom" ), "Last collapsible header button should have class ui-corner-bottom" );
+ nTests += 2;
+ ok($this.find( ".ui-collapsible" ).first().hasClass( "ui-first-child" ), "First collapsible header button should have class ui-first-child" );
+ ok($this.find( ".ui-collapsible" ).last().hasClass( "ui-last-child" ), "Last collapsible header button should have class ui-last-child" );
});
+ expect( nTests );
start();
}
]);
});
asyncTest( "Collapsible set with only one collapsible", function() {
+ var nTests = 0;
$.testHelper.pageSequence([
function(){
$.testHelper.openPage( "#collapsible-set-with-lonely-collapsible-test" );
@@ -76,16 +81,19 @@
var $page = $( "#collapsible-set-with-lonely-collapsible-test" );
$page.find( ".ui-collapsible-set" ).each(function() {
var $this = $( this );
- ok($this.find( ".ui-collapsible" ).first().find( ".ui-collapsible-heading-toggle > .ui-btn-inner" ).hasClass( "ui-corner-top" ), "First collapsible header button should have class ui-corner-top" );
- ok($this.find( ".ui-collapsible" ).last().find( ".ui-collapsible-heading-toggle > .ui-btn-inner" ).hasClass( "ui-corner-bottom" ), "Last collapsible header button should have class ui-corner-bottom" );
+ nTests += 2;
+ ok($this.find( ".ui-collapsible" ).first().hasClass( "ui-first-child" ), "First collapsible header button should have class ui-first-child" );
+ ok($this.find( ".ui-collapsible" ).last().hasClass( "ui-last-child" ), "Last collapsible header button should have class ui-last-child" );
});
+ expect( nTests );
start();
}
]);
});
asyncTest( "Section expanded by default", function(){
+ expect( 2 );
$.testHelper.pageSequence([
function(){
$.testHelper.openPage( "#basic-collapsible-set-test" );
@@ -100,6 +108,7 @@
});
asyncTest( "Expand/Collapse", function(){
+ expect( 3 );
$.testHelper.pageSequence([
function(){
$.testHelper.openPage( "#basic-collapsible-set-test" );
@@ -117,6 +126,7 @@
});
asyncTest( "Collapsible Set with dynamic content", function(){
+ expect( 7 );
$.testHelper.pageSequence([
function(){
$.testHelper.openPage( "#collapsible-set-with-dynamic-content" );
@@ -129,18 +139,19 @@
}
set.collapsibleset( "refresh" );
equal( set.find( ".ui-collapsible" ).length, 3, "The 3 collapsibles should be enhanced" );
- ok( set.find( ".ui-collapsible" ).eq( 0 ).find( "a" ).hasClass( "ui-corner-top" ), "The 1st collapsible should have top corners" );
- ok( !set.find( ".ui-collapsible" ).eq( 0 ).find( "a" ).hasClass( "ui-corner-bottom" ), "The 1st collapsible should NOT have bottom corners" );
- ok( !set.find( ".ui-collapsible" ).eq( 1 ).find( "a" ).hasClass( "ui-corner-top" ), "The 2nd collapsible should NOT have top corners" );
- ok( !set.find( ".ui-collapsible" ).eq( 1 ).find( "a" ).hasClass( "ui-corner-bottom" ), "The 2nd collapsible should NOT have bottom corners" );
- ok( set.find( ".ui-collapsible" ).eq( 2 ).find( "a" ).hasClass( "ui-corner-bottom" ), "The 3rd collapsible should have bottom corners" );
- ok( !set.find( ".ui-collapsible" ).eq( 2 ).find( "a" ).hasClass( "ui-corner-top" ), "The 3rd collapsible should NOT have top corners" );
+ ok( set.find( ".ui-collapsible" ).eq( 0 ).hasClass( "ui-first-child" ), "The 1st collapsible should have top corners" );
+ ok( !set.find( ".ui-collapsible" ).eq( 0 ).hasClass( "ui-last-child" ), "The 1st collapsible should NOT have bottom corners" );
+ ok( !set.find( ".ui-collapsible" ).eq( 1 ).hasClass( "ui-first-child" ), "The 2nd collapsible should NOT have top corners" );
+ ok( !set.find( ".ui-collapsible" ).eq( 1 ).hasClass( "ui-last-child" ), "The 2nd collapsible should NOT have bottom corners" );
+ ok( set.find( ".ui-collapsible" ).eq( 2 ).hasClass( "ui-last-child" ), "The 3rd collapsible should have bottom corners" );
+ ok( !set.find( ".ui-collapsible" ).eq( 2 ).hasClass( "ui-first-child" ), "The 3rd collapsible should NOT have top corners" );
start();
}
]);
});
asyncTest( "Collapsible Set with static and dynamic content", function(){
+ expect( 7 );
$.testHelper.pageSequence([
function(){
$.testHelper.openPage( "#collapsible-set-with-static-and-dynamic-content" );
@@ -153,18 +164,19 @@
}
set.collapsibleset( "refresh" );
equal( set.find( ".ui-collapsible" ).length, 3, "The 3 collapsibles should be enhanced" );
- ok( set.find( ".ui-collapsible" ).eq( 0 ).find( "a" ).hasClass( "ui-corner-top" ), "The 1st collapsible should have top corners" );
- ok( !set.find( ".ui-collapsible" ).eq( 0 ).find( "a" ).hasClass( "ui-corner-bottom" ), "The 1st collapsible should NOT have bottom corners" );
- ok( !set.find( ".ui-collapsible" ).eq( 1 ).find( "a" ).hasClass( "ui-corner-top" ), "The 2nd collapsible should NOT have top corners" );
- ok( !set.find( ".ui-collapsible" ).eq( 1 ).find( "a" ).hasClass( "ui-corner-bottom" ), "The 2nd collapsible should NOT have bottom corners" );
- ok( set.find( ".ui-collapsible" ).eq( 2 ).find( "a" ).hasClass( "ui-corner-bottom" ), "The 3rd collapsible should have bottom corners" );
- ok( !set.find( ".ui-collapsible" ).eq( 2 ).find( "a" ).hasClass( "ui-corner-top" ), "The 3rd collapsible should NOT have top corners" );
+ ok( set.find( ".ui-collapsible" ).eq( 0 ).hasClass( "ui-first-child" ), "The 1st collapsible should have top corners" );
+ ok( !set.find( ".ui-collapsible" ).eq( 0 ).hasClass( "ui-last-child" ), "The 1st collapsible should NOT have bottom corners" );
+ ok( !set.find( ".ui-collapsible" ).eq( 1 ).hasClass( "ui-first-child" ), "The 2nd collapsible should NOT have top corners" );
+ ok( !set.find( ".ui-collapsible" ).eq( 1 ).hasClass( "ui-last-child" ), "The 2nd collapsible should NOT have bottom corners" );
+ ok( set.find( ".ui-collapsible" ).eq( 2 ).hasClass( "ui-last-child" ), "The 3rd collapsible should have bottom corners" );
+ ok( !set.find( ".ui-collapsible" ).eq( 2 ).hasClass( "ui-first-child" ), "The 3rd collapsible should NOT have top corners" );
start();
}
]);
});
asyncTest( "Collapsible set with last collapsible expanded", function(){
+ expect( 1 );
$.testHelper.pageSequence([
function(){
$.testHelper.openPage( "#collapsible-set-with-last-collapsible-expanded" );
@@ -172,13 +184,14 @@
function() {
var collapsibles = $.mobile.activePage.find( ".ui-collapsible" );
- ok( collapsibles.last().find( ".ui-collapsible-content" ).hasClass( "ui-corner-bottom" ), "Content of last collapsible should have class ui-corner-bottom");
+ ok( collapsibles.last().hasClass( "ui-last-child" ), "Content of last collapsible should have class ui-last-child");
start();
}
]);
});
asyncTest( "Collapsible Set", function(){
+ expect( 3 );
$.testHelper.pageSequence([
function(){
$.testHelper.openPage( "#collapsible-set-with-legends" );
@@ -186,9 +199,9 @@
function() {
var collapsibles = $.mobile.activePage.find( ".ui-collapsible-heading" );
- ok( !collapsibles.eq(0).find( ".ui-btn" ).is( ".ui-corner-bottom" ), "First collapsible should NOT have class ui-corner-bottom");
- ok( !collapsibles.eq(1).find( ".ui-btn" ).is( ".ui-corner-bottom,.ui-corner-top" ), "Middle collapsible should NOT have class ui-corner-top or ui-corner-bottom");
- ok( !collapsibles.eq(2).find( ".ui-btn" ).is( ".ui-corner-top" ), "Last collapsible should NOT have class ui-corner-top");
+ ok( !collapsibles.eq(0).is( ".ui-first-child" ), "First collapsible should NOT have class ui-last-child");
+ ok( !collapsibles.eq(1).is( ".ui-last-child,.ui-first-child" ), "Middle collapsible should NOT have class ui-first-child or ui-last-child");
+ ok( !collapsibles.eq(2).is( ".ui-first-child" ), "Last collapsible should NOT have class ui-first-child");
start();
}
]);
@@ -197,6 +210,7 @@
module( "Icons", {});
asyncTest( "Collapsible with custom icons", function(){
+ expect( 6 );
$.testHelper.pageSequence([
function(){
$.testHelper.openPage( "#collapsible-with-custom-icons" );
@@ -220,6 +234,7 @@
});
asyncTest( "Collapsible sets with custom icons", function(){
+ expect( 6 );
$.testHelper.pageSequence([
function(){
$.testHelper.openPage( "#collapsible-set-with-custom-icons" );
@@ -241,6 +256,7 @@
module( "Theming", {});
asyncTest( "Collapsible", 6, function(){
+ expect( 6 );
$.testHelper.pageSequence([
function(){
$.testHelper.openPage( "#collapsible-with-theming" );
@@ -261,6 +277,7 @@
asyncTest( "Collapsible Set", function(){
+ expect( 13 );
$.testHelper.pageSequence([
function(){
$.testHelper.openPage( "#collapsible-set-with-theming" );
View
50 tests/unit/controlgroup/controlgroup_core.js
@@ -13,11 +13,10 @@
middlebuttons = buttons.filter(function(index) { return index > 0 && index < (length-1)}),
length = buttons.length;
- ok( !buttons.hasClass( "ui-btn-corner-all" ), "no button should have class 'ui-btn-corner-all'");
- ok( buttons.first().hasClass( "ui-corner-top" ), "first button should have class 'ui-corner-top'" );
- ok( !middlebuttons.hasClass( "ui-corner-top" ), "middle buttons should not have class 'ui-corner-top'" );
- ok( !middlebuttons.hasClass( "ui-corner-bottom" ), "middle buttons should not have class 'ui-corner-bottom'" );
- ok( buttons.last().hasClass( "ui-corner-bottom"), "last button should have class 'ui-corner-bottom'" );
+ ok( buttons.first().hasClass( "ui-first-child" ), "first button should have class 'ui-first-child'" );
+ ok( !middlebuttons.hasClass( "ui-first-child" ), "middle buttons should not have class 'ui-first-child'" );
+ ok( !middlebuttons.hasClass( "ui-last-child" ), "middle buttons should not have class 'ui-last-child'" );
+ ok( buttons.last().hasClass( "ui-last-child"), "last button should have class 'ui-last-child'" );
});
module( 'vertical controlgroup, refresh', {
@@ -39,10 +38,10 @@
middlebuttons = buttons.filter(function(index) { return index > 0 && index < (length-1)}),
length = buttons.length;
- ok( buttons.first().hasClass( "ui-corner-top" ), "first visible button should have class 'ui-corner-top'" );
- ok( !middlebuttons.hasClass( "ui-corner-top" ), "middle buttons should not have class 'ui-corner-top'" );
- ok( !middlebuttons.hasClass( "ui-corner-bottom" ), "middle buttons should not have class 'ui-corner-bottom'" );
- ok( buttons.last().hasClass( "ui-corner-bottom"), "last visible button should have class 'ui-corner-bottom'" );
+ ok( buttons.first().hasClass( "ui-first-child" ), "first visible button should have class 'ui-first-child'" );
+ ok( !middlebuttons.hasClass( "ui-first-child" ), "middle buttons should not have class 'ui-first-child'" );
+ ok( !middlebuttons.hasClass( "ui-last-child" ), "middle buttons should not have class 'ui-last-child'" );
+ ok( buttons.last().hasClass( "ui-last-child"), "last visible button should have class 'ui-last-child'" );
});
test( "vertical controlgroup after last button was hidden", function() {
@@ -56,10 +55,10 @@
middlebuttons = buttons.filter(function(index) { return index > 0 && index < (length-1)}),
length = buttons.length;
- ok( buttons.first().hasClass( "ui-corner-top" ), "first visible button should have class 'ui-corner-top'" );
- ok( !middlebuttons.hasClass( "ui-corner-top" ), "middle buttons should not have class 'ui-corner-top'" );
- ok( !middlebuttons.hasClass( "ui-corner-bottom" ), "middle buttons should not have class 'ui-corner-bottom'" );
- ok( buttons.last().hasClass( "ui-corner-bottom"), "last visible button should have class 'ui-corner-bottom'" );
+ ok( buttons.first().hasClass( "ui-first-child" ), "first visible button should have class 'ui-first-child'" );
+ ok( !middlebuttons.hasClass( "ui-first-child" ), "middle buttons should not have class 'ui-first-child'" );
+ ok( !middlebuttons.hasClass( "ui-last-child" ), "middle buttons should not have class 'ui-last-child'" );
+ ok( buttons.last().hasClass( "ui-last-child"), "last visible button should have class 'ui-last-child'" );
});
module( 'horizontal controlgroup, no refresh', {
@@ -73,11 +72,10 @@
middlebuttons = buttons.filter(function(index) { return index > 0 && index < (length-1)}),
length = buttons.length;
- ok( !buttons.hasClass( "ui-btn-corner-all" ), "no button should have class 'ui-btn-corner-all'");
- ok( buttons.first().hasClass( "ui-corner-left" ), "first button should have class 'ui-corner-left'" );
- ok( !middlebuttons.hasClass( "ui-corner-left" ), "middle buttons should not have class 'ui-corner-left'" );
- ok( !middlebuttons.hasClass( "ui-corner-right" ), "middle buttons should not have class 'ui-corner-right'" );
- ok( buttons.last().hasClass( "ui-corner-right"), "last button should have class 'ui-corner-right'" );
+ ok( buttons.first().hasClass( "ui-first-child" ), "first button should have class 'ui-first-child'" );
+ ok( !middlebuttons.hasClass( "ui-first-child" ), "middle buttons should not have class 'ui-first-child'" );
+ ok( !middlebuttons.hasClass( "ui-last-child" ), "middle buttons should not have class 'ui-last-child'" );
+ ok( buttons.last().hasClass( "ui-last-child"), "last button should have class 'ui-last-child'" );
});
module( 'horizontal controlgroup, refresh', {
@@ -97,10 +95,10 @@
middlebuttons = buttons.filter(function(index) { return index > 0 && index < (length-1)}),
length = buttons.length;
- ok( buttons.first().hasClass( "ui-corner-left" ), "first visible button should have class 'ui-corner-left'" );
- ok( !middlebuttons.hasClass( "ui-corner-left" ), "middle buttons should not have class 'ui-corner-left'" );
- ok( !middlebuttons.hasClass( "ui-corner-right" ), "middle buttons should not have class 'ui-corner-right'" );
- ok( buttons.last().hasClass( "ui-corner-right"), "last visible button should have class 'ui-corner-right'" );
+ ok( buttons.first().hasClass( "ui-first-child" ), "first visible button should have class 'ui-first-child'" );
+ ok( !middlebuttons.hasClass( "ui-first-child" ), "middle buttons should not have class 'ui-first-child'" );
+ ok( !middlebuttons.hasClass( "ui-last-child" ), "middle buttons should not have class 'ui-last-child'" );
+ ok( buttons.last().hasClass( "ui-last-child"), "last visible button should have class 'ui-last-child'" );
});
test( "horizontal controlgroup after last button was hidden", function() {
@@ -112,10 +110,10 @@
middlebuttons = buttons.filter(function(index) { return index > 0 && index < (length-1)}),
length = buttons.length;
- ok( buttons.first().hasClass( "ui-corner-left" ), "first visible button should have class 'ui-corner-left'" );
- ok( !middlebuttons.hasClass( "ui-corner-left" ), "middle buttons should not have class 'ui-corner-left'" );
- ok( !middlebuttons.hasClass( "ui-corner-right" ), "middle buttons should not have class 'ui-corner-right'" );
- ok( buttons.last().hasClass( "ui-corner-right"), "last visible button should have class 'ui-corner-right'" );
+ ok( buttons.first().hasClass( "ui-first-child" ), "first visible button should have class 'ui-first-child'" );
+ ok( !middlebuttons.hasClass( "ui-first-child" ), "middle buttons should not have class 'ui-first-child'" );
+ ok( !middlebuttons.hasClass( "ui-last-child" ), "middle buttons should not have class 'ui-last-child'" );
+ ok( buttons.last().hasClass( "ui-last-child"), "last visible button should have class 'ui-last-child'" );
});
View
28 tests/unit/listview/listview_core.js
@@ -553,8 +553,8 @@
var checkClasses = function() {
var $page = $( ".ui-page-active" ),
$li = $page.find( "li:visible" );
- ok($li.first().hasClass( "ui-corner-top" ), $li.length+" li elements: First visible element should have class ui-corner-top");
- ok($li.last().hasClass( "ui-corner-bottom" ), $li.length+" li elements: Last visible element should have class ui-corner-bottom");
+ ok($li.first().hasClass( "ui-first-child" ), $li.length+" li elements: First visible element should have class ui-first-child");
+ ok($li.last().hasClass( "ui-last-child" ), $li.length+" li elements: Last visible element should have class ui-last-child");
};
$.testHelper.pageSequence([
@@ -599,7 +599,7 @@
setup: function() {
var self = this;
this._refreshCornersCount = 0;
- this._refreshCornersFn = $.mobile.listview.prototype._refreshCorners;
+ this._refreshCornersFn = $.mobile.listview.prototype._addFirstLastClasses;
this.startTest = function() {
return this._refreshCornersCount === 1;
@@ -607,7 +607,7 @@
// _refreshCorners is the last method called in the filter loop
// so we count the number of times _refreshCorners gets invoked to stop the test
- $.mobile.listview.prototype._refreshCorners = function() {
+ $.mobile.listview.prototype._addFirstLastClasses = function() {
self._refreshCornersCount += 1;
self._refreshCornersFn.apply( this, arguments );
if ( self.startTest() ) {
@@ -628,7 +628,7 @@
this.startTest = function() {
if ( this._refreshCornersCount === 3 ) {
- equal( filterCallbackCount, expectedCount, "filterCallback should be call exactly "+ expectedCount +" times" );
+ equal( filterCallbackCount, expectedCount, "filterCallback should be called exactly "+ expectedCount +" times" );
}
return this._refreshCornersCount === 3;
}
@@ -754,7 +754,7 @@
$.mobile.changePage( "#programmatically-generated-list" );
},
function() {
- ok(!$( "#programmatically-generated-list-items li:first-child" ).hasClass( "ui-corner-bottom" ), "First list item should not have class ui-corner-bottom" );
+ ok(!$( "#programmatically-generated-list-items li:first-child" ).hasClass( "ui-last-child" ), "First list item should not have class ui-last-child" );
start();
}
]);
@@ -774,13 +774,13 @@
equal(ul.find("li").length, 3, "There should be only 3 list items left");
ul.listview('refresh');
- ok(ul.find("li").first().hasClass("ui-corner-top"), "First list item should have class ui-corner-top");
+ ok(ul.find("li").first().hasClass("ui-first-child"), "First list item should have class ui-first-child");
ul.find("li").last().remove();
equal(ul.find("li").length, 2, "There should be only 2 list items left");
ul.listview('refresh');
- ok(ul.find("li").last().hasClass("ui-corner-bottom"), "Last list item should have class ui-corner-bottom");
+ ok(ul.find("li").last().hasClass("ui-last-child"), "Last list item should have class ui-last-child");
start();
}
]);
@@ -800,19 +800,19 @@
for( var t = 0; t<3; t++){
ul.append("<li>Item " + t + "</li>");
ul.listview('refresh');
- equal(ul.find(".ui-corner-top").length, 1, "There should be only one element with class ui-corner-top");
- equal(ul.find("li:visible").first()[0], ul.find(".ui-corner-top")[0], "First list item should have class ui-corner-top in list with " + ul.find("li").length + " item(s)");
- equal(ul.find(".ui-corner-bottom").length, 1, "There should be only one element with class ui-corner-bottom");
- equal(ul.find("li:visible").last()[0], ul.find(".ui-corner-bottom")[0], "Last list item should have class ui-corner-bottom in list with " + ul.find("li").length + " item(s)");
+ equal(ul.find(".ui-first-child").length, 1, "There should be only one element with class ui-first-child");
+ equal(ul.find("li:visible").first()[0], ul.find(".ui-first-child")[0], "First list item should have class ui-first-child in list with " + ul.find("li").length + " item(s)");
+ equal(ul.find(".ui-last-child").length, 1, "There should be only one element with class ui-last-child");
+ equal(ul.find("li:visible").last()[0], ul.find(".ui-last-child")[0], "Last list item should have class ui-last-child in list with " + ul.find("li").length + " item(s)");
}
ul.find( "li" ).first().hide();
ul.listview( "refresh" );
- equal(ul.find("li:visible").first()[0], ul.find(".ui-corner-top")[0], "First visible list item should have class ui-corner-top");
+ equal(ul.find("li:visible").first()[0], ul.find(".ui-first-child")[0], "First visible list item should have class ui-first-child");
ul.find( "li" ).last().hide();
ul.listview( "refresh" );
- equal(ul.find("li:visible").last()[0], ul.find(".ui-corner-bottom")[0], "Last visible list item should have class ui-corner-bottom");
+ equal(ul.find("li:visible").last()[0], ul.find(".ui-last-child")[0], "Last visible list item should have class ui-last-child");
start();
}
Please sign in to comment.
Something went wrong with that request. Please try again.