From 9e1bb10b4a9c88f593b079e665a49570220635c2 Mon Sep 17 00:00:00 2001 From: Florin Raducan Date: Tue, 23 Apr 2024 22:35:18 +0300 Subject: [PATCH] #474566 - remove mixin --- blocks/breadcrumbs/breadcrumbs.js | 1 - blocks/columns/columns.js | 20 +---- blocks/section-metadata/section-metadata.js | 13 ++-- head.html | 1 - mixins/column/column.css | 3 - mixins/column/column.js | 86 --------------------- scripts/component-loader.js | 5 -- scripts/component-mixin.js | 61 --------------- scripts/init.js | 9 +-- scripts/libs.js | 16 +--- 10 files changed, 15 insertions(+), 200 deletions(-) delete mode 100644 mixins/column/column.css delete mode 100644 mixins/column/column.js delete mode 100644 scripts/component-mixin.js diff --git a/blocks/breadcrumbs/breadcrumbs.js b/blocks/breadcrumbs/breadcrumbs.js index a6c49918..09998870 100644 --- a/blocks/breadcrumbs/breadcrumbs.js +++ b/blocks/breadcrumbs/breadcrumbs.js @@ -6,7 +6,6 @@ export default class Breadcrumbs extends ComponentBase { ...ComponentBase.loaderConfig, targetsSelectors: 'main > div', targetsSelectorsLimit: 1, - targetsAsContainers: true, }; nestedComponentsConfig = {}; diff --git a/blocks/columns/columns.js b/blocks/columns/columns.js index b99948a4..8e4ca203 100644 --- a/blocks/columns/columns.js +++ b/blocks/columns/columns.js @@ -9,7 +9,6 @@ export default class Columns { const { currentAttributes } = collectAttributes( data.componentName, data.rawClasses, - [], Columns.observedAttributes, this.element, ); @@ -32,9 +31,7 @@ export default class Columns { const parent = this.element.parentElement; const children = Array.from(parent.children); parent.classList.add('raqn-grid'); - let parentGridTemplateColumns = parent.style.getPropertyValue( - '--grid-template-columns', - ); + let parentGridTemplateColumns = parent.style.getPropertyValue('--grid-template-columns'); if (!parentGridTemplateColumns) { // we have no grid template columns yet parentGridTemplateColumns = children @@ -46,10 +43,7 @@ export default class Columns { }) .join(' '); // set the new grid template columns - parent.style.setProperty( - '--grid-template-columns', - parentGridTemplateColumns, - ); + parent.style.setProperty('--grid-template-columns', parentGridTemplateColumns); } else { const { position } = this; const prio = children.indexOf(this.element) + 1; @@ -74,10 +68,7 @@ export default class Columns { }) .join(' '); // set the new grid template columns - parent.style.setProperty( - '--grid-template-columns', - parentGridTemplateColumns, - ); + parent.style.setProperty('--grid-template-columns', parentGridTemplateColumns); } this.element.style.gridColumn = this.position; this.element.style.gridRow = 1; @@ -85,9 +76,6 @@ export default class Columns { } getAttribute(name) { - return ( - this.element.getAttribute(name) || - this.element.getAttribute(`data-${name}`) - ); + return this.element.getAttribute(name) || this.element.getAttribute(`data-${name}`); } } diff --git a/blocks/section-metadata/section-metadata.js b/blocks/section-metadata/section-metadata.js index 76675076..92a900eb 100644 --- a/blocks/section-metadata/section-metadata.js +++ b/blocks/section-metadata/section-metadata.js @@ -1,23 +1,22 @@ import { collectAttributes } from '../../scripts/libs.js'; import ComponentBase from '../../scripts/component-base.js'; -import ComponentMixin from '../../scripts/component-mixin.js'; // TODO the block for this component should not have content, the values should come only form class attribute as for any other component // as for any other block. should replace the this.parentElement export default class SectionMetadata extends ComponentBase { async ready() { - const classes = [...this.querySelectorAll(':scope > div > div:first-child')] - .map((keyCell) => `${keyCell.textContent.trim()}-${keyCell.nextElementSibling.textContent.trim()}`); - - const { currentAttributes } = collectAttributes('section-metadata', classes, await ComponentMixin.getMixins(), this.knownAttributes, this); + const classes = [...this.querySelectorAll(':scope > div > div:first-child')].map( + (keyCell) => `${keyCell.textContent.trim()}-${keyCell.nextElementSibling.textContent.trim()}`, + ); + + const { currentAttributes } = collectAttributes('section-metadata', classes, this.knownAttributes, this); const section = this.parentElement; Object.keys(currentAttributes).forEach((key) => { - if(key === 'class') { + if (key === 'class') { section.setAttribute(key, currentAttributes[key]); } else { section.setAttribute(`data-${key}`, currentAttributes[key]); } }); - await ComponentMixin.startAll(section); } } diff --git a/head.html b/head.html index e4f50f0c..9711645d 100644 --- a/head.html +++ b/head.html @@ -23,7 +23,6 @@ - diff --git a/mixins/column/column.css b/mixins/column/column.css deleted file mode 100644 index 1879b40e..00000000 --- a/mixins/column/column.css +++ /dev/null @@ -1,3 +0,0 @@ -raqn-column { - margin: var(--scope-margin, 0); -} diff --git a/mixins/column/column.js b/mixins/column/column.js deleted file mode 100644 index 909f3dde..00000000 --- a/mixins/column/column.js +++ /dev/null @@ -1,86 +0,0 @@ -import ComponentMixin from '../../scripts/component-mixin.js'; - -export default class Column extends ComponentMixin { - static observedAttributes = ['column-position', 'column-size', 'column-justify']; - - constructor(element) { - super(element); - this.position = parseInt(this.getAttribute('column-position'), 10); - this.size = this.getAttribute('column-size'); - this.justify = this.getAttribute('column-justify') || 'stretch'; - } - - start() { - const content = this.element.querySelectorAll('div > div'); - // clean up dom structure (div div div div div div) and save the content - this.contentChildren = Array.from(content).map((child) => { - const { children } = child; - const parent = child.parentNode; - if (children.length > 0) { - child.replaceWith(...children); - } - return parent; - }); - this.calculateGridTemplateColumns(); - } - - calculateGridTemplateColumns() { - if (this.justify) { - this.element.style.justifyContent = this.justify; - } - if (this.position) { - const parent = this.element.parentElement; - const children = Array.from(parent.children); - parent.classList.add('raqn-grid'); - let parentGridTemplateColumns = parent.style.getPropertyValue( - '--grid-template-columns', - ); - if (!parentGridTemplateColumns) { - // we have no grid template columns yet - parentGridTemplateColumns = children - .map((child, index) => { - if (this.position === index + 1) { - return this.size || 'auto'; - } - return 'auto'; - }) - .join(' '); - // set the new grid template columns - parent.style.setProperty( - '--grid-template-columns', - parentGridTemplateColumns, - ); - } else { - const { position } = this; - const prio = children.indexOf(this.element) + 1; - parentGridTemplateColumns = parentGridTemplateColumns - .split(' ') - .map((size, i) => { - // we have a non standard value for this position - const hasValue = size !== 'auto'; - // we are at the position - const isPosition = i + 1 === position; - // we are at a position before the prio - const isBeforePrio = i + 1 <= prio; - // we have a non standard value for this position and we are at the position - if (!hasValue && isPosition) { - return this.size || 'auto'; - } - // we have a non standard value for this position and we are at a position before the prio - if (hasValue && isPosition && isBeforePrio) { - return this.size || size; - } - return size; - }) - .join(' '); - // set the new grid template columns - parent.style.setProperty( - '--grid-template-columns', - parentGridTemplateColumns, - ); - } - this.element.style.gridColumn = this.position; - this.element.style.gridRow = 1; - } - } -} diff --git a/scripts/component-loader.js b/scripts/component-loader.js index 3db8d095..1411c692 100644 --- a/scripts/component-loader.js +++ b/scripts/component-loader.js @@ -1,7 +1,4 @@ import { collectAttributes, loadModule, deepMerge, mergeUniqueArrays } from './libs.js'; -// import ComponentBase from './component-base.js'; - -import ComponentMixin from './component-mixin.js'; export default class ComponentLoader { constructor({ componentName, targets = [], loaderConfig, rawClasses, config, nestedComponentsConfig, active }) { @@ -128,7 +125,6 @@ export default class ComponentLoader { const { currentAttributes, nestedComponents } = collectAttributes( this.componentName, data.rawClasses, - await ComponentMixin.getMixins(), this?.Handler?.knownAttributes, componentElem, ); @@ -172,7 +168,6 @@ export default class ComponentLoader { const initListener = async (event) => { if (event.detail.element === componentElem) { componentElem.removeEventListener('initialized', initListener); - await ComponentMixin.startAll(componentElem); componentElem.removeAttribute('isloading'); resolve(componentElem); } diff --git a/scripts/component-mixin.js b/scripts/component-mixin.js deleted file mode 100644 index a7517451..00000000 --- a/scripts/component-mixin.js +++ /dev/null @@ -1,61 +0,0 @@ -import { getMeta, loadModule } from './libs.js'; - -export default class ComponentMixin { - static applies(element) { - return ( - this.observedAttributes && - [...element.attributes] - .map((attribute) => attribute.name) - .find((search) => - this.observedAttributes.find( - (attribute) => - search.startsWith(attribute) || - search.startsWith(`data-${attribute}`), - ), - ) - ); - } - - static async getMixins() { - if (!window.raqnMixins) { - window.raqnMixins = (async () => { - const mixins = getMeta('mixins'); - window.raqnMixins = await Promise.all( - (mixins ? mixins.split(',') : []).map(async (mixin) => { - const { css, js } = loadModule( - `/mixins/${mixin.trim()}/${mixin.trim()}`, - ); - await css; - const mod = await js; - return mod.default; - }), - ); - return window.raqnMixins; - })(); - } - return window.raqnMixins; - } - - static async startAll(element) { - return Promise.all( - (await ComponentMixin.getMixins()) - .filter((mixin) => mixin.applies(element)) - .map((Mixin) => new Mixin(element).start()), - ); - } - - constructor(element) { - this.element = element; - } - - getAttribute(name) { - return ( - this.element.getAttribute(name) || - this.element.getAttribute(`data-${name}`) - ); - } - - async start() { - // NOP, should be overwritten by implementation - } -} diff --git a/scripts/init.js b/scripts/init.js index 92589464..aa032c9e 100644 --- a/scripts/init.js +++ b/scripts/init.js @@ -1,5 +1,4 @@ import ComponentLoader from './component-loader.js'; -import ComponentMixin from './component-mixin.js'; import { globalConfig, eagerImage, getMeta, getMetaGroup } from './libs.js'; const component = { @@ -105,8 +104,7 @@ const onLoadComponents = { findLcp(data) { return ( - this.lcp.find(({ componentName }) => componentName === data.componentName) || - data.lcp /* || + this.lcp.find(({ componentName }) => componentName === data.componentName) || data.lcp /* || [...document.querySelectorAll('main > div > [class]:nth-child(-n+2)')].find((el) => el === data.block) */ ); }, @@ -127,16 +125,11 @@ const onLoadComponents = { const globalInit = { async init() { - this.loadMixins(); this.setLang(); this.initEagerImages(); onLoadComponents.init(); }, - loadMixins() { - ComponentMixin.getMixins(); - }, - // TODO - maybe take this from the url structure. setLang() { document.documentElement.lang ||= 'en'; diff --git a/scripts/libs.js b/scripts/libs.js index 7d30580e..57d8706c 100644 --- a/scripts/libs.js +++ b/scripts/libs.js @@ -147,7 +147,7 @@ export function getMetaGroup(group) { })); } -export function collectAttributes(componentName, classes, mixins, knownAttributes = [], element = null) { +export function collectAttributes(componentName, classes, knownAttributes = [], element = null) { const classesList = []; const mediaAttributes = {}; const attributesValues = element?.attributesValues || {}; @@ -173,13 +173,11 @@ export function collectAttributes(componentName, classes, mixins, knownAttribute const nestedComponentsNames = Object.keys(nestedComponents); - const mixinKnownAttributes = mixins.flatMap((mixin) => mixin.observedAttributes || []); const attrs = classesList .filter((c) => c !== componentName && c !== 'block') .reduce((acc, c) => { let value = c; let isKnownAttribute = null; - let isMixinKnownAttributes = null; const classBreakpoint = Object.keys(globalConfig.breakpoints).find((b) => c.startsWith(`${b}-`)); const activeBreakpoint = getBreakPoints().active.name; @@ -203,11 +201,9 @@ export function collectAttributes(componentName, classes, mixins, knownAttribute value = value.slice(key.length + 1); } else { isKnownAttribute = knownAttributes.find((attribute) => value.startsWith(`${attribute}-`)); - isMixinKnownAttributes = mixinKnownAttributes.find((attribute) => value.startsWith(`${attribute}-`)); - const getKnownAttribute = isKnownAttribute || isMixinKnownAttributes; - if (getKnownAttribute) { - key = getKnownAttribute; - value = value.slice(getKnownAttribute.length + 1); + if (isKnownAttribute) { + key = isKnownAttribute; + value = value.slice(isKnownAttribute.length + 1); } } @@ -223,11 +219,7 @@ export function collectAttributes(componentName, classes, mixins, knownAttribute if (isKnownAttribute) attributesValues[camelCaseKey][classBreakpoint] = value; if (isClass) { attributesValues[camelCaseKey][classBreakpoint] ??= ''; - // if (attributesValues[camelCaseKey][classBreakpoint]) { attributesValues[camelCaseKey][classBreakpoint] += `${value} `; - // } else { - // attributesValues[camelCaseKey][classBreakpoint] = value; - // } } // support multivalue attributes } else if (acc[key]) {