From 03b7735d2f0553376c26d8a6d75231238b9bcee2 Mon Sep 17 00:00:00 2001 From: Elanor Krause Date: Fri, 2 Feb 2024 10:10:46 +0100 Subject: [PATCH] added banner block --- dist/banner/banner.js | 2 ++ dist/banner/banner.js.map | 1 + dist/main/main.js | 2 +- dist/main/main.js.map | 2 +- src/blocks/banner/banner.ts | 6 ++++++ src/main.ts | 18 +++++++++--------- types/blocks/banner/banner.d.ts | 1 + vite.config.ts | 1 + 8 files changed, 22 insertions(+), 11 deletions(-) create mode 100644 dist/banner/banner.js create mode 100644 dist/banner/banner.js.map create mode 100644 src/blocks/banner/banner.ts create mode 100644 types/blocks/banner/banner.d.ts diff --git a/dist/banner/banner.js b/dist/banner/banner.js new file mode 100644 index 00000000..189a0c49 --- /dev/null +++ b/dist/banner/banner.js @@ -0,0 +1,2 @@ +function n(e){e.innerHTML,console.log(e),e.innerHTML="
hi
",e.style.removeProperty("display")}export{n as default}; +//# sourceMappingURL=banner.js.map diff --git a/dist/banner/banner.js.map b/dist/banner/banner.js.map new file mode 100644 index 00000000..2c6e51b8 --- /dev/null +++ b/dist/banner/banner.js.map @@ -0,0 +1 @@ +{"version":3,"file":"banner.js","sources":["../../src/blocks/banner/banner.ts"],"sourcesContent":["export default function (block: HTMLElement) {\n const org_content = block.innerHTML;\n console.log(block);\n block.innerHTML = `
hi
`;\n block.style.removeProperty(\"display\");\n}"],"names":["banner","block"],"mappings":"AAAA,SAAAA,EAAyBC,EAAoB,CACvBA,EAAM,UAC1B,QAAQ,IAAIA,CAAK,EACjBA,EAAM,UAAY,gBACZA,EAAA,MAAM,eAAe,SAAS,CACtC"} \ No newline at end of file diff --git a/dist/main/main.js b/dist/main/main.js index 7bb4e2cd..86c77327 100644 --- a/dist/main/main.js +++ b/dist/main/main.js @@ -1,4 +1,4 @@ -const S="modulepreload",g=function(c){return"/"+c},f={},v=function(e,t,s){let n=Promise.resolve();if(t&&t.length>0){const o=document.getElementsByTagName("link");n=Promise.all(t.map(a=>{if(a=g(a),a in f)return;f[a]=!0;const r=a.endsWith(".css"),i=r?'[rel="stylesheet"]':"";if(!!s)for(let h=o.length-1;h>=0;h--){const m=o[h];if(m.href===a&&(!r||m.rel==="stylesheet"))return}else if(document.querySelector(`link[href="${a}"]${i}`))return;const l=document.createElement("link");if(l.rel=r?"stylesheet":S,r||(l.as="script",l.crossOrigin=""),l.href=a,document.head.appendChild(l),r)return new Promise((h,m)=>{l.addEventListener("load",h),l.addEventListener("error",()=>m(new Error(`Unable to preload CSS for ${a}`)))})}))}return n.then(()=>e()).catch(o=>{const a=new Event("vite:preloadError",{cancelable:!0});if(a.payload=o,window.dispatchEvent(a),!a.defaultPrevented)throw o})};function u(c){return typeof c=="string"?c.toLowerCase().replace(/[^0-9a-z]/gi,"-").replace(/-+/g,"-").replace(/^-|-$/g,""):""}const p=(c,e)=>{e.split(",").forEach(t=>{c.classList.add(u(t.trim()))})};function y(c,e=document){const t=c&&c.includes(":")?"property":"name",n=[...e.head.querySelectorAll(`meta[${t}="${c}"]`)].map(o=>o.content).join(", ");return n.length?n:""}function w(c){return u(c).replace(/-([a-z])/g,e=>e[1].toUpperCase())}class E{readBlockConfig(e){const t={};return e.querySelectorAll(":scope > div").forEach(s=>{if(s.children){const n=[...s.children];if(n[1]){const o=n[1],a=u(n[0].textContent??"");let r="";if(o.querySelector("a")){const i=[...o.querySelectorAll("a")];i.length===1?r=i[0].href:r=i.map(d=>d.href)}else if(o.querySelector("img")){const i=[...o.querySelectorAll("img")];i.length===1?r=i[0].src:r=i.map(d=>d.src)}else if(o.querySelector("p")){const i=[...o.querySelectorAll("p")];i.length===1?r=i[0].textContent:r=i.map(d=>d.textContent)}else r=s.children[1].textContent;t[a]=r}}}),t}decorateBlocks(e){e.querySelectorAll("div.section > div > div").forEach(this.decorateBlock)}decorateBlock(e){const t=e.classList[0];if(t){e.classList.add("block"),e.dataset.blockName=t;const s=e.parentElement;s==null||s.classList.add(`${t}-wrapper`);const n=e.closest(".section");n&&n.classList.add(`${t}-container`)}}}class C{constructor(e){this.blockService=e}init(e){this.transformSection(e)}transformSection(e){e.querySelectorAll(":scope > div").forEach(t=>{this.adjustMarkup(t),this.processSectionMetaData(t)})}processSectionMetaData(e){const t=e.querySelector("div.section-metadata");if(t){const s=this.blockService.readBlockConfig(t);Object.keys(s).forEach(n=>{n==="style"?s.style.split(",").filter(a=>a).map(a=>u(a.trim())).forEach(a=>e.classList.add(a)):e.dataset[w(n)]=s[n]}),t.parentElement&&t.parentElement.remove()}}adjustMarkup(e){const t=[];let s=!1;[...e.children].forEach(n=>{if(n.tagName==="DIV"||!s){const o=document.createElement("div");t.push(o),s=n.tagName!=="DIV",s&&o.classList.add("default-content-wrapper")}t[t.length-1].append(n)}),t.forEach(n=>e.append(n)),e.classList.add("section"),e.dataset.sectionStatus="initialized",e.style.display="none"}}class L{constructor(e,t){this.sectionService=e,this.blockService=t,this.init=async()=>{this.setup(),await this.loadEager()},this.loadEager=async()=>{document.documentElement.lang="en",this.decorateTemplateAndTheme();const s=document.querySelector("main");s&&(s.setAttribute("id","main"),this.addSidebarContainer(s),this.sectionService.init(s),this.blockService.decorateBlocks(s),this.loadComponents(),document.body.classList.add("appear"),this.addInnerContainer(s))},this.loadComponents=async()=>{document.querySelectorAll(".section").forEach(n=>{const o=[],a=n.querySelectorAll("[data-block-name]");if(!a.length){n.style.removeProperty("display");return}a.forEach(r=>{r.style.display="none",o.push({name:r.dataset.blockName,element:r})}),o.length&&o.forEach(async r=>{const i=await v(()=>import(`${window.hlx.codeBasePath}/blocks/${r.name}/__compiled__/${r.name}.js`),__vite__mapDeps([]));i.default&&await i.default(r.element)}),n.style.removeProperty("display")})}}setup(){window.hlx=window.hlx||{},window.hlx.RUM_MASK_URL="full",window.hlx.codeBasePath="",window.hlx.lighthouse=new URLSearchParams(window.location.search).get("lighthouse")==="on";const e=document.querySelector('script[src$="/scripts/scripts.js"]');if(e)try{[window.hlx.codeBasePath]=new URL(e.src).pathname.split("/scripts/scripts.js")}catch(t){console.log(t)}}addInnerContainer(e){const t=e.innerHTML;e.innerHTML=`
${t}
`}addSidebarContainer(e){const t=document.createElement("div");t.classList.add("sidebar"),t.setAttribute("id","sidebar"),e.after(t)}decorateTemplateAndTheme(){const e=y("template");e&&p(document.body,e);const t=y("theme");t&&p(document.body,t)}}(async function(){const c=new E,e=new C(c);await new L(e,c).init()})(); +const S="modulepreload",g=function(i){return"/"+i},f={},v=function(e,t,s){let n=Promise.resolve();if(t&&t.length>0){const o=document.getElementsByTagName("link");n=Promise.all(t.map(a=>{if(a=g(a),a in f)return;f[a]=!0;const r=a.endsWith(".css"),c=r?'[rel="stylesheet"]':"";if(!!s)for(let h=o.length-1;h>=0;h--){const m=o[h];if(m.href===a&&(!r||m.rel==="stylesheet"))return}else if(document.querySelector(`link[href="${a}"]${c}`))return;const l=document.createElement("link");if(l.rel=r?"stylesheet":S,r||(l.as="script",l.crossOrigin=""),l.href=a,document.head.appendChild(l),r)return new Promise((h,m)=>{l.addEventListener("load",h),l.addEventListener("error",()=>m(new Error(`Unable to preload CSS for ${a}`)))})}))}return n.then(()=>e()).catch(o=>{const a=new Event("vite:preloadError",{cancelable:!0});if(a.payload=o,window.dispatchEvent(a),!a.defaultPrevented)throw o})};function u(i){return typeof i=="string"?i.toLowerCase().replace(/[^0-9a-z]/gi,"-").replace(/-+/g,"-").replace(/^-|-$/g,""):""}const p=(i,e)=>{e.split(",").forEach(t=>{i.classList.add(u(t.trim()))})};function y(i,e=document){const t=i&&i.includes(":")?"property":"name",n=[...e.head.querySelectorAll(`meta[${t}="${i}"]`)].map(o=>o.content).join(", ");return n.length?n:""}function w(i){return u(i).replace(/-([a-z])/g,e=>e[1].toUpperCase())}class E{readBlockConfig(e){const t={};return e.querySelectorAll(":scope > div").forEach(s=>{if(s.children){const n=[...s.children];if(n[1]){const o=n[1],a=u(n[0].textContent??"");let r="";if(o.querySelector("a")){const c=[...o.querySelectorAll("a")];c.length===1?r=c[0].href:r=c.map(d=>d.href)}else if(o.querySelector("img")){const c=[...o.querySelectorAll("img")];c.length===1?r=c[0].src:r=c.map(d=>d.src)}else if(o.querySelector("p")){const c=[...o.querySelectorAll("p")];c.length===1?r=c[0].textContent:r=c.map(d=>d.textContent)}else r=s.children[1].textContent;t[a]=r}}}),t}decorateBlocks(e){e.querySelectorAll("div.section > div > div").forEach(this.decorateBlock)}decorateBlock(e){const t=e.classList[0];if(t){e.classList.add("block"),e.dataset.blockName=t;const s=e.parentElement;s==null||s.classList.add(`${t}-wrapper`);const n=e.closest(".section");n&&n.classList.add(`${t}-container`)}}}class C{constructor(e){this.blockService=e}init(e){this.transformSection(e)}transformSection(e){e.querySelectorAll(":scope > div").forEach(t=>{this.adjustMarkup(t),this.processSectionMetaData(t)})}processSectionMetaData(e){const t=e.querySelector("div.section-metadata");if(t){const s=this.blockService.readBlockConfig(t);Object.keys(s).forEach(n=>{n==="style"?s.style.split(",").filter(a=>a).map(a=>u(a.trim())).forEach(a=>e.classList.add(a)):e.dataset[w(n)]=s[n]}),t.parentElement&&t.parentElement.remove()}}adjustMarkup(e){const t=[];let s=!1;[...e.children].forEach(n=>{if(n.tagName==="DIV"||!s){const o=document.createElement("div");t.push(o),s=n.tagName!=="DIV",s&&o.classList.add("default-content-wrapper")}t[t.length-1].append(n)}),t.forEach(n=>e.append(n)),e.classList.add("section"),e.dataset.sectionStatus="initialized",e.style.display="none"}}class L{constructor(e,t){this.sectionService=e,this.blockService=t,this.init=async()=>{this.setup(),await this.loadEager()},this.loadEager=async()=>{document.documentElement.lang="en",this.decorateTemplateAndTheme();const s=document.querySelector("main");s&&(s.setAttribute("id","main"),this.addSidebarContainer(s),this.sectionService.init(s),this.addInnerContainer(s),this.blockService.decorateBlocks(s),await this.loadComponents(),document.body.classList.add("appear"))},this.loadComponents=async()=>{document.querySelectorAll(".section").forEach(n=>{const o=[],a=n.querySelectorAll("[data-block-name]");if(!a.length){n.style.removeProperty("display");return}a.forEach(r=>{r.style.display="none",o.push({name:r.dataset.blockName,element:r})}),o.length&&o.forEach(async r=>{const c=await v(()=>import(`${window.hlx.codeBasePath}/dist/${r.name}/${r.name}.js`),__vite__mapDeps([]));c.default&&await c.default(r.element)}),n.style.removeProperty("display")})}}setup(){window.hlx=window.hlx||{},window.hlx.RUM_MASK_URL="full",window.hlx.codeBasePath="",window.hlx.lighthouse=new URLSearchParams(window.location.search).get("lighthouse")==="on";const e=document.querySelector('script[src$="/scripts/scripts.js"]');if(e)try{[window.hlx.codeBasePath]=new URL(e.src).pathname.split("/scripts/scripts.js")}catch(t){console.log(t)}}addSidebarContainer(e){const t=document.createElement("div");t.classList.add("sidebar"),t.setAttribute("id","sidebar"),e.after(t)}addInnerContainer(e){const t=e.innerHTML;e.innerHTML=`
${t}
`}decorateTemplateAndTheme(){const e=y("template");e&&p(document.body,e);const t=y("theme");t&&p(document.body,t)}}(async function(){const i=new E,e=new C(i);await new L(e,i).init()})(); function __vite__mapDeps(indexes) { if (!__vite__mapDeps.viteFileDeps) { __vite__mapDeps.viteFileDeps = [] diff --git a/dist/main/main.js.map b/dist/main/main.js.map index 49d87f4f..0c141328 100644 --- a/dist/main/main.js.map +++ b/dist/main/main.js.map @@ -1 +1 @@ -{"version":3,"mappings":"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","names":["toClassName","name","addClasses","element","classes","c","getMetadata","doc","attr","meta","m","toCamelCase","g","BlockService","block","config","row","cols","col","value","as","a","imgs","img","ps","p","main","shortBlockName","blockWrapper","section","SectionService","blockService","container","sectionMeta","key","style","wrappers","defaultContent","e","wrapper","Main","sectionService","components","blocks","component","componentModule","__vitePreload","scriptEl","error","children","sidebarContainer","template","theme"],"sources":["../../src/utils/toClassName.ts","../../src/utils/addClasses.ts","../../src/utils/getMetadata.ts","../../src/utils/toCamelCase.ts","../../src/main.ts"],"sourcesContent":["export function toClassName(name: string) {\n return typeof name === 'string'\n ? name\n .toLowerCase()\n .replace(/[^0-9a-z]/gi, '-')\n .replace(/-+/g, '-')\n .replace(/^-|-$/g, '')\n : '';\n}\n","import { toClassName } from './toClassName';\n\nexport const addClasses = (element: HTMLElement, classes: string) => {\n classes.split(',').forEach((c) => {\n element.classList.add(toClassName(c.trim()));\n });\n};\n","export function getMetadata(name: string, doc = document) {\n const attr = name && name.includes(':') ? 'property' : 'name';\n const metaTags: HTMLMetaElement[] =\n ([...doc.head.querySelectorAll(`meta[${attr}=\"${name}\"]`)] as HTMLMetaElement[]) || [];\n const meta = metaTags\n .map((m) => {\n return m.content;\n })\n .join(', ');\n return meta.length ? meta : '';\n}\n","import { toClassName } from './toClassName';\n\n/**\n * Sanitizes a string for use as a js property name.\n * @param {string} name The unsanitized string\n * @returns {string} The camelCased name\n */\nexport function toCamelCase(name: string) {\n return toClassName(name).replace(/-([a-z])/g, (g) => g[1].toUpperCase());\n}\n","// const LCP_BLOCKS: string[] = []; // add your LCP blocks to the list\n\nimport { addClasses } from \"../src/utils/addClasses\";\nimport { getMetadata } from \"../src/utils/getMetadata\";\nimport { toCamelCase } from \"../src/utils/toCamelCase\";\nimport { toClassName } from \"../src/utils/toClassName\";\n\ntype ComponentMapping = {\n name: string;\n element: HTMLDivElement;\n};\n\nclass BlockService {\n /**\n * Extracts the config from a block.\n * @param {Element} block The block element\n * @returns {object} The block config\n */\n readBlockConfig(block: Element): Record {\n const config: Record = {};\n block.querySelectorAll(\":scope > div\").forEach((row) => {\n if (row.children) {\n const cols = [...row.children];\n if (cols[1]) {\n const col = cols[1];\n const name = toClassName(cols[0].textContent ?? \"\");\n let value: any = \"\";\n if (col.querySelector(\"a\")) {\n const as = [...col.querySelectorAll(\"a\")];\n if (as.length === 1) {\n value = as[0].href;\n } else {\n value = as.map((a) => a.href);\n }\n } else if (col.querySelector(\"img\")) {\n const imgs = [...col.querySelectorAll(\"img\")];\n if (imgs.length === 1) {\n value = imgs[0].src;\n } else {\n value = imgs.map((img) => img.src);\n }\n } else if (col.querySelector(\"p\")) {\n const ps = [...col.querySelectorAll(\"p\")];\n if (ps.length === 1) {\n value = ps[0].textContent;\n } else {\n value = ps.map((p) => p.textContent);\n }\n } else value = row.children[1].textContent;\n config[name] = value;\n }\n }\n });\n return config;\n }\n\n /**\n * Decorates all blocks in a container element.\n * @param {Element} main The container element\n */\n decorateBlocks(main: HTMLElement) {\n main\n .querySelectorAll(\"div.section > div > div\")\n .forEach(this.decorateBlock);\n }\n\n /**\n * Decorates a block.\n * @param {Element} block The block element\n */\n private decorateBlock(block: HTMLElement) {\n const shortBlockName = block.classList[0];\n if (shortBlockName) {\n block.classList.add(\"block\");\n block.dataset.blockName = shortBlockName;\n const blockWrapper = block.parentElement;\n blockWrapper?.classList.add(`${shortBlockName}-wrapper`);\n const section = block.closest(\".section\");\n if (section) section.classList.add(`${shortBlockName}-container`);\n }\n }\n}\n\nclass SectionService {\n constructor(private blockService: BlockService) {}\n\n init(container: HTMLElement) {\n this.transformSection(container);\n }\n\n /**\n * Decorates all sections in a container element.\n * @param {Element} main The container element\n */\n private transformSection(main: HTMLElement) {\n main.querySelectorAll(\":scope > div\").forEach((section) => {\n this.adjustMarkup(section);\n this.processSectionMetaData(section);\n });\n }\n\n private processSectionMetaData(section: HTMLElement) {\n // Process section metadata\n const sectionMeta = section.querySelector(\"div.section-metadata\");\n if (sectionMeta) {\n const meta = this.blockService.readBlockConfig(sectionMeta);\n Object.keys(meta).forEach((key) => {\n if (key === \"style\") {\n const styles = meta.style\n .split(\",\")\n .filter((style: string) => style)\n .map((style: string) => toClassName(style.trim()));\n styles.forEach((style: string) => section.classList.add(style));\n } else {\n section.dataset[toCamelCase(key)] = meta[key];\n }\n });\n if (sectionMeta.parentElement) sectionMeta.parentElement.remove();\n }\n }\n\n private adjustMarkup(section: HTMLDivElement) {\n const wrappers: HTMLDivElement[] = [];\n let defaultContent = false;\n [...section.children].forEach((e) => {\n if (e.tagName === \"DIV\" || !defaultContent) {\n const wrapper = document.createElement(\"div\");\n wrappers.push(wrapper);\n defaultContent = e.tagName !== \"DIV\";\n if (defaultContent) wrapper.classList.add(\"default-content-wrapper\");\n }\n wrappers[wrappers.length - 1].append(e);\n });\n wrappers.forEach((wrapper) => section.append(wrapper));\n section.classList.add(\"section\");\n section.dataset.sectionStatus = \"initialized\";\n section.style.display = \"none\";\n }\n}\n\nclass Main {\n constructor(\n private sectionService: SectionService,\n private blockService: BlockService\n ) {}\n\n init = async () => {\n this.setup();\n await this.loadEager();\n };\n\n /**\n * Setup block utils.\n */\n private setup() {\n window.hlx = window.hlx || {};\n window.hlx.RUM_MASK_URL = \"full\";\n window.hlx.codeBasePath = \"\";\n window.hlx.lighthouse =\n new URLSearchParams(window.location.search).get(\"lighthouse\") === \"on\";\n\n const scriptEl = document.querySelector(\n 'script[src$=\"/scripts/scripts.js\"]'\n ) as HTMLScriptElement;\n if (scriptEl) {\n try {\n [window.hlx.codeBasePath] = new URL(scriptEl.src).pathname.split(\n \"/scripts/scripts.js\"\n );\n } catch (error) {\n // eslint-disable-next-line no-console\n console.log(error);\n }\n }\n }\n\n private loadEager = async () => {\n // TODO: how to support different languages here\n document.documentElement.lang = \"en\";\n this.decorateTemplateAndTheme();\n const main = document.querySelector(\"main\");\n if (main) {\n main.setAttribute('id', 'main');\n this.addSidebarContainer(main);\n this.sectionService.init(main);\n this.blockService.decorateBlocks(main);\n this.loadComponents();\n document.body.classList.add(\"appear\");\n this.addInnerContainer(main);\n // await this.waitForLCP(LCP_BLOCKS);\n }\n };\n\n private addInnerContainer(main: HTMLElement) {\n const children = main.innerHTML;\n main.innerHTML = `
${children}
`;\n }\n\n private addSidebarContainer(main: HTMLElement) {\n const sidebarContainer = document.createElement(\"div\");\n sidebarContainer.classList.add(\"sidebar\");\n sidebarContainer.setAttribute(\"id\", \"sidebar\");\n main.after(sidebarContainer);\n }\n\n // private loadLazy = async () => {};\n\n private decorateTemplateAndTheme() {\n const template = getMetadata(\"template\");\n if (template) addClasses(document.body, template);\n const theme = getMetadata(\"theme\");\n if (theme) addClasses(document.body, theme);\n }\n\n private loadComponents = async () => {\n const sections = document.querySelectorAll(\".section\");\n sections.forEach((section) => {\n const components: ComponentMapping[] = [];\n const blocks =\n section.querySelectorAll(\"[data-block-name]\");\n if (!blocks.length) {\n section.style.removeProperty(\"display\");\n return;\n }\n blocks.forEach((block: HTMLDivElement) => {\n block.style.display = \"none\";\n components.push({\n name: block.dataset[\"blockName\"] as string,\n element: block,\n });\n });\n if (components.length) {\n components.forEach(async (component) => {\n const componentModule = await import(\n `${window.hlx.codeBasePath}/blocks/${component.name}/__compiled__/${component.name}.js`\n );\n if (componentModule.default) {\n await componentModule.default(component.element);\n }\n });\n }\n section.style.removeProperty(\"display\");\n });\n };\n}\n\n(async function () {\n const blockService = new BlockService();\n const sectionService = new SectionService(blockService);\n const main = new Main(sectionService, blockService);\n await main.init();\n})();\n\n// /**\n// * Loads JS and CSS for a block.\n// * @param {Element} block The block element\n// */\n// async function loadBlock(block) {\n// const status = block.dataset.blockStatus;\n// if (status !== 'loading' && status !== 'loaded') {\n// block.dataset.blockStatus = 'loading';\n// const { blockName } = block.dataset;\n// try {\n// const cssLoaded = loadCSS(`${window.hlx.codeBasePath}/blocks/${blockName}/${blockName}.css`);\n// const decorationComplete = new Promise((resolve) => {\n// (async () => {\n// try {\n// const mod = await import(`${window.hlx.codeBasePath}/blocks/${blockName}/${blockName}.js`);\n// if (mod.default) {\n// await mod.default(block);\n// }\n// } catch (error) {\n// // eslint-disable-next-line no-console\n// console.log(`failed to load module for ${blockName}`, error);\n// }\n// resolve();\n// })();\n// });\n// await Promise.all([cssLoaded, decorationComplete]);\n// } catch (error) {\n// // eslint-disable-next-line no-console\n// console.log(`failed to load block ${blockName}`, error);\n// }\n// block.dataset.blockStatus = 'loaded';\n// }\n// return block;\n// }\n\ndeclare global {\n interface Window {\n hlx: {\n RUM_MASK_URL: string;\n codeBasePath: string;\n lighthouse: boolean;\n };\n }\n}\n"],"file":"main/main.js"} \ No newline at end of file +{"version":3,"mappings":"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","names":["toClassName","name","addClasses","element","classes","c","getMetadata","doc","attr","meta","m","toCamelCase","g","BlockService","block","config","row","cols","col","value","as","a","imgs","img","ps","p","main","shortBlockName","blockWrapper","section","SectionService","blockService","container","sectionMeta","key","style","wrappers","defaultContent","e","wrapper","Main","sectionService","components","blocks","component","componentModule","scriptEl","error","sidebarContainer","children","template","theme"],"sources":["../../src/utils/toClassName.ts","../../src/utils/addClasses.ts","../../src/utils/getMetadata.ts","../../src/utils/toCamelCase.ts","../../src/main.ts"],"sourcesContent":["export function toClassName(name: string) {\n return typeof name === 'string'\n ? name\n .toLowerCase()\n .replace(/[^0-9a-z]/gi, '-')\n .replace(/-+/g, '-')\n .replace(/^-|-$/g, '')\n : '';\n}\n","import { toClassName } from './toClassName';\n\nexport const addClasses = (element: HTMLElement, classes: string) => {\n classes.split(',').forEach((c) => {\n element.classList.add(toClassName(c.trim()));\n });\n};\n","export function getMetadata(name: string, doc = document) {\n const attr = name && name.includes(':') ? 'property' : 'name';\n const metaTags: HTMLMetaElement[] =\n ([...doc.head.querySelectorAll(`meta[${attr}=\"${name}\"]`)] as HTMLMetaElement[]) || [];\n const meta = metaTags\n .map((m) => {\n return m.content;\n })\n .join(', ');\n return meta.length ? meta : '';\n}\n","import { toClassName } from './toClassName';\n\n/**\n * Sanitizes a string for use as a js property name.\n * @param {string} name The unsanitized string\n * @returns {string} The camelCased name\n */\nexport function toCamelCase(name: string) {\n return toClassName(name).replace(/-([a-z])/g, (g) => g[1].toUpperCase());\n}\n","// const LCP_BLOCKS: string[] = []; // add your LCP blocks to the list\n\nimport { addClasses } from \"../src/utils/addClasses\";\nimport { getMetadata } from \"../src/utils/getMetadata\";\nimport { toCamelCase } from \"../src/utils/toCamelCase\";\nimport { toClassName } from \"../src/utils/toClassName\";\n\ntype ComponentMapping = {\n name: string;\n element: HTMLDivElement;\n};\n\nclass BlockService {\n /**\n * Extracts the config from a block.\n * @param {Element} block The block element\n * @returns {object} The block config\n */\n readBlockConfig(block: Element): Record {\n const config: Record = {};\n block.querySelectorAll(\":scope > div\").forEach((row) => {\n if (row.children) {\n const cols = [...row.children];\n if (cols[1]) {\n const col = cols[1];\n const name = toClassName(cols[0].textContent ?? \"\");\n let value: any = \"\";\n if (col.querySelector(\"a\")) {\n const as = [...col.querySelectorAll(\"a\")];\n if (as.length === 1) {\n value = as[0].href;\n } else {\n value = as.map((a) => a.href);\n }\n } else if (col.querySelector(\"img\")) {\n const imgs = [...col.querySelectorAll(\"img\")];\n if (imgs.length === 1) {\n value = imgs[0].src;\n } else {\n value = imgs.map((img) => img.src);\n }\n } else if (col.querySelector(\"p\")) {\n const ps = [...col.querySelectorAll(\"p\")];\n if (ps.length === 1) {\n value = ps[0].textContent;\n } else {\n value = ps.map((p) => p.textContent);\n }\n } else value = row.children[1].textContent;\n config[name] = value;\n }\n }\n });\n return config;\n }\n\n /**\n * Decorates all blocks in a container element.\n * @param {Element} main The container element\n */\n decorateBlocks(main: HTMLElement) {\n main\n .querySelectorAll(\"div.section > div > div\")\n .forEach(this.decorateBlock);\n }\n\n /**\n * Decorates a block.\n * @param {Element} block The block element\n */\n private decorateBlock(block: HTMLElement) {\n const shortBlockName = block.classList[0];\n if (shortBlockName) {\n block.classList.add(\"block\");\n block.dataset.blockName = shortBlockName;\n const blockWrapper = block.parentElement;\n blockWrapper?.classList.add(`${shortBlockName}-wrapper`);\n const section = block.closest(\".section\");\n if (section) section.classList.add(`${shortBlockName}-container`);\n }\n }\n}\n\nclass SectionService {\n constructor(private blockService: BlockService) {}\n\n init(container: HTMLElement) {\n this.transformSection(container);\n }\n\n /**\n * Decorates all sections in a container element.\n * @param {Element} main The container element\n */\n private transformSection(main: HTMLElement) {\n main.querySelectorAll(\":scope > div\").forEach((section) => {\n this.adjustMarkup(section);\n this.processSectionMetaData(section);\n });\n }\n\n private processSectionMetaData(section: HTMLElement) {\n // Process section metadata\n const sectionMeta = section.querySelector(\"div.section-metadata\");\n if (sectionMeta) {\n const meta = this.blockService.readBlockConfig(sectionMeta);\n Object.keys(meta).forEach((key) => {\n if (key === \"style\") {\n const styles = meta.style\n .split(\",\")\n .filter((style: string) => style)\n .map((style: string) => toClassName(style.trim()));\n styles.forEach((style: string) => section.classList.add(style));\n } else {\n section.dataset[toCamelCase(key)] = meta[key];\n }\n });\n if (sectionMeta.parentElement) sectionMeta.parentElement.remove();\n }\n }\n\n private adjustMarkup(section: HTMLDivElement) {\n const wrappers: HTMLDivElement[] = [];\n let defaultContent = false;\n [...section.children].forEach((e) => {\n if (e.tagName === \"DIV\" || !defaultContent) {\n const wrapper = document.createElement(\"div\");\n wrappers.push(wrapper);\n defaultContent = e.tagName !== \"DIV\";\n if (defaultContent) wrapper.classList.add(\"default-content-wrapper\");\n }\n wrappers[wrappers.length - 1].append(e);\n });\n wrappers.forEach((wrapper) => section.append(wrapper));\n section.classList.add(\"section\");\n section.dataset.sectionStatus = \"initialized\";\n section.style.display = \"none\";\n }\n}\n\nclass Main {\n constructor(\n private sectionService: SectionService,\n private blockService: BlockService\n ) {}\n\n init = async () => {\n this.setup();\n await this.loadEager();\n };\n\n /**\n * Setup block utils.\n */\n private setup() {\n window.hlx = window.hlx || {};\n window.hlx.RUM_MASK_URL = \"full\";\n window.hlx.codeBasePath = \"\";\n window.hlx.lighthouse =\n new URLSearchParams(window.location.search).get(\"lighthouse\") === \"on\";\n\n const scriptEl = document.querySelector(\n 'script[src$=\"/scripts/scripts.js\"]'\n ) as HTMLScriptElement;\n if (scriptEl) {\n try {\n [window.hlx.codeBasePath] = new URL(scriptEl.src).pathname.split(\n \"/scripts/scripts.js\"\n );\n } catch (error) {\n // eslint-disable-next-line no-console\n console.log(error);\n }\n }\n }\n\n private loadEager = async () => {\n // TODO: how to support different languages here\n document.documentElement.lang = \"en\";\n this.decorateTemplateAndTheme();\n const main = document.querySelector(\"main\");\n if (main) {\n main.setAttribute('id', 'main');\n this.addSidebarContainer(main);\n this.sectionService.init(main);\n this.addInnerContainer(main); // TODO refactor initializing\n this.blockService.decorateBlocks(main);\n await this.loadComponents();\n document.body.classList.add(\"appear\");\n // await this.waitForLCP(LCP_BLOCKS);\n }\n };\n \n private addSidebarContainer(main: HTMLElement) {\n const sidebarContainer = document.createElement(\"div\");\n sidebarContainer.classList.add(\"sidebar\");\n sidebarContainer.setAttribute(\"id\", \"sidebar\");\n main.after(sidebarContainer);\n }\n\n private addInnerContainer(main: HTMLElement) {\n const children = main.innerHTML;\n main.innerHTML = `
${children}
`;\n }\n\n // private loadLazy = async () => {};\n\n private decorateTemplateAndTheme() {\n const template = getMetadata(\"template\");\n if (template) addClasses(document.body, template);\n const theme = getMetadata(\"theme\");\n if (theme) addClasses(document.body, theme);\n }\n\n private loadComponents = async () => {\n const sections = document.querySelectorAll(\".section\");\n sections.forEach((section) => {\n const components: ComponentMapping[] = [];\n const blocks =\n section.querySelectorAll(\"[data-block-name]\");\n if (!blocks.length) {\n section.style.removeProperty(\"display\");\n return;\n }\n blocks.forEach((block: HTMLDivElement) => {\n block.style.display = \"none\";\n components.push({\n name: block.dataset[\"blockName\"] as string,\n element: block,\n });\n });\n if (components.length) {\n components.forEach(async (component) => {\n const componentModule = await import(\n `${window.hlx.codeBasePath}/dist/${component.name}/${component.name}.js`\n );\n if (componentModule.default) {\n await componentModule.default(component.element);\n }\n });\n }\n section.style.removeProperty(\"display\");\n });\n };\n}\n\n(async function () {\n const blockService = new BlockService();\n const sectionService = new SectionService(blockService);\n const main = new Main(sectionService, blockService);\n await main.init();\n})();\n\n// /**\n// * Loads JS and CSS for a block.\n// * @param {Element} block The block element\n// */\n// async function loadBlock(block) {\n// const status = block.dataset.blockStatus;\n// if (status !== 'loading' && status !== 'loaded') {\n// block.dataset.blockStatus = 'loading';\n// const { blockName } = block.dataset;\n// try {\n// const cssLoaded = loadCSS(`${window.hlx.codeBasePath}/blocks/${blockName}/${blockName}.css`);\n// const decorationComplete = new Promise((resolve) => {\n// (async () => {\n// try {\n// const mod = await import(`${window.hlx.codeBasePath}/blocks/${blockName}/${blockName}.js`);\n// if (mod.default) {\n// await mod.default(block);\n// }\n// } catch (error) {\n// // eslint-disable-next-line no-console\n// console.log(`failed to load module for ${blockName}`, error);\n// }\n// resolve();\n// })();\n// });\n// await Promise.all([cssLoaded, decorationComplete]);\n// } catch (error) {\n// // eslint-disable-next-line no-console\n// console.log(`failed to load block ${blockName}`, error);\n// }\n// block.dataset.blockStatus = 'loaded';\n// }\n// return block;\n// }\n\ndeclare global {\n interface Window {\n hlx: {\n RUM_MASK_URL: string;\n codeBasePath: string;\n lighthouse: boolean;\n };\n }\n}\n"],"file":"main/main.js"} \ No newline at end of file diff --git a/src/blocks/banner/banner.ts b/src/blocks/banner/banner.ts new file mode 100644 index 00000000..9dc8fbd2 --- /dev/null +++ b/src/blocks/banner/banner.ts @@ -0,0 +1,6 @@ +export default function (block: HTMLElement) { + const org_content = block.innerHTML; + console.log(block); + block.innerHTML = `
hi
`; + block.style.removeProperty("display"); +} \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index b70d85de..ea4032be 100644 --- a/src/main.ts +++ b/src/main.ts @@ -183,19 +183,14 @@ class Main { main.setAttribute('id', 'main'); this.addSidebarContainer(main); this.sectionService.init(main); + this.addInnerContainer(main); // TODO refactor initializing this.blockService.decorateBlocks(main); - this.loadComponents(); + await this.loadComponents(); document.body.classList.add("appear"); - this.addInnerContainer(main); // await this.waitForLCP(LCP_BLOCKS); } }; - - private addInnerContainer(main: HTMLElement) { - const children = main.innerHTML; - main.innerHTML = `
${children}
`; - } - + private addSidebarContainer(main: HTMLElement) { const sidebarContainer = document.createElement("div"); sidebarContainer.classList.add("sidebar"); @@ -203,6 +198,11 @@ class Main { main.after(sidebarContainer); } + private addInnerContainer(main: HTMLElement) { + const children = main.innerHTML; + main.innerHTML = `
${children}
`; + } + // private loadLazy = async () => {}; private decorateTemplateAndTheme() { @@ -232,7 +232,7 @@ class Main { if (components.length) { components.forEach(async (component) => { const componentModule = await import( - `${window.hlx.codeBasePath}/blocks/${component.name}/__compiled__/${component.name}.js` + `${window.hlx.codeBasePath}/dist/${component.name}/${component.name}.js` ); if (componentModule.default) { await componentModule.default(component.element); diff --git a/types/blocks/banner/banner.d.ts b/types/blocks/banner/banner.d.ts new file mode 100644 index 00000000..95509577 --- /dev/null +++ b/types/blocks/banner/banner.d.ts @@ -0,0 +1 @@ +export default function (block: HTMLElement): void; diff --git a/vite.config.ts b/vite.config.ts index 893f295d..558d1d71 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -25,6 +25,7 @@ export default defineConfig(({ command, mode }) => { styles: resolve(__dirname, "src/styles/sass/main.scss"), main: resolve(__dirname, "src/main.ts"), counter: resolve(__dirname, "src/blocks/counter/counter.ts"), + banner: resolve(__dirname, "src/blocks/banner/banner.ts"), }, output: { dir: "dist",