From 197748e29103289f1262f2489e159b05dfbd8d2f Mon Sep 17 00:00:00 2001 From: dead-playmod Date: Thu, 11 Aug 2022 13:59:50 +0200 Subject: [PATCH 1/3] Add edit and remove modals to wishlist --- .../assets/shop/js/addAnotherWishlistModal.js | 115 ------------------ .../shop/js/handleAddAnotherWishlistModal.js | 23 ++-- .../assets/shop/js/handleEditWishlistModal.js | 63 ++++++++++ .../shop/js/handleRemoveWishlistModal.js | 59 +++++++++ src/Resources/assets/shop/js/index.js | 8 +- src/Resources/assets/shop/js/wishlistModal.js | 111 +++++++++++++++++ .../assets/shop/scss/pages/main.scss | 2 +- .../shop/scss/pages/wishlist-create/main.scss | 1 - .../shop/scss/pages/wishlist-modal/main.scss | 1 + .../wishlistModal.scss} | 9 +- .../views/WishlistGroup/index.html.twig | 7 +- 11 files changed, 264 insertions(+), 135 deletions(-) delete mode 100644 src/Resources/assets/shop/js/addAnotherWishlistModal.js create mode 100644 src/Resources/assets/shop/js/handleEditWishlistModal.js create mode 100644 src/Resources/assets/shop/js/handleRemoveWishlistModal.js create mode 100644 src/Resources/assets/shop/js/wishlistModal.js delete mode 100644 src/Resources/assets/shop/scss/pages/wishlist-create/main.scss create mode 100644 src/Resources/assets/shop/scss/pages/wishlist-modal/main.scss rename src/Resources/assets/shop/scss/pages/{wishlist-create/addWishlistModal.scss => wishlist-modal/wishlistModal.scss} (94%) diff --git a/src/Resources/assets/shop/js/addAnotherWishlistModal.js b/src/Resources/assets/shop/js/addAnotherWishlistModal.js deleted file mode 100644 index e3fb45b3..00000000 --- a/src/Resources/assets/shop/js/addAnotherWishlistModal.js +++ /dev/null @@ -1,115 +0,0 @@ -export class AddWishlistModal { - constructor( - config = {}, - actions = { - performAction: () => {}, - cancelAction: () => {}, - } - ) { - this.config = config; - this.defaultConfig = { - headerTitle: 'Choose name for your new wishlist', - cancelText: 'cancel', - performText: 'perform', - datasetWishlistTargets: '[data-bb-wishlists]', - addWishlistModalClass: 'add-wishlist-confirmation-modal', - addWishlistheaderClass: 'add-wishlist-confirmation-modal__header', - addWishlistH2Class: 'add-wishlist-confirmation-modal__header--title', - addWishlistBodyClass: 'add-wishlist-confirmation-modal__body', - addWishlistBodyItemClass: 'add-wishlist-confirmation-modal__body--input', - addWishlistConfirmClass: 'add-wishlist-confirmation-modal__confirm', - addWishlistCancelBtnClass: 'add-wishlist-confirmation-modal__confirm--cancel', - addWishlistConfirmBtnClass: 'add-wishlist-confirmation-modal__confirm--perform', - }; - this.actions = actions; - this.finalConfig = {...this.defaultConfig, ...config}; - } - - init() { - if (this.config && typeof this.config !== 'object') { - throw new Error('BitBag - CreateCopyToWishlistsListModal - given config is not valid - expected object'); - } - this._renderModal(); - } - - _renderModal() { - this.modal = this._modalTemplate(); - this.modal.classList.add('bitbag', 'add-wishlist-modal-initialization'); - this._modalActions(this.modal); - document.querySelector('body').appendChild(this.modal); - this.modal.classList.remove('add-wishlist-modal-initialization'); - this.modal.classList.add('add-wishlist-modal-initialized'); - } - - _modalTemplate() { - const modal = document.createElement('div'); - modal.innerHTML = ` -
-
-

- ${this.finalConfig.headerTitle} -

-
-
- - -
-
- - -
-
- `; - - return modal; - } - - _modalActions(template) { - const cancelBtn = template.querySelector('[data-bb-action="cancel"]'); - const confirmBtn = template.querySelector('[data-bb-action="perform"]'); - - cancelBtn.addEventListener('click', (e) => { - e.preventDefault(); - this.actions.cancelAction(); - this._closeModal(); - }); - - confirmBtn.addEventListener('click', (e) => { - e.preventDefault(); - - if(this._isInputEmpty()) { - this._triggerInputError(); - - return; - } - - this.actions.performAction(); - this._closeModal(); - }); - } - - _isInputEmpty() { - const input = document.querySelector('[data-bb-target="wishlists"] > [data-bb-target="input"]'); - - return input.value === ''; - } - - _triggerInputError() { - const body = document.querySelector('[data-bb-target="wishlists"]'); - const input = body.querySelector('[data-bb-target="input"]'); - const div = body.querySelector('[data-bb-target="error"]'); - - input.classList.add('error'); - div.classList.remove('hidden'); - } - - _closeModal() { - this.modal.remove(); - } -} - -export default AddWishlistModal; diff --git a/src/Resources/assets/shop/js/handleAddAnotherWishlistModal.js b/src/Resources/assets/shop/js/handleAddAnotherWishlistModal.js index 38239fe4..04f470c0 100644 --- a/src/Resources/assets/shop/js/handleAddAnotherWishlistModal.js +++ b/src/Resources/assets/shop/js/handleAddAnotherWishlistModal.js @@ -1,18 +1,25 @@ -import { AddWishlistModal } from './addAnotherWishlistModal'; +import { WishlistModal } from './wishlistModal'; const addWishlistBtn = document.querySelector('[data-bb-wishlist-add="add-another-wishlist"]'); +const wishlistFormName = 'create_new_wishlist'; -const setAddWishlistModal = () => { - +const setWishlistModal = () => { addWishlistBtn.addEventListener('click', (e) => { e.preventDefault(); - new AddWishlistModal( - {}, + new WishlistModal( + { + headerTitle: 'Choose name for your new wishlist', + wishlistFormName: wishlistFormName, + wishlistBodyContent: ` + + + ` + }, { cancelAction: () => {}, performAction: async () => { - const form = document.querySelector('#create_new_wishlist'); - const formValue = form.querySelector('#create_new_wishlist_name'); + const form = document.querySelector(`#${wishlistFormName}`); + const formValue = form.querySelector(`#${wishlistFormName}_name`); const url = '/wishlists/create'; const formData = new FormData(form); @@ -47,7 +54,7 @@ const turnOnListener = () => { if (!addWishlistBtn) { return; } - setAddWishlistModal(); + setWishlistModal(); }; turnOnListener(); diff --git a/src/Resources/assets/shop/js/handleEditWishlistModal.js b/src/Resources/assets/shop/js/handleEditWishlistModal.js new file mode 100644 index 00000000..24fba061 --- /dev/null +++ b/src/Resources/assets/shop/js/handleEditWishlistModal.js @@ -0,0 +1,63 @@ +import { WishlistModal } from './wishlistModal'; + +const editWishlistBtns = document.querySelectorAll('[data-wishlist-edit-id]'); +const wishlistFormName = 'edit_wishlist'; + +const setWishlistModal = () => { + editWishlistBtns.forEach(btn => { + btn.addEventListener('click', (e) => { + e.preventDefault(); + new WishlistModal( + { + headerTitle: 'Choose new name for your wishlist', + wishlistFormName: wishlistFormName, + wishlistBodyContent: ` + + + ` + }, + { + cancelAction: () => {}, + performAction: async () => { + const form = document.querySelector(`#${wishlistFormName}`); + const formValue = form.querySelector(`#${wishlistFormName}_name_name`); + + const wishlistId = btn.dataset.wishlistEditId; + const url = `/wishlists/${wishlistId}/edit`; + const formData = new FormData(form); + const csrfToken = document.querySelector("[data-bb-csrf]").dataset.bbCsrf; + + const headers = new Headers({ + 'X-CSRF-TOKEN': csrfToken + }); + + const requestConfig = { + method: 'POST', + headers: headers, + body: formData + } + + try { + const response = await fetch(url, requestConfig); + const data = await response.json(); + + } catch (error) { + console.error(error); + } finally { + location.reload(); + } + }, + } + ).init(); + }); + }) +}; + +const turnOnListener = () => { + if (!editWishlistBtns) { + return; + } + setWishlistModal(); +}; + +turnOnListener(); diff --git a/src/Resources/assets/shop/js/handleRemoveWishlistModal.js b/src/Resources/assets/shop/js/handleRemoveWishlistModal.js new file mode 100644 index 00000000..3a302f43 --- /dev/null +++ b/src/Resources/assets/shop/js/handleRemoveWishlistModal.js @@ -0,0 +1,59 @@ +import { WishlistModal } from './wishlistModal'; + +const removeWishlistBtns = document.querySelectorAll('[data-wishlist-remove-id]'); +const wishlistFormName = 'remove_wishlist'; + +const setWishlistModal = () => { + removeWishlistBtns.forEach(btn => { + btn.addEventListener('click', (e) => { + e.preventDefault(); + new WishlistModal( + { + headerTitle: 'Remove wishlist', + wishlistFormName: wishlistFormName, + wishlistBodyContent: 'Are you sure?' + }, + { + cancelAction: () => {}, + performAction: async () => { + const form = document.querySelector(`#${wishlistFormName}`); + + const wishlistId = btn.dataset.wishlistRemoveId; + const url = `/wishlists/${wishlistId}/remove`; + const formData = new FormData(form); + const csrfToken = document.querySelector("[data-bb-csrf]").dataset.bbCsrf; + + const headers = new Headers({ + 'X-CSRF-TOKEN': csrfToken + }); + + const requestConfig = { + method: 'POST', + headers: headers, + body: formData + } + + try { + const response = await fetch(url, requestConfig); + const data = await response.json(); + + } catch (error) { + console.error(error); + } finally { + location.reload(); + } + }, + } + ).init(); + }); + }) +}; + +const turnOnListener = () => { + if (!removeWishlistBtns) { + return; + } + setWishlistModal(); +}; + +turnOnListener(); diff --git a/src/Resources/assets/shop/js/index.js b/src/Resources/assets/shop/js/index.js index 5dbab4f9..77b745ad 100644 --- a/src/Resources/assets/shop/js/index.js +++ b/src/Resources/assets/shop/js/index.js @@ -1,6 +1,8 @@ -import './handleWishlistMainCheckbox.js' -import './handleCopyToWishlistListModal.js' -import './handleAddAnotherWishlistModal.js' +import './handleWishlistMainCheckbox.js'; +import './handleCopyToWishlistListModal.js'; +import './handleAddAnotherWishlistModal.js'; +import './handleRemoveWishlistModal.js'; +import './handleEditWishlistModal.js'; import { WishlistVariantButton } from './WishlistVariantButton'; import { WishlistVariantPrice } from './WishlistVariantPrice'; diff --git a/src/Resources/assets/shop/js/wishlistModal.js b/src/Resources/assets/shop/js/wishlistModal.js new file mode 100644 index 00000000..154d2024 --- /dev/null +++ b/src/Resources/assets/shop/js/wishlistModal.js @@ -0,0 +1,111 @@ +export class WishlistModal { + constructor( + config = {}, + actions = { + performAction: () => {}, + cancelAction: () => {}, + } + ) { + this.config = config; + this.defaultConfig = { + headerTitle: 'Modal title', + cancelText: 'cancel', + performText: 'perform', + wishlistBodyContent: 'test', + wishlistFormName: 'wishlist', + datasetWishlistTargets: '[data-bb-wishlists]', + wishlistModalClass: 'wishlist-confirmation-modal', + wishlistheaderClass: 'wishlist-confirmation-modal__header', + wishlistH2Class: 'wishlist-confirmation-modal__header--title', + wishlistBodyClass: 'wishlist-confirmation-modal__body', + wishlistBodyItemClass: 'wishlist-confirmation-modal__body--input', + wishlistConfirmClass: 'wishlist-confirmation-modal__confirm', + wishlistCancelBtnClass: 'wishlist-confirmation-modal__confirm--cancel', + wishlistConfirmBtnClass: 'wishlist-confirmation-modal__confirm--perform', + }; + this.actions = actions; + this.finalConfig = {...this.defaultConfig, ...config}; + } + + init() { + if (this.config && typeof this.config !== 'object') { + throw new Error('BitBag - WishlistsListModal - given config is not valid - expected object'); + } + this._renderModal(); + } + + _renderModal() { + this.modal = this._modalTemplate(); + this.modal.classList.add('bitbag', 'wishlist-modal-initialization'); + this._modalActions(this.modal); + document.querySelector('body').appendChild(this.modal); + this.modal.classList.remove('wishlist-modal-initialization'); + this.modal.classList.add('wishlist-modal-initialized'); + } + + _modalTemplate() { + const modal = document.createElement('div'); + modal.innerHTML = ` +
+
+

+ ${this.finalConfig.headerTitle} +

+
+
+ ${this.finalConfig.wishlistBodyContent} +
+
+ + +
+
+ `; + + return modal; + } + + _modalActions(template) { + const cancelBtn = template.querySelector('[data-bb-action="cancel"]'); + const confirmBtn = template.querySelector('[data-bb-action="perform"]'); + const input = template.querySelector('[data-bb-target="wishlists"] > [data-bb-target="input"]'); + + cancelBtn.addEventListener('click', (e) => { + e.preventDefault(); + this.actions.cancelAction(); + this._closeModal(); + }); + + confirmBtn.addEventListener('click', (e) => { + e.preventDefault(); + + if(input && input.value === '') { + this._triggerInputError(); + + return; + } + + this.actions.performAction(); + this._closeModal(); + }); + } + + _triggerInputError() { + const body = document.querySelector('[data-bb-target="wishlists"]'); + const input = body.querySelector('[data-bb-target="input"]'); + const div = body.querySelector('[data-bb-target="error"]'); + + input.classList.add('error'); + div.classList.remove('hidden'); + } + + _closeModal() { + this.modal.remove(); + } +} + +export default WishlistModal; diff --git a/src/Resources/assets/shop/scss/pages/main.scss b/src/Resources/assets/shop/scss/pages/main.scss index fc39cd7a..a1b04c11 100644 --- a/src/Resources/assets/shop/scss/pages/main.scss +++ b/src/Resources/assets/shop/scss/pages/main.scss @@ -1,4 +1,4 @@ @import "./wishlist-details/main"; -@import "./wishlist-create/main"; +@import "./wishlist-modal/main"; @import "./importWishlist.scss"; @import "./wishlist-group/index.scss"; diff --git a/src/Resources/assets/shop/scss/pages/wishlist-create/main.scss b/src/Resources/assets/shop/scss/pages/wishlist-create/main.scss deleted file mode 100644 index c00f79f3..00000000 --- a/src/Resources/assets/shop/scss/pages/wishlist-create/main.scss +++ /dev/null @@ -1 +0,0 @@ -@import './addWishlistModal.scss' diff --git a/src/Resources/assets/shop/scss/pages/wishlist-modal/main.scss b/src/Resources/assets/shop/scss/pages/wishlist-modal/main.scss new file mode 100644 index 00000000..a60b939a --- /dev/null +++ b/src/Resources/assets/shop/scss/pages/wishlist-modal/main.scss @@ -0,0 +1 @@ +@import './wishlistModal.scss' diff --git a/src/Resources/assets/shop/scss/pages/wishlist-create/addWishlistModal.scss b/src/Resources/assets/shop/scss/pages/wishlist-modal/wishlistModal.scss similarity index 94% rename from src/Resources/assets/shop/scss/pages/wishlist-create/addWishlistModal.scss rename to src/Resources/assets/shop/scss/pages/wishlist-modal/wishlistModal.scss index 49584a12..7331c840 100644 --- a/src/Resources/assets/shop/scss/pages/wishlist-create/addWishlistModal.scss +++ b/src/Resources/assets/shop/scss/pages/wishlist-modal/wishlistModal.scss @@ -3,11 +3,11 @@ $dark_color: #050428; $transparent_color: rgba(0, 0, 0, 0.25); .bitbag { - &.add-wishlist-modal-initialization { + &.wishlist-modal-initialization { display: none; } - &.add-wishlist-modal-initialized { + &.wishlist-modal-initialized { display: flex; align-items: center; justify-content: center; @@ -20,7 +20,7 @@ $transparent_color: rgba(0, 0, 0, 0.25); background-color: $transparent_color; } - .add-wishlist-confirmation-modal { + .wishlist-confirmation-modal { background-color: $bright_color; border-radius: 8px; padding: 24px; @@ -30,6 +30,7 @@ $transparent_color: rgba(0, 0, 0, 0.25); &__confirm { padding: 16px 0; text-align: center; + gap: 1rem; } &__header { @@ -127,7 +128,7 @@ $transparent_color: rgba(0, 0, 0, 0.25); } } -.add-wishlist-confirmation-modal__body--item { +.wishlist-confirmation-modal__body--item { padding-bottom: 1rem; font-size: 16px; } diff --git a/src/Resources/views/WishlistGroup/index.html.twig b/src/Resources/views/WishlistGroup/index.html.twig index 775860af..b1bc3b71 100644 --- a/src/Resources/views/WishlistGroup/index.html.twig +++ b/src/Resources/views/WishlistGroup/index.html.twig @@ -38,19 +38,20 @@
- - + From 94d7e11f2485b946911f8807940fb0cc244b664e Mon Sep 17 00:00:00 2001 From: dead-playmod Date: Thu, 11 Aug 2022 14:26:59 +0200 Subject: [PATCH 2/3] Code clean up --- .../assets/shop/js/handleEditWishlistModal.js | 4 ++-- src/Resources/assets/shop/js/index.js | 14 +++++++------- src/Resources/assets/shop/js/wishlistModal.js | 2 +- src/Resources/views/WishlistGroup/index.html.twig | 5 ++--- 4 files changed, 12 insertions(+), 13 deletions(-) diff --git a/src/Resources/assets/shop/js/handleEditWishlistModal.js b/src/Resources/assets/shop/js/handleEditWishlistModal.js index 24fba061..ddfff983 100644 --- a/src/Resources/assets/shop/js/handleEditWishlistModal.js +++ b/src/Resources/assets/shop/js/handleEditWishlistModal.js @@ -12,7 +12,7 @@ const setWishlistModal = () => { headerTitle: 'Choose new name for your wishlist', wishlistFormName: wishlistFormName, wishlistBodyContent: ` - + ` }, @@ -20,7 +20,7 @@ const setWishlistModal = () => { cancelAction: () => {}, performAction: async () => { const form = document.querySelector(`#${wishlistFormName}`); - const formValue = form.querySelector(`#${wishlistFormName}_name_name`); + const formValue = form.querySelector(`#${wishlistFormName}_name`); const wishlistId = btn.dataset.wishlistEditId; const url = `/wishlists/${wishlistId}/edit`; diff --git a/src/Resources/assets/shop/js/index.js b/src/Resources/assets/shop/js/index.js index 77b745ad..1df8ace8 100644 --- a/src/Resources/assets/shop/js/index.js +++ b/src/Resources/assets/shop/js/index.js @@ -1,16 +1,16 @@ -import './handleWishlistMainCheckbox.js'; -import './handleCopyToWishlistListModal.js'; -import './handleAddAnotherWishlistModal.js'; -import './handleRemoveWishlistModal.js'; -import './handleEditWishlistModal.js'; +import './handleWishlistMainCheckbox'; +import './handleCopyToWishlistListModal'; +import './handleAddAnotherWishlistModal'; +import './handleRemoveWishlistModal'; +import './handleEditWishlistModal'; import { WishlistVariantButton } from './WishlistVariantButton'; import { WishlistVariantPrice } from './WishlistVariantPrice'; const WishlistVariantElements = [...document.querySelectorAll('[data-bb-toggle="wishlist-variant"]')]; -export const WishlistVariantButtonList = WishlistVariantElements.map(button => new WishlistVariantButton(button).init()) +export const WishlistVariantButtonList = WishlistVariantElements.map(button => new WishlistVariantButton(button).init()); const WishlistVariantPrices = [...document.querySelectorAll('[data-bb-toggle="wishlist-variant-price"]')]; -export const WishlistVariantPricesList = WishlistVariantPrices.map(price => new WishlistVariantPrice(price).init()) +export const WishlistVariantPricesList = WishlistVariantPrices.map(price => new WishlistVariantPrice(price).init()); export default { WishlistVariantButtonList, diff --git a/src/Resources/assets/shop/js/wishlistModal.js b/src/Resources/assets/shop/js/wishlistModal.js index 154d2024..2de8cef4 100644 --- a/src/Resources/assets/shop/js/wishlistModal.js +++ b/src/Resources/assets/shop/js/wishlistModal.js @@ -11,7 +11,7 @@ export class WishlistModal { headerTitle: 'Modal title', cancelText: 'cancel', performText: 'perform', - wishlistBodyContent: 'test', + wishlistBodyContent: 'Modal body', wishlistFormName: 'wishlist', datasetWishlistTargets: '[data-bb-wishlists]', wishlistModalClass: 'wishlist-confirmation-modal', diff --git a/src/Resources/views/WishlistGroup/index.html.twig b/src/Resources/views/WishlistGroup/index.html.twig index b1bc3b71..d3dd215b 100644 --- a/src/Resources/views/WishlistGroup/index.html.twig +++ b/src/Resources/views/WishlistGroup/index.html.twig @@ -46,15 +46,14 @@ > - - +
From 612bff310459eb8a267db4d681abdbb993a5b357 Mon Sep 17 00:00:00 2001 From: dead-playmod Date: Thu, 11 Aug 2022 14:59:40 +0200 Subject: [PATCH 3/3] CR fixes --- .../assets/shop/js/handleAddAnotherWishlistModal.js | 4 ++-- .../assets/shop/js/handleEditWishlistModal.js | 4 ++-- .../assets/shop/js/handleRemoveWishlistModal.js | 4 ++-- src/Resources/assets/shop/js/wishlistModal.js | 11 +++++------ 4 files changed, 11 insertions(+), 12 deletions(-) diff --git a/src/Resources/assets/shop/js/handleAddAnotherWishlistModal.js b/src/Resources/assets/shop/js/handleAddAnotherWishlistModal.js index 04f470c0..80540cfd 100644 --- a/src/Resources/assets/shop/js/handleAddAnotherWishlistModal.js +++ b/src/Resources/assets/shop/js/handleAddAnotherWishlistModal.js @@ -4,8 +4,7 @@ const addWishlistBtn = document.querySelector('[data-bb-wishlist-add="add-anothe const wishlistFormName = 'create_new_wishlist'; const setWishlistModal = () => { - addWishlistBtn.addEventListener('click', (e) => { - e.preventDefault(); + addWishlistBtn.addEventListener('click', () => { new WishlistModal( { headerTitle: 'Choose name for your new wishlist', @@ -54,6 +53,7 @@ const turnOnListener = () => { if (!addWishlistBtn) { return; } + setWishlistModal(); }; diff --git a/src/Resources/assets/shop/js/handleEditWishlistModal.js b/src/Resources/assets/shop/js/handleEditWishlistModal.js index ddfff983..50d6d022 100644 --- a/src/Resources/assets/shop/js/handleEditWishlistModal.js +++ b/src/Resources/assets/shop/js/handleEditWishlistModal.js @@ -5,8 +5,7 @@ const wishlistFormName = 'edit_wishlist'; const setWishlistModal = () => { editWishlistBtns.forEach(btn => { - btn.addEventListener('click', (e) => { - e.preventDefault(); + btn.addEventListener('click', () => { new WishlistModal( { headerTitle: 'Choose new name for your wishlist', @@ -57,6 +56,7 @@ const turnOnListener = () => { if (!editWishlistBtns) { return; } + setWishlistModal(); }; diff --git a/src/Resources/assets/shop/js/handleRemoveWishlistModal.js b/src/Resources/assets/shop/js/handleRemoveWishlistModal.js index 3a302f43..533d40fb 100644 --- a/src/Resources/assets/shop/js/handleRemoveWishlistModal.js +++ b/src/Resources/assets/shop/js/handleRemoveWishlistModal.js @@ -5,8 +5,7 @@ const wishlistFormName = 'remove_wishlist'; const setWishlistModal = () => { removeWishlistBtns.forEach(btn => { - btn.addEventListener('click', (e) => { - e.preventDefault(); + btn.addEventListener('click', () => { new WishlistModal( { headerTitle: 'Remove wishlist', @@ -53,6 +52,7 @@ const turnOnListener = () => { if (!removeWishlistBtns) { return; } + setWishlistModal(); }; diff --git a/src/Resources/assets/shop/js/wishlistModal.js b/src/Resources/assets/shop/js/wishlistModal.js index 2de8cef4..1e933170 100644 --- a/src/Resources/assets/shop/js/wishlistModal.js +++ b/src/Resources/assets/shop/js/wishlistModal.js @@ -31,6 +31,7 @@ export class WishlistModal { if (this.config && typeof this.config !== 'object') { throw new Error('BitBag - WishlistsListModal - given config is not valid - expected object'); } + this._renderModal(); } @@ -45,6 +46,7 @@ export class WishlistModal { _modalTemplate() { const modal = document.createElement('div'); + modal.innerHTML = `
@@ -59,7 +61,7 @@ export class WishlistModal { - @@ -74,15 +76,12 @@ export class WishlistModal { const confirmBtn = template.querySelector('[data-bb-action="perform"]'); const input = template.querySelector('[data-bb-target="wishlists"] > [data-bb-target="input"]'); - cancelBtn.addEventListener('click', (e) => { - e.preventDefault(); + cancelBtn.addEventListener('click', () => { this.actions.cancelAction(); this._closeModal(); }); - confirmBtn.addEventListener('click', (e) => { - e.preventDefault(); - + confirmBtn.addEventListener('click', () => { if(input && input.value === '') { this._triggerInputError();