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', + }, }