Merge remote-tracking branch 'origin/dev' into SPIN-114

blocks/columns/columns.js

@@ -2,7 +2,7 @@ import {
   buildBlock, loadBlock, toClassName,
 } from '../../scripts/lib-franklin.js';
 
-const allowedNestedBlocks = ['vimeo', 'form', 'svgator'];
+const allowedNestedBlocks = ['vimeo', 'form', 'svgator', 'deco-planets'];
 
 function buildNestedBlocks(block) {
   const nestedBlocks = block.querySelectorAll('table');

blocks/deco-planets/deco-planets.css

@@ -0,0 +1,86 @@
+.deco-planets {
+    --size-small: 40px;
+    --size-big: 120px;
+    --color-orange: #FF8C05;
+    --color-red: #CE2726;
+    --offset: 75px;
+
+    position: relative;
+    left: 50%;
+    margin: 50px 0;
+}
+
+.deco-planets .planet-one,
+.deco-planets .planet-two {
+    width: var(--size-small);
+    aspect-ratio: 1/1;
+    background-color: var(--color-orange);
+    border-radius: 500px;
+    transform: translateX(-50%);
+}
+
+.deco-planets .planet-one {
+    transform: translateX(calc(var(--offset) * -1));
+    margin-bottom: var(--offset);
+}
+
+.deco-planets .planet-two {
+    transform: translateX(var(--offset));
+    width: var(--size-big);
+    background-color: var(--color-red);
+}
+
+/* Variant: More Space */
+.deco-planets-more-space .planet-one {
+    margin-bottom: calc(var(--offset) * 1.5);
+}
+
+/* Variant: left / right */
+.deco-planets-left {
+    left: 0;
+    transform: translateX(var(--offset));
+}
+
+.deco-planets-right {
+    left: 100%;
+    transform: translateX(calc(var(--offset) * -2));
+}
+
+/* Variant: v1 */
+.deco-planets-v1 .planet-one {
+    transform: translateX(var(--offset));
+}
+
+.deco-planets-v1 .planet-two {
+    transform: translateX(calc(var(--offset) * -1));
+}
+
+/* Variant: v2 */
+.deco-planets-v2 .planet-one {
+    background-color: var(--color-red);
+    transform: translateX(var(--offset));
+}
+
+.deco-planets-v2 .planet-two {
+    background-color: var(--color-orange);
+    transform: translateX(calc(var(--offset) * -1));
+}
+
+/* Variant: v3 */
+.deco-planets-v3 .planet-one {
+    transform: translate(var(--offset), calc(var(--offset) * 2));
+}
+
+.deco-planets-v3 .planet-two {
+    transform: translate(calc(var(--offset) * -1), calc(var(--offset) * -2));
+
+}
+
+/* Variant: v4 */
+.deco-planets-v4 .planet-one {
+    width: var(--size-big);
+}
+
+.deco-planets-v4 .planet-two {
+    width: var(--size-small);
+}

blocks/deco-planets/deco-planets.js

@@ -0,0 +1,33 @@
+function getRandomArrayElement(array) {
+  return array[Math.floor((Math.random() * array.length))];
+}
+
+function addVariaten(block) {
+  const variant = getRandomArrayElement([
+    '',
+    'deco-planets-v1',
+    'deco-planets-v2',
+    'deco-planets-v3',
+    'deco-planets-v4',
+  ]);
+  const moreSpace = getRandomArrayElement([
+    '',
+    'deco-planets-more-space',
+  ]);
+  if (variant !== '') {
+    block.classList.add(variant);
+  }
+  if (moreSpace !== '') {
+    block.classList.add(moreSpace);
+  }
+}
+
+export default function decorate(block) {
+  const planetOne = document.createElement('div');
+  planetOne.classList.add('planet-one');
+  const planetTwo = document.createElement('div');
+  planetTwo.classList.add('planet-two');
+  block.appendChild(planetOne);
+  block.appendChild(planetTwo);
+  addVariaten(block);
+}

blocks/svgator/svgator.js

@@ -59,12 +59,19 @@ export default function decorate(block) {
     block.classList.add('svg-loaded');
 
     // initialize svgator
-    const identifier = container.querySelector('svg').getAttribute('id');
-    const element = document.getElementById(identifier);
+    const element = container.querySelector('svg');
     const player = element ? element.svgatorPlayer : {};
-    if (player.play) {
-      player.play();
-    }
+    const observer = new IntersectionObserver((entries) => {
+      if (entries[0].isIntersecting) {
+        if (player.play) {
+          player.play();
+        }
+        observer.disconnect();
+      }
+    }, {
+      threshold: 1.0,
+    });
+    observer.observe(element);
   }).catch((error) => {
     // Remove class and thus also remove the skeleton styling
     block.classList.remove(...block.classList);