@gudhub/ssg-web-components-library 1.0.43 → 1.0.45

package/package.json

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

package/src/components/blog/comments/comments.js

@@ -110,7 +110,7 @@ class CommentsComponent extends GHComponent {
         }
 
         if (comment.name && comment.text) {
-            const { api_app_id } = window.getConfig().chapters.blog;
+            const { api_app_id } = window.getConfig().chapters.blog || window.getConfig().componentsConfigs.chapters.blog;
             const response = await fetch(`https://gudhub.com/api/services/prod/api/${api_app_id}/add-comment`, {
                 method: 'POST',
                 headers: {

package/src/components/html-text-from-editor-js/config.js

@@ -0,0 +1,5 @@
+export const htmlTextFromEditorJs = {
+    tag: 'html-text-from-editor-js',
+    src: '@gudhub/ssg-web-components-library/src/components/html-text-from-editor-js/html-text-from-editor-js.js',
+    serverOnly: false
+}

package/src/components/html-text-from-editor-js/html-text-from-editor-js.html

@@ -0,0 +1,9 @@
+<section class="html-text-from-editor-js-component">
+    <div class="container">
+        <div class="html-text-from-editor-js-wrapper"></div>
+        ${ isCollapsible 
+            ? `<toggle-read-more-button-component></toggle-read-more-button-component>`
+            : ''
+        }
+    </div>
+</section>

package/src/components/html-text-from-editor-js/html-text-from-editor-js.js

@@ -0,0 +1,99 @@
+import html from './html-text-from-editor-js.html';
+import './html-text-from-editor-js.scss';
+
+import jsonTemplate from './html-text-from-editor-js.json';
+
+class HtmlTextFromEditorJs extends GHComponent {
+    constructor() {
+        super();
+
+        // If we doesn't have all attributes which we need - we set default data from jsonTemplate file
+        super.setDefaultData(jsonTemplate.html);
+    }
+    
+    async onServerRender() {
+        this.isCollapsible = this.getAttribute("isCollapsible");
+
+        this.appId = this.getAttribute("appId");
+        this.fieldId = this.getAttribute("fieldId");
+        this.interpretationId = this.getAttribute("interpretationId");
+
+        // Extends from GH Component
+        super.render(html);
+
+        this.toggleHtmlTextWrapper(this.isCollapsible);
+
+        await this.appendHtmlText();
+    }
+
+    async getInterpretationById() {
+        const appItems = await this.getGudHubAppItems(this.appId) || null;
+        const currentItemId = this.findCurrentItemId(appItems);
+
+        const htmlText = await this.getGudHubInterpretationById(this.appId, currentItemId, this.fieldId, this.interpretationId) || null;
+        return htmlText;
+    }
+
+    async appendHtmlText() {
+        const container = this.querySelector('.html-text-from-editor-js-wrapper');
+
+        const htmlText = await this.getInterpretationById() ?? jsonTemplate?.html;
+
+        container.innerHTML = htmlText;
+    }
+
+    findCurrentItemId(appItems) {
+        const href = new URL(window.location.href);
+        const pathname = href.searchParams.get('path');
+
+        let matchingItemId = null;
+
+        if (appItems) {
+            for (const item of appItems) {
+                const { fields } = item;
+    
+                for (const field of fields) {
+                    if (field.field_value === pathname) {
+                        matchingItemId = item.item_id;
+                        break;
+                    }
+                }
+    
+                if (matchingItemId) {
+                    break;
+                }
+            }
+            return matchingItemId;
+        } else {
+            return null;
+        }
+    }
+
+    async getGudHubAppItems(appId) {
+        const appIdValue = appId;
+        const data = await gudhub.getApp(appIdValue);
+
+        return data?.items_list;
+    }
+
+    async getGudHubInterpretationById(appId, itemId, fieldId, interpretationId) {
+        const data = await gudhub.getInterpretationById(appId, itemId, fieldId, interpretationId);
+        return data;
+    }
+
+    toggleHtmlTextWrapper(isCollapsible) {
+        const htmlTextFromEditorJsWrapper = this.querySelector('.html-text-from-editor-js-wrapper');
+        
+        if (htmlTextFromEditorJsWrapper) {
+            if (isCollapsible) {
+                htmlTextFromEditorJsWrapper.classList.add('collapsed');
+                htmlTextFromEditorJsWrapper.classList.remove('expanded');
+            } else {
+                htmlTextFromEditorJsWrapper.classList.add('expanded');
+                htmlTextFromEditorJsWrapper.classList.remove('collapsed');
+            }
+        }
+    }
+}
+
+window.customElements.define('html-text-from-editor-js', HtmlTextFromEditorJs);

package/src/components/html-text-from-editor-js/html-text-from-editor-js.json

@@ -0,0 +1,3 @@
+{
+    "html": "<p>Test Text From Json File</p>"
+}

package/src/components/html-text-from-editor-js/html-text-from-editor-js.scss

@@ -0,0 +1,66 @@
+html-text-from-editor-js {
+    --titleColor: #1A1A1A;
+    --subtitleColor: #525252;
+    --textColor: #525252;
+    .html-text-from-editor-js-wrapper {
+        // max-width: 890px;
+        color: var(--textColor);
+        line-height: 25px;
+        margin-top: 82px;
+        padding: 12px 0;
+        overflow: hidden;
+        transition: max-height 0.3s ease;
+        & h2 {
+            color: var(--titleColor);
+            font-size: 36px;
+            font-weight: 400;
+            line-height: 40px;
+            text-align: left;
+            margin-bottom: 30px;
+        }
+
+        & h3 {
+            color: var(--subtitleColor);
+            font-size: 18px;
+            font-weight: bold;
+            text-align: left;
+            margin: 30px 0 20px 0;
+        }
+
+        & p + p {
+            margin-top: 15px;
+        }
+
+        & ol, & ul {
+            padding-left: 30px;
+        }
+
+        & p + ol > li,
+        & p + ul > li {
+            margin-bottom: 15px;
+        }
+
+        & p + ol,
+        & p + ul {
+            margin-top: 15px;
+        }
+
+        & h3 + ol > li,
+        & h3 + ul > li {
+            margin-bottom: 15px;
+        }
+
+        & h3 + ol,
+        & h3 + ul {
+            margin-top: 15px;
+        }
+    }
+
+    .collapsed {
+        max-height: calc(1.5em * 10.3);
+    }
+
+    .expanded {
+        max-height: none;
+    }
+}

package/src/components/html-text-from-editor-js/toggle-read-more-button-component/config.js

@@ -0,0 +1,5 @@
+export const toggleReadMoreButtonComponent = {
+    tag: 'toggle-read-more-button-component',
+    src: '@gudhub/ssg-web-components-library/src/components/html-text-from-editor-js/toggle-read-more-button-component/toggle-read-more-button-component.js',
+    serverOnly: false
+}

package/src/components/html-text-from-editor-js/toggle-read-more-button-component/toggle-read-more-button-component.html

@@ -0,0 +1,5 @@
+<section class="toggle-read-more-button-component">
+    <div class="toggle-read-more-button-component__container">
+        <button class="toggle-read-more-button-component__button">Read More</button>
+    </div>
+</section>

package/src/components/html-text-from-editor-js/toggle-read-more-button-component/toggle-read-more-button-component.js

@@ -0,0 +1,45 @@
+import html from './toggle-read-more-button-component.html';
+import './toggle-read-more-button-component.scss';
+
+class ToggleReadMoreButtonComponent extends GHComponent {
+    constructor() {
+        super();
+    }
+    
+    async onClientRender() {
+        // Extends from GH Component
+        super.render(html);
+
+        this.initializeEventListeners();
+    }
+
+    initializeEventListeners() {
+        this.isShowReadMoreButton();
+    }
+
+    isShowReadMoreButton() {
+        const textContainer = document.querySelector('.html-text-from-editor-js-wrapper');
+        const toggleReadMoreButtonElement = this.querySelector('.toggle-read-more-button-component');
+        const toggleButton = this.querySelector('.toggle-read-more-button-component__button');
+        
+        if (!textContainer.textContent) {
+            toggleReadMoreButtonElement.style.display = 'none';
+        }
+
+        toggleButton.addEventListener('click', () => {
+            if (textContainer.classList.contains('collapsed')) {
+                textContainer.classList.remove('collapsed');
+                textContainer.classList.add('expanded');
+                
+                toggleButton.textContent = 'Read Less';
+            } else {
+                textContainer.classList.remove('expanded');
+                textContainer.classList.add('collapsed');
+
+                toggleButton.textContent = 'Read More';
+            }
+        });
+    }
+}
+
+window.customElements.define('toggle-read-more-button-component', ToggleReadMoreButtonComponent);

package/src/components/html-text-from-editor-js/toggle-read-more-button-component/toggle-read-more-button-component.scss

@@ -0,0 +1,27 @@
+toggle-read-more-button-component {
+    section {
+        padding: 0 !important;
+    }
+    
+    .toggle-read-more-button-component {
+        &__container {
+            text-align: center;
+        }
+
+        &__button {
+            color: #1A1A1A;
+            margin-top: 40px;
+            padding: 0 23px 4px 23px;
+            font-size: 16px;
+            font-weight: 500;
+            border-bottom: 1px solid #1A1A1A;
+            transition: all 0.3s ease-in-out;
+            background: transparent;
+            cursor: pointer;
+            &:hover {
+                color: #B38F55;
+                border-color: #B38F55;
+            }
+        }
+    }
+}

package/src/components/image-component/image-component.js

@@ -85,14 +85,14 @@ class ImageComponent extends GHComponent {
                     this.image.setAttribute('src', this.src);
                 });
             } catch (error) {
-                console.error(`11111111111111111 Image load failed "${this.src}". Attempt "${attempts + 1}"`);
+                console.error(`Image load failed "${this.src}". Attempt "${attempts + 1}"`);
                 attempts++;
             }
         }
         if (imageLoaded) {
             super.render(html);
         } else {
-            console.error(`11111111111111111 Image load failed "${this.src}".`);
+            console.error(`Image load failed "${this.src}".`);
         }
         // caller == 'client' ? this.clientRender() : super.render(html);
     }

