From 18972a0cbbe96ae454865548421a4305dc501373 Mon Sep 17 00:00:00 2001 From: Federico Bologni Date: Fri, 30 Jun 2023 15:21:27 +0200 Subject: [PATCH] Add app bar --- index.html | 2 +- src/components/app-bar.js | 100 ++++++++++++++++++++++++++++++ src/components/bottom-app-bar.js | 12 ++-- src/css/app.css | 1 + src/css/routes-page.css | 0 src/js/home-page.js | 11 +++- src/js/router.js | 4 ++ src/js/routes-page.js | 47 ++++++++++++++ src/pages/routes-page.html | 14 +++++ static/images/back-arrow-icon.png | Bin 0 -> 1050 bytes 10 files changed, 182 insertions(+), 9 deletions(-) create mode 100644 src/components/app-bar.js create mode 100644 src/css/routes-page.css create mode 100644 src/js/routes-page.js create mode 100644 src/pages/routes-page.html create mode 100644 static/images/back-arrow-icon.png diff --git a/index.html b/index.html index 3921fca..38491ff 100644 --- a/index.html +++ b/index.html @@ -26,4 +26,4 @@ - \ No newline at end of file + diff --git a/src/components/app-bar.js b/src/components/app-bar.js new file mode 100644 index 0000000..66957bc --- /dev/null +++ b/src/components/app-bar.js @@ -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 = ` +
+ +
+
+ Percorsi naturalistici +
+
+ +
+`; +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 = ` + + ${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; + diff --git a/src/components/bottom-app-bar.js b/src/components/bottom-app-bar.js index b1701eb..f95da0f 100644 --- a/src/components/bottom-app-bar.js +++ b/src/components/bottom-app-bar.js @@ -1,16 +1,16 @@ -import homeIconUrl from '../../static/images/home-icon.png'; -import routesIconUrl from '../../static/images/routes-icon.png'; -import settingsIconUrl from '../../static/images/settings-icon.png'; +const homeIconURL = new URL('../../static/images/home-icon.png', import.meta.url).href; +const routesIconURL = new URL('../../static/images/routes-icon.png', import.meta.url).href; +const settingsIconURL = new URL('../../static/images/settings-icon.png', import.meta.url).href; const template = `
- +
- +
- +
`; const style = ` diff --git a/src/css/app.css b/src/css/app.css index 99af787..96b249d 100644 --- a/src/css/app.css +++ b/src/css/app.css @@ -2,6 +2,7 @@ :root { --footer-height: calc(68px + 20px + 20px); --accent-color: #213c8b; + --primary-color: #de0e1b; --pianello-red: #de0e1b; --pianello-yellow: #f6ae04; --pianello-blue: #213c8b; diff --git a/src/css/routes-page.css b/src/css/routes-page.css new file mode 100644 index 0000000..e69de29 diff --git a/src/js/home-page.js b/src/js/home-page.js index 1d01f85..1f340cc 100644 --- a/src/js/home-page.js +++ b/src/js/home-page.js @@ -1,6 +1,7 @@ import app from './app.js'; import pageStyle from '../css/home-page.css?raw'; import BottomAppBar from '../components/bottom-app-bar.js'; +import routesPageURL from '../pages/routes-page.html?url'; class HomePage { /** @@ -32,12 +33,18 @@ class HomePage { * Init `#elements` field that holds element references. */ #setElements() { - this.#elements = {}; + this.#elements = { + routeCards: document.querySelector('#route-cards'), + }; } /** */ - #addEventListeners() {} + #addEventListeners() { + this.#elements.routeCards.addEventListener('click', () => { + app.router.navigate(routesPageURL); + }); + } } export default HomePage; diff --git a/src/js/router.js b/src/js/router.js index 6939d5e..e915596 100644 --- a/src/js/router.js +++ b/src/js/router.js @@ -153,6 +153,10 @@ class Router { script: template.content.querySelector('#page-script')?.cloneNode(true), }; } + + back() { + history.back(); + } } export default Router; diff --git a/src/js/routes-page.js b/src/js/routes-page.js new file mode 100644 index 0000000..f820c4c --- /dev/null +++ b/src/js/routes-page.js @@ -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(); diff --git a/src/pages/routes-page.html b/src/pages/routes-page.html new file mode 100644 index 0000000..1e87f4f --- /dev/null +++ b/src/pages/routes-page.html @@ -0,0 +1,14 @@ + +
+ +
+ +
+
+ + + + + diff --git a/static/images/back-arrow-icon.png b/static/images/back-arrow-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..a3a656ebd4420bb945277cff9dff89f1aa6046ee GIT binary patch literal 1050 zcmeAS@N?(olHy`uVBq!ia0vp^8-O^4gN=cKF;KqiBap*c;1OBOz#uLN!i=ZXKHD=e zFrV>saSW-L^Y-q;(%A+gZHX(FGjEl?B3;r_#^QfT@KT^rlewqag5#Q>7@HV8zjMX@ zto>)|oATq2vknhsooubt;C2oH3_}V0Tm5@cVYc~=OKo;})o(b?Oy+qGmn>G87 z&sL-TFS4s%O3m5%)lj~S_k3rr|AW}a(yx2=KH5?BK7aS}Gtt&tcUS$}nd+{6v8ns} zzpLMx^$bcQxP5F3S(eS4#T-0&{(&oBj0{X0`J*a2r@VP1zVJZI)Z;zJX731F@$SvF zjZY$*!fu|N(p>W1vHM-jtIhX~w?w3{bDFKoaOW(Gzs4v0rts+XUpWtNT{sl}{h}l1 zH^tX1qGh#n1j<%Ek68R&sJD04-t~g(3_O4QzTYxC@v+pB8Qb(%SzWwm_~WSMbfJ5@ zi{GW0@;J)Bzbq%$=N9gCVX8ohDoZSJV5K4KfEOs%|E_n)jb*aN5AdxQJK?{8rpF&hHVr6Cm$6~J;^9g zBqin=G;QzWmKvVd%QUs`B|6xD{3tVuYcyZO0_eDGG z-)2vHYcOqxiN}7282VYExazsj3_h%82nU5C9a=I?tk#XH^qNd)P89)Ihh6Tqhzw@7DG+gHw SqZbLx>