@gudhub/ssg-web-components-library 1.0.117 → 1.0.119

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gudhub/ssg-web-components-library",
-  "version": "1.0.117",
+  "version": "1.0.119",
   "description": "",
   "main": "index.js",
   "type": "module",

package/src/components/get-in-touch-form/get-in-touch-form.scss

@@ -271,12 +271,15 @@ get-in-touch-form {
             }
         }
     }
+    
     .recaptcha-notice {
-        margin-top: 10px;
+        margin-top: 20px;
         font-size: 12px;
         line-height: 1.4;
         opacity: 0.7;
+        text-align: center;
     }
+
     &[data-in-popup] {
         .get-in-touch-form {
             padding-top: 0;

package/src/components/video-slider/animations/cascade-strips.js

@@ -0,0 +1,89 @@
+import { drawImageCover } from '../utils/draw-image-cover.js';
+
+export default function cascadeStrips({
+    ctx,
+    canvas,
+    images,
+    progress,
+}) {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    // BASE IMAGE
+    drawImageCover({
+        ctx,
+        canvas,
+        image: images[0],
+    });
+
+    const slidesCount =
+        images.length;
+
+    const sectorWidth =
+        canvas.width / slidesCount;
+
+    // GLOBAL WIPE POSITION
+    const totalTravel =
+        canvas.width
+        + (
+            sectorWidth
+            * (slidesCount - 1)
+        );
+
+    const wipeX =
+        totalTravel * progress;
+
+    for (let i = 1; i < slidesCount; i++) {
+
+        const image =
+            images[i];
+
+        // OFFSET BETWEEN WIPES
+        const offset =
+            sectorWidth * (i - 1);
+
+        // CURRENT WIPE POSITION
+        const currentX =
+            wipeX - offset;
+
+        // NOT YET VISIBLE
+        if (currentX <= 0) {
+            continue;
+        }
+
+        ctx.save();
+
+        ctx.beginPath();
+
+        // LAST SLIDE
+        if (i === slidesCount - 1) {
+
+            // CONTINUES TO FULLSCREEN
+            ctx.rect(
+                0,
+                0,
+                currentX,
+                canvas.height
+            );
+
+        } else {
+
+            // NORMAL STRIP
+            ctx.rect(
+                currentX - sectorWidth,
+                0,
+                sectorWidth,
+                canvas.height
+            );
+        }
+
+        ctx.clip();
+
+        drawImageCover({
+            ctx,
+            canvas,
+            image,
+        });
+
+        ctx.restore();
+    }
+}

package/src/components/video-slider/animations/fade.js

@@ -0,0 +1,31 @@
+import { drawImageCover } from '../utils/draw-image-cover.js';
+
+export default function fade({
+    ctx,
+    canvas,
+    currentImage,
+    nextImage,
+    progress,
+}) {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    // CURRENT IMAGE
+    drawImageCover({
+        ctx,
+        canvas,
+        image: currentImage,
+    });
+
+    // NEXT IMAGE
+    ctx.save();
+
+    ctx.globalAlpha = progress;
+
+    drawImageCover({
+        ctx,
+        canvas,
+        image: nextImage,
+    });
+
+    ctx.restore();
+}

package/src/components/video-slider/animations/multi-strip.js

@@ -0,0 +1,66 @@
+import { drawImageCover } from '../utils/draw-image-cover.js';
+
+export default function multiStrip({
+    ctx,
+    canvas,
+    currentImage,
+    nextImage,
+    progress,
+    isTransitionPhase,
+}) {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    // CURRENT IMAGE
+    drawImageCover({
+        ctx,
+        canvas,
+        image: currentImage,
+    });
+
+    if (!isTransitionPhase) {
+        return;
+    }
+
+    const strips = 8;
+
+    const stripWidth = canvas.width / strips;
+
+    const stagger = 0.08;
+
+    for (let i = 0; i < strips; i++) {
+
+        const delay = i * stagger;
+
+        let localProgress =
+            (progress - delay) / (1 - (stagger * strips));
+
+        localProgress = Math.max(0, Math.min(1, localProgress));
+
+        const revealWidth =
+            stripWidth * localProgress;
+
+        const x =
+            i * stripWidth;
+
+        ctx.save();
+
+        ctx.beginPath();
+
+        ctx.rect(
+            x,
+            0,
+            revealWidth,
+            canvas.height
+        );
+
+        ctx.clip();
+
+        drawImageCover({
+            ctx,
+            canvas,
+            image: nextImage,
+        });
+
+        ctx.restore();
+    }
+}

package/src/components/video-slider/animations/sectors.js

@@ -0,0 +1,104 @@
+import { drawImageCover } from '../utils/draw-image-cover.js';
+
+export default function sectors({
+    ctx,
+    canvas,
+    images,
+    progress,
+}) {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    const slidesCount =
+        images.length;
+
+    const sectorWidth =
+        canvas.width / slidesCount;
+
+    // BASE SLIDE
+    drawImageCover({
+        ctx,
+        canvas,
+        image: images[0],
+    });
+
+    for (let i = 1; i < slidesCount; i++) {
+
+        // START OF THIS SECTOR
+        const start =
+            i / slidesCount;
+
+        // END OF THIS SECTOR
+        const end =
+            (i + 1) / slidesCount;
+
+        // LOCAL PROGRESS
+        let localProgress =
+            (progress - start)
+            / (end - start);
+
+        localProgress =
+            Math.max(
+                0,
+                Math.min(1, localProgress)
+            );
+
+        // NOT STARTED
+        if (localProgress <= 0) {
+            continue;
+        }
+
+        const x =
+            i * sectorWidth;
+
+        ctx.save();
+
+        ctx.beginPath();
+
+        // LAST SECTOR
+        if (i === slidesCount - 1) {
+
+            const expandProgress =
+                Math.max(
+                    0,
+                    (progress - 0.875) / 0.125
+                );
+
+            const dynamicWidth =
+                sectorWidth
+                + (
+                    (canvas.width - sectorWidth)
+                    * expandProgress
+                );
+
+            ctx.rect(
+                x,
+                0,
+                dynamicWidth,
+                canvas.height
+            );
+
+        } else {
+
+            ctx.rect(
+                x,
+                0,
+                sectorWidth,
+                canvas.height
+            );
+        }
+
+        ctx.clip();
+
+        // FADE-IN
+        ctx.globalAlpha =
+            localProgress;
+
+        drawImageCover({
+            ctx,
+            canvas,
+            image: images[i],
+        });
+
+        ctx.restore();
+    }
+}

package/src/components/video-slider/animations/wipe-left.js

@@ -0,0 +1,43 @@
+import { drawImageCover } from '../utils/draw-image-cover.js';
+import { easeInOutCubic } from '../utils/easing.js';
+
+export default function wipeLeft({
+    ctx,
+    canvas,
+    currentImage,
+    nextImage,
+    progress,
+}) {
+    const eased = easeInOutCubic(progress);
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    drawImageCover({
+        ctx,
+        canvas,
+        image: currentImage,
+    });
+
+    const revealWidth = canvas.width * eased;
+
+    ctx.save();
+
+    ctx.beginPath();
+
+    ctx.rect(
+        0,
+        0,
+        revealWidth,
+        canvas.height
+    );
+
+    ctx.clip();
+
+    drawImageCover({
+        ctx,
+        canvas,
+        image: nextImage,
+    });
+
+    ctx.restore();
+}

package/src/components/video-slider/animations/zoom.js

@@ -0,0 +1,51 @@
+import { drawImageCover } from '../utils/draw-image-cover.js';
+
+export default function zoom({
+    ctx,
+    canvas,
+    currentImage,
+    nextImage,
+    progress,
+    isTransitionPhase,
+}) {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    if (!isTransitionPhase) {
+        drawImageCover({
+            ctx,
+            canvas,
+            image: currentImage,
+            scale: 1.05,
+        });
+
+        return;
+    }
+
+    // CURRENT IMAGE
+    ctx.save();
+
+    ctx.globalAlpha = 1 - progress;
+
+    drawImageCover({
+        ctx,
+        canvas,
+        image: currentImage,
+        scale: 1 + (progress * 0.1),
+    });
+
+    ctx.restore();
+
+    // NEXT IMAGE
+    ctx.save();
+
+    ctx.globalAlpha = progress;
+
+    drawImageCover({
+        ctx,
+        canvas,
+        image: nextImage,
+        scale: 1.1 - (progress * 0.1),
+    });
+
+    ctx.restore();
+}

package/src/components/video-slider/config.js

@@ -0,0 +1,6 @@
+export const videoSlider = {
+  tag: 'video-slider',
+  category: 'Media',
+  src: '@gudhub/ssg-web-components-library/src/components/video-slider/video-slider.js',
+  serverOnly: false
+}

package/src/components/video-slider/utils/draw-image-cover.js

@@ -0,0 +1,27 @@
+export function drawImageCover({
+    ctx,
+    canvas,
+    image,
+    scale = 1,
+    offsetX = 0,
+    offsetY = 0,
+}) {
+    const canvasRatio = canvas.width / canvas.height;
+    const imageRatio = image.width / image.height;
+
+    let drawWidth;
+    let drawHeight;
+
+    if (imageRatio > canvasRatio) {
+        drawHeight = canvas.height * scale;
+        drawWidth = drawHeight * imageRatio;
+    } else {
+        drawWidth = canvas.width * scale;
+        drawHeight = drawWidth / imageRatio;
+    }
+
+    const x = ((canvas.width - drawWidth) / 2) + offsetX;
+    const y = ((canvas.height - drawHeight) / 2) + offsetY;
+
+    ctx.drawImage(image, x, y, drawWidth, drawHeight);
+}

package/src/components/video-slider/utils/easing.js

@@ -0,0 +1,5 @@
+export function easeInOutCubic(x) {
+    return x < 0.5
+        ? 4 * x * x * x
+        : 1 - Math.pow(-2 * x + 2, 3) / 2;
+}

package/src/components/video-slider/video-slider.html

@@ -0,0 +1,5 @@
+<section class="video-slider-section">
+    <div class="canvas-wrapper">
+        <canvas></canvas>
+    </div>
+</section>

package/src/components/video-slider/video-slider.js

@@ -0,0 +1,177 @@
+import html from './video-slider.html';
+import './video-slider.scss';
+
+import wipeLeft from './animations/wipe-left.js';
+import fade from './animations/fade.js';
+import zoom from './animations/zoom.js';
+import multiStrip from './animations/multi-strip.js';
+import cascadeStrips from './animations/cascade-strips.js';
+import sectors from './animations/sectors.js';
+
+class VideoSlider extends GHComponent {
+    constructor() {
+        super();
+
+        this.animations = {
+            wipeLeft,
+            fade,
+            zoom,
+            multiStrip,
+            cascadeStrips,
+            sectors
+        };
+    }
+
+    async onServerRender() {
+
+        this.ghId = this.getAttribute('data-gh-id') || null;
+        this.chapter = this.getAttribute('data-chapter') || 'pages';
+        this.json = this.ghId 
+            ? await super.getGhData(this.ghId, this.chapter)
+            : console.error('data-gh-id attribute is required for video-slider component');
+
+        this.setAttribute(
+            'data-animation',
+            this.json.animation
+        );
+
+        this.setAttribute(
+            'data-slide-duration',
+            this.json.slideDuration
+        );
+
+        this.setAttribute(
+            'data-transition-duration',
+            this.json.transitionDuration
+        );
+
+        this.setAttribute(
+            'data-images',
+            JSON.stringify(this.json.images)
+        );
+    
+        super.render(html);
+    }
+
+    async onClientReady() {
+
+        this.config = {
+            animation: this.getAttribute('data-animation'),
+
+            slideDuration:
+                Number(this.getAttribute('data-slide-duration')),
+
+            transitionDuration:
+                Number(this.getAttribute('data-transition-duration'))
+        };
+
+        this.images = JSON.parse(this.getAttribute('data-images'));
+
+        this.canvas = this.querySelector('canvas');
+
+        this.ctx = this.canvas.getContext('2d');
+
+        this.canvas.width = 1280;
+        this.canvas.height = 720;
+
+        this.loadedImages = await this.preloadImages();
+
+        this.startLoop();
+    }
+
+    preloadImages() {
+        return Promise.all(
+            this.images.map((url) => {
+                return new Promise((resolve, reject) => {
+
+                    const image = new Image();
+
+                    image.crossOrigin = 'anonymous';
+
+                    image.onload = () => {
+                        resolve(image);
+                    };
+
+                    image.onerror = () => reject(url);
+
+                    image.src = url;
+                });
+            })
+        );
+    }
+
+    startLoop() {
+        this.startTime = performance.now();
+
+        const render = (time) => {
+            const elapsed = time - this.startTime;
+
+            const totalSlides = this.loadedImages.length;
+
+            const singleSlideTotal =
+                this.config.slideDuration + this.config.transitionDuration;
+
+            const totalDuration =
+                singleSlideTotal * totalSlides;
+
+            const timelineTime =
+                elapsed % totalDuration;
+
+            const currentSlide =
+                Math.floor(timelineTime / singleSlideTotal);
+
+            const nextSlide =
+                (currentSlide + 1) % totalSlides;
+
+            const localTime =
+                timelineTime % singleSlideTotal;
+
+            const isTransitionPhase =
+                localTime >= this.config.slideDuration;
+
+            const transitionTime =
+                localTime - this.config.slideDuration;
+
+            const progress = isTransitionPhase
+                ? transitionTime / this.config.transitionDuration
+                : 0;
+
+            this.renderFrame({
+                currentImage: this.loadedImages[currentSlide],
+                nextImage: this.loadedImages[nextSlide],
+                progress,
+                isTransitionPhase,
+            });
+
+            requestAnimationFrame(render);
+        };
+
+        requestAnimationFrame(render);
+    }
+
+    renderFrame({
+        currentImage,
+        nextImage,
+        progress,
+        isTransitionPhase,
+    }) {
+        if (!currentImage) return;
+
+        const animation =
+            this.animations[this.config.animation];
+
+        if (!animation) return;
+
+        animation({
+            ctx: this.ctx,
+            canvas: this.canvas,
+            currentImage,
+            nextImage,
+            progress,
+            isTransitionPhase,
+            images: this.loadedImages,
+        });
+    }
+}
+
+window.customElements.define('video-slider', VideoSlider);

package/src/components/video-slider/video-slider.readme.md

@@ -0,0 +1,218 @@
+# Video Slider Component
+
+## Description
+
+`video-slider` is a canvas-based animated image slider that supports multiple transition effects between slides.
+
+The component loads configuration and images from GudHub data and automatically starts the animation loop after initialization.
+
+---
+
+# Data Structure
+
+The component expects the following JSON structure:
+
+```json
+{
+  "video-slider": {
+    "animation": "fade",
+    "slideDuration": "100",
+    "transitionDuration": "2000",
+    "images": [
+      "https://app.gudhub.com/userdata/12345/image1.jpg",
+      "https://app.gudhub.com/userdata/12354/image2.jpg",
+      "https://app.gudhub.com/userdata/11345/image3.jpg"
+    ]
+  }
+}
+```
+
+## Configuration Parameters
+
+| Property           | Type          | Required | Description                                            |
+| ------------------ | ------------- | -------- | ------------------------------------------------------ |
+| animation          | string        | Yes      | Animation type used between slides                     |
+| slideDuration      | string/number | Yes      | Duration of static slide display in milliseconds       |
+| transitionDuration | string/number | Yes      | Duration of slide transition animation in milliseconds |
+| images             | array         | Yes      | Ordered list of image URLs                             |
+
+---
+
+## Supported Animations
+
+The following animation values are supported:
+
+```text
+wipeLeft
+fade
+zoom
+multiStrip
+cascadeStrips
+sectors
+```
+
+Example:
+
+```json
+{
+  "animation": "zoom"
+}
+```
+
+---
+
+## Slide Duration
+
+Defines how long a slide remains visible before transition starts.
+
+Example:
+
+```json
+{
+  "slideDuration": "3000"
+}
+```
+
+Result:
+
+```text
+3 seconds display
++
+transition animation
+```
+
+---
+
+## Transition Duration
+
+Defines how long the transition animation lasts.
+
+Example:
+
+```json
+{
+  "transitionDuration": "1500"
+}
+```
+
+Result:
+
+```text
+1.5 second transition
+```
+
+---
+
+## Images
+
+Images must be provided as an ordered array of URLs.
+
+The component displays images in the exact order they appear in the array.
+
+Example:
+
+```json
+{
+  "images": [
+    "image-1.jpg",
+    "image-2.jpg",
+    "image-3.jpg"
+  ]
+}
+```
+
+Display order:
+
+```text
+image-1
+↓
+image-2
+↓
+image-3
+↓
+image-1
+(repeat)
+```
+
+---
+
+# Usage
+
+## Static Pages
+
+For static pages only `data-gh-id` is required.
+
+```html
+<video-slider
+    data-gh-id="video-slider"
+></video-slider>
+```
+
+---
+
+## Dynamic Pages
+
+For dynamic pages an additional `data-chapter` attribute must be specified.
+
+```html
+<video-slider
+    data-gh-id="video-slider"
+    data-chapter="areas"
+></video-slider>
+```
+
+### data-chapter
+
+Defines the chapter from which GudHub should load dynamic page data.
+
+Example:
+
+```html
+data-chapter="areas"
+```
+
+---
+
+# Required Attributes
+
+| Attribute    | Required           | Description                                |
+| ------------ | ------------------ | ------------------------------------------ |
+| data-gh-id   | Yes                | GudHub component identifier                |
+| data-chapter | Dynamic pages only | Chapter used to retrieve current item data |
+
+---
+
+# Example
+
+```html
+<video-slider
+    data-gh-id="video-slider"
+    data-chapter="areas"
+></video-slider>
+```
+
+```json
+{
+  "video-slider": {
+    "animation": "fade",
+    "slideDuration": "3000",
+    "transitionDuration": "1500",
+    "images": [
+      "https://example.com/slide-1.jpg",
+      "https://example.com/slide-2.jpg",
+      "https://example.com/slide-3.jpg"
+    ]
+  }
+}
+```
+
+---
+
+# Notes
+
+* All images should be publicly accessible URLs.
+* Images are preloaded before animation starts.
+* The slider automatically loops through all images.
+* Images are displayed using a cover-fit algorithm similar to CSS `object-fit: cover`.
+* Animation starts automatically after component initialization.
+* If an invalid animation name is provided, no transition animation will be rendered.

package/src/components/video-slider/video-slider.scss

@@ -0,0 +1,16 @@
+.video-slider-section {
+    padding: 0px;
+    width: 100%;
+    height: 100%;
+
+    .canvas-wrapper {
+        width: 100%;
+        height: 100%;
+    }
+
+    canvas {
+        width: 100%;
+        height: 100%;
+        display: block;
+    }
+}

package/src/config.js

@@ -67,9 +67,9 @@ export { GoogleAnalytics } from './components/google-analytics/config.js';
 export { GoogleTag } from './components/google-tag/config.js';
 export { cookiesPopup } from './components/cookies-popup/config.js';
 export { infoTable } from './components/info-table/config.js';
-export { liqpayPaymentButton } from './components/liqpay-payment-button/config.js';
 export { liqpayComponent } from './components/liqpay-component/config.js';
 export { faqComponent } from './components/faq-component/config.js';
+export { videoSlider } from './components/video-slider/config.js';
 
 // export { liqPayComponent } from './components/liqpay-component/config.js';
 // export { htmlTextFromEditorJs } from './components/html-text-from-editor-js/config.js';

package/src/components/liqpay-payment-button/config.js

@@ -1,6 +0,0 @@
-export const liqpayPaymentButton = {
-  tag: 'liqpay-payment-button',
-  category: 'Payment',
-  src: '@gudhub/ssg-web-components-library/src/components/liqpay-payment-button/liqpay-payment-button.js',
-  serverOnly: false
-};

package/src/components/liqpay-payment-button/liqpay-payment-button.html

@@ -1,5 +0,0 @@
-<section class="liqpay-payment-button">
-    <div class="container">
-        
-    </div>
-</section>

package/src/components/liqpay-payment-button/liqpay-payment-button.js

@@ -1,23 +0,0 @@
-import html from './liqpay-payment-button.html';
-import './liqpay-payment-button.scss';
-import jsonTemplate from './liqpay-payment-button.json';
-
-class liqpayPaymentButton extends window.GHComponent {
-    constructor() {
-        super();
-        super.setDefaultData(jsonTemplate);
-    }
-
-    async onServerRender() {
-        this.ghId = this.getAttribute('data-gh-id') || null;
-        this.json = await super.getGhData(this.ghId, 'areas');
-
-        console.log("AAAAAAAAAAAAAAAAAAAAAAAA", this.json);
-
-        if (this.json) {
-            super.render(html);
-        }
-    }
-}
-
-window.customElements.define('liqpay-payment-button', liqpayPaymentButton);

package/src/components/liqpay-payment-button/liqpay-payment-button.json

@@ -1,4 +0,0 @@
-{
-    "title": "Lorem Ipsum Pricing",
-    "subtitle": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-}

package/src/components/liqpay-payment-button/liqpay-payment-button.scss

@@ -1,7 +0,0 @@
-liqpay-payment-button {
-    section { 
-        padding: 0 375px 80px 375px;
-    }
-
-    
-}