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 0000000..a3a656e Binary files /dev/null and b/static/images/back-arrow-icon.png differ