From e0bb00ea2c87c58f662b4064f1b2d22ef1bd5be9 Mon Sep 17 00:00:00 2001 From: Florin Raducan Date: Wed, 18 Dec 2024 13:24:59 +0200 Subject: [PATCH 1/3] Add columns block --- blocks/columns/columns.js | 6 ++++++ blocks/grid-item/grid-item.css | 18 +++++++++--------- blocks/grid/grid.css | 2 +- scripts/component-list/component-list.js | 17 +++++++++++++++++ scripts/render/dom-reducers.js | 5 ++--- scripts/render/dom-reducers.preview.js | 6 +++--- scripts/render/dom.js | 19 ++++++++++++++++++- 7 files changed, 56 insertions(+), 17 deletions(-) create mode 100644 blocks/columns/columns.js diff --git a/blocks/columns/columns.js b/blocks/columns/columns.js new file mode 100644 index 0000000..a15770c --- /dev/null +++ b/blocks/columns/columns.js @@ -0,0 +1,6 @@ +import Grid from '../grid/grid.js'; + +export default class Columns extends Grid { + // only one attribute is observed rest is set as css variables directly + static observedAttributes = ['data-reverse']; +} diff --git a/blocks/grid-item/grid-item.css b/blocks/grid-item/grid-item.css index def0149..5cab07b 100644 --- a/blocks/grid-item/grid-item.css +++ b/blocks/grid-item/grid-item.css @@ -1,4 +1,4 @@ -raqn-grid-item { +:where(raqn-grid-item, .raqn-grid-item) { --grid-item-justify: initial; --grid-item-align: initial; --grid-item-order: initial; @@ -20,7 +20,7 @@ raqn-grid-item { } /* Make grid item sticky */ -raqn-grid-item[data-sticky='true' i] { +:where(raqn-grid-item, .raqn-grid-item)[data-sticky='true' i] { position: sticky; top: var(--header-height); height: fit-content; @@ -33,11 +33,11 @@ raqn-grid-item[data-sticky='true' i] { /* Start Make entire item clickable * if the first anchor in the grid item is italic */ -raqn-grid-item:has(> p:first-child > em:only-child > a:only-child) { +:where(raqn-grid-item, .raqn-grid-item):has(> p:first-child > em:only-child > a:only-child) { position: relative; } -raqn-grid-item:has(> p:first-child > em:only-child > a:only-child) > p:first-child a { +:where(raqn-grid-item, .raqn-grid-item):has(> p:first-child > em:only-child > a:only-child) > p:first-child a { position: absolute; inset-block-end: 0; inset-inline-end: 0; @@ -49,27 +49,27 @@ raqn-grid-item:has(> p:first-child > em:only-child > a:only-child) > p:first-chi } /* Make other anchor or buttons in the grid item still accessible */ -raqn-grid-item:has(> p:first-child > em:only-child > a:only-child) :where(a, button) { +:where(raqn-grid-item, .raqn-grid-item):has(> p:first-child > em:only-child > a:only-child) :where(a, button) { position: relative; z-index: 2; } -raqn-grid-item > p:first-child:has(> em:only-child > a:only-child) { +:where(raqn-grid-item, .raqn-grid-item) > p:first-child:has(> em:only-child > a:only-child) { margin: 0; } /* End */ /* Start Remove unwanted spacing from elements inside grid item */ -raqn-grid-item > :first-child { +:where(raqn-grid-item, .raqn-grid-item) > :first-child { margin-block-start: 0; } -raqn-grid-item > :last-child { +:where(raqn-grid-item, .raqn-grid-item) > :last-child { margin-block-end: 0; } -raqn-grid-item > p:first-child:has(> em:only-child > a:only-child) + * { +:where(raqn-grid-item, .raqn-grid-item) > p:first-child:has(> em:only-child > a:only-child) + * { margin-block-start: 0; } diff --git a/blocks/grid/grid.css b/blocks/grid/grid.css index 4c95a4c..41e5715 100644 --- a/blocks/grid/grid.css +++ b/blocks/grid/grid.css @@ -1,4 +1,4 @@ -raqn-grid { +:where(raqn-grid, .raqn-grid) { /* Set to initial to prevent inheritance for nested grids */ --grid-gap: initial; --grid-height: initial; diff --git a/scripts/component-list/component-list.js b/scripts/component-list/component-list.js index ee2c9a3..d917e0e 100644 --- a/scripts/component-list/component-list.js +++ b/scripts/component-list/component-list.js @@ -267,6 +267,23 @@ export const componentList = { priority: 4, }, }, + columns: { + tag: 'raqn-columns', + // method: 'replace', + transform(node) { + node.tag = this.tag; + setPropsAndAttributes(node); + node.addClass('raqn-grid'); + [...node.children].forEach((n) => n.addClass('raqn-grid-item') || n.unWrap()); + + node.children.forEach((n) => n.addClass('raqn-grid-item')); + }, + module: { + path: '/blocks/columns/columns', + loadCSS: false, + dependencies: ['grid', 'grid-item'], + }, + }, grid: { tag: 'raqn-grid', method: 'replace', diff --git a/scripts/render/dom-reducers.js b/scripts/render/dom-reducers.js index 5ee1402..7219740 100644 --- a/scripts/render/dom-reducers.js +++ b/scripts/render/dom-reducers.js @@ -75,7 +75,7 @@ export const toWebComponent = (virtualDom) => { // Simple and fast in place tag replacement recursive((node) => { replaceBlocks.forEach(([blockName, config]) => { - if (node?.class?.includes?.(blockName) || config.filterNode?.(node)) { + if (node?.hasClass?.(blockName) || config.filterNode?.(node)) { node.tag = config.tag; setPropsAndAttributes(node); addToLoadComponents(blockName, config); @@ -85,8 +85,7 @@ export const toWebComponent = (virtualDom) => { // More complex transformation need to be done in order based on a separate query for each component. queryBlocks.forEach(([blockName, config]) => { - const filter = - config.filterNode?.bind(config) || ((node) => node?.class?.includes?.(blockName) || node.tag === blockName); + const filter = config.filterNode?.bind(config) || ((node) => node?.hasClass?.(blockName) || node.tag === blockName); const nodes = virtualDom.queryAll(filter, { queryLevel: config.queryLevel }); nodes.forEach((node) => { diff --git a/scripts/render/dom-reducers.preview.js b/scripts/render/dom-reducers.preview.js index b8d4117..b29939b 100644 --- a/scripts/render/dom-reducers.preview.js +++ b/scripts/render/dom-reducers.preview.js @@ -6,13 +6,13 @@ import { isTemplatePage } from '../libs.js'; export const highlightTemplatePlaceholders = (tplVirtualDom) => { tplVirtualDom.queryAll((node) => { if (!tplPlaceholderCheck('p', node)) return false; - node.class.push('template-placeholder'); + node.addClass('template-placeholder'); return true; }); }; export const noContentPlaceholder = (node) => { - node.class.push('template-placeholder'); + node.addClass('template-placeholder'); node.append({ tag: 'span', class: ['error-message-box'], @@ -40,7 +40,7 @@ export const duplicatedPlaceholder = (placeholdersNodes, placeholders, markAll = } duplicatesNodes.forEach((node) => { - node.class.push('template-placeholder'); + node.addClass('template-placeholder'); node.append({ tag: 'span', class: ['error-message-box'], diff --git a/scripts/render/dom.js b/scripts/render/dom.js index 539bb0a..8009bf9 100644 --- a/scripts/render/dom.js +++ b/scripts/render/dom.js @@ -81,9 +81,19 @@ export function nodeProxy(rawNode) { return (...classes) => classes.every((cls) => target.class.includes(cls)); } + if (prop === 'addClass') { + return (cls) => { + if (!target.class.includes(cls)) target.class.push(cls); + }; + } + // mehod if (prop === 'removeClass') { - return (cls) => target.class.splice(target.class.indexOf(cls), 1); + return (cls) => { + while (target.class.indexOf(cls) !== -1) { + target.class.splice(target.class.indexOf(cls), 1); + } + }; } // mehod @@ -132,6 +142,13 @@ export function nodeProxy(rawNode) { }; } + // mehod + if (prop === 'unWrap') { + return () => { + proxyNode.replaceWith(...proxyNode.children); + }; + } + // mehod if (prop === 'after') { return (...nodes) => { From 1dc41429dce5f42244acc8ec9fadb1a779284c09 Mon Sep 17 00:00:00 2001 From: Florin Raducan Date: Wed, 18 Dec 2024 14:35:47 +0200 Subject: [PATCH 2/3] Cleanup and adjustment for grid and grid-item --- blocks/grid-item/grid-item.js | 21 --------------------- blocks/grid/grid.js | 4 ++-- 2 files changed, 2 insertions(+), 23 deletions(-) diff --git a/blocks/grid-item/grid-item.js b/blocks/grid-item/grid-item.js index 7777a15..5810559 100644 --- a/blocks/grid-item/grid-item.js +++ b/blocks/grid-item/grid-item.js @@ -13,27 +13,6 @@ export default class GridItem extends ComponentBase { gridParent = null; - get siblingsItems() { - return this.gridParent.gridItems.filter((x) => x !== this); - } - - get logicalOrder() { - return this.gridParent.gridItems.indexOf(this) + 1; - } - - get areaName() { - return `item-${this.logicalOrder}`; - } - - // This method is called by the gridParent when a grid-template-areas is set. - setAutoAreaName(add = true) { - if (add) { - this.dataset.area = this.areaName; - } else { - delete this.dataset.area; - } - } - init() { super.init(); this.gridParent ??= this.parentElement; diff --git a/blocks/grid/grid.js b/blocks/grid/grid.js index 732228e..f247777 100644 --- a/blocks/grid/grid.js +++ b/blocks/grid/grid.js @@ -28,9 +28,9 @@ export default class Grid extends ComponentBase { items.forEach((item, index) => { if (reverse) { - item.dataset.order = index + 1; + item.style.setProperty('--grid-item-order', index + 1); } else { - delete item.dataset.order; + item.style.removeProperty('--grid-item-order'); } }); } From 620981ddd530cef8e86624c42e283aa255ad08b1 Mon Sep 17 00:00:00 2001 From: Florin Raducan Date: Wed, 18 Dec 2024 16:03:53 +0200 Subject: [PATCH 3/3] Cleanup --- scripts/component-list/component-list.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/component-list/component-list.js b/scripts/component-list/component-list.js index d917e0e..4223f99 100644 --- a/scripts/component-list/component-list.js +++ b/scripts/component-list/component-list.js @@ -274,7 +274,7 @@ export const componentList = { node.tag = this.tag; setPropsAndAttributes(node); node.addClass('raqn-grid'); - [...node.children].forEach((n) => n.addClass('raqn-grid-item') || n.unWrap()); + [...node.children].forEach((n) => n.unWrap()); node.children.forEach((n) => n.addClass('raqn-grid-item')); },