@total_onion/onion-library 2.0.98 → 2.0.100

package/components/block-scrolling-banner-v3/scrolling-banner-v3.js

@@ -63,7 +63,7 @@ function scrollingbannerJs(block) {
 		const inner = bannerElement.querySelector(
 			'.scrolling-banner-v3__inner'
 		);
-		const speed = bannerElement.dataset.speed ?? 5;
+		const speed = bannerElement.dataset.speed ?? 3;
 
 		const wrapperWidth = wrapper.clientWidth;
 		const innerContentWidth = inner.clientWidth;
@@ -82,28 +82,34 @@ function scrollingbannerJs(block) {
 		newTickerContainer.classList.add('clone');
 		wrapper.appendChild(newTickerContainer);
 
-		const animation = [
-			{transform: `translateX(0%)`},
-			{transform: `translateX(-200%)`}
+		const animation1 = [
+			{ transform: 'translateX(0%)' },
+			{ transform: 'translateX(-100%)' }
+		];
+		const animation2 = [
+			{ transform: 'translateX(100%)' },
+			{ transform: 'translateX(0%)' }
 		];
 
 		const time = 100000 / speed;
 
 		let timing = {
 			duration: time,
-			iterations: Infinity
-		};
-		let timing2 = {
-			duration: time,
-			delay: time / 2,
-			iterations: Infinity
+			iterations: Infinity,
+			fill: 'both'
 		};
+		let timing2 = timing;
 		const containers = bannerElement.querySelectorAll(
 			'.scrolling-banner-v3__container'
 		);
-
-		const anim1 = containers[0].animate(animation, timing);
-		const anim2 = containers[1].animate(animation, timing2);
+		// Ensure initial positions are applied so content is visible immediately
+		containers[0].style.transform = 'translateX(0%)';
+		containers[1].style.transform = 'translateX(100%)';
+		// Force style application before animations start
+		void containers[0].offsetWidth;
+
+		const anim1 = containers[0].animate(animation1, timing);
+		const anim2 = containers[1].animate(animation2, timing2);
 
 		// set as initialized and store animation for a possible cleanup
 		initializedBanners.set(bannerElement, {anim1, anim2});

package/components/component-responsive-image-v3/responsive-image-v3.scss

@@ -8,7 +8,7 @@
 		grid-area: var(--image-grid-area, main);
 		position: var(--image-position, relative);
 		inset: 0;
-		min-height: 100%;
+		min-height: 0;
 		display: flex;
 		z-index: var(--image-z-index);
 		border: core-functions-v3.fluidSize(var(--image-border-width), 'static')

package/createNewBlock.js

@@ -1,6 +1,6 @@
 require('dotenv').config();
 const fs = require('fs');
-const { globSync } = require('glob');
+const {globSync} = require('glob');
 const yargs = require('yargs');
 const {exec} = require('child_process');
 const swiperTemplates = require('./new-block-templates/template-swiper');
@@ -55,13 +55,14 @@ templateOptions.forEach((option) => {
 	}
 });
 
-const dynamicEntryPoints = globSync(`${themePath}/assets/js/blocks/*.js`)
-	.map((path) => {
+const dynamicEntryPoints = globSync(`${themePath}/assets/js/blocks/*.js`).map(
+	(path) => {
 		const assetKey = path
 			.replace('assets/js/blocks/', '')
 			.replace('.js', '');
 		return assetKey;
-	});
+	}
+);
 const newBlockName = process.argv[2]?.toLowerCase();
 const blockType = process.argv[3];
 
@@ -126,10 +127,7 @@ fs.writeFileSync(
 if (!fs.existsSync(`${themePath}/assets/scss/blocks/${newBlockName}`)) {
 	fs.mkdirSync(`${themePath}/assets/scss/blocks/${newBlockName}`);
 }
-fs.writeFileSync(
-	`${themePath}/assets/scss/blocks/${newBlockName}/${newBlockName}-extra.scss`,
-	defaultTemplates.defaultextrascss(newBlockName)
-);
+
 fs.writeFileSync(
 	`${themePath}/views/blocks/${newBlockName}.twig`,
 	templateData

package/package.json

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

package/public/block-single-responsive-image-v3/single-responsive-image-v3.css

@@ -9,7 +9,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  min-height: 100%;
+  min-height: 0;
   display: flex;
   z-index: var(--image-z-index);
   border: calc(var(--image-border-width) / var(--desktop-design-reference) * var(--screen-width-static)) var(--image-border-style) var(--image-border-colour);

package/public/block-social-networks-v3/social-networks-v3.css

@@ -1,3 +1,7 @@
+.social-networks-v3 {
+  display: flex;
+  gap: 10px;
+}
 .social-networks-v3 .component-social-networks-v3 {
   display: flex;
   width: 100%;

package/public/block-sub-group-container-v3/sub-group-container-v3.css

@@ -107,7 +107,19 @@
     clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
   }
 }
-.sub-group-container-v3 .cmpl-block-animations.loaded {
+@keyframes reveal-up-and-slide {
+  from {
+    opacity: 1;
+    transition: -100%;
+    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
+  }
+  100% {
+    opacity: 1;
+    transition: 0%;
+    clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
+  }
+}
+.sub-group-container-v3 .cmpl-block-animations.trigger-animation {
   animation: var(--animation-name) var(--animation-duration) var(--animation-delay) var(--animation-easing) var(--animation-repeat) var(--animation-fill-mode) var(--animation-direction);
   animation-timeline: var(--animation-timeline);
 }