package/src/components/liqpay-component/config.js

@@ -0,0 +1,5 @@
+export const liqPayComponent = {
+    tag: 'liqpay-component',
+    src: '@gudhub/ssg-web-components-library/src/components/liqpay-component/liqpay-component.js',
+    serverOnly: false
+}

package/src/components/liqpay-component/liqpay-component.html

@@ -0,0 +1,18 @@
+<section class="liqpay-component liqpay">
+    <div class="pay-button__wrapper">
+        <button class="pay-button__button" id="pay-button">Купити</button>
+    </div>
+
+    <div class="liqpay__container liqpay-sidebar">
+        <div class="liqpay-sidebar__overlay"></div>
+
+        <div id="liqpay-container" class="liqpay-sidebar__wrapper">
+            <div class="liqpay-sidebar__header">
+                <p>Оплата</p>
+                <svg id="close-icon" class="liqpay-sidebar__close-icon" xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13" fill="none">
+                    <path d="M13 1L12 0L6.5 5.5L1 0L0 1L5.5 6.5L0 12L1 13L6.5 7.5L12 13L13 12L7.5 6.5L13 1Z" fill="#A6A6A6"/>
+                </svg>
+            </div>
+        </div>
+    </div>
+</section>

package/src/components/liqpay-component/liqpay-component.js

