diff --git a/blocks/popup-trigger/popup-trigger.js b/blocks/popup-trigger/popup-trigger.js index 5b61ae8d..3fec38ad 100644 --- a/blocks/popup-trigger/popup-trigger.js +++ b/blocks/popup-trigger/popup-trigger.js @@ -53,7 +53,7 @@ export default class PopupTrigger extends ComponentBase { if (anchorUrl.hash === closePopupIdentifier) { this.isClosePopupTrigger = true; } else { - this.dataset.url = anchorUrl.href; + this.dataset.url = anchorUrl.pathname; } if (anchor.hasAttribute('aria-label')) { @@ -84,8 +84,16 @@ export default class PopupTrigger extends ComponentBase { onAttributeUrlChanged({ oldValue, newValue }) { if (this.isClosePopupTrigger) return; if (oldValue === newValue) return; + let sourceUrl; + + try { + sourceUrl = new URL(newValue, window.location.origin); + } catch (error) { + // eslint-disable-next-line no-console + console.warn('The value provided is not a valid path', error); + return; + } - const sourceUrl = new URL(newValue); this.popupSourceUrl = sourceUrl.pathname; if (this.popup) { @@ -123,24 +131,14 @@ export default class PopupTrigger extends ComponentBase { } async createPopup() { - const { - instances: [popup], - } = await component.init({ - componentName: 'popup', - attributesValues: { - url: { all: this.popupSourceUrl }, - active: { all: true }, - }, - componentConfig: { - contentFromTargets: false, - addToTargetMethod: 'append', - }, - props: { - popupTrigger: this, - }, - targets: [null], - }); + await component.loadAndDefine('popup'); + const popup = document.createElement('raqn-popup'); + + popup.dataset.url = this.popupSourceUrl; + popup.dataset.active = true; + popup.dataset.type = 'flyout'; + popup.popupTrigger = this; return popup; } diff --git a/blocks/popup/popup.js b/blocks/popup/popup.js index 3c220f0f..319a91d2 100644 --- a/blocks/popup/popup.js +++ b/blocks/popup/popup.js @@ -56,7 +56,6 @@ export default class Popup extends ComponentBase { setDefaults() { super.setDefaults(); this.popupTrigger = null; - this.getConfigFromFragment = true; } setBinds() { @@ -88,7 +87,7 @@ export default class Popup extends ComponentBase { template() { return ` -