mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-23 05:58:26 +08:00
test(nav): simplify simple-nested-navs test
This commit is contained in:
Dan Bucholtz
@ -5,376 +5,117 @@
|
|||||||
<title>Nav</title>
|
<title>Nav</title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||||
<script src="/dist/ionic.js"></script>
|
<script src="/dist/ionic.js"></script>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
class PageOne extends HTMLElement {
|
||||||
|
connectedCallback() {
|
||||||
|
this.innerHTML = `
|
||||||
|
<ion-page>
|
||||||
|
<ion-header>
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-back-button slot="start"></ion-back-button>
|
||||||
|
<ion-title>Page One</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
<ion-content padding>
|
||||||
|
<h1>Page One</h1>
|
||||||
|
<ion-nav-push component="page-two">
|
||||||
|
<ion-button class="next">Go to Page Two</ion-button>
|
||||||
|
</ion-nav-push>
|
||||||
|
</ion-content>
|
||||||
|
</ion-page>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class PageTwo extends HTMLElement {
|
||||||
|
connectedCallback() {
|
||||||
|
this.innerHTML = `
|
||||||
|
<ion-nav root="page-two-section-one"></ion-nav>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class PageTwoSectionOne extends HTMLElement {
|
||||||
|
connectedCallback() {
|
||||||
|
this.innerHTML = `
|
||||||
|
<ion-page>
|
||||||
|
<ion-header>
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-back-button slot="start"></ion-back-button>
|
||||||
|
<ion-title>Page Two Section One</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
<ion-content padding>
|
||||||
|
<h1>Page Two Section One</h1>
|
||||||
|
<ion-nav-push component="page-two-section-two">
|
||||||
|
<ion-button class="next">Go to Page Two Section Two</ion-button>
|
||||||
|
</ion-nav-push>
|
||||||
|
<ion-nav-pop>
|
||||||
|
<ion-button class="previous">Go Back</ion-button>
|
||||||
|
</ion-nav-pop>
|
||||||
|
</ion-content>
|
||||||
|
</ion-page>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class PageTwoSectionTwo extends HTMLElement {
|
||||||
|
connectedCallback() {
|
||||||
|
this.innerHTML = `
|
||||||
|
<ion-page>
|
||||||
|
<ion-header>
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-back-button slot="start"></ion-back-button>
|
||||||
|
<ion-title>Page Two Section Two</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
<ion-content padding>
|
||||||
|
<h1>Page Two Section Two</h1>
|
||||||
|
<ion-nav-push component="page-three">
|
||||||
|
<ion-button class="next">Go to Page Three</ion-button>
|
||||||
|
</ion-nav-push>
|
||||||
|
<ion-nav-pop>
|
||||||
|
<ion-button class="previous">Go Back</ion-button>
|
||||||
|
</ion-nav-pop>
|
||||||
|
</ion-content>
|
||||||
|
</ion-page>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class PageThree extends HTMLElement {
|
||||||
|
connectedCallback() {
|
||||||
|
this.innerHTML = `
|
||||||
|
<ion-page>
|
||||||
|
<ion-header>
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-back-button slot="start"></ion-back-button>
|
||||||
|
<ion-title>Page Three</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
<ion-content padding>
|
||||||
|
<h1>Page Three</h1>
|
||||||
|
<ion-nav-pop>
|
||||||
|
<ion-button class="previous">Go Back</ion-button>
|
||||||
|
</ion-nav-pop>
|
||||||
|
</ion-content>
|
||||||
|
</ion-page>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define('page-one', PageOne);
|
||||||
|
customElements.define('page-two', PageTwo);
|
||||||
|
customElements.define('page-two-section-one', PageTwoSectionOne);
|
||||||
|
customElements.define('page-two-section-two', PageTwoSectionTwo);
|
||||||
|
customElements.define('page-three', PageThree);
|
||||||
|
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body onload="loadFirstPage()">
|
<body>
|
||||||
<ion-app>
|
<ion-app>
|
||||||
<ion-nav></ion-nav>
|
<ion-nav root="page-one"></ion-nav>
|
||||||
</ion-app>
|
</ion-app>
|
||||||
<style>
|
|
||||||
f {
|
|
||||||
display: block;
|
|
||||||
margin: 15px auto;
|
|
||||||
max-width: 150px;
|
|
||||||
height: 150px;
|
|
||||||
background: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
f:last-of-type {
|
|
||||||
background: yellow;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
async function loadFirstPage() {
|
|
||||||
const nav = document.querySelector('ion-nav');
|
|
||||||
await nav.componentOnReady();
|
|
||||||
const navOnePageOne = document.createElement('div');
|
|
||||||
navOnePageOne.classList.add('nav-one-page-one');
|
|
||||||
navOnePageOne.innerHTML = `
|
|
||||||
<ion-header>
|
|
||||||
<ion-toolbar>
|
|
||||||
<ion-back-button slot="start"></ion-back-button>
|
|
||||||
<ion-title>Nav One Page One</ion-title>
|
|
||||||
</ion-toolbar>
|
|
||||||
</ion-header>
|
|
||||||
<ion-content padding>
|
|
||||||
<h1>Nav One Page One</h1>
|
|
||||||
<ion-button class="next">Go to Nav One Page Two</ion-button>
|
|
||||||
</ion-content>
|
|
||||||
`;
|
|
||||||
|
|
||||||
await nav.push(navOnePageOne);
|
|
||||||
|
|
||||||
// okay cool, we're in the DOM now
|
|
||||||
const button = navOnePageOne.querySelector('ion-button');
|
|
||||||
button.addEventListener('click', async () => {
|
|
||||||
await goToNavOnePageTwo(nav);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function goToNavOnePageTwo(nav) {
|
|
||||||
const navOnePageTwo = document.createElement('div');
|
|
||||||
navOnePageTwo.classList.add('nav-one-page-two');
|
|
||||||
navOnePageTwo.innerHTML = `
|
|
||||||
<ion-header>
|
|
||||||
<ion-toolbar>
|
|
||||||
<ion-back-button slot="back-button">
|
|
||||||
<span slot="back-button-text">Back</span>
|
|
||||||
</ion-back-button>
|
|
||||||
<ion-title>Nav One Page Two</ion-title>
|
|
||||||
</ion-toolbar>
|
|
||||||
</ion-header>
|
|
||||||
<ion-content padding>
|
|
||||||
<h1>Nav One Page Two</h1>
|
|
||||||
<div>
|
|
||||||
<ion-button class="page-three">Go to Nav One Page Three</ion-button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<ion-button class="next">Go to Nav Two Page One</ion-button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<ion-button class="previous">Go Back to Nav One Page One</ion-button>
|
|
||||||
</div>
|
|
||||||
</ion-content>
|
|
||||||
`;
|
|
||||||
|
|
||||||
// okay cool, we're in the DOM now
|
|
||||||
await nav.push(navOnePageTwo);
|
|
||||||
|
|
||||||
const previousButton = navOnePageTwo.querySelector('ion-button .previous');
|
|
||||||
previousButton.addEventListener('click', async () => {
|
|
||||||
await nav.pop();
|
|
||||||
});
|
|
||||||
|
|
||||||
const nextButton = navOnePageTwo.querySelector('ion-button .next');
|
|
||||||
nextButton.addEventListener('click', async () => {
|
|
||||||
await goToNavTwo(nav);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function goToNavTwo(nav) {
|
|
||||||
const navTwoParent = document.createElement('div');
|
|
||||||
navTwoParent.classList.add('nav-two');
|
|
||||||
navTwoParent.innerHTML = `
|
|
||||||
<ion-nav></ion-nav>
|
|
||||||
`;
|
|
||||||
|
|
||||||
await nav.push(navTwoParent)
|
|
||||||
|
|
||||||
const navTwo = navTwoParent.querySelector('ion-nav');
|
|
||||||
await navTwo.componentOnReady();
|
|
||||||
|
|
||||||
goToNavTwoPageOne(nav, navTwo);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function goToNavTwoPageOne(nav, navTwo) {
|
|
||||||
const navTwoPageOne = document.createElement('div');
|
|
||||||
navTwoPageOne.classList.add('nav-two-page-one');
|
|
||||||
navTwoPageOne.innerHTML = `
|
|
||||||
<ion-header>
|
|
||||||
<ion-toolbar>
|
|
||||||
<ion-title>Nav Two Page One</ion-title>
|
|
||||||
</ion-toolbar>
|
|
||||||
</ion-header>
|
|
||||||
<ion-content padding>
|
|
||||||
<h1>Nav Two Page One</h1>
|
|
||||||
<div>
|
|
||||||
<ion-button class="next nav-one">Push on Nav One</ion-button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<ion-button class="next nav-two">Push on Nav Two</ion-button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<ion-button class="previous nav-one">Pop on Nav One</ion-button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<ion-button class="previous nav-two">Pop on Nav Two</ion-button>
|
|
||||||
</div>
|
|
||||||
</ion-content>
|
|
||||||
`;
|
|
||||||
|
|
||||||
// okay cool, we're in the DOM now
|
|
||||||
await navTwo.push(navTwoPageOne);
|
|
||||||
|
|
||||||
const pushNavOneButton = navTwoPageOne.querySelector('ion-button.next.nav-one');
|
|
||||||
pushNavOneButton.addEventListener('click', async () => {
|
|
||||||
await goToNavOnePageThree(nav);
|
|
||||||
});
|
|
||||||
|
|
||||||
const pushNavTwoButton = navTwoPageOne.querySelector('ion-button.next.nav-two');
|
|
||||||
pushNavTwoButton.addEventListener('click', async () => {
|
|
||||||
await goToNavTwoPageTwo(nav, navTwo);
|
|
||||||
});
|
|
||||||
|
|
||||||
const navOnePopButton = navTwoPageOne.querySelector('ion-button.previous.nav-one');
|
|
||||||
navOnePopButton.addEventListener('click', async () => {
|
|
||||||
await nav.pop();
|
|
||||||
});
|
|
||||||
|
|
||||||
const navTwoPopButton = navTwoPageOne.querySelector('ion-button.previous.nav-two');
|
|
||||||
navTwoPopButton.addEventListener('click', async () => {
|
|
||||||
await navTwo.pop();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function goToNavOnePageThree(nav) {
|
|
||||||
const navOnePageThree = document.createElement('div');
|
|
||||||
navOnePageThree.classList.add('nav-one-page-three');
|
|
||||||
navOnePageThree.innerHTML = `
|
|
||||||
<ion-header>
|
|
||||||
<ion-toolbar>
|
|
||||||
<ion-title>Nav One Page Three</ion-title>
|
|
||||||
</ion-toolbar>
|
|
||||||
</ion-header>
|
|
||||||
<ion-content padding>
|
|
||||||
<h1>Nav One Page Three</h1>
|
|
||||||
<ion-button class="previous">Go Back</ion-button>
|
|
||||||
</ion-content>
|
|
||||||
`;
|
|
||||||
|
|
||||||
// okay cool, we're in the DOM now
|
|
||||||
await nav.push(navOnePageThree);
|
|
||||||
|
|
||||||
const previousButton = navOnePageThree.querySelector('ion-button .previous');
|
|
||||||
previousButton.addEventListener('click', async () => {
|
|
||||||
await nav.pop();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function goToNavTwoPageTwo(navOne, navTwo) {
|
|
||||||
const navTwoPageTwo = document.createElement('div');
|
|
||||||
navTwoPageTwo.classList.add('nav-two-page-two');
|
|
||||||
navTwoPageTwo.innerHTML = `
|
|
||||||
<ion-header>
|
|
||||||
<ion-toolbar>
|
|
||||||
<ion-title>Nav Two Page Two</ion-title>
|
|
||||||
</ion-toolbar>
|
|
||||||
</ion-header>
|
|
||||||
<ion-content padding>
|
|
||||||
<h1>Nav Two Page Two</h1>
|
|
||||||
<div>
|
|
||||||
<ion-button class="nav-three next">Go To Nav Three Page One</ion-button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<ion-button class="previous">Go Back to Nav Two Page One</ion-button>
|
|
||||||
</div>
|
|
||||||
</ion-content>
|
|
||||||
`;
|
|
||||||
|
|
||||||
// okay cool, we're in the DOM now
|
|
||||||
await navTwo.push(navTwoPageTwo);
|
|
||||||
|
|
||||||
const nextButton = navTwoPageTwo.querySelector('ion-button .next');
|
|
||||||
nextButton.addEventListener('click', async () => {
|
|
||||||
await goToNavThree(navOne, navTwo);
|
|
||||||
});
|
|
||||||
|
|
||||||
const previousButton = navTwoPageTwo.querySelector('ion-button .previous');
|
|
||||||
previousButton.addEventListener('click', async () => {
|
|
||||||
await navTwo.pop();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function goToNavThree(navOne, navTwo) {
|
|
||||||
const navThreeParent = document.createElement('div');
|
|
||||||
navThreeParent.classList.add('nav-three');
|
|
||||||
navThreeParent.innerHTML = `
|
|
||||||
<ion-nav></ion-nav>
|
|
||||||
`;
|
|
||||||
|
|
||||||
await navTwo.push(navThreeParent);
|
|
||||||
|
|
||||||
const navThree = navThreeParent.querySelector('ion-nav');
|
|
||||||
|
|
||||||
await navThree.componentOnReady();
|
|
||||||
|
|
||||||
goToNavThreePageOne(navOne, navTwo, navThree);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function goToNavThreePageOne(navOne, navTwo, navThree) {
|
|
||||||
const navThreePageOne = document.createElement('div');
|
|
||||||
navThreePageOne.classList.add('nav-three-page-one');
|
|
||||||
navThreePageOne.innerHTML = `
|
|
||||||
<ion-header>
|
|
||||||
<ion-toolbar>
|
|
||||||
<ion-title>Nav Three Page One</ion-title>
|
|
||||||
</ion-toolbar>
|
|
||||||
</ion-header>
|
|
||||||
<ion-content padding>
|
|
||||||
<h1>Nav Three Page One</h1>
|
|
||||||
<div>
|
|
||||||
<ion-button class="next nav-one">Push on Nav One</ion-button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<ion-button class="next nav-two">Push on Nav Two</ion-button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<ion-button class="next nav-three">Push on Nav Three</ion-button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<ion-button class="previous nav-one">Pop on Nav One</ion-button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<ion-button class="previous nav-two">Pop on Nav Two</ion-button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<ion-button class="previous nav-three">Pop on Nav Three</ion-button>
|
|
||||||
</div>
|
|
||||||
</ion-content>
|
|
||||||
`;
|
|
||||||
|
|
||||||
// okay cool, we're in the DOM now
|
|
||||||
await navThree.push(navThreePageOne);
|
|
||||||
|
|
||||||
const pushNavOneButton = navThreePageOne.querySelector('ion-button.next.nav-one');
|
|
||||||
pushNavOneButton.addEventListener('click', async () => {
|
|
||||||
await goToNavOnePageThree(navOne);
|
|
||||||
});
|
|
||||||
|
|
||||||
const pushNavTwoButton = navThreePageOne.querySelector('ion-button.next.nav-two');
|
|
||||||
pushNavTwoButton.addEventListener('click', async () => {
|
|
||||||
await goToNavTwoPageThree(navOne, navTwo);
|
|
||||||
});
|
|
||||||
|
|
||||||
const pushNavThreeButton = navThreePageOne.querySelector('ion-button.next.nav-three');
|
|
||||||
pushNavThreeButton.addEventListener('click', async () => {
|
|
||||||
await goToNavThreePageTwo(navOne, navTwo, navThree);
|
|
||||||
});
|
|
||||||
|
|
||||||
const navOnePopButton = navThreePageOne.querySelector('ion-button.previous.nav-one');
|
|
||||||
navOnePopButton.addEventListener('click', async () => {
|
|
||||||
await navOne.pop();
|
|
||||||
});
|
|
||||||
|
|
||||||
const navTwoPopButton = navThreePageOne.querySelector('ion-button.previous.nav-two');
|
|
||||||
navTwoPopButton.addEventListener('click', async () => {
|
|
||||||
await navTwo.pop();
|
|
||||||
});
|
|
||||||
|
|
||||||
const navThreePopButton = navThreePageOne.querySelector('ion-button.previous.nav-three');
|
|
||||||
navThreePopButton.addEventListener('click', async () => {
|
|
||||||
await navThree.pop();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function goToNavTwoPageThree(navOne, navTwo) {
|
|
||||||
const navTwoPageThree = document.createElement('div');
|
|
||||||
navTwoPageThree.classList.add('nav-two-page-three');
|
|
||||||
navTwoPageThree.innerHTML = `
|
|
||||||
<ion-header>
|
|
||||||
<ion-toolbar>
|
|
||||||
<ion-title>Nav Two Page Three</ion-title>
|
|
||||||
</ion-toolbar>
|
|
||||||
</ion-header>
|
|
||||||
<ion-content padding>
|
|
||||||
<h1>Nav Two Page Three</h1>
|
|
||||||
<ion-button class="previous">Go Back</ion-button>
|
|
||||||
</ion-content>
|
|
||||||
`;
|
|
||||||
|
|
||||||
// okay cool, we're in the DOM now
|
|
||||||
await navTwo.push(navTwoPageThree);
|
|
||||||
|
|
||||||
const previousButton = navTwoPageThree.querySelector('ion-button .previous');
|
|
||||||
previousButton.addEventListener('click', async () => {
|
|
||||||
await navTwo.pop();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function goToNavThreePageTwo(navOne, navTwo, navThree) {
|
|
||||||
const navThreePageTwo = document.createElement('div');
|
|
||||||
navThreePageTwo.classList.add('nav-three-page-two');
|
|
||||||
navThreePageTwo.innerHTML = `
|
|
||||||
<ion-header>
|
|
||||||
<ion-toolbar>
|
|
||||||
<ion-title>Nav Three Page Two</ion-title>
|
|
||||||
</ion-toolbar>
|
|
||||||
</ion-header>
|
|
||||||
<ion-content padding>
|
|
||||||
<h1>Nav Three Page Two</h1>
|
|
||||||
<ion-button class="next">Go to Nav Three Page Three</ion-button>
|
|
||||||
<ion-button class="previous">Go Back to Nav Three Page One</ion-button>
|
|
||||||
</ion-content>
|
|
||||||
`;
|
|
||||||
|
|
||||||
// okay cool, we're in the DOM now
|
|
||||||
await navThree.push(navThreePageTwo);
|
|
||||||
|
|
||||||
const nextButton = navThreePageTwo.querySelector('ion-button .next');
|
|
||||||
nextButton.addEventListener('click', async () => {
|
|
||||||
goToNavThreePageThree(navOne, navTwo, navThree);
|
|
||||||
});
|
|
||||||
|
|
||||||
const previousButton = navThreePageTwo.querySelector('ion-button .previous');
|
|
||||||
previousButton.addEventListener('click', async () => {
|
|
||||||
await navThree.pop();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async function goToNavThreePageThree(navOne, navTwo, navThree) {
|
|
||||||
const navThreePageThree = document.createElement('div');
|
|
||||||
navThreePageThree.classList.add('nav-three-page-three');
|
|
||||||
navThreePageThree.innerHTML = `
|
|
||||||
<ion-header>
|
|
||||||
<ion-toolbar>
|
|
||||||
<ion-title>Nav Three Page Three</ion-title>
|
|
||||||
</ion-toolbar>
|
|
||||||
</ion-header>
|
|
||||||
<ion-content padding>
|
|
||||||
<h1>Nav Three Page Three</h1>
|
|
||||||
<ion-button class="previous">Go Back to Nav Three Page Two</ion-button>
|
|
||||||
</ion-content>
|
|
||||||
`;
|
|
||||||
|
|
||||||
// okay cool, we're in the DOM now
|
|
||||||
await navThree.push(navThreePageThree);
|
|
||||||
|
|
||||||
const previousButton = navThreePageThree.querySelector('ion-button .previous');
|
|
||||||
previousButton.addEventListener('click', async () => {
|
|
||||||
await navThree.pop();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user