@total_onion/onion-library 2.0.122 → 2.0.124

package/components/block-post-info-v3/post-info-v3/post-author.twig

@@ -12,6 +12,6 @@
 </style>
 
 <div class="{{blockClassName}}__content-container {{textEditorContainerClasses}} {{block.id}} {{blockClassName}}__info-item">
-	<span class="{{blockClassName}}__post-author-label" data-pattern-post-info="label_text">{{field.label_text}}</span>
-	<{{elementType|default('p')}} data-pattern-post-info="post_author" class="{{blockClassName}}__post-author {{textEditorElementClasses}} {{block.id}}">{{post.author.name}}</{{elementType|default('p')}}>
+	<span class="{{blockClassName}}__post-author-label">{{field.label_text}}</span>
+	<{{elementType|default('p')}} data-pattern-post-info="author.name" class="{{blockClassName}}__post-author {{textEditorElementClasses}} {{block.id}}">{{post.author.name}}</{{elementType|default('p')}}>
 </div>

package/components/block-post-info-v3/post-info-v3/post-image.twig

@@ -3,6 +3,7 @@
 {% if imageSelect == 'image_accent' %}
 	{% set positionVars = include('components/element-positioning-v3.twig', {fields : field.post_image_positioning, block : block, blockClassName : imageClassname}, with_context = false) %}
 {% endif %}
+
 {% set imageWidthPercentMobile = '--post-image-width-mobile: ' ~ field.post_image_width ~ '%;' %}
 {% set imageWidthPercentDesktop = '--post-image-width-desktop: ' ~ field.post_image_width ~ '%;' %}
 {% if imageSelect == 'image_accent' %}
@@ -25,11 +26,10 @@
 	{% set imageSizes = imageSizes|default('(min-width: 1440px) 50vw, (min-width: 768px) 50vw, (min-width: 500px) 50vw, 100vw') %}
 	{% set imageFields = [] %}
 	{% set imageFields = imageFields|merge({'enable_image' : true}) %}
+
 	{% set imageClassname = 'post-info-v3__post' %}
 	{% if attribute(post, 'post_' ~ imageSelect) %}
 		{% set imageFields = imageFields|merge({'image' : attribute(post, 'post_' ~ imageSelect)}) %}
-	{% elseif attribute(post, postType ~ '_' ~ imageSelect) %}
-		{% set imageFields = imageFields|merge({'image' : attribute(post, postType ~ '_' ~ imageSelect)}) %}
 	{% elseif attribute(post, 'post_image') %}
 		{% set imageFields = imageFields|merge({'image' : attribute(post, 'post_image')}) %}
 	{% endif %}

package/components/block-post-info-v3/post-info-v3/post-publish-date.twig

@@ -8,5 +8,5 @@
 	}
 </style>
 <{{field.text_style.text_element_type|ru}} class="{{blockClassName}}__post-publish-date {{blockClassName}}__info-item {{field.text_style.typography_style|ru}} {{block.id}}">{{field.enable_label ? '<span class="post-publish-date-label">' ~ field.label ~ '</span>' : ''}}
-	<span class="pattern-date">{{post.date}}</span>
+	<span class="{{blockClassName}}__post-publish-date-span" data-pattern-post-info="date">{{post.date}}</span>
 </{{field.text_style.text_element_type|ru}}>

package/onion-loader-dev.js