@@ -0,0 +1,127 @@
+import html from './liqpay-component.html';
+import './liqpay-component.scss';
+
+class LiqPayComponent extends GHComponent {
+    constructor() {
+        super();
+    }
+    
+    async onServerRender() {
+        this.amount = this.getAttribute('amount') || '1';
+        this.description = this.getAttribute('description') || '';
+
+        // Extends from GH Component
+        super.render(html);
+
+        await this.loadLiqPay();
+    }
+    
+    async onClientRender() {
+        this.toggleSidebarVisibility();
+    }
+
+    async initLiqPayLibrary() {
+        if (!document.querySelector('script#liqpay_script')) {
+            const script = document.createElement('script');
+            script.setAttribute('id', 'liqpay_script');
+            script.setAttribute('src', 'https://static.liqpay.ua/libjs/checkout.js');
+            script.async = true;
+    
+            return new Promise((resolve, reject) => {
+                script.onload = () => {
+                    if (window.LiqPayCheckout) {
+                        resolve();
+                    } else {
+                        reject(new Error('LiqPayCheckout is not defined after script load.'));
+                    }
+                };
+                script.onerror = reject;
+                document.body.appendChild(script);
+            });
+        }
+        return Promise.resolve();
+    }
+
+    async loadLiqPay() {
+        await this.initLiqPayLibrary();
+
+        const data = window.getConfig()?.liqPayConfig?.data;
+
+        const dataFromAttributes = { amount: this.amount, description: this.description };
+        const fullApiData = JSON.stringify({ ...data, ...dataFromAttributes });
+
+        const privateKey = window.getConfig()?.liqPayConfig?.privateKey;
+
+        const generateSignature = async (data, privateKey) => {
+            const combinedData = privateKey + data + privateKey;
+
+            const encoder = new TextEncoder();
+            const dataBuffer = encoder.encode(combinedData);
+
+            const hashBuffer = await crypto.subtle.digest("SHA-1", dataBuffer);
+
+            const base64String = btoa(String.fromCharCode(...new Uint8Array(hashBuffer)));
+            return base64String;
+        }
+
+        const signature = await generateSignature(fullApiData, privateKey);
+
+        if (window.LiqPayCheckout) {
+            await LiqPayCheckout.init({
+                data: fullApiData,
+                signature: signature,
+                embedTo: '#liqpay-container',
+                mode: 'embed'
+            }).on('liqpay.callback', (data) => {
+                console.log('data:', data);
+
+                if (data.status === 'success') {
+                    alert('Payment success!');
+                } else if (data.status === 'failure') {
+                    alert('Payment failed. Please try again.');
+                }
+            }).on('liqpay.ready', () => {
+                console.log('LiqPay is ready.');
+            }).on('liqpay.close', () => {
+                console.log('LiqPay widget closed.');
+            });
+        }
+    }
+
+    toggleSidebarVisibility() {
+        const body = document.body;
+        const liqPayWrapper = document.querySelector('.liqpay-sidebar__wrapper');
+        const overlay = document.querySelector('.liqpay-sidebar__overlay');
+        const openBtns = document.querySelectorAll('.pay-button__button');
+        const closeBtn = document.querySelector('.liqpay-sidebar__close-icon');
+    
+        const toggleSidebar = () => {
+            const isOpen = liqPayWrapper.classList.toggle('open');
+            overlay.classList.toggle('visible', isOpen);
+            body.classList.toggle('no-scroll', isOpen);
+    
+            if (isOpen) {
+                console.log("Sidebar opened at:", new Date());
+            }
+        };
+    
+        openBtns.forEach(btn => {
+            if (!btn._isBound) {
+                btn.addEventListener('click', toggleSidebar);
+                btn._isBound = true;
+            }
+        });
+    
+        if (closeBtn && !closeBtn._isBound) {
+            closeBtn.addEventListener('click', toggleSidebar);
+            closeBtn._isBound = true;
+        }
+    
+        if (overlay && !overlay._isBound) {
+            overlay.addEventListener('click', toggleSidebar);
+            overlay._isBound = true;
+        }
+    }
+}
+
+window.customElements.define('liqpay-component', LiqPayComponent);

