diff --git a/scripts/aem-assets-plugin-support.js b/scripts/aem-assets-plugin-support.js new file mode 100644 index 0000000000..68096ab250 --- /dev/null +++ b/scripts/aem-assets-plugin-support.js @@ -0,0 +1,17 @@ +// The based path of the aem-assets-plugin code. +const codeBasePath = '/plugins/aem-assets-plugin'; + +// The blocks that are to be used from the aem-assets-plugin. +const blocks = ['video']; + +// Initialize the aem-assets-plugin. +export default async function assetsInit() { + const { loadBlock, createOptimizedPicture } = await import(`${codeBasePath}/scripts/aem-assets.js`); + window.hlx = window.hlx || {}; + window.hlx.aemassets = { + codeBasePath, + blocks, + loadBlock, + createOptimizedPicture, + }; +} \ No newline at end of file diff --git a/scripts/aem.js b/scripts/aem.js index 73f2915f2c..32224f1cbd 100644 --- a/scripts/aem.js +++ b/scripts/aem.js @@ -297,6 +297,9 @@ function createOptimizedPicture( eager = false, breakpoints = [{ media: '(min-width: 600px)', width: '2000' }, { width: '750' }], ) { + if (window.hlx?.aemassets?.createOptimizedPicture) { + return window.hlx.aemassets.createOptimizedPicture(src, alt, eager, breakpoints); + } const url = new URL(src, window.location.href); const picture = document.createElement('picture'); const { pathname } = url; @@ -580,6 +583,9 @@ function buildBlock(blockName, content) { * @param {Element} block The block element */ async function loadBlock(block) { + if (window.hlx?.aemassets?.loadBlock) { + return window.hlx.aemassets.loadBlock(block); + } const status = block.dataset.blockStatus; if (status !== 'loading' && status !== 'loaded') { block.dataset.blockStatus = 'loading'; diff --git a/scripts/scripts.js b/scripts/scripts.js index 3490e9aa65..9aa9177c52 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -12,6 +12,8 @@ import { loadCSS, } from './aem.js'; +import assetsInit from './aem-assets-plugin-support.js'; + /** * Moves all the attributes from a given elmenet to another given element. * @param {Element} from the element to copy attributes from @@ -145,4 +147,5 @@ async function loadPage() { loadDelayed(); } +await assetsInit(); // This to be done before loadPage() function invocation loadPage();