@@ -0,0 +1,260 @@
+import jsAssetList from "./jsAssets.mjs";
+const fallbackAssetArray = jsAssetList.dynamicAssets;
+/* eslint-disable no-use-before-define */
+/* eslint-disable no-console */
+
+//*** Lazyloader ***//
+
+/**
+ * The options object for the lazyloader.
+ * @type {object}
+ * @property {string} rootMargin The root margin for the IntersectionObserver.
+ * @default '0% 0% 0%'
+ * @property {number} threshold The threshold for the IntersectionObserver.
+ * @property {boolean} debugLogMessages Whether to log debug messages.
+ * @property {array} lazyBlocksToSearchFor The array of lazy blocks to search for.
+ * @property {array} lazyBlocksFound The array of lazy blocks found.
+ * @property {array} assetArray The array of assets to load.
+ * @property {object} assetMap The asset map object.
+ * @property {boolean} ignoreCss Whether to ignore the css.
+ * @property {boolean} lazy Whether to lazy load the assets (after Assets alias).
+ * @property {string} filePath The file path for the js assets.
+ * @default 'js/blocks/'
+ * @property {string} filePathCss The file path for the css assets (after Assets alias).
+ * @default 'scss/blocks/'
+ */
+
+const options = {
+  rootMargin: "100% 0px 300px 0px",
+  threshold: 0,
+  debugLogMessages: false,
+  lazyBlocksToSearchFor: [],
+  lazyBlocksFound: [],
+  assetArray: fallbackAssetArray, //latest assetArray can be found in /@total_onion/onion-library/public/jsAssets.mjs
+  assetMap: {},
+  css: true,
+  lazy: true,
+  cssLoadingStyle: "component", // 'component' or 'bundle'
+  filePrefix: "dev", //'nodemodules', 'assets' or 'dev'
+  fileSuffixJs: ".js",
+  fileSuffixCss: ".scss",
+  filePath: "js/blocks",
+  filePathCss: "scss/blocks",
+};
+
+/**
+ * Initializes the lazyloader.
+ */
+function lazyloaderInit() {
+  options.debugLogMessages && console.log("Lazy Loader initialized!");
+  options.lazyBlocksToSearchFor = [];
+  options.assetArray.forEach((asset) => {
+    // if (options.filePrefix === "nodemodules") {
+    //   options.assetMap[asset.assetKey] = {
+    //     js: () =>
+    //       import(
+    //         `NodeModules/@total_onion/onion-library/components/block-${asset.assetKey}/${asset.assetKey}${options.fileSuffixJs}`
+    //       ),
+    //     css: options.ignoreCss === true,
+    //   };
+    // }
+    // if (options.filePrefix === "assets") {
+    //   options.assetMap[asset.assetKey] = {
+    //     js: () => import(`Assets/${this.options.filePath}/${asset.assetKey}`),
+    //     css: options.ignoreCss === false,
+    //   };
+    // }
+
+    if (options.filePrefix === "dev") {
+      options.assetMap[asset.assetKey] = {
+        js: () =>
+          import(
+            `../../../../../../../../onion-library/components/block-${asset.assetKey}/${asset.assetKey}${options.fileSuffixJs}`
+          ),
+        css: options.ignoreCss === true,
+      };
+    }
+
+    // Add to lazy blocks to search for
+    options.lazyBlocksToSearchFor.push(`[data-assetkey="${asset.assetKey}"]`);
+    options.lazyBlocksFound = Array.from(
+      document.querySelectorAll(options.lazyBlocksToSearchFor)
+    );
+  });
+
+  // If data eager loading attribute is true - load js straight away
+  options.lazyBlocksFound.forEach((block) => {
+    if (block.dataset.eager == "true") {
+      callBlockJs(block);
+    }
+  });
+
+  options.debugLogMessages && console.log("Lazyloader Options", options);
+
+  // Check if the browser has intersection observer which is needed for the Lazyloader or if all assets should load immediately anyway.
+  if (options.lazy === false || !("IntersectionObserver" in window)) {
+    options.debugLogMessages && console.log("running eager loading");
+    try {
+      options.lazyBlocksFound.forEach((block) => {
+        callBlockJs(block);
+      });
+    } catch (error) {
+      console.log(error);
+    }
+  } else {
+    options.debugLogMessages && console.log("running normal process");
+    observerInit(options.lazyBlocksFound);
+  }
+}
+
+/**
+ * Initializes the IntersectionObserver for the lazy loading of blocks.
+ * @param {array} elementsToObserve The array of block elements to observe.
+ */
+function observerInit(elementsToObserve = []) {
+  const observer = new IntersectionObserver(intersectionCallback, options);
+  elementsToObserve.forEach((element) => {
+    if (element) {
+      observer.observe(element);
+    }
+  });
+}
+
+/**
+ * Callback function for the IntersectionObserver.
+ * @param {array} entries The entries array from the IntersectionObserver.
+ * @param {object} observer The IntersectionObserver object.
+ */
+const intersectionCallback = (entries, observer) => {
+  options.debugLogMessages && console.log("Observer entries", entries);
+  entries.forEach((entry) => {
+    if (entry.isIntersecting) {
+      const lazyTarget = entry.target;
+      try {
+        callBlockJs(lazyTarget);
+      } catch (error) {
+        console.log(
+          error,
+          "block data assetkey:",
+          lazyTarget.dataset.assetkey,
+          " - ",
+          "asset import function:",
+          options.assetMap[lazyTarget.dataset.assetkey],
+          "are you missing an asset key or import function?"
+        );
+      }
+      observer.unobserve(lazyTarget);
+      options.debugLogMessages &&
+        console.log("Unobserving lazyElement", lazyTarget);
+    }
+  });
+};
+
+/**
+ * Calls the block asset functions and adds the loaded class to the block.
+ * @param {object} block The block element.
+ */
+function callBlockJs(block) {
+  if (!block.classList.contains("loaded")) {
+    Promise.all([
+      options.assetMap[block.dataset.assetkey].js(),
+      loadCss(block.dataset.assetkey),
+    ]).then((module) => {
+      try {
+        if (block.dataset.jsload !== "false") {
+          module[0].default({
+            block,
+            css: false,
+          });
+        } else {
+          options.debugLogMessages &&
+            console.log(
+              `Skipping JS load for block: ${block.dataset.assetkey}`
+            );
+        }
+        block.classList.add("loaded");
+      } catch (error) {
+        console.log("could not load block js", error);
+      }
+    });
+  }
+}
+
+/**
+ * Checks to see if the css for the block has already been included in the 'criticalconfig' window object.
+ * Will return true if it is.
+ * @param {string} assetKey The assetkey string of the block.
+ * @returns {boolean}
+ */
+export function inCriticalCssConfig(assetKey) {
+  if (!globalThis.criticalConfig) {
+    return false;
+  }
+  if (
+    globalThis.criticalConfig &&
+    globalThis.criticalConfig.indexOf(assetKey) === -1
+  ) {
+    return false;
+  }
+  return true;
+}
+
+/**
+ * Dynamically loads the css for the block if it has not already been included in critical css or the css property is set to false.
+ * @param {string} assetKey The assetkey string of the block.
+ * @param {object} options The options object which will at the very least contain the css property set to true.
+ * @returns {promise}
+ */
+export function loadCss(assetKey) {
+  // if (options.css == true && options.cssLoadingStyle === "bundle") {
+  //   options.debugLogMessages && console.log("using css bundle");
+  //   const promise = new Promise((resolve) => {
+  //     import(
+  //       `NodeModules/@total_onion/onion-library/public/publicbundlecss.css`
+  //     ).then(() => {
+  //       console.log("resolved");
+  //       resolve(true);
+  //     });
+  //   });
+  //   return promise;
+  // }
+  // if (
+  //   options.css == true &&
+  //   options.cssLoadingStyle === "component" &&
+  //   options.filePrefix === "nodemodules"
+  // ) {
+  //   options.debugLogMessages && console.log("using individual css");
+  //   const promise = new Promise((resolve) => {
+  //     if (options.css === true && !inCriticalCssConfig(assetKey)) {
+  //       import(
+  //         /* webpackChunkName: "[request]" */ `NodeModules/@total_onion/onion-library/components/block-${assetKey}/${assetKey}${options.fileSuffixCss}`
+  //       ).then(() => resolve(true));
+  //     } else {
+  //       return resolve(true);
+  //     }
+  //   });
+  // }
+  if (
+    options.css == true &&
+    options.cssLoadingStyle === "component" &&
+    options.filePrefix === "dev"
+  ) {
+    options.debugLogMessages && console.log("using dev css");
+    const promise = new Promise((resolve) => {
+      if (options.css === true && !inCriticalCssConfig(assetKey)) {
+        import(
+          `../../../../../../../../onion-library/components/block-${assetKey}/${assetKey}${options.fileSuffixCss}`
+        ).then(() => resolve(true));
+      } else {
+        return resolve(true);
+      }
+    });
+  }
+}
+
+const api = {
+  lazyloaderInit,
+  options,
+};
+
+export default api;