package/src/components/liqpay-component/liqpay-component.scss

@@ -0,0 +1,81 @@
+liqpay-component {
+    #liqpay-container {
+        background: #eff1f3;
+    }
+
+    .liqpay-sidebar {
+        &__overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0);
+            z-index: 51;
+            transition: 0.5s;
+            pointer-events: none;
+        }
+    
+        &__overlay.visible {
+            background: rgba(0, 0, 0, 0.7);
+            pointer-events: all;
+        }
+    
+        &__wrapper {
+            padding: 0 20px 20px 20px;
+            height: 100%;
+            width: 450px;
+            position: fixed;
+            top: 0;
+            right: 0;
+            background: white;
+            z-index: 52;
+            user-select: none;
+            visibility: hidden;
+            overflow-x: hidden;
+            transform: translateX(100%);
+            transition: transform 0.5s ease, visibility 0s 0.5s;
+        }
+    
+        &__wrapper.open {
+            visibility: visible;
+            transform: translateX(0);
+            transition: transform 0.5s ease, visibility 0s;
+        }
+    
+        &__header {
+            position: relative;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 18px 0;
+            font-size: 22px;
+            font-weight: 600;
+            color: #1F1F1F;
+        }
+    
+        &__close-icon {
+            position: absolute;
+            top: 38%;
+            right: 15px;
+            cursor: pointer;
+        }
+    }
+        
+    .pay-button {
+        &__button {
+            padding: 10px 30px;
+            font-size: 16px;
+            font-weight: 600500;
+            background: white;
+            border-radius: 7px;
+            border: 2px solid black;
+            transition: all 0.3s ease-in-out;
+            cursor: pointer;
+        }
+    }
+}
+
+body.no-scroll {
+    overflow: hidden;
+}

