Add app bar

This commit is contained in:
Federico Bologni 2023-06-30 15:21:27 +02:00
parent 3f3690b574
commit 18972a0cbb
Signed by: zbolo-wd
GPG key ID: DD44ECE4EE4DB604
10 changed files with 182 additions and 9 deletions

View file

@ -26,4 +26,4 @@
<script src="/src/js/index.js" type="module"></script> <script src="/src/js/index.js" type="module"></script>
</body> </body>
</html> </html>

100
src/components/app-bar.js Normal file
View file

@ -0,0 +1,100 @@
import app from '../js/app';
const appBarLogoURL = new URL('../../static/images/app-bar-logo.png', import.meta.url).href;
const backArrowIconURL = new URL('../../static/images/back-arrow-icon.png', import.meta.url).href;
const template = `
<div>
<img id="back-button" src="${backArrowIconURL}">
</div>
<div id="title">
Percorsi <span class="bold">naturalistici</span>
</div>
<div>
<img src="${appBarLogoURL}">
</div>
`;
const style = `
:host {
display: flex;
height: 100%;
min-height: 68px;
width: 100%;
background-color: var(--primary-color);
color: white;
}
:host > div {
display: grid;
place-items: center;
flex: 1;
}
#title {
display: flex;
place-items: center;
justify-content: center;
}
#title span {
font-weight: bold;
margin-left: 5px;
font-size: 18px;
}
img {
display: block;
// flex: 0 1 32px;
height: 32px;
width: auto;
}
`;
/**
* Bottom app bar custom element.
*/
class AppBar extends HTMLElement {
#elements = {};
/**
* @constructor
*/
constructor() {
super();
this.#createShadowDOM();
this.#setElements();
this.#addEventListeners();
}
/**
* Create shadow DOM.
*/
#createShadowDOM() {
this.attachShadow({mode: 'open'});
this.shadowRoot.innerHTML = `
<style>${style}</style>
${template}
`;
}
/**
* Set all shadow dom selectors.
*/
#setElements() {
this.#elements = {
backButton: this.shadowRoot.querySelector('#back-button'),
};
}
#addEventListeners() {
this.#elements.backButton.addEventListener('click', () => {
app.router.back();
});
}
}
customElements.define('app-bar', AppBar);
export default AppBar;

View file

@ -1,16 +1,16 @@
import homeIconUrl from '../../static/images/home-icon.png'; const homeIconURL = new URL('../../static/images/home-icon.png', import.meta.url).href;
import routesIconUrl from '../../static/images/routes-icon.png'; const routesIconURL = new URL('../../static/images/routes-icon.png', import.meta.url).href;
import settingsIconUrl from '../../static/images/settings-icon.png'; const settingsIconURL = new URL('../../static/images/settings-icon.png', import.meta.url).href;
const template = ` const template = `
<div> <div>
<img src="${homeIconUrl}"> <img src="${homeIconURL}">
</div> </div>
<div> <div>
<img src="${routesIconUrl}"> <img src="${routesIconURL}">
</div> </div>
<div> <div>
<img src="${settingsIconUrl}"> <img src="${settingsIconURL}">
</div> </div>
`; `;
const style = ` const style = `

View file

@ -2,6 +2,7 @@
:root { :root {
--footer-height: calc(68px + 20px + 20px); --footer-height: calc(68px + 20px + 20px);
--accent-color: #213c8b; --accent-color: #213c8b;
--primary-color: #de0e1b;
--pianello-red: #de0e1b; --pianello-red: #de0e1b;
--pianello-yellow: #f6ae04; --pianello-yellow: #f6ae04;
--pianello-blue: #213c8b; --pianello-blue: #213c8b;

0
src/css/routes-page.css Normal file
View file

View file

@ -1,6 +1,7 @@
import app from './app.js'; import app from './app.js';
import pageStyle from '../css/home-page.css?raw'; import pageStyle from '../css/home-page.css?raw';
import BottomAppBar from '../components/bottom-app-bar.js'; import BottomAppBar from '../components/bottom-app-bar.js';
import routesPageURL from '../pages/routes-page.html?url';
class HomePage { class HomePage {
/** /**
@ -32,12 +33,18 @@ class HomePage {
* Init `#elements` field that holds element references. * Init `#elements` field that holds element references.
*/ */
#setElements() { #setElements() {
this.#elements = {}; this.#elements = {
routeCards: document.querySelector('#route-cards'),
};
} }
/** /**
*/ */
#addEventListeners() {} #addEventListeners() {
this.#elements.routeCards.addEventListener('click', () => {
app.router.navigate(routesPageURL);
});
}
} }
export default HomePage; export default HomePage;

View file

@ -153,6 +153,10 @@ class Router {
script: template.content.querySelector('#page-script')?.cloneNode(true), script: template.content.querySelector('#page-script')?.cloneNode(true),
}; };
} }
back() {
history.back();
}
} }
export default Router; export default Router;

47
src/js/routes-page.js Normal file
View file

@ -0,0 +1,47 @@
import app from './app.js';
import pageStyle from '../css/routes-page.css?raw';
import AppBar from '../components/app-bar.js';
import BottomAppBar from '../components/bottom-app-bar.js';
class RoutesPage {
/**
* An object containing useful HTMLElement references.
* @type {Object}
*/
#elements = {};
constructor() {
this.#addPageStyle();
this.#setElements();
this.#addEventListeners();
}
/**
* @return {Object}
*/
get elements() {
return this.#elements;
}
#addPageStyle() {
const sheet = new CSSStyleSheet();
sheet.replaceSync(pageStyle);
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
}
/**
* Init `#elements` field that holds element references.
*/
#setElements() {
this.#elements = {};
}
/**
*/
#addEventListeners() {}
}
export default RoutesPage;
app.init();
app.page = new RoutesPage();

View file

@ -0,0 +1,14 @@
<body>
<header>
<app-bar></app-bar>
</header>
<main>
</main>
<footer>
<bottom-app-bar></bottom-app-bar>
</footer>
<script id="page-script" src="../js/routes-page.js" type="module"></script>
</body>

Binary file not shown.

After

Width:  |  Height:  |  Size: 1 KiB