From 7be76dd2f9fea9075046a117ab0540737332ce68 Mon Sep 17 00:00:00 2001 From: Alex Date: Fri, 11 Oct 2024 13:29:37 +0200 Subject: [PATCH] Add modal --- index.html | 18 +------- src/{components/app-base.js => app.js} | 64 ++++++++++++++++---------- src/components/custom-modal.js | 59 ++++++++++++++++++++++++ src/components/item-list.js | 26 +++++++---- src/components/main-window.js | 3 +- src/components/modal.js | 57 ----------------------- src/main.js | 5 -- src/modules/store.js | 15 ++++++ src/modules/text.js | 3 ++ 9 files changed, 136 insertions(+), 114 deletions(-) rename src/{components/app-base.js => app.js} (62%) create mode 100644 src/components/custom-modal.js delete mode 100644 src/components/modal.js diff --git a/index.html b/index.html index ba1f989..886a677 100644 --- a/index.html +++ b/index.html @@ -8,23 +8,7 @@ - - - - - + diff --git a/src/components/app-base.js b/src/app.js similarity index 62% rename from src/components/app-base.js rename to src/app.js index cd8a051..a631381 100644 --- a/src/components/app-base.js +++ b/src/app.js @@ -1,10 +1,14 @@ -import Store from '../modules/store.js'; -import text from '../modules/text.js'; +import './components/main-window.js'; +import './components/custom-button.js'; +import './components/item-list.js'; +import './components/custom-modal.js'; + +import Store from './modules/store.js'; +import text from './modules/text.js'; class AppBase extends HTMLElement { constructor() { super(); - this.attachShadow({ mode: 'open' }); this.text = text; this.properties = { color: '#324BFF', @@ -23,47 +27,51 @@ class AppBase extends HTMLElement { } render(action = 'INIT') { - if (![Store.actions.ADD_LINE, Store.actions.REMOVE_LINE, Store.actions.UNDO, 'INIT'].includes(action)) { + if (![Store.actions.OPEN_MODAL, Store.actions.CLOSE_MODAL, Store.actions.ADD_LINE, Store.actions.REMOVE_LINE, Store.actions.UNDO, 'INIT'].includes(action)) { return; // Only render if content changed } - this.shadowRoot.innerHTML = ` + this.innerHTML = ` - +

${this.text.title}

${this.text.description}

- ${this.renderOptions()} - + @@ -97,9 +105,17 @@ class AppBase extends HTMLElement { Delete - Add + Add + +

${text.modal.description}

+ + + Add + Cancel + + `; } } diff --git a/src/components/custom-modal.js b/src/components/custom-modal.js new file mode 100644 index 0000000..90fdf76 --- /dev/null +++ b/src/components/custom-modal.js @@ -0,0 +1,59 @@ +class CustomModal extends HTMLElement { + static observedAttributes = ['active']; + + #templateHtml = ` + +
+ + + +
+ `; + + constructor() { + super(); + this.attachShadow({ mode: 'open' }); + const template = document.createElement('template') + template.innerHTML = this.#templateHtml; + this.shadowRoot.appendChild(template.content.cloneNode(true)); + + this.overlay = this.shadowRoot.querySelector('div.overlay'); + console.log(this.overlay); + this.mainWindow = this.shadowRoot.querySelector('main-window'); + } + + connectedCallback() { + this.updateStyle(); + } + + attributeChangedCallback() { + console.log("attributeChanged"); + this.updateStyle(); + } + + updateStyle() { + console.log(this.getAttribute('active'), typeof this.getAttribute('active')); + this.overlay.style.visibility = this.getAttribute('active') === "true" ? 'visible' : 'hidden'; + } +} + +customElements.define('custom-modal', CustomModal); diff --git a/src/components/item-list.js b/src/components/item-list.js index f2bc4f6..e6004fd 100644 --- a/src/components/item-list.js +++ b/src/components/item-list.js @@ -1,6 +1,7 @@ import Store from '../modules/store.js'; class ItemList extends HTMLSelectElement { + static observedAttributes = ['height']; constructor() { super(); this.publish = Store.publish @@ -20,16 +21,23 @@ class ItemList extends HTMLSelectElement { this.removeEventListener('click', this.onChange.bind(this)); } + attributeChangedCallback() { + this.updateParametrizedStyle(); + } + + updateParametrizedStyle() { + this.style.height = this.getAttribute('height'); + } + updateStyle() { - this.style.width = '100%'; - this.style.height = '227px'; - this.style.background = '#F7F7F7 0% 0% no-repeat padding-box'; - this.style.border = '1px solid #CCCCCC'; - this.style.opacity = '1'; - this.style.fontSize = '18px'; - this.style.fontFamily = '"Montserrat" sans-serif'; - this.style.fontWeight = 'normal'; - this.style.letterSpacing = '0px'; + this.style.width = '100%'; + this.style.background = '#F7F7F7 0% 0% no-repeat padding-box'; + this.style.border = '1px solid #CCCCCC'; + this.style.opacity = '1'; + this.style.fontSize = '18px'; + this.style.padding = '13px'; + this.style.boxSizing = 'border-box'; + this.updateParametrizedStyle(); } } diff --git a/src/components/main-window.js b/src/components/main-window.js index f8c1516..daa8375 100644 --- a/src/components/main-window.js +++ b/src/components/main-window.js @@ -1,5 +1,5 @@ class MainWindow extends HTMLElement { - static observedAttributes = ['width', 'height', 'gap']; + static observedAttributes = ['width', 'gap']; constructor() { super(); @@ -20,7 +20,6 @@ class MainWindow extends HTMLElement { - - - - `; - } -} - -customElements.define('custom-modal', CustomModal); diff --git a/src/main.js b/src/main.js index 165c288..46f7433 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1 @@ import './components/app-base.js'; -import './main-window.js'; -import './components/custom-button.js'; -import './components/item-list.js'; -import './components/custom-modal.js'; - diff --git a/src/modules/store.js b/src/modules/store.js index eaa9449..a0c57ca 100644 --- a/src/modules/store.js +++ b/src/modules/store.js @@ -4,12 +4,15 @@ export default class Store { REMOVE_LINE: 'REMOVE_LINE', UNDO: 'UNDO', SELECT: 'SELECT', + OPEN_MODAL: 'OPEN_MODAL', + CLOSE_MODAL: 'CLOSE_MODAL', } constructor() { this.state = { records: [], selected: [], + modalActive: false, }; this.callbacks = [() => console.log(this.state)]; @@ -74,6 +77,18 @@ export default class Store { selected: event.detail, } break; + case this.constructor.actions.OPEN_MODAL: + this.state = { + ...this.state, + modalActive: true, + } + break; + case this.constructor.actions.CLOSE_MODAL: + this.state = { + ...this.state, + modalActive: false, + } + break; default: console.error(`Action "${event.type}" not implemented in eventHandler`); return; diff --git a/src/modules/text.js b/src/modules/text.js index 9b679af..3748823 100644 --- a/src/modules/text.js +++ b/src/modules/text.js @@ -1,4 +1,7 @@ export default { title: 'This is a technical proof', description: 'Lorem ipsum dolor sit amet consectetur adipiscing, elit mus primis nec inceptos. Lacinia habitasse arcu molestie maecenas cursus quam nunc, hendrerit posuere augue fames dictumst placerat porttitor, dis mi pharetra vestibulum venenatis phasellus.', + modal: { + description: 'Add item to list', + }, }