package/src/components/masonry-gallery/masonry-gallery.js

@@ -178,13 +178,13 @@ class MasonryGallery extends GHComponent {
 
         const promise = new Promise((res, rej) => {
             const img = document.createElement('img');
-            img.setAttribute('src', imageSrc);
+            img.setAttribute('src', typeof(+imageSrc) === 'number' ? `https://gudhub.com/userdata/35113/${imageSrc}.jpg` : imageSrc);
             img.setAttribute('alt', imageAlt);
             img.setAttribute('title', imageTitle);
 
             if (fullImageSrc) {
                 img.classList.add('open-modal');
-                img.setAttribute('data-modal-image', fullImageSrc);
+                img.setAttribute('data-modal-image', typeof(+imageSrc) === 'number' ? `https://gudhub.com/userdata/35113/${fullImageSrc}.jpg` : fullImageSrc);
             }
 
             img.setAttribute('data-image-loading', 'true');

package/src/components/meta/canonical.js

@@ -51,8 +51,15 @@ class CanonicalComponent extends GHComponent {
                 const getCurrentChapter = await window?.getCurrentChapter();
                 const currentChapter = getCurrentChapter ? getCurrentChapter : 'pages';
 
-                let ids = await super.findIds(currentChapter);
-                await this.findCanonical(ids.appId, ids.itemId, false);
+                let slug = false;
+
+                // this code fix problem with blog pagination page ("/blog/page/${index}"), findIds was trying to search item with "slug", but as we know paginaton slug is computed (doesnt exist in gudhub)
+                if (chapter == 'pages' && path.includes("/blog/page/")) {
+                    slug = "/blog/";
+                }
+
+                let ids = await super.findIds(currentChapter, slug);
+                await this.findCanonical(ids.appId, ids.itemId, slug);
             }
         }
 

package/src/components/meta/meta-tag.js

@@ -56,8 +56,15 @@ class MetaTag extends GHComponent {
                     const getCurrentChapter = await window?.getCurrentChapter();
                     const currentChapter = getCurrentChapter ? getCurrentChapter : 'pages';
 
-                    let ids = await super.findIds(currentChapter);
-                    await this.addTag(ids.appId, ids.itemId, false, currentChapter);
+                    let slug = false;
+
+                    // this code fix problem with blog pagination page ("/blog/page/${index}"), findIds was trying to search item with "slug", but as we know paginaton slug is computed (doesnt exist in gudhub)
+                    if (chapter == 'pages' && path.includes("/blog/page/")) {
+                        slug = "/blog/";
+                    }
+    
+                    let ids = await super.findIds(currentChapter, slug);
+                    await this.addTag(ids.appId, ids.itemId, slug, currentChapter);
                 }
             }
         }