Skip to content

E
ecommerce-ui
Commit c9482b58 authored by Sven Franck's avatar Sven Franck
Browse files
Options

very ugly proof-of-concept of offline test with Qunit

parent 4b00aadd
Hide whitespace changes
Inline Side-by-side
Showing with 22038 additions and 17 deletions
test/ext/jquery-mobile/extensions.css 0 → 100644
View file @ c9482b58
/* =========================== action button ========================*/
.ui-input-search-no-pseudo:after {
content: none;
}
.ui-input-has-action {
position: relative;
}
.ui-input-search .ui-input-action,
.ui-input-text .ui-input-action {
position: absolute;
right: 0;
top: 55%;
margin: -15px .3125em 0;
border: 0;
background-color: transparent;
}
.ui-input-has-action.ui-input-has-clear input {
padding-left: 0.25em;
padding-right: 4.5em;
}
.ui-input-has-action.ui-input-has-clear .ui-input-clear {
right: 2em !important;
}
html body .ui-panel .ui-input-search .ui-btn-icon-notext.ui-input-action:after,
html body .ui-panel .ui-input-text .ui-btn-icon-notext.ui-input-action:after {
margin-top: -10px;
}
html body .ui-input-search .ui-input-action:hover,
html body .ui-input-text .ui-input-action:hover,
html body .ui-input-search .ui-input-action:active,
html body .ui-input-text .ui-input-action:active {
background: transparent;
background-image: none;
-webkit-box-shadow: none /* iOS3 */ !important;
box-shadow: none /* iOS3 */ !important;
}
/* ================================= table ================================*/
html div.ui-table-wrapper-top p,
html div.ui-table-wrapper-bottom p {
margin-top: 3px;
margin-bottom: 3px;
}
html table.ui-table thead th, html table.ui-table thead td {
padding: 0;
}
/* no items */
.ui-table tr td.ui-no-result {
text-align: center;
font-weight: bold;
}
/* table caption (will be inside a controlbar but belongs here) */
html .ui-table-caption {
padding: 0.25em 0;
}
/* font-size */
/*
html table.ui-table {
font-size: 90%;
}
html div.ui-table-wrapper-top > *,
html div.ui-table-wrapper-bottom > *,
html div.ui-collapsible-set {
font-size: 100%;
}
@media (min-width: 40em) {
html table.ui-table {
font-size: 80%;
}
html div.ui-collapsible-set table.ui-table {
font-size: 90%;
}
html div.ui-table-wrapper-top > *,
html div.ui-table-wrapper-bottom > *,
html div.ui-collapsible-set {
font-size: 90%;
}
html table thead th a.ui-btn {
font-size: 100%;
}
}
*/
/* shrink icon font-size (should not be set here...) */
.ui-page .ui-table-wrapper-top .ui-btn[class*="ui-icon-"]:after ,
.ui-page .ui-table-wrapper-bottom .ui-btn[class*="ui-icon-"]:after,
.ui-page .ui-table-wrapper-top .ui-btn[class*="ui-icon-"]:after,
.ui-page .ui-table-wrapper-bottom .ui-btn[class*="ui-icon-"]:after,
.ui-page .ui-table thead .ui-btn[class*="ui-icon-"]:after,
html div.ui-collapsible-set h1 .ui-btn[class*="ui-icon-"]:after{
font-size: 125%;
margin-top: -9px;
}
html table.ui-table tbdoy th,
html table.ui-table tbody td {
/*text-align: right;*/
padding: 0 1em;
}
@media (max-width: 20em) {
html table.ui-table tbdoy th,
html table.ui-table tbody td {
padding: 0;
}
}
html table.ui-table tbody td a,
html table.ui-table tbody th a {
text-decoration: none;
font-weight: normal;
}
html table.ui-table tbody td:hover a,
html table.ui-table tbody th:hover a {
text-decoration: none;
}
/* override JQM */
html table.ui-table {
width: 100.15%;
border: 0 none;
border-left: 1px solid;
border-right: 1px solid;
}
html table td, html table th {
/* padding: 0px !important; */
height: 34px; /* width with action menu without margins TODO: flex! */
}
/* table action menu */
html table.ui-table tr td .ui-controlgroup {
margin: 0;
text-align: center;
}
html table.ui-table tr td.ui-no-result .ui-controlgroup {
margin: 1em 0;
}
html table.ui-table tr td .ui-controlgroup .ui-controlgroup-controls {
width: auto;
}
/* why? a button should be a button
html table.ui-table tr td a.ui-btn {
border: 0 none;
background: transparent;
}
*/
html table.ui-table tr td a.ui-btn:after {
margin-top: -10px;
}
/* default */
html table.table_default {
width: 100%;
text-align: center;
}
/* checkboxRadio cells */
html table th .ui-checkbox .ui-btn,
html table td .ui-checkbox .ui-btn,
html table th .ui-radio .ui-btn,
html table td .ui-radio .ui-btn {
border: 0 none;
border-radius: 0 0 0 0;
box-shadow: none !important;
height: inherit;
width: 100%;
}
@media (max-width: 20em) {
html body table thead th .ui-checkbox .ui-btn,
html body table tbody th .ui-checkbox .ui-btn,
html body table thead th .ui-radio .ui-btn,
html body table tbody th .ui-radio .ui-btn {
max-width: 1.25em;
min-width: 1.25em;
margin: 0 auto;
text-align: center;
}
}
html table.ui-table tbody th {
padding-bottom: 0;
padding-top: 0;
width: auto;
}
html table tbody th .ui-checkbox .ui-btn,
html table tbody th .ui-checkbox .ui-btn:hover,
html table tbody th .ui-radio .ui-btn,
html table tbody th .ui-radio .ui-btn:hover,
/* why? white is white and black is black...
html table tbody td .ui-controlgroup-controls .ui-btn,
html table tbody td .ui-controlgroup-controls .ui-btn:hover */
{
background-color: transparent;
background-image: none;
}
html table th .ui-checkbox .ui-btn.ui-btn-icon-notext.ui-checkbox-on:after,
html table th .ui-checkbox .ui-btn.ui-btn-icon-notext.ui-checkbox-off:after,
html table td .ui-checkbox .ui-btn.ui-btn-icon-notext.ui-checkbox-on:after,
html table td .ui-checkbox .ui-btn.ui-btn-icon-notext.ui-checkbox-off:after,
html table th .ui-radio .ui-btn.ui-btn-icon-notext.ui-radio-on:after,
html table th .ui-radio .ui-btn.ui-btn-icon-notext.ui-radio-off:after,
html table td .ui-radio .ui-btn.ui-btn-icon-notext.ui-radio-on:after,
html table td .ui-radio .ui-btn.ui-btn-icon-notext.ui-radio-off:after{
margin-left: -.5em;
}
html table tr th .ui-checkbox input,
html table tr td .ui-checkbox input,
html table tr th .ui-radio input,
html table tr td .ui-radio input {
position: absolute !important;
top: -9999px;
left: -9999px;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
}
html table tr th .ui-checkbox,
html table tr td .ui-checkbox,
html table tr th .ui-radio,
html table tr td .ui-radio {
margin: 0;
min-width: 1em;
padding: 0;
height: inherit;
position: static;
box-shadow: none;
-webkit-box-shadow: none;
}
/* TODO: remove all the margin-top positioners */
html table tr th .ui-radio .ui-btn.ui-radio-on:after,
html table tr th .ui-radio .ui-btn.ui-radio-off:after,
html table tr td .ui-radio .ui-btn.ui-radio-on:after,
html table tr td .ui-radio .ui-btn.ui-radio-off:after {
margin-top: -11px;
}
html table tr th .ui-radio label.ui-btn,
html table tr td .ui-radio label.ui-btn {
border-radius: inherit;
-webkit-border-radius: inherit;
}
/* top radii - can use :first/last-child, because IE can't do corners anyway */
/* inherit = 0!, not inheriting = radius */
.ui-table-wrapper-top.ui-table-wrapper-inset,
.ui-table-wrapper-top.ui-table-wrapper-inset * {
-webkit-border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
border-bottom-left-radius: 0;
}
/* first grid and contained buttons get top left */
.ui-table-wrapper-top.ui-table-wrapper-inset > div:first-child,
.ui-table-wrapper-top.ui-table-wrapper-inset > div:first-child > div > div > .ui-btn,
.ui-table-wrapper-top.ui-table-wrapper-inset > div:first-child > div > div > .ui-select {
border-radius: inherit;
-webkit-border-radius: inherit;
border-top-right-radius: 0;
-webkit-border-top-right-radius: 0;
}
/* last grid and contained button get top right */
.ui-table-wrapper-top.ui-table-wrapper-inset > div:last-child,
.ui-table-wrapper-top.ui-table-wrapper-inset > div:last-child > div > div > .ui-btn,
.ui-table-wrapper-top.ui-table-wrapper-inset > div:last-child > div > div > .ui-select {
border-radius: 0;
-webkit-border-radius: 0;
border-top-right-radius: inherit;
-webkit-border-top-right-radius: inherit;
}
/* bottom radii */
.ui-table-wrapper-bottom.ui-table-wrapper-inset,
.ui-table-wrapper-bottom.ui-table-wrapper-inset * {
-webkit-border-top-right-radius: 0;
border-top-right-radius: 0;
-webkit-border-top-left-radius: 0;
border-top-left-radius: 0;
}
/* first grid and button get bottom left */
.ui-table-wrapper-bottom.ui-table-wrapper-inset > div:first-child,
.ui-table-wrapper-bottom.ui-table-wrapper-inset > div:first-child > div > div > .ui-btn,
.ui-table-wrapper-bottom.ui-table-wrapper-inset > div:first-child > div > div > .ui-select {
border-radius: inherit;
-webkit-border-radius: inherit;
border-bottom-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
}
/* last grid and button get bottom right */
.ui-table-wrapper-bottom.ui-table-wrapper-inset > div:last-child,
.ui-table-wrapper-bottom.ui-table-wrapper-inset > div:last-child > div > div > .ui-btn,
.ui-table-wrapper-bottom.ui-table-wrapper-inset > div:last-child > div > div > .ui-select {
border-radius: 0;
-webkit-border-radius: 0;
border-bottom-right-radius: inherit;
-webkit-border-bottom-right-radius: inherit;
}
/* and overwrite again for controlgroups... */
.ui-table-wrapper-top.ui-table-wrapper-inset .ui-controlgroup .ui-controlgroup-controls .ui-btn,
.ui-table-wrapper-bottom.ui-table-wrapper-inset .ui-controlgroup .ui-controlgroup-controls .ui-btn,
.ui-table-wrapper-top.ui-table-wrapper-inset .ui-controlgroup .ui-controlgroup-controls .ui-select,
.ui-table-wrapper-bottom.ui-table-wrapper-inset .ui-controlgroup .ui-controlgroup-controls .ui-select {
border-radius: 0;
-webkit-border-radius: 0;
}
/* buttons inside wrapper input/controlgroups*/
.ui-table-wrapper .ui-input-search .ui-input-clear,
.ui-table-wrapper .ui-input-search .ui-input-action,
.ui-table-wrapper .ui-input-search .ui-input-clear:focus,
.ui-table-wrapper .ui-input-search .ui-input-action:focus {
background-color: transparent;
background-image: none !important;
top: 50%;
height: 100%;
}
.ui-table-wrapper .ui-input-search .ui-input-clear:after,
.ui-table-wrapper .ui-input-search .ui-input-action:after,
.ui-table-wrapper .ui-input-search .ui-input-clear:focus:after,
.ui-table-wrapper .ui-input-search .ui-input-action:focus:after {
margin-top: -10px !important;
}
.ui-table-wrapper.ui-table-wrapper-inset .ui-input-search a {
border-radius: 0 none;
-webkit-border-radius: 0 none;
}
.ui-table-wrapper.ui-table-wrapper-inset .ui-input-search a:last-child {
-webkit-border-top-right-radius: inherit;
border-top-right-radius: inherit;
}
/* table wrappers */
.ui-table-wrapper-top, .ui-table-wrapper-bottom {
min-height: 25px;
width: 100%;
vertical-align: middle;
border-style: solid;
-webkit-box-shadow: none /* iOS3 */ !important;
box-shadow: none /* iOS3 */ !important;
}
.ui-table-wrapper-top div > .ui-select,
.ui-table-wrapper-top div > .ui-btn:not(.ui-input-clear, .ui-input-action),
.ui-table-wrapper-bottom div > .ui-select,
.ui-table-wrapper-bottom div > .ui-btn:not(.ui-input-clear, .ui-input-action) {
width: auto;
margin: 0;
}
/* table borders */
.ui-table-wrapper-top {
border-width: 1px 1px 0;
margin-top: 1em;
}
.ui-table-wrapper-bottom {
border-width: 0 1px 1px;
margin-bottom: 1em;
}
/* inherit border to table ... */
.ui-table-wrapper-top ~ table,
.ui-table-wrapper-bottom ~ table {
border: 1px solid;
}
/* wrapper buttons */
.ui-table-wrapper-top:not(.ui-grid) .ui-btn:not(.ui-input-clear):not(.ui-input-action),
.ui-table-wrapper-bottom:not(.ui-grid) .ui-btn:not(.ui-input-clear):not(.ui-input-action) {
margin: 0;
border: 0 none;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
-webkit-border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
font-weight: normal;
vertical-align: middle;
padding: .625em 1em;
}
.ui-table-wrapper-top > div, .ui-table-wrapper-bottom > div {
text-align: center;
}
.ui-table-wrapper-top .ui-table-columntoggle-btn {
float: none;
}
/* wrapper plain text */
.ui-table-wrapper-top .ui-plain-text,
.ui-table-wrapper-bottom .ui-plain-text {
font-size: .95em;
margin: 0;
padding: .625em 1em;
display: block;
position: relative;
text-align: center;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
cursor: normal;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
vertical-align: middle;
}
/* wrapper controlgroups */
.ui-table-wrapper-top .ui-controlgroup,
.ui-table-wrapper-bottom .ui-controlgroup {
text-align: center;
margin: 0 !important;
}
.ui-table-wrapper .ui-controlgroup .ui-controlgroup-controls > .ui-btn {
height: auto;
margin: 0 !important;
max-height: 2em;
padding: 0.45em 1em;
}
.ui-table-wrapper .ui-controlgroup .ui-controlgroup-controls .ui-btn,
.ui-table-wrapper .ui-controlgroup .ui-controlgroup-controls .ui-select {
border: 0 none;
margin: 0 !important;
}
.ui-table-wrapper-top .ui-controlgroup .ui-controlgroup-controls ,
.ui-table-wrapper-bottom .ui-controlgroup .ui-controlgroup-controls {
/* width: 100%; *//* in single block, this prevents centering */
}
/* buttons */
.ui-table-wrapper-top .ui-controlgroup .ui-controlgroup-controls .ui-btn ,
.ui-table-wrapper-bottom .ui-controlgroup .ui-controlgroup-controls .ui-btn
.ui-table-wrapper-top .ui-controlgroup .ui-controlgroup-controls .ui-select ,
.ui-table-wrapper-bottom .ui-controlgroup .ui-controlgroup-controls .ui-select {
width: auto;
}
.ui-table-wrapper-top .ui-controlgroup .ui-controlgroup-controls .ui-select .ui-btn {
padding-top: 0;
padding-bottom: 0;
}
.ui-table .ui-controlgroup-controls .ui-btn-icon-notext {
padding-top: .5em;
padding-bottom: .5em;
border: 0 none;
}
/* add priority 7 */
@media only all {
th.ui-table-priority-7,
td.ui-table-priority-7 {
display: none;
}
}
/* Show priority 7 at 1,280px (70em x 16px) */
@media screen and (min-width: 80em) {
.ui-table-columntoggle.ui-responsive th.ui-table-priority-7,
.ui-table-columntoggle.ui-responsive td.ui-table-priority-7 {
display: table-cell;
}
}
@media (max-width: 20em) {
.ui-table-wrapper-top .ui-controlgroup .ui-controlgroup-controls,
.ui-table-wrapper-bottom .ui-controlgroup .ui-controlgroup-controls {
width: 100%;
}
/* why? if not 5 buttons, this breaks...*/
.ui-table-wrapper-top .ui-controlgroup .ui-controlgroup-controls .ui-btn,
.ui-table-wrapper-bottom .ui-controlgroup .ui-controlgroup-controls .ui-btn,
.ui-table-wrapper-top .ui-controlgroup .ui-controlgroup-controls .ui-select,
.ui-table-wrapper-bottom .ui-controlgroup .ui-controlgroup-controls .ui-select {
width: 10%;
padding-left: 2%;
padding-right: 2%;
}
.ui-table-wrapper-top .ui-controlgroup .ui-controlgroup-controls .ui-select,
.ui-table-wrapper-bottom .ui-controlgroup .ui-controlgroup-controls .ui-select {
width: 20%;
padding-left: 0;
padding-right: 0;
}
.ui-table-wrapper-top .ui-controlgroup .ui-controlgroup-controls .ui-select .ui-btn,
.ui-table-wrapper-bottom .ui-controlgroup .ui-controlgroup-controls .ui-select .ui-btn {
width: 100%;
}
.ui-table-wrapper-top .ui-controlgroup .ui-controlgroup-controls .ui-btn:after,
.ui-table-wrapper-bottom .ui-controlgroup .ui-controlgroup-controls .ui-btn:after,
.ui-table-wrapper-top .ui-controlgroup .ui-controlgroup-controls .ui-select .ui-btn:after,
.ui-table-wrapper-bottom .ui-controlgroup .ui-controlgroup-controls .ui-select .ui-btn:after {
/* left: auto;
right: auto; *//*
margin-left: 5% bad... */;
}
/* only child */
.ui-table-wrapper-bottom.ui-table-wrapper-inset > div:only-child,
.ui-table-wrapper-bottom.ui-table-wrapper-inset > div:only-child .ui-btn,
.ui-table-wrapper-bottom.ui-table-wrapper-inset > div:only-child .ui-select {
border-bottom-right-radius: inherit;
-webkit-border-bottom-right-radius: inherit;
border-bottom-right-radius: inherit;
-webkit-border-bottom-right-radius: inherit;
}
/* only child */
.ui-table-wrapper-top.ui-table-wrapper-inset > div:only-child,
.ui-table-wrapper-top.ui-table-wrapper-inset > div:only-child .ui-btn,
.ui-table-wrapper-top.ui-table-wrapper-inset > div:only-child .ui-select {
border-top-right-radius: inherit;
-webkit-border-top-right-radius: inherit;
border-top-right-radius: inherit;
-webkit-border-top-right-radius: inherit;
}
.ui-table-wrapper-top.ui-table-wrapper-inset .ui-controlgroup .ui-controlgroup-controls .ui-first-child,
.ui-table-wrapper-bottom.ui-table-wrapper-inset .ui-controlgroup .ui-controlgroup-controls .ui-first-child {
-webkit-border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: inherit;
border-bottom-left-radius: inherit;
}
.ui-table-wrapper-top.ui-table-wrapper-inset .ui-controlgroup .ui-controlgroup-controls .ui-last-child,
.ui-table-wrapper-bottom.ui-table-wrapper-inset .ui-controlgroup .ui-controlgroup-controls .ui-last-child {
-webkit-border-bottom-right-radius: inherit;
border-bottom-right-radius: inherit;
-webkit-border-bottom-left-radius: 0;
border-bottom-left-radius: 0;
}
}
/* alignment */
.ui-table th, .ui-table td {
vertical-align: middle;
}
.ui-table thead th, .ui-table thead td,
.ui-table thead th .ui-btn, .ui-table thead td .ui-btn {
text-align: left;
}
/* sortable buttons */
.ui-table thead th {
font-weight: normal !important;
/* padding: 0px; */
}
.ui-table thead th div.ui-checkbox {
position:relative; /*FF*/
height: 100%;
width: 100%;
}
.ui-table thead th a {
margin: 0;
border-width: 0px !important;
}
/* multi row header */
.ui-table thead th[rowspan="2"] a {
height: auto; padding: 10px 0;
}
/* responsiveness */
@media (max-width: 40em) {
html table.ui-table {
width: 100.55%;
}
html table.ui-table-reflow tbody th {
border-top: 1px solid;
margin-top: 1.5em;
}
html table.ui-table-reflow tbody th:before {
width: 100%;
}
.ui-table-wrapper-top .ui-btn,
.ui-table-wrapper-top .ui-select,
.ui-table-wrapper-bottom .ui-btn,
.ui-table-wrapper-bottom .ui-select {
/* width: auto; */
text-indent: -9999px;
white-space: nowrap !important;
}
/* only way it works... */
.ui-table-wrapper-top [class*="ui-icon-"]:after,
.ui-table-wrapper-bottom [class*="ui-icon-"]:after {
text-indent: 0px;
left: 0;
margin: 0 auto;
right: 0;
}
}
/* ================================= contolbar ============================*/
/* TODO: remove? old css */
.ui-controlbar {
position: static;
text-align: center;
white-space: pre-line;
line-height: 0;
}
.ui-controlbar > * {
display: inline-block;
vertical-align: middle;
padding: 0;
}
.ui-controlbar .ui-select {
padding: 0 1%;
}
.ui-controlbar .ui-input-search {
display: block;
margin: 0.5em auto;
}
/* align multiple controlgroups in a controlbar on wide screens */
html body div.ui-content .ui-controlbar .ui-controlgroup {
margin: 0 3%;
}
/* shrink icon font-size (should not be set here...) */
html body .ui-controlbar .ui-btn[class*="ui-icon-"]:after {
font-size: 125%;
margin-top: -11px;
}
/* remove margin on controlbar buttons */
html body .ui-controlbar > .ui-select,
html body .ui-controlbar > .ui-btn:not(.ui-input-clear, .ui-input-action) {
width: auto;
margin: 0;
}
/* prevent controlgroup buttons from collapsing on small displays */
@media (max-width: 18em) {
html body .ui-controlbar .ui-controlgroup .ui-controlgroup-controls > * {
padding-left: .75em;
padding-right: .75em;
}
}
@media (max-width: 30em) {
html body div.ui-content .ui-controlbar .ui-controlgroup {
margin: 2% 0;
}
}
html body .ui-controlbar .ui-controlgroup .ui-controlgroup-controls > .ui-select {
padding: 0;
}
/* custom bar */
.ui-bar-plain {
padding: .7em 1em;
border: 1px solid;
font-size: 1em;
}
/* search filter bar? */
.ui-controlbar {
margin-top: 1em;
margin-bottom: 1em;
}
.ui-controlbar .ui-plain-text {
display: block;
font-size: 80%;
}
/* ui-collapsible-tabs */
/* action btns */
.ui-collapsible-tabs.ui-dynamic-tabs .ui-collapsible-heading a.tab_action.ui-btn {
background: none repeat scroll 0 0 transparent;
border-width: 0px;
margin: 0 -1px;
border-radius: 0;
-webkit-border-radius: 0;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
position: absolute;
right: 2em;
height: 100%;
top: 0;
width: 2em;
}
.ui-collapsible-tabs.ui-dynamic-tabs .ui-collapsible-collapsed .ui-collapsible-heading a.tab_action.ui-btn {
display: none;
}
.ui-collapsible-tabs.ui-dynamic-tabs .ui-collapsible-heading a.tab_action.ui-btn,
.ui-collapsible-tabs.ui-dynamic-tabs .ui-collapsible-heading a.tab_action.ui-btn:hover {
background: none repeat scroll 0 0 transparent;
}
.ui-collapsible-tabs.ui-dynamic-tabs .ui-collapsible-heading a.tab_action + a.tab_action {
right: 0;
}
.ui-collapsible-tabs.ui-dynamic-tabs.ui-dynamic-tabs-added ~ .ui-dynamic-info {
display: none;
}
/* side-by-side */
@media (min-width: 40em) {
.ui-collapsible-tabs {
display: table;
table-layout: fixed;
width: 100%;
}
.ui-collapsible-tabs .ui-collapsible {
display: table-cell;
}
.ui-collapsible-tabs .ui-collapsible-content {
margin: 0;
padding: 0;
position: relative;
}
/* if we only have 1 element, we don't strecht full screen */
/* thx: http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ */
.ui-collapsible-tabs .ui-collapsible:first-child:nth-last-child(1).add_tab {
width: 15%;
display: block;
margin: 0 auto;
}
.ui-collapsible-tabs .ui-collapsible:first-child:nth-last-child(1) h1 a {
text-align: center;
}
/* 1/2/3/4 items
li:first-child:nth-last-child(1) {
width: 100%;
}
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
width: 50%;
}
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
width: 33.3333%;
}
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
width: 25%;
}
*/
/* content - IE8 ignores this and falls back to regular collapsible-set */
.ui-collapsible-tabs[data-tabs="10"] .ui-collapsible .ui-collapsible-content {width: 1000%; }
.ui-collapsible-tabs[data-tabs="9"] .ui-collapsible .ui-collapsible-content {width: 900%; }
.ui-collapsible-tabs[data-tabs="8"] .ui-collapsible .ui-collapsible-content {width: 800%;}
.ui-collapsible-tabs[data-tabs="7"] .ui-collapsible .ui-collapsible-content {width: 700%;}
.ui-collapsible-tabs[data-tabs="6"] .ui-collapsible .ui-collapsible-content {width: 600%;}
.ui-collapsible-tabs[data-tabs="5"] .ui-collapsible .ui-collapsible-content {width: 500%;}
.ui-collapsible-tabs[data-tabs="4"] .ui-collapsible .ui-collapsible-content {width: 400%;}
.ui-collapsible-tabs[data-tabs="3"] .ui-collapsible .ui-collapsible-content {width: 300%;}
.ui-collapsible-tabs[data-tabs="2"] .ui-collapsible .ui-collapsible-content {width: 200%;}
.ui-collapsible-tabs[data-tabs="1"] .ui-collapsible .ui-collapsible-content {width: 100%;}
/* positioning (can use nth-child because IE8 does not care for the above */
.ui-collapsible-tabs .ui-collapsible:nth-child(1) .ui-collapsible-content {left: 0;}
.ui-collapsible-tabs .ui-collapsible:nth-child(2) .ui-collapsible-content {left: -100%;}
.ui-collapsible-tabs .ui-collapsible:nth-child(3) .ui-collapsible-content {left: -200%;}
.ui-collapsible-tabs .ui-collapsible:nth-child(4) .ui-collapsible-content {left: -300%;}
.ui-collapsible-tabs .ui-collapsible:nth-child(5) .ui-collapsible-content {left: -400%;}
.ui-collapsible-tabs .ui-collapsible:nth-child(6) .ui-collapsible-content {left: -500%;}
.ui-collapsible-tabs .ui-collapsible:nth-child(7) .ui-collapsible-content {left: -600%;}
.ui-collapsible-tabs .ui-collapsible:nth-child(8) .ui-collapsible-content {left: -700%;}
.ui-collapsible-tabs .ui-collapsible:nth-child(9) .ui-collapsible-content {left: -800%;}
.ui-collapsible-tabs .ui-collapsible:nth-child(10) .ui-collapsible-content {left: -900%;}
/* corners */
/* hardcode inset content-theme bottom corners, because can't inherit 0 on bottom left/right first/last tab */
.ui-collapsible-tabs .ui-collapsible-inset.ui-collapsible-themed-content:not(.ui-collapsible-collapsed) .ui-collapsible-content {
-webkit-border-bottom-left-radius: .6em;
border-bottom-left-radius: .6em;
-webkit-border-bottom-right-radius: .6em;
border-bottom-right-radius: .6em;
}
.ui-collapsible-tabs .ui-collapsible.ui-first-child {
-webkit-border-top-left-radius: inherit;
border-top-left-radius: inherit;
-webkit-border-top-right-radius: 0;
border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
}
.ui-collapsible-tabs .ui-collapsible.ui-last-child {
-webkit-border-top-right-radius: inherit;
border-top-right-radius: inherit;
-webkit-border-top-left-radius: 0;
border-top-left-radius: 0;
-webkit-border-bottom-left-radius: 0;
border-bottom-left-radius: 0;
}
/* if it's only a single tab, revert */
.ui-collapsible-tabs .ui-collapsible.ui-last-child.ui-first-child {
-webkit-border-radius: inherit;
border-radius: inherit;
}
/* straight corner last-tab if one tab is open */
.ui-collapsible-tabs .ui-collapsible:not(.ui-collapsible-collapsed) ~ .ui-collapsible.ui-last-child {
-webkit-border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
}
/* first tab, needs extra JS-assigned class... */
.ui-collapsible-tabs .ui-collapsible.ui-first-child {
-webkit-border-bottom-left-radius: 0;
border-bottom-left-radius: 0;
}
.ui-collapsible-tabs.ui-collapsible-set-all-closed .ui-collapsible.ui-first-child {
-webkit-border-bottom-left-radius: inherit;
border-bottom-left-radius: inherit;
}
/* hide status text */
.ui-collapsible-tabs .ui-collapsible-heading-status {
position: absolute !important;
left: -9999px;
clip: rect(1px 1px 1px 1px);
}
/* borders */
.ui-collapsible-tabs .ui-collapsible:not(.ui-collapsible-collapsed) h1 a {
border-bottom-color: transparent;
}
.ui-collapsible-tabs .ui-collapsible .ui-collapsible-content {
border-top-color: transparent;
border-top-width: 1px; /* magic */
}
html .ui-page .ui-collapsible-tabs .ui-collapsible + .ui-collapsible h1 a.ui-btn {
border-left-color: transparent;
}
}
/* hide icons */
html .ui-page .ui-collapsible-tabs .ui-collapsible h1 a.ui-collapsible-hide-icon.ui-btn:after {
content: none;
left: 0;
}
html .ui-page .ui-collapsible-tabs .ui-collapsible h1 a.ui-collapsible-hide-icon.ui-btn {
padding-left: 1em;
}
test/ext/jquery-mobile/extensions.js 0 → 100644
View file @ c9482b58
/* ========================= ACTION BUTTON EXTENSION ==================== */
(function () {
$.widget("mobile.textinput", $.mobile.textinput, {
options: {
actionBtn: false,
actionBtnText: "Search",
actionBtnIcon: "search",
actionBtnI18n: null,
actionBtnPop: false,
actionBtnPopId: null,
actionBtnClass: null
},
_create: function () {
this._super();
if (!!this.options.actionBtn || this.isSearch) {
this._addActionBtn();
}
},
actionButton: function () {
var o = this.options;
return $("<a href='#" + (o.actionBtnPop ?
(o.actionBtnPopId +
"' data-rel='popup' data-position-to='window' " +
"data-transition='pop'") : "'") +
" tabindex='-1' class='ui-input-action ui-btn ui-icon-" +
o.actionBtnIcon + " ui-btn-icon-notext ui-corner-all" + " " + o.actionBtnClass +
"' title='" + o.actionBtnText + "'>" +
o.actionBtnText + "</a>");
},
_addActionBtn: function () {
if (!this.options.enhanced) {
this._enhanceAction();
}
$.extend(this, {
_actionBtn: this.widget().find("a.ui-input-action")
});
},
_enhanceAction: function () {
this.actionButton().appendTo(this.widget());
this.widget().addClass(
"ui-input-has-action ui-input-search-no-pseudo"
);
},
_setOptions: function (options) {
this._super(options);
if (options.actionBtn !== undefined &&
!this.element.is("textarea, :jqmData(type='range')")) {
if (options.actionBtn) {
this._addActionBtn();
} else {
this._destroyAction();
}
}
if (options.clearBtnText !== undefined &&
this._actionBtn !== undefined) {
this._actionBtn.text(options.clearBtnText);
}
},
_destroyAction: function () {
this.element.removeClass("ui-input-has-clear");
this._actionBtn.remove();
},
_destroy: function () {
this._super();
this._destroyAction();
}
});
}());
/* ============================= TABLE ====================================*/
(function( $, undefined ) {
$.widget( "mobile.table", {
options: {
classes: {
table: "ui-table"
},
enhanced: false
},
_create: function() {
if ( !this.options.enhanced ) {
this.element.addClass( this.options.classes.table );
}
// extend here, assign on refresh > _setHeaders
$.extend( this, {
// Expose headers and allHeaders properties on the widget
// headers references the THs within the first TR in the table
headers: undefined,
// allHeaders references headers, plus all THs in the thead, which may
// include several rows, or not
allHeaders: undefined
});
this._refresh( true );
},
_setHeaders: function() {
var trs = this.element.find( "thead tr" );
this.headers = this.element.find( "tr:eq(0)" ).children();
this.allHeaders = this.headers.add( trs.children() );
},
refresh: function() {
this._refresh();
},
rebuild: $.noop,
_refresh: function( /* create */ ) {
var table = this.element,
trs = table.find( "thead tr" );
// updating headers on refresh (fixes #5880)
this._setHeaders();
// Iterate over the trs
trs.each( function() {
var columnCount = 0;
// Iterate over the children of the tr
$( this ).children().each( function() {
var span = parseInt( $.mobile.getAttribute( this, "colspan" ), 10 ),
selector = ":nth-child(" + ( columnCount + 1 ) + ")",
j;
this.setAttribute( "data-" + $.mobile.ns + "colstart", columnCount + 1 );
if ( span ) {
for( j = 0; j < span - 1; j++ ) {
columnCount++;
selector += ", :nth-child(" + ( columnCount + 1 ) + ")";
}
}
// Store "cells" data on header as a reference to all cells in the
// same column as this TH
$( this ).jqmData( "cells", table.find( "tr" ).not( trs.eq( 0 ) ).not( this ).children( selector ) );
columnCount++;
});
});
}
});
})( jQuery );
(function( $, undefined ) {
$.widget( "mobile.table", $.mobile.table, {
options: {
usePop: true,
mode: "columntoggle",
columnBtnShow: true,
columnBtnTheme: null,
columnPopupTheme: null,
columnBtnText: "Columns...",
columnBtnIcon: "Search",
wrap: null,
embedded: null,
topGrid: null,
bottomGrid: null,
classes: $.extend( $.mobile.table.prototype.options.classes, {
popup: "ui-table-columntoggle-popup",
columnBtn: "ui-table-columntoggle-btn",
priorityPrefix: "ui-table-priority-",
columnToggleTable: "ui-table-columntoggle"
})
},
_create: function() {
var o = this.options;
this._super();
if( o.mode !== "columntoggle" ) {
return;
}
$.extend( this, {
_menu: null,
_menuButton: null
});
if( o.usePop) {
if( o.enhanced ) {
this._menu = this.document.find( this._id() + "-popup" ).children().first();
} else {
this._menu = this._enhanceColToggle();
this._setTableClasses();
}
this._setupEvents();
this._setToggleState();
} else {
this._setTableClasses();
// add responsive CSS
this._addResponsiveClassAndLabel();
}
if (o.wrap) {
this._wrapTable();
}
},
_id: function() {
return ( this.element.attr( "id" ) || ( this.widgetName + this.uuid ) );
},
_setTableClasses: function () {
this.element.addClass( this.options.classes.columnToggleTable );
},
_setupEvents: function() {
//NOTE: inputs are bound in bindToggles,
// so it can be called on refresh, too
// update column toggles on resize
this._on( $.mobile.window, {
throttledresize: "_setToggleState"
});
},
_bindToggles: function( menu ) {
var inputs = menu.find( "input" );
this._on( inputs, {
change: "_menuInputChange"
});
},
_addResponsiveClassAndLabel: function ( keep ) {
var o = this.options;
this.headers.not( "td" ).each( function() {
var header = $( this ),
priority = $.mobile.getAttribute( this, "priority", true ),
cells = header.add( header.jqmData( "cells" ) );
if( priority ) {
cells.addClass( o.classes.priorityPrefix + priority );
if ( !keep && o.usePop ) {
$("<label><input type='checkbox' checked />" + header.text() + "</label>" )
.appendTo( menu )
.children( 0 )
.jqmData( "cells", cells )
.checkboxradio( {
theme: o.columnPopupTheme
});
}
}
});
},
_addToggles: function( menu, keep ) {
var opts = this.options;
// allow update of menu on refresh (fixes #5880)
if ( !keep ) {
menu.empty();
}
this._addResponsiveClassAndLabel(keep);
// set bindings here
if ( !keep ) {
this._bindToggles( menu );
}
},
_menuInputChange: function( evt ) {
var input = $( evt.target ),
checked = input[ 0 ].checked;
input.jqmData( "cells" )
.toggleClass( "ui-table-cell-hidden", !checked )
.toggleClass( "ui-table-cell-visible", checked );
if ( input[ 0 ].getAttribute( "locked" ) ) {
input.removeAttr( "locked" );
this._unlockCells( input.jqmData( "cells" ) );
} else {
input.attr( "locked", true );
}
},
_unlockCells: function( cells ) {
// allow hide/show via CSS only = remove all toggle-locks
cells.removeClass( "ui-table-cell-hidden ui-table-cell-visible");
},
_toLetter: function (n) {
return n.toString(26).replace(/./g, function( c ) {
return String.fromCharCode( c.charCodeAt(0) + ( isNaN( +c ) ? 10 : 49 ));
});
},
_generateWrapper: function ( grids ) {
return $("<div class='ui-table-wrapper ui-table-wrapper-inset " +
(this.options.embedded ? "" : "ui-corner-all") + "'>")
.append(
$.map(new Array( grids ), function(){
return $("<div/>");
})
)
.grid({ grid: grids > 1 ? this._toLetter(grids-2) : "solo" });
},
_enhanceColToggle: function() {
var id, popup, menu,
table = this.element,
opts = this.options,
ns = $.mobile.ns,
fragment = this.document[ 0 ].createDocumentFragment();
id = this._id() + "-popup";
this._menuButton = $( "<a role='button' href='#" + id + "' " +
"class='" + opts.classes.columnBtn + " ui-btn ui-btn-" + ( opts.columnBtnTheme || "a" ) + " ui-corner-all ui-shadow ui-mini ui-icon ui-btn-icon-left ui-icon-"+ opts.columnBtnIcon +"' " +
"data-" + ns + "rel='popup' " +
"data-" + ns + "icon='" + opts.columnBtnIcon + "' " +
"data-" + ns + "mini='true'>" + opts.columnBtnText + "</a>" );
popup = $( "<div data-" + ns + "role='popup' data-" + ns + "role='fieldcontain' class='" + opts.classes.popup + "' id='" + id + "'></div>" );
menu = $( "<fieldset data-" + ns + "role='controlgroup'></fieldset>" );
// set extension here, send "false" to trigger build/rebuild
this._addToggles( menu, false );
menu.appendTo( popup );
fragment.appendChild( popup[ 0 ] );
if (opts.columnBtnShow) {
fragment.appendChild( this._menuButton[ 0 ] );
}
table.before( fragment );
popup.popup().enhanceWithin();
// always return the menu
return menu;
},
// wrappers
// TODO: not nice, should be possible to wrap top with 3 elements
// and then where do you put the toggle button
// TODO: also not nice, because no way to latch on the filter
// TODO: also not nice, because data-slot-id is not used.
_wrapTable: function () {
var front, back, slots, fill, i, item,
opts = this.options,
table = this.element;
fill = table.parent().find( "div[data-slot]" );
if (opts.wrap === "both") {
front = this._generateWrapper( opts.topGrid ).addClass("ui-table-wrapper-top");
back = this._generateWrapper( opts.bottomGrid ).addClass("ui-table-wrapper-bottom");
if (fill) {
slots = front.add( back ).children("div");
for (i = 0; i < fill.length; i += 1) {
item = parseFloat(fill.eq(i).jqmData("slot-id"))-1;
fill.eq(i)
.find("label")
.addClass("ui-hidden-accessible")
.end()
.appendTo(
slots.eq( opts.usePop ? (item || (i === 2 ? 3 : i)) : item )
);
}
}
// move toggle button
if (opts.columnBtnShow && this._menuButton) {
front.children("div").last().append( this._menuButton[ 0 ] );
}
// not possible in one-go...
table.before(front);
table.after(back);
} else {
front = this._generateWrapper( opts.topGrid || opts.bottomGrid || 3).addClass("ui-table-wrapper-top");
if (fill.length) {
slots = front.children("div");
for (i = 0; i < fill.length; i += 1) {
fill.eq(i)
.find("label")
.addClass("ui-hidden-accessible")
.end()
// skip slot 2
.appendTo( opts.usePop ? (slots.eq( i === 2 ? 3 : i )) : i );
}
}
if (opts.columnBtnShow) {
front.children("div").last().append( this._menuButton );
}
// not possible in one-go...
table[ opts.wrap === "top" ? "before" : "after"](front)
}
},
rebuild: function() {
this._super();
if ( this.options.mode === "columntoggle" ) {
// NOTE: rebuild passes "false", while refresh passes "undefined"
// both refresh the table, but inside addToggles, !false will be true,
// so a rebuild call can be indentified
this._refresh( false );
}
},
_refresh: function( create ) {
this._super( create );
if ( !create && this.options.mode === "columntoggle" && this.options.usePop ) {
// columns not being replaced must be cleared from input toggle-locks
this._unlockCells( this.allHeaders );
// update columntoggles and cells
this._addToggles( this._menu, create );
// check/uncheck
this._setToggleState();
}
},
_setToggleState: function() {
this._menu.find( "input" ).each( function() {
var checkbox = $( this );
this.checked = checkbox.jqmData( "cells" ).eq( 0 ).css( "display" ) === "table-cell";
checkbox.checkboxradio( "refresh" );
});
},
_destroy: function() {
this._super();
}
});
})( jQuery );
(function( $, undefined ) {
$.widget( "mobile.table", $.mobile.table, {
options: {
mode: "reflow",
classes: $.extend( $.mobile.table.prototype.options.classes, {
reflowTable: "ui-table-reflow",
cellLabels: "ui-table-cell-label"
})
},
_create: function() {
this._super();
// If it's not reflow mode, return here.
if( this.options.mode !== "reflow" ) {
return;
}
if( !this.options.enhanced ) {
this.element.addClass( this.options.classes.reflowTable );
this._updateReflow();
}
},
rebuild: function() {
this._super();
if ( this.options.mode === "reflow" ) {
this._refresh( false );
}
},
_refresh: function( create ) {
this._super( create );
if ( !create && this.options.mode === "reflow" ) {
this._updateReflow( );
}
},
_updateReflow: function() {
var table = this,
opts = this.options;
// get headers in reverse order so that top-level headers are appended last
$( table.allHeaders.get().reverse() ).each( function() {
var cells = $( this ).jqmData( "cells" ),
colstart = $.mobile.getAttribute( this, "colstart", true ),
hierarchyClass = cells.not( this ).filter( "thead th" ).length && " ui-table-cell-label-top",
text = $( this ).text(),
iteration, filter;
if ( text !== "" ) {
if( hierarchyClass ) {
iteration = parseInt( this.getAttribute( "colspan" ), 10 );
filter = "";
if ( iteration ){
filter = "td:nth-child("+ iteration +"n + " + ( colstart ) +")";
}
table._addLabels( cells.filter( filter ), opts.classes.cellLabels + hierarchyClass, text );
} else {
table._addLabels( cells, opts.classes.cellLabels, text );
}
}
});
},
_addLabels: function( cells, label, text ) {
// .not fixes #6006
cells.not( ":has(b." + label + ")" ).prepend( "<b class='" + label + "'>" + text + "</b>" );
}
});
})( jQuery );
/* ====================================== COLLAPSIBLE =====================*/
(function( $, undefined ) {
var rInitialLetter = /([A-Z])/g;
$.widget( "mobile.collapsible", {
options: {
enhanced: false,
expandCueText: null,
collapseCueText: null,
collapsed: true,
heading: "h1,h2,h3,h4,h5,h6,legend",
icon: null,
collapsedIcon: null,
expandedIcon: null,
iconpos: null,
theme: null,
contentTheme: null,
inset: null,
corners: null,
mini: null
},
_create: function() {
var elem = this.element,
ui = {
accordion: elem
.closest( ":jqmData(role='collapsible-set')" +
( $.mobile.collapsibleset ? ", :mobile-collapsibleset" : "" ) )
.addClass( "ui-collapsible-set" )
};
$.extend( this, {
_ui: ui
});
if ( this.options.enhanced ) {
ui.heading = $( ".ui-collapsible-heading", this.element[ 0 ] );
ui.content = ui.heading.next();
ui.anchor = $( "a", ui.heading[ 0 ] ).first();
ui.status = ui.anchor.children( ".ui-collapsible-heading-status" );
} else {
this._enhance( elem, ui );
}
this._on( ui.heading, {
"tap": function() {
ui.heading.find( "a" ).first().addClass( $.mobile.activeBtnClass );
},
"click": function( event ) {
this._handleExpandCollapse( !ui.heading.hasClass( "ui-collapsible-heading-collapsed" ) );
event.preventDefault();
event.stopPropagation();
}
});
},
// Adjust the keys inside options for inherited values
_getOptions: function( options ) {
var key,
accordion = this._ui.accordion,
accordionWidget = this._ui.accordionWidget;
// Copy options
options = $.extend( {}, options );
if ( accordion.length && !accordionWidget ) {
this._ui.accordionWidget =
accordionWidget = accordion.data( "mobile-collapsibleset" );
}
for ( key in options ) {
// Retrieve the option value first from the options object passed in and, if
// null, from the parent accordion or, if that's null too, or if there's no
// parent accordion, then from the defaults.
options[ key ] =
( options[ key ] != null ) ? options[ key ] :
( accordionWidget ) ? accordionWidget.options[ key ] :
accordion.length ? $.mobile.getAttribute( accordion[ 0 ],
key.replace( rInitialLetter, "-$1" ).toLowerCase(), true ):
null;
if ( null == options[ key ] ) {
options[ key ] = $.mobile.collapsible.defaults[ key ];
}
}
return options;
},
_themeClassFromOption: function( prefix, value ) {
return ( value ? ( value === "none" ? "" : prefix + value ) : "" );
},
_enhance: function( elem, ui ) {
var iconclass,
opts = this._getOptions( this.options ),
contentThemeClass = this._themeClassFromOption( "ui-body-", opts.contentTheme );
elem.addClass( "ui-collapsible " +
( opts.inset ? "ui-collapsible-inset " : "" ) +
( opts.inset && opts.corners ? "ui-corner-all " : "" ) +
( contentThemeClass ? "ui-collapsible-themed-content " : "" ) );
ui.originalHeading = elem.children( this.options.heading ).first(),
ui.content = elem
.wrapInner( "<div " +
"class='ui-collapsible-content " +
contentThemeClass + "'></div>" )
.children( ".ui-collapsible-content" ),
ui.heading = ui.originalHeading;
// Replace collapsibleHeading if it's a legend
if ( ui.heading.is( "legend" ) ) {
ui.heading = $( "<div role='heading'>"+ ui.heading.html() +"</div>" );
ui.placeholder = $( "<div><!-- placeholder for legend --></div>" ).insertBefore( ui.originalHeading );
ui.originalHeading.remove();
}
iconclass = ( opts.icon === false ? "ui-collapsible-hide-icon " : "" ) +
( opts.collapsed ? ( opts.collapsedIcon ? "ui-icon-" + opts.collapsedIcon : "" ) :
( opts.expandedIcon ? "ui-icon-" + opts.expandedIcon : "" ));
ui.status = $( "<span class='ui-collapsible-heading-status'></span>" );
ui.anchor = ui.heading
.detach()
//modify markup & attributes
.addClass( "ui-collapsible-heading" )
.append( ui.status )
.contents()
.filter(function() {
return this.nodeType === 3;
})
.wrap( "<a href='#' class='ui-collapsible-heading-toggle'></a>" )
.parents(".ui-collapsible-heading")
.find( "a" )
.first()
.addClass( "ui-btn " +
( iconclass ? iconclass + " " : "" ) +
( iconclass ? ( "ui-btn-icon-" +
( opts.iconpos === "right" ? "right" : "left" ) ) +
" " : "" ) +
this._themeClassFromOption( "ui-btn-", opts.theme ) + " " +
( opts.mini ? "ui-mini " : "" ) );
//drop heading in before content
ui.heading.insertBefore( ui.content );
this._handleExpandCollapse( this.options.collapsed );
return ui;
},
refresh: function() {
var key, options = {};
for ( key in $.mobile.collapsible.defaults ) {
options[ key ] = this.options[ key ];
}
this._setOptions( options );
},
_setOptions: function( options ) {
var isCollapsed, newTheme, oldTheme,
elem = this.element,
currentOpts = this.options,
ui = this._ui,
anchor = ui.anchor,
status = ui.status,
opts = this._getOptions( options );
// First and foremost we need to make sure the collapsible is in the proper
// state, in case somebody decided to change the collapsed option at the
// same time as another option
if ( options.collapsed !== undefined ) {
this._handleExpandCollapse( options.collapsed );
}
isCollapsed = elem.hasClass( "ui-collapsible-collapsed" );
// Only options referring to the current state need to be applied right away
// It is enough to store options covering the alternate in this.options.
if ( isCollapsed ) {
if ( opts.expandCueText !== undefined ) {
status.text( opts.expandCueText );
}
if ( opts.collapsedIcon !== undefined ) {
if ( currentOpts.collapsedIcon ) {
anchor.removeClass( "ui-icon-" + currentOpts.collapsedIcon );
}
if ( opts.collapsedIcon ) {
anchor.addClass( "ui-icon-" + opts.collapsedIcon );
}
}
} else {
if ( opts.collapseCueText !== undefined ) {
status.text( opts.collapseCueText );
}
if ( opts.expandedIcon !== undefined ) {
if ( currentOpts.expandedIcon ) {
anchor.removeClass( "ui-icon-" + currentOpts.expandedIcon );
}
if ( opts.expandedIcon ) {
anchor.addClass( "ui-icon-" + opts.expandedIcon );
}
}
}
if ( opts.iconpos !== undefined ) {
anchor.removeClass( "ui-btn-icon-" + ( currentOpts.iconPos === "right" ? "right" : "left" ) );
anchor.addClass( "ui-btn-icon-" + ( opts.iconPos === "right" ? "right" : "left" ) );
}
if ( opts.theme !== undefined ) {
oldTheme = this._themeClassFromOption( "ui-btn-", currentOpts.theme );
newTheme = this._themeClassFromOption( "ui-btn-", opts.theme );
anchor.removeClass( oldTheme ).addClass( newTheme );
}
if ( opts.contentTheme !== undefined ) {
oldTheme = this._themeClassFromOption( "ui-body-", currentOpts.theme );
newTheme = this._themeClassFromOption( "ui-body-", opts.theme );
ui.content.removeClass( oldTheme ).addClass( newTheme );
}
// It is important to apply "inset" before corners, because the new value of
// "inset" can affect whether we display corners or not. Note that setting
// the "inset" option to false does not cause a change in the value of
// this.options.corners - it merely causes a change in the interpretation of
// the value of the "corners" option.
if ( opts.inset !== undefined ) {
elem.toggleClass( "ui-collapsible-inset", opts.inset );
currentOpts.inset = opts.inset;
if ( !opts.inset ) {
opts.corners = false;
}
}
if ( opts.corners !== undefined ) {
elem.toggleClass( "ui-corner-all", currentOpts.inset && opts.corners );
}
if ( opts.mini !== undefined ) {
anchor.toggleClass( "ui-mini", opts.mini );
}
this._super( options );
},
_handleExpandCollapse: function( isCollapse ) {
var opts = this._getOptions( this.options ),
ui = this._ui;
if ( !this._trigger( isCollapse ? "beforecollapse" : "beforeexpand" ) ) {
return;
}
ui.status.text( isCollapse ? opts.expandCueText : opts.collapseCueText );
ui.heading
.toggleClass( "ui-collapsible-heading-collapsed", isCollapse )
.find( "a" ).first()
.toggleClass( "ui-icon-" + opts.expandedIcon, !isCollapse )
// logic or cause same icon for expanded/collapsed state would remove the ui-icon-class
.toggleClass( "ui-icon-" + opts.collapsedIcon, ( isCollapse || opts.expandedIcon === opts.collapsedIcon ) )
.removeClass( $.mobile.activeBtnClass );
this.element.toggleClass( "ui-collapsible-collapsed", isCollapse );
ui.content
.toggleClass( "ui-collapsible-content-collapsed", isCollapse )
.attr( "aria-hidden", isCollapse )
.trigger( "updatelayout" );
this.options.collapsed = isCollapse;
this._trigger( isCollapse ? "collapse" : "expand" );
},
expand: function() {
this._handleExpandCollapse( false );
},
collapse: function() {
this._handleExpandCollapse( true );
},
_destroy: function() {
var ui = this._ui,
opts = this.options;
if ( opts.enhanced ) {
return;
}
if ( ui.placeholder ) {
ui.originalHeading.insertBefore( ui.placeholder );
ui.placeholder.remove();
ui.heading.remove();
} else {
ui.status.remove();
ui.heading
.removeClass( "ui-collapsible-heading ui-collapsible-heading-collapsed" )
.children()
.contents()
.unwrap();
}
ui.anchor.contents().unwrap();
ui.content.contents().unwrap();
this.element
.removeClass( "ui-collapsible ui-collapsible-collapsed " +
"ui-collapsible-themed-content ui-collapsible-inset ui-corner-all" );
}
});
// Defaults to be used by all instances of collapsible if per-instance values
// are unset or if nothing is specified by way of inheritance from an accordion.
// Note that this hash does not contain options "collapsed" or "heading",
// because those are not inheritable.
$.mobile.collapsible.defaults = {
expandCueText: " click to expand contents",
collapseCueText: " click to collapse contents",
collapsedIcon: "plus",
expandedIcon: "minus",
iconpos: "left",
inset: true,
corners: true,
mini: false
};
})( jQuery );
/* ============================= before expand/collapse ================== */
/*
$.widget( "mobile.collapsible", $.mobile.collapsible, {
_handleExpandCollapse: function( isCollapse ) {
if ( this._trigger( "collapsiblebefore" +
( isCollapse ? "collapse" : "expand" ) ) ) {
this._superApply( arguments );
}
}
});
*/
/* ============================= COLLAPSIBLE_SET =========================*/
(function( $, undefined ) {
var childCollapsiblesSelector = ":mobile-collapsible, " + $.mobile.collapsible.initSelector;
$.widget( "mobile.collapsibleset", $.extend( {
// The initSelector is deprecated as of 1.4.0. In 1.5.0 we will use
// :jqmData(role='collapsibleset') which will allow us to get rid of the line
// below altogether, because the autoinit will generate such an initSelector
initSelector: ":jqmData(role='collapsible-set'),:jqmData(role='collapsibleset')",
options: $.extend( {
enhanced: false,
type: null
}, $.mobile.collapsible.defaults ),
_isSetAndClose: function ( parent, allClosed ) {
if (allClosed) {
return parent.children().length === parent.children(".ui-collapsible-collapsed").length;
}
return parent.is( ":mobile-collapsibleset, :jqmData(role='collapsible-set')" );
},
_handleCollapsibleExpand: function( event ) {
var closestCollapsible = $( event.target ).closest( ".ui-collapsible" ),
parentElement = closestCollapsible.parent();
if ( this._isSetAndClose( parentElement ) ) {
closestCollapsible
.siblings( ".ui-collapsible:not(.ui-collapsible-collapsed)" )
.collapsible( "collapse" );
parentElement.toggleClass("ui-collapsible-set-all-closed", this._isSetAndClose( parentElement, true) );
}
},
_handleCollapsibleCollapse: function ( event ) {
var closestCollapsible = $( event.target ).closest( ".ui-collapsible" ),
parentElement = closestCollapsible.parent();
if ( this._isSetAndClose( parentElement ) ) {
parentElement.toggleClass("ui-collapsible-set-all-closed", this._isSetAndClose( parentElement, true) );
}
},
_create: function() {
var elem = this.element,
opts = this.options;
$.extend( this, {
_classes: ""
});
if ( !opts.enhanced ) {
elem.addClass( "ui-collapsible-set " +
this._themeClassFromOption( "ui-group-theme-", opts.theme ) + " " +
( opts.corners && opts.inset ? "ui-corner-all " : "" ) );
// tabs
if (opts.type) {
elem.addClass( "ui-collapsible-tabs" );
}
this.element.find( $.mobile.collapsible.initSelector ).collapsible();
}
this._on( elem, {
collapsibleexpand: "_handleCollapsibleExpand",
collapsiblecollapse: "_handleCollapsibleCollapse"
} );
},
_themeClassFromOption: function( prefix, value ) {
return ( value ? ( value === "none" ? "" : prefix + value ) : "" );
},
_init: function() {
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
this.element
.children( childCollapsiblesSelector )
.filter( ":jqmData(collapsed='false')" )
.collapsible( "expand" );
},
_setOptions: function( options ) {
var ret,
elem = this.element,
themeClass = this._themeClassFromOption( "ui-group-theme-", options.theme );
if ( themeClass ) {
elem
.removeClass( this._themeClassFromOption( "ui-group-theme-", this.options.theme ) )
.addClass( themeClass );
}
if ( options.corners !== undefined ) {
elem.toggleClass( "ui-corner-all", options.corners );
}
ret = this._super( options );
this.element.children( ":mobile-collapsible" ).collapsible( "refresh" );
return ret;
},
_destroy: function() {
var el = this.element;
this._removeFirstLastClasses( el.children( childCollapsiblesSelector ) );
el
.removeClass( "ui-collapsible-set ui-corner-all " +
this._themeClassFromOption( "ui-group-theme", this.options.theme ) )
.children( ":mobile-collapsible" )
.collapsible( "destroy" );
},
_refresh: function( create ) {
var collapsiblesInSet = this.element.children( childCollapsiblesSelector );
this.element.find( $.mobile.collapsible.initSelector ).not( ".ui-collapsible" ).collapsible();
this._addFirstLastClasses( collapsiblesInSet, this._getVisibles( collapsiblesInSet, create ), create );
},
refresh: function() {
this._refresh( false );
}
}, $.mobile.behaviors.addFirstLastClasses ) );
})( jQuery );
/* ========================= SELECT ========================= */
(function( $, undefined ) {
$.widget( "mobile.selectmenu", $.extend( {
initSelector: "select:not( :jqmData(role='slider')):not( :jqmData(role='flipswitch') )",
options: {
theme: null,
disabled: false,
icon: "carat-d",
iconpos: "right",
inline: false,
corners: true,
shadow: true,
iconshadow: false, /* TODO: Deprecated in 1.4, remove in 1.5. */
overlayTheme: null,
dividerTheme: null,
hidePlaceholderMenuItems: true,
closeText: "Close",
nativeMenu: true,
// This option defaults to true on iOS devices.
preventFocusZoom: /iPhone|iPad|iPod/.test( navigator.platform ) && navigator.userAgent.indexOf( "AppleWebKit" ) > -1,
mini: false,
enhanced: false
},
_button: function() {
return $( "<div/>" );
},
_setDisabled: function( value ) {
this.element.attr( "disabled", value );
this.button.attr( "aria-disabled", value );
return this._setOption( "disabled", value );
},
_focusButton : function() {
var self = this;
setTimeout( function() {
self.button.focus();
}, 40);
},
_selectOptions: function() {
return this.select.find( "option" );
},
_destroy: function() {
var wrapper = this.element.parents( ".ui-select" );
if ( wrapper.length > 0 ) {
if ( wrapper.is( ".ui-btn-left, .ui-btn-right" ) ) {
this.element.addClass( wrapper.hasClass( "ui-btn-left" ) ? "ui-btn-left" : "ui-btn-right" );
}
this.element.insertAfter( wrapper );
wrapper.remove();
}
},
_enhance: function () {
// setup items that are generally necessary for select menu extension
var classes,
o = this.options,
el = this.element[0],
iconpos = o.icon ? ( o.iconpos || el.getAttribute( "data-iconpos" ) ) : false;
// TODO: move all(?) classes on wrapper or only ui-btn-left/right?
classes = el.className +
(o.mini || el.getAttribute( "data-mini" )) ? " ui-mini" : "" +
(o.inline || el.getAttribute( "data-inline" )) ? " ui-btn-inline" : "";
this.select = this.element.removeClass( "ui-btn-left ui-btn-right" ).wrap( "<div class='ui-select" + classes + "'>" );
this.selectId = this.select.attr( "id" ) || ( "select-" + this.uuid );
this.buttonId = this.selectId + "-button";
this.label = $( "label[for='"+ this.selectId +"']" );
this.button = this._button()
.insertBefore( this.select )
.attr( "id", this.buttonId )
.addClass( "ui-btn" +
( o.icon ? ( " ui-icon-" + o.icon + " ui-btn-icon-" + iconpos +
( o.iconshadow ? " ui-shadow-icon" : "" ) ) : "" ) + /* TODO: Remove in 1.5. */
( o.theme ? " ui-btn-" + o.theme : "" ) +
( o.corners ? " ui-corner-all" : "" ) +
( o.shadow ? " ui-shadow" : "" ) );
// Add button text placeholder
this.buttonText = $ ( "<span>" )
.appendTo( this.button );
this._setMultiple();
// Add counter for multi selects
if ( this.isMultiple ) {
this.buttonCount = $( "<span>" )
.addClass( "ui-li-count ui-body-inherit" )
.hide()
.appendTo( this.button.addClass( "ui-li-has-count" ) );
}
},
_setMultiple: function () {
// TODO: are multiples supported in regular select?
this.isMultiple = this.select[ 0 ].multiple;
},
_create: function() {
var self = this,
o = this.options;
if (o.enhanced) {
this.button = this.element.parent();
this.select = this.element;
this.selectId = this.select[0].id;
this.buttonId = this.button[0].id;
this.label = this.element.prev("label");
this.buttonText = this.button.find("span").first();
this._setMultiple();
if (this.isMultiple) {
this.buttonCount = this.button.find("span").last();
}
} else {
this._enhance();
}
this.setButtonText();
// 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 ) {
this.button.addClass( "ui-select-nativeonly" );
}
// Disable if specified
if ( o.disabled || this.element.attr( "disabled" )) {
this.disable();
}
// Events on native select
this.select.change(function() {
self.refresh();
if ( !!o.nativeMenu ) {
this.blur();
}
});
this._handleFormReset();
this._on( this.button, {
keydown: "_handleKeydown"
});
this.build();
},
build: function() {
var self = this;
this.select
.appendTo( self.button )
.bind( "vmousedown", function() {
// Add active class to button
self.button.addClass( $.mobile.activeBtnClass );
})
.bind( "focus", function() {
self.button.addClass( $.mobile.focusClass );
})
.bind( "blur", function() {
self.button.removeClass( $.mobile.focusClass );
})
.bind( "focus vmouseover", function() {
self.button.trigger( "vmouseover" );
})
.bind( "vmousemove", function() {
// Remove active class on scroll/touchmove
self.button.removeClass( $.mobile.activeBtnClass );
})
.bind( "change blur vmouseout", function() {
self.button.trigger( "vmouseout" )
.removeClass( $.mobile.activeBtnClass );
});
// In many situations, iOS will zoom into the select upon tap, this prevents that from happening
self.button.bind( "vmousedown", function() {
if ( self.options.preventFocusZoom ) {
$.mobile.zoom.disable( true );
}
});
self.label.bind( "click focus", function() {
if ( self.options.preventFocusZoom ) {
$.mobile.zoom.disable( true );
}
});
self.select.bind( "focus", function() {
if ( self.options.preventFocusZoom ) {
$.mobile.zoom.disable( true );
}
});
self.button.bind( "mouseup", function() {
if ( self.options.preventFocusZoom ) {
setTimeout(function() {
$.mobile.zoom.enable( true );
}, 0 );
}
});
self.select.bind( "blur", function() {
if ( self.options.preventFocusZoom ) {
$.mobile.zoom.enable( true );
}
});
},
selected: function() {
return this._selectOptions().filter( ":selected" );
},
selectedIndices: function() {
var self = this;
return this.selected().map(function() {
return self._selectOptions().index( this );
}).get();
},
setButtonText: function() {
var self = this,
selected = this.selected(),
text = this.placeholder,
span = this.buttonText;
this.button.children( "span" ).not( ".ui-li-count" ).remove().end().end().prepend( (function() {
if ( selected.length ) {
text = selected.map(function() {
return $( this ).text();
}).get().join( ", " );
} else {
text = self.placeholder;
}
if ( text ) {
span.text( text );
} else {
span.html( "&nbsp;" );
}
// TODO possibly aggregate multiple select option classes
return this.buttonText = span
.addClass( self.select.attr( "class" ) )
.addClass( selected.attr( "class" ) )
.removeClass( "ui-screen-hidden" );
})());
},
setButtonCount: function() {
var selected = this.selected();
// multiple count inside button
if ( this.isMultiple ) {
this.buttonCount[ selected.length > 1 ? "show" : "hide" ]().text( selected.length );
}
},
_handleKeydown: function( /* event */ ) {
this._delay( "_refreshButton" );
},
_reset: function() {
this.refresh();
},
_refreshButton: function() {
this.setButtonText();
this.setButtonCount();
},
refresh: function() {
this._refreshButton();
},
// open and close preserved in native selects
// to simplify users code when looping over selects
open: $.noop,
close: $.noop,
disable: function() {
this._setDisabled( true );
this.button.addClass( "ui-state-disabled" );
},
enable: function() {
this._setDisabled( false );
this.button.removeClass( "ui-state-disabled" );
}
}, $.mobile.behaviors.formReset ) );
})( jQuery );
test/ext/jquery-mobile/jquery-mobile.css 0 → 100644
View file @ c9482b58
This source diff could not be displayed because it is too large. You can view the blob instead.
test/ext/jquery-mobile/jquery-mobile.js 0 → 100644
View file @ c9482b58
This source diff could not be displayed because it is too large. You can view the blob instead.
test/index.html
View file @ c9482b58
......@@ -5,31 +5,162 @@
<title>Integration Test</title>
<link rel="stylesheet" type="text/css" href="ext/qunit/qunit.css">
<link rel="stylesheet" type="text/css" href="setup/jqm_qunit.css">
<style type="text/css">
iframe {visibility: hidden;}
</style>
<script type="text/javascript" src="ext/qunit/qunit.js"></script>
<script type="text/javascript" src="ext/jquery/jquery.js"></script>
<script type="text/javascript" src="ext/jquery-mobile/jquery-mobile.js"></script>
<script type="text/javascript" src="setup/jquery.testHelper.js"></script>
<script type="text/javascript">
var contentLoaded;
// stay idle
QUnit.config.autostart = false;
$(document).ready(function() {
$("#testbed").load(function () {
var w, d, j;
console.log("loaded")
w = this.contentWindow;
d = this.contentDocument;
j = this.contentWindow.$;
console.log(w)
console.log(d)
console.log(j)
h = function (window, document, $) {
// DOMContentLoaded
contentLoaded = function (win, fn) {
var done = false,
top = true,
doc = win.document,
root = doc.documentElement,
add = doc.addEventListener ? 'addEventListener' : 'attachEvent',
rem = doc.addEventListener ? 'removeEventListener' : 'detachEvent',
pre = doc.addEventListener ? '' : 'on',
init = function (e) {
if (e.type === 'readystatechange' && doc.readyState !== 'complete') {
return;
}
(e.type === 'load' ? win : doc)[rem](pre + e.type, init, false);
if (!done) {
done = true;
fn.call(win, e.type || e);
}
},
poll = function () {
try {
root.doScroll('left');
} catch (e) {
window.setTimeout(poll, 50);
return;
}
init('poll');
};
if (doc.readyState === 'complete') {
fn.call(win, 'lazy');
} else {
if (doc.createEventObject && root.doScroll) {
try {
top = !win.frameElement;
} catch (ignore) {}
if (top) {
poll();
}
}
doc[add](pre + 'DOMContentLoaded', init, false);
doc[add](pre + 'readystatechange', init, false);
win[add](pre + 'load', init, false);
}
};
// =================== initialize ===================
contentLoaded(window, function () {
var frame = document.getElementById("testbed");
frame.onload = function (e) {
var el, w, d, j, trigger, helper;
el = e.target;
w = el.contentWindow;
d = el.contentDocument;
j = el.contentWindow.$;
helper = $.testHelper;
// ======================= start here ===========================
trigger = function (window, document, $, testHelper) {
var menu_button;
QUnit.start();
$.testHelper = testHelper;
// just a dummy....
window.setTimeout(function () {
// ========================
module( "Network Section" );
asyncTest( "Navigate to network page", function() {
var network_page, menu_button;
console.log(document.getElementsByTagName("div"));
expect( 8 );
$.testHelper.pageSequence([
function() {
menu_button= $("#global-header").find("a[data-rel='panel']");
ok( menu_button.length === 1, "Menu button exists, application init rendered correctly");
menu_button.trigger( "click" );
},
function() {
setTimeout(function() {
ok( $("#global-panel").hasClass("ui-panel-open"), "panel opens when clicking menu button" );
$("a[href='#networks']").trigger("click");
}, 800);
},
function(){
setTimeout(function(){
network_page = $("div.ui-page").last();
ok( network_page.length === 1, "network page loaded" );
}, 800);
},
function(){
var table, new_button;
setTimeout(function(){
table = network_page.find("table");
new_button = $("a[href='#networks/new']");
ok( table.length === 1, "network table generated" );
ok( table.find("tbody tr").length > 0, "network table has records (zero result record, or 1+ records" );
ok( new_button.length === 1, "New network button available");
new_button.trigger("click");
}, 1000);
},
function() {
var new_network, form, input, submit;
setTimeout(function(){
new_network = $("div.ui-page").last();
form = new_network.find("form");
input = form.find("div.ui-input-text input[type='text']");
submit = form.find("input[type='submit']");
ok( input.length === 1, "new network title input exits");
input.val("foobarbazbam");
submit.trigger("click");
}, 800);
},
function() {
var i, network_page, inputs, test_value;
setTimeout(function() {
network_page = $("div.ui-page").last();
inputs = network_page.find("input");
for (i = 0; i < inputs.length; i += 1) {
if (inputs.eq(i)[0].value === "foobarbazbam") {
test_value = true;
}
}
ok(test_value, "network has been generated and the name is matching what was entered before");
}, 1000);
},
function() {
start();
}
]);
})
}, 1000);
};
h(w, d, j);
});
// let's go
trigger(w, d, j, helper);
};
});
......@@ -37,11 +168,10 @@
</head>
<body>
<div id="qunit"></div>
<div id="playground">
<iframe id="testbed" src="../index.html">
Your browser doesn't support Iframes
</div>
<div id="qunit"></div>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7