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]) {