package/onion-loader.js

@@ -0,0 +1,277 @@
+import jsAssetList from './public/jsAssets.mjs';
+const coreAssets = jsAssetList.dynamicAssets;
+
+/* eslint-disable no-use-before-define */
+/* eslint-disable no-console */
+
+//*** Lazyloader ***//
+
+/**
+ * The options object for the lazyloader.
+ * @type {object}
+ * @property {string} rootMargin The root margin for the IntersectionObserver.
+ * @default '0% 0% 0%'
+ * @property {number} threshold The threshold for the IntersectionObserver.
+ * @property {boolean} debugLogMessages Whether to log debug messages.
+ * @property {array} lazyBlocksToSearchFor The array of lazy blocks to search for.
+ * @property {array} lazyBlocksFound The array of lazy blocks found.
+ * @property {array} assetArray The array of assets to load.
+ * @property {object} assetMap The asset map object.
+ * @property {boolean} ignoreCss Whether to ignore the css.
+ * @property {boolean} lazy Whether to lazy load the assets (after Assets alias).
+ * @property {string} filePath The file path for the js assets.
+ * @default 'js/blocks/'
+ * @property {string} filePathCss The file path for the css assets (after Assets alias).
+ * @default 'scss/blocks/'
+ */
+
+const options = {
+	rootMargin: '100% 0px 300px 0px',
+	threshold: 0,
+	debugLogMessages: false,
+	lazyBlocksToSearchFor: [],
+	lazyBlocksFound: [],
+	coreAssets: [...coreAssets],
+	projectAssets: [],
+	assetMap: {},
+	css: true,
+	lazy: true,
+	cssLoadingStyle: 'component', // 'component' or 'bundle'
+	filePrefix: 'nodemodules', //'nodemodules', 'assets' or 'dev'
+	fileSuffixJs: '.js',
+	fileSuffixCss: '.scss',
+	filePath: 'js/blocks',
+	filePathCss: 'scss/blocks'
+};
+
+/**
+ * Initializes the lazyloader.
+ */
+function lazyloaderInit() {
+	const assetArray = options.coreAssets.concat(options.projectAssets);
+	options.debugLogMessages && console.log('Lazy Loader initialized!');
+	options.lazyBlocksToSearchFor = [];
+	assetArray.forEach((asset) => {
+		if (
+			options.filePrefix === 'nodemodules' &&
+			asset.assetKey.includes('-v3')
+		) {
+			options.assetMap[asset.assetKey] = {
+				js: () =>
+					import(
+						`NodeModules/@total_onion/onion-library/components/block-${asset.assetKey}/${asset.assetKey}${options.fileSuffixJs}`
+					),
+				css: options.ignoreCss === true
+			};
+		} else {
+		}
+		if (
+			options.filePrefix === 'nodemodules' &&
+			!asset.assetKey.includes('-v3')
+		) {
+			options.assetMap[asset.assetKey] = {
+				js: () =>
+					import(
+						`Assets/js/blocks/${asset.assetKey}${options.fileSuffixJs}`
+					),
+				css: options.ignoreCss === false
+			};
+		}
+
+		// Add to lazy blocks to search for
+		options.lazyBlocksToSearchFor.push(
+			`[data-assetkey="${asset.assetKey}"]`
+		);
+		options.lazyBlocksFound = Array.from(
+			document.querySelectorAll(options.lazyBlocksToSearchFor)
+		);
+	});
+
+	// If data eager loading attribute is true - load js straight away
+	options.lazyBlocksFound.forEach((block) => {
+		if (block.dataset.eager == 'true') {
+			callBlockJs(block);
+		}
+	});
+
+	options.debugLogMessages && console.log('Lazyloader Options', options);
+
+	// Check if the browser has intersection observer which is needed for the Lazyloader or if all assets should load immediately anyway.
+	if (options.lazy === false || !('IntersectionObserver' in window)) {
+		options.debugLogMessages && console.log('running eager loading');
+		try {
+			options.lazyBlocksFound.forEach((block) => {
+				callBlockJs(block);
+			});
+		} catch (error) {
+			console.log(error);
+		}
+	} else {
+		options.debugLogMessages && console.log('running normal process');
+		observerInit(options.lazyBlocksFound);
+	}
+}
+
+/**
+ * Initializes the IntersectionObserver for the lazy loading of blocks.
+ * @param {array} elementsToObserve The array of block elements to observe.
+ */
+function observerInit(elementsToObserve = []) {
+	const observer = new IntersectionObserver(intersectionCallback, options);
+	elementsToObserve.forEach((element) => {
+		if (element) {
+			observer.observe(element);
+		}
+	});
+}
+
+/**
+ * Callback function for the IntersectionObserver.
+ * @param {array} entries The entries array from the IntersectionObserver.
+ * @param {object} observer The IntersectionObserver object.
+ */
+const intersectionCallback = (entries, observer) => {
+	options.debugLogMessages && console.log('Observer entries', entries);
+	entries.forEach((entry) => {
+		if (entry.isIntersecting) {
+			const lazyTarget = entry.target;
+			try {
+				callBlockJs(lazyTarget);
+			} catch (error) {
+				console.log(
+					error,
+					'block data assetkey:',
+					lazyTarget.dataset.assetkey,
+					' - ',
+					'asset import function:',
+					options.assetMap[lazyTarget.dataset.assetkey],
+					'are you missing an asset key or import function?'
+				);
+			}
+			observer.unobserve(lazyTarget);
+			options.debugLogMessages &&
+				console.log('Unobserving lazyElement', lazyTarget);
+		}
+	});
+};
+
+/**
+ * Calls the block asset functions and adds the loaded class to the block.
+ * @param {object} block The block element.
+ */
+function callBlockJs(block) {
+	if (!block.classList.contains('loaded')) {
+		Promise.all([
+			options.assetMap[block.dataset.assetkey].js(),
+			block.dataset.cssload !== 'false' && loadCss(block.dataset.assetkey)
+		]).then((module) => {
+			try {
+				if (block.dataset.jsload !== 'false') {
+					module[0].default({
+						block,
+						css: false
+					});
+				} else {
+					options.debugLogMessages &&
+						console.log(
+							`Skipping JS load for block: ${block.dataset.assetkey}`
+						);
+				}
+				block.classList.add('loaded');
+			} catch (error) {
+				console.log('could not load block js', error);
+			}
+		});
+	}
+}
+
+/**
+ * Checks to see if the css for the block has already been included in the 'criticalconfig' window object.
+ * Will return true if it is.
+ * @param {string} assetKey The assetkey string of the block.
+ * @returns {boolean}
+ */
+export function inCriticalCssConfig(assetKey) {
+	if (!globalThis.criticalConfig) {
+		return false;
+	}
+	if (
+		globalThis.criticalConfig &&
+		globalThis.criticalConfig.indexOf(assetKey) === -1
+	) {
+		return false;
+	}
+	return true;
+}
+
+/**
+ * Dynamically loads the css for the block if it has not already been included in critical css or the css property is set to false.
+ * @param {string} assetKey The assetkey string of the block.
+ * @param {object} options The options object which will at the very least contain the css property set to true.
+ * @returns {promise}
+ */
+export function loadCss(assetKey) {
+	// if (options.css == true && options.cssLoadingStyle === "bundle") {
+	//   options.debugLogMessages && console.log("using css bundle");
+	//   const promise = new Promise((resolve) => {
+	//     import(
+	//       `NodeModules/@total_onion/onion-library/public/publicbundlecss.css`
+	//     ).then(() => {
+	//       console.log("resolved");
+	//       resolve(true);
+	//     });
+	//   });
+	//   return promise;
+	// }
+	if (
+		options.css == true &&
+		options.cssLoadingStyle === 'component' &&
+		options.filePrefix === 'nodemodules'
+	) {
+		options.debugLogMessages && console.log('using individual css');
+		const promise = new Promise((resolve) => {
+			if (
+				options.css === true &&
+				!inCriticalCssConfig(assetKey) &&
+				assetKey.includes('-v3')
+			) {
+				import(
+					/* webpackChunkName: "[request]" */ `NodeModules/@total_onion/onion-library/components/block-${assetKey}/${assetKey}${options.fileSuffixCss}`
+				).then(() => resolve(true));
+			} else if (
+				options.css === true &&
+				!inCriticalCssConfig(assetKey) &&
+				!assetKey.includes('-v3')
+			) {
+				import(
+					/* webpackChunkName: "[request]" */ `Assets/scss/blocks/${assetKey}${options.fileSuffixCss}`
+				).then(() => resolve(true));
+			} else {
+				return resolve(true);
+			}
+		});
+	}
+	// if (
+	//   options.css == true &&
+	//   options.cssLoadingStyle === "component" &&
+	//   options.filePrefix === "dev"
+	// ) {
+	//   options.debugLogMessages && console.log("using dev css");
+	//   const promise = new Promise((resolve) => {
+	//     if (options.css === true && !inCriticalCssConfig(assetKey)) {
+	//       import(
+	//         `../../../../../../../../onion-library/components/block-${assetKey}/${assetKey}${options.fileSuffixCss}`
+	//       ).then(() => resolve(true));
+	//     } else {
+	//       return resolve(true);
+	//     }
+	//   });
+	// }
+}
+
+const api = {
+	lazyloaderInit,
+	options
+};
+
+export default api;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@total_onion/onion-library",
-	"version": "2.0.122",
+	"version": "2.0.124",
 	"description": "Component library",
 	"main": "index.js",
 	"scripts": {