diff --git a/_dev/js/checkout/index.js b/_dev/js/checkout/index.js index 070048ae..cbb3b1bb 100644 --- a/_dev/js/checkout/index.js +++ b/_dev/js/checkout/index.js @@ -50,7 +50,7 @@ function setUpCheckout() { on(prestashop.selectors.checkout.giftCheckbox, 'change', ({ target }) => { const isChecked = target.checked; const giftBlock = document.querySelector('#gift'); - const collapseInstance = bootstrap.Collapse.getOrCreateInstance(giftBlock); + const collapseInstance = window.bootstrap.Collapse.getOrCreateInstance(giftBlock); collapseInstance.toggle(isChecked); }); diff --git a/_dev/js/theme/components/dynamic-bootstrap-components.js b/_dev/js/theme/components/dynamic-bootstrap-components.js index d51710bf..d91da502 100644 --- a/_dev/js/theme/components/dynamic-bootstrap-components.js +++ b/_dev/js/theme/components/dynamic-bootstrap-components.js @@ -1,5 +1,4 @@ -import $ from 'jquery'; -import DOMReady from "../utils/DOMReady"; +import DOMReady from '../utils/DOMReady'; import useBootstrapComponentDynamicImport from '../utils/dynamicImports/useBootstrapComponentDynamicImport'; DOMReady(() => { diff --git a/_dev/js/theme/utils/dynamicImports/useBootstrapComponentDynamicImport.js b/_dev/js/theme/utils/dynamicImports/useBootstrapComponentDynamicImport.js index b2ab0477..75984358 100644 --- a/_dev/js/theme/utils/dynamicImports/useBootstrapComponentDynamicImport.js +++ b/_dev/js/theme/utils/dynamicImports/useBootstrapComponentDynamicImport.js @@ -16,7 +16,7 @@ const useBootstrapComponentDynamicImport = (importFiles, { if (!instancesMap.has(element)) { instancesMap.set(element, instance); } - } + }; const getInstanceFromMap = (element) => { if (!instancesMap.has(element)) { @@ -24,7 +24,7 @@ const useBootstrapComponentDynamicImport = (importFiles, { } return instancesMap.get(element); - } + }; if (!componentName) { throw new Error('Component name is required'); @@ -38,86 +38,19 @@ const useBootstrapComponentDynamicImport = (importFiles, { } catch (e) { return false; } - } - - const handleComponentLoad = async () => { - if (filesLoaded) { - return; - } - - unbindEvents(); - await loadFiles(); - onLoad(); - executeCallStack(); }; - const getOrCreateInstance = (element) => { - const pluginInstance = getComponentInstance(element); - - if (pluginInstance) { - return pluginInstance.proxyInstance; - } - - const proxyInstance = new ComponentObjectConstructorFunction(element); - - setInstanceInMap(element, proxyInstance); - - return proxyInstance; - } - - const getComponentInstance = (element) => getInstanceFromMap(element); - - const proxyFactory = (pluginInstance) => { - const pluginObject = {}; - const proxyHandler = { - get(target, prop, receiver) { - return (...args) => { - if (!filesLoaded) { - pluginInstance.instanceMethodCall.push({ - prop, - args, - }); - - handleComponentLoad(); - } - - if (pluginInstance.componentInstance !== null) { - pluginInstance.componentInstance[prop](...args); - } - - return receiver; - }; - } - } - - return new Proxy(pluginObject, proxyHandler) - } - - const ComponentObjectConstructorFunction = function(args) { - const pluginInstance = { - args, - instanceMethodCall: [], - componentInstance: null, - } - - pluginInstance.proxyInstance = proxyFactory(pluginInstance); - - callStack.push(pluginInstance); - - return pluginInstance.proxyInstance; - }; - - ComponentObjectConstructorFunction.getOrCreateInstance = getOrCreateInstance; - ComponentObjectConstructorFunction.getInstance = getComponentInstance; + const loadFiles = () => { + filesLoaded = true; - const handleJQueryPluginCall = function(args) { - jQueryCallStack.push({ - elem: this, - args, + return Promise.all(importFiles()).then((files) => { + files.forEach((file) => { + if (file.default) { + window.bootstrap[componentName] = file.default; + } + }); }); - - handleComponentLoad(); - } + }; const executeCallStack = () => { callStack.forEach(({ args, instanceMethodCall, componentInstance }, i) => { @@ -127,8 +60,8 @@ const useBootstrapComponentDynamicImport = (importFiles, { setInstanceInMap(componentInstance._element, componentInstance); - instanceMethodCall.forEach(({ prop, args }) => { - componentInstance[prop](...args); + instanceMethodCall.forEach(({ prop, methodArgs }) => { + componentInstance[prop](...methodArgs); }); }); @@ -139,32 +72,17 @@ const useBootstrapComponentDynamicImport = (importFiles, { } }; - window.bootstrap = window.bootstrap || {}; - window.bootstrap[componentName] = ComponentObjectConstructorFunction; - - if (isJQueryEnabled()) { - window.jQuery.fn[getJQueryComponentName()] = handleJQueryPluginCall; - } - const handleEvent = async (e) => { e.preventDefault(); + + // DISABLE FOR NOW BEFORE REFACTORING + /* eslint-disable */ await handleComponentLoad(); + /* eslint-enable */ const { currentTarget, type } = e; currentTarget.dispatchEvent(new Event(type)); - } - - const loadFiles = () => { - filesLoaded = true; - - return Promise.all(importFiles()).then((files) => { - files.forEach((file) => { - if (file.default) { - window.bootstrap[componentName] = file.default; - } - }); - }); }; const unbindEvents = () => { @@ -180,7 +98,7 @@ const useBootstrapComponentDynamicImport = (importFiles, { document, name, selector, - handleEvent + handleEvent, ); }); }; @@ -198,11 +116,97 @@ const useBootstrapComponentDynamicImport = (importFiles, { document, name, selector, - handleEvent + handleEvent, ); }); }; + const handleComponentLoad = async () => { + if (filesLoaded) { + return; + } + + unbindEvents(); + await loadFiles(); + onLoad(); + executeCallStack(); + }; + + const proxyFactory = (pluginInstance) => { + const pluginObject = {}; + const proxyHandler = { + get(target, prop, receiver) { + return (...args) => { + if (!filesLoaded) { + pluginInstance.instanceMethodCall.push({ + prop, + args, + }); + + handleComponentLoad(); + } + + if (pluginInstance.componentInstance !== null) { + pluginInstance.componentInstance[prop](...args); + } + + return receiver; + }; + }, + }; + + return new Proxy(pluginObject, proxyHandler); + }; + + const getComponentInstance = (element) => getInstanceFromMap(element); + + function ComponentObjectConstructorFunction(args) { + const pluginInstance = { + args, + instanceMethodCall: [], + componentInstance: null, + }; + + pluginInstance.proxyInstance = proxyFactory(pluginInstance); + + callStack.push(pluginInstance); + + return pluginInstance.proxyInstance; + } + + const getOrCreateInstance = (element) => { + const pluginInstance = getComponentInstance(element); + + if (pluginInstance) { + return pluginInstance.proxyInstance; + } + + const proxyInstance = new ComponentObjectConstructorFunction(element); + + setInstanceInMap(element, proxyInstance); + + return proxyInstance; + }; + + ComponentObjectConstructorFunction.getOrCreateInstance = getOrCreateInstance; + ComponentObjectConstructorFunction.getInstance = getComponentInstance; + + const handleJQueryPluginCall = (args) => { + jQueryCallStack.push({ + elem: this, + args, + }); + + handleComponentLoad(); + }; + + window.bootstrap = window.bootstrap || {}; + window.bootstrap[componentName] = ComponentObjectConstructorFunction; + + if (isJQueryEnabled()) { + window.jQuery.fn[getJQueryComponentName()] = handleJQueryPluginCall; + } + const init = () => { bindEvents(); };