@gudhub/ssg-web-components-library 1.0.24 → 1.0.26

package/package.json

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

package/src/components/blog/article/article-component.js

@@ -86,13 +86,17 @@ class ArticleComponent extends GHComponent {
         delete this.article.category;
 
         this.breadcrumbs = JSON.stringify([
+            {
+                "title": "Головна",
+                "link": "/blog/"
+            },
             {
                 "title": "Блог",
-                "slug": "/blog/"
+                "link": "/blog/"
             },
             {
                 "title": this.article.categories[0].name,
-                "slug": this.article.categories[0].slug
+                "link": this.article.categories[0].slug
             },
             {
                 "title": this.article.h1

package/src/components/blog/author-page/author-page.html

@@ -1,6 +1,6 @@
 <section class="author-page">
     <div class="container">
-        <breadcrumbs-component data-items='[{"title": "Блог", "slug": "/blog/"}, {"title": "Автори", "slug": "/blog/authors/"}, {"title": "${author.h1}"}]'></breadcrumbs-component>
+        <breadcrumbs-component data-items='[{"title": "Головна", "link": "/"},{"title": "Блог", "link": "/blog/"}, {"title": "Автори", "link": "/blog/authors/"}, {"title": "${author.h1}"}]'></breadcrumbs-component>
         <div class="author">
             <div class="author_top">
                 <div class="image">

package/src/components/blog/authors-list/authors-list.html

@@ -1,6 +1,6 @@
 <section class="authors-list-section">
     <div class="container">
-        <breadcrumbs-component data-items='[{"title": "Блог", "slug": "/blog/"}, {"title": "Автори"}]'></breadcrumbs-component>
+        <breadcrumbs-component data-items='[{"title": "Головна", "link": "/"},{"title": "Блог", "link": "/blog/"}, {"title": "Автори"}]'></breadcrumbs-component>
         <h1 gh-id="${ghId}">Authors</h1>
         <div class="authors-list">
             ${

package/src/components/blog/blog-banner/blog-banner.js

@@ -39,7 +39,15 @@ class BlogBanner extends GHComponent {
             let breadcrumbsTitle = document.createElement('div')
             breadcrumbsTitle.innerHTML = this.json.title;
             
-            this.breadcrumbs = JSON.stringify([{"title": breadcrumbsTitle.innerText}]);
+            this.breadcrumbs = JSON.stringify([
+                {
+                    title: 'Головна',
+                    link: '/'
+                },
+                {
+                    title: breadcrumbsTitle.innerText
+                }
+            ]);
             
             this.image = this.json.image || false;
         }

package/src/components/blog/category-banner/category-banner.js

@@ -40,7 +40,19 @@ class CategoryBanner extends GHComponent {
         this.description = div.querySelector('div').innerText;
         this.title = item.fields.find(field => field.field_id == window.getConfig().chapters.blog.heading_field_id).field_value;
 
-        this.breadcrumbs = JSON.stringify([{"title": this.config.breadcrumbs.blog, "slug": "/blog/"},{"title": this.title}]);
+        this.breadcrumbs = JSON.stringify([
+            {
+                "title": "Головна",
+                "link": "/"
+            },
+            {
+                "title": this.config.breadcrumbs.blog,
+                "link": "/blog/"
+            },
+            {
+                "title": this.title
+            }
+        ]);
         
         super.render(html);
     }

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

@@ -7,13 +7,21 @@ class BreadcrumbsComponent extends GHComponent {
     }
 
     async onServerRender() {
-        let currentUrl = new URL(window.location.href);
-        currentUrl = currentUrl.searchParams.get('path');
-
-        this.breadcrumbsConfig = window.getConfig().componentsConfigs.breadcrumbsConfig;
-        this.initialRoute = this.breadcrumbsConfig[0].routesTree;
+        if (this.hasAttribute('data-items')) {
+            //manual mode when you passing items in JSON format through attribute "data-items"
+            try {
+                this.items = JSON.parse(this.getAttribute('data-items'));
+            } catch (error) {
+                console.error(error);
+            }
+        }
+        else {
+            this.breadcrumbsConfig = window.getConfig().componentsConfigs.breadcrumbsConfig;
+            this.initialRoute = this.breadcrumbsConfig[0].routesTree;
 
-        this.items = this.generateBreadcrumbs(this.initialRoute, currentUrl);
+            let currentUrl = new URL(window.location.href);
+            currentUrl = currentUrl.searchParams.get('path');
+        }
 
         this.items === null ? console.error(`Didn't find current route in config, current URL: ${currentUrl}`) : null;
 

package/src/components/breadcrumbs/breadcrumbs.html

@@ -5,7 +5,7 @@
                     <li>
                         ${item.image 
                             ? ` <a href="${item.link}" aria-label="${item.title}">
-                                    <image-component lazyload src="${item.image.src}" alt="${item.image.alt}" title="${item.image.title}"></image-component>
+                                    <img src="${item.image.src}" alt="${item.image.alt}" title="${item.image.title}"></img>
                                 </a>
                             ` : `
                                 <a href="${item.link}">${item.title}</a>

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

@@ -21,14 +21,18 @@
             <div class="bold">${config.titleSuccess ? config.titleSuccess : 'Successfull'}</div>
             <div>${config.subtitleSuccess ? config.subtitleSuccess : 'Your form has been succesfully submitted! Please, check if info you provided is correct:'}</div>
             <div class="check">
-                <div class="check_entity">
-                    <span>Email:</span>
-                    <span class="email"></span>
-                </div>
-                <div class="check_entity phone_entity">
-                    <span>Phone:</span>
-                    <span class="phone"></span>
-                </div>
+                ${config.inputs.find(input => input.name === "email") ? `
+                    <div class="check_entity">
+                        <span>Email:</span>
+                        <span class="email"></span>
+                    </div>
+                ` : ''}
+                ${config.inputs.find(input => input.name === "phone") ? `
+                    <div class="check_entity phone_entity">
+                        <span>Phone:</span>
+                        <span class="phone"></span>
+                    </div>
+                ` : ''}
             </div>
         </div>
     </div>

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

@@ -1,10 +1,10 @@
 import html from './get-in-touch-form.html';
 import './get-in-touch-form.scss';
-import { sendEmail } from './sendEmail.js';
 import defaultConfigs from './get-in-touch-form-data.json';
+import { validationCallbacks } from './validationCallbacks.js';
 
 class GetInTouchForm extends GHComponent {
-    
+
     constructor() {
         super();
         this.formId = this.getAttribute("data-form-id");
@@ -21,7 +21,7 @@ class GetInTouchForm extends GHComponent {
         if (this.hasAttribute('data-in-popup')) {
             return;
         }
-        
+
         this.initConfig(this.config);
         super.render(html);
     }
@@ -40,7 +40,7 @@ class GetInTouchForm extends GHComponent {
     }
 
     attachEventListeners() {
-        this.getElementsByTagName('form')[0].addEventListener('submit', (e) => this.handleSubmit(e.target));
+        this.getElementsByTagName('form')[0].addEventListener('submit', (e) => this.handleSubmit(e));
         this.getElementsByClassName('restart_button')[0].addEventListener('click', (e) => this.hideFail());
     }
 
@@ -55,98 +55,106 @@ class GetInTouchForm extends GHComponent {
 
     initConfig(formConfigs) {
         try {
-            this.config = formConfigs.find(({id}) => id === this.formId);
+            this.config = formConfigs.find(({ id }) => id === this.formId);
             if (!this.config) {
-                throw e;
+                throw new Error("Config not found");
             }
         } catch (error) {
             const defaultId = this.isInPopup ? 'default popup' : 'default';
-            this.config = defaultConfigs.find(({id}) => id === defaultId);
+            this.config = defaultConfigs.find(({ id }) => id === defaultId);
         }
+
         this.titleName = this.hasAttribute('data-form-title') ? this.getAttribute('data-form-title') : this.config.title;
         this.subtitleName = this.hasAttribute('data-form-subtitle') ? this.getAttribute('data-form-subtitle') : this.config.subtitle;
         this.placement = this.hasAttribute('data-form-placement') ? this.getAttribute('data-form-placement') : "main";
         this.buttonText = this.hasAttribute('data-form-button-text') ? this.getAttribute('data-form-button-text') : this.config.button_text;
-    }
+    };
+
+    checkInputsValidations = (inputs) => {
+        const result = inputs.map((input) => {
+            const validationCallback = validationCallbacks[input.name];
+            if (!validationCallback) return {
+                input,
+                isValid: true
+            };
 
-    async handleSubmit(element) {
-        event.preventDefault();
+            return {
+                input,
+                isValid: validationCallback(input)
+            };
+        });
+
+        return result;
+    };
 
+    async handleSubmit(event) {
+        event.preventDefault();
+        const form = event.target;
+    
+        const inputs = Array.from(form.querySelectorAll('input'));
         const emailInput = this.querySelector('[name="email"]');
-        const email = emailInput ? emailInput.value : '';
-        
         const phoneInput = this.querySelector('[name="phone"]');
-        const phone = phoneInput ? phoneInput.value || '' : '';
-        
-        const isValidFields = this.validation(email, phone);
-
-        if (isValidFields.phoneValid && isValidFields.emailValid) {
-            this.addLoader();
 
-            const TIMEOUT_DURATION = 5000;
+        const validationResults = this.checkInputsValidations(inputs);
 
-            const sendEmailWithTimeout = (element, config, placement) => {
-                return new Promise((resolve, reject) => {
-                    const timer = setTimeout(() => {
-                        reject();
+        if (validationResults.every((res) => res.isValid)) {
+            this.addLoader();
+            try {
+                const res = await new Promise((resolve, reject) => {
+                    const TIMEOUT_DURATION = 2000;
+    
+                    setTimeout(() => {
+                        const isSuccess = true; 
+                        if (isSuccess) {
+                            resolve(true);
+                        } else {
+                            reject(new Error('Failed to send email'));
+                        }
                     }, TIMEOUT_DURATION);
-
-                    sendEmail(element, config, placement)
-                        .then((res) => {
-                            clearTimeout(timer);
-                            resolve(res);
-                        })
-                        .catch((error) => {
-                            clearTimeout(timer);
-                            reject(error);
-                        });
                 });
-            };
-
-            try {
-                const res = await sendEmailWithTimeout(element, this.config, this.placement);
-                this.removeLoader(element);
+    
+                this.removeLoader(form);
+    
                 if (res) {
-                    this.showSuccess({ email, phone });
+                    this.showSuccess({ email: emailInput ? emailInput.value : '', phone: phoneInput ? phoneInput.value : '' });
                 } else {
                     this.showFail();
                 }
             } catch (error) {
-                this.removeLoader(element);
+                this.removeLoader(form);
                 this.showFail();
             }
             this.isFormSubmitted = true;
-
         } else {
-            this.toggleErrors(isValidFields, emailInput, phoneInput);
+            const validationResultsForErrors = validationResults.filter(item => typeof item === 'object')
+            validationResultsForErrors.forEach(({ input, isValid }) => this.toggleError(input, isValid));
         }
-    }
 
-    toggleErrors(isValidFields, emailInput, phoneInput) {
-        isValidFields.emailValid ? emailInput.classList.remove('error') : emailInput.classList.add('error');
-            
-        isValidFields.phoneValid ? phoneInput.classList.remove('error') : phoneInput.classList.add('error');
+        this.createDataObject(form, this.config, this.placement)
     }
-
-    validation (email = '', phone = '') {
-        const isPhoneRequired = this.config.inputs.find(input => input.name === "phone").required;
-        const isEmailRequired = this.config.inputs.find(input => input.name === "email").required;
-        
-        let emailValid;
-        if (email.length === 0 && isEmailRequired == 'false') {
-            emailValid = true;
-        } else {
-            emailValid = /\S+@\S+\.\S+/.test(email);
-        }
-        
-        let phoneValid;
-        if (phone.length === 0 && isPhoneRequired == 'false') {
-            phoneValid = true;
-        } else {
-            phoneValid = /^\+?[\d()-\s]+$/.test(phone);
+    
+    async createDataObject(form, formId, placement) {
+        const formData = {};
+        for (const [name, value] of (new FormData(form)).entries()) {
+            formData[name] = value;
         }
 
-        return { phoneValid, emailValid };
+        const formDataObj = {
+            Website: window.location.hostname,
+            Url: window.location.pathname,
+            FormId: formId,
+            FormPlacement: placement,
+            FormData: {
+                ...formData
+            },
+            Referrer: localStorage.getItem('referrer'),
+        };
+
+        window.dispatchEvent(new CustomEvent('submitForm', { detail: { formDataObj } }));
+    }
+    toggleError(input, isValid) {
+        input.classList[isValid ? 'remove' : 'add']('error');
+        input.parentElement.classList[isValid ? 'remove' : 'add']('error-input');
     }
     async addLoader() {
         this.classList.add('loading');
@@ -160,7 +168,11 @@ class GetInTouchForm extends GHComponent {
         }, 500);
     }
     async showSuccess({email, phone}) {
-        this.getElementsByClassName('email')[0].innerText = email;
+        if (email) {
+            this.querySelector('.check_entity').classList.add('provided');
+            this.getElementsByClassName('email')[0].innerText = email;
+        }
+        this.classList.add('success');
         if (phone) {
             this.querySelector('.check_entity.phone_entity').classList.add('provided');
             this.getElementsByClassName('phone')[0].innerText = phone;
@@ -184,7 +196,6 @@ class GetInTouchForm extends GHComponent {
             overflowFail.style.opacity = '';
         }, 500);
     }
-
     generateInput(config) {
         return config.inputs.reduce((acc, input) => {
             const maxSymbols = {
@@ -198,13 +209,14 @@ class GetInTouchForm extends GHComponent {
             const maxLength = tag === 'textarea' ? maxSymbols.long : maxSymbols[input.type];
             return acc + `
                 <div class="input-wrap col-${input.width}">
-                    <${tag} type="text" name=${input.name} placeholder="${input.placeholder}" ${JSON.parse(input.required) ? 'required' : ''} ${ maxLength ? `maxlength=${maxLength}` : ''}></${tag}>
+                    <${tag} type="text" name=${input.name} placeholder="${input.placeholder}" ${JSON.parse(input.required) ? 'required' : ''} ${maxLength ? `maxlength=${maxLength}` : ''}></${tag}>
                     ${input.type === 'email' || input.type === 'phone' ? `<span class="${input.type}-error">${input.errorText}</span>` : ''}
                 </div>
-            `}, '');
+            `;
+        }, '');
     }
 }
 
-if(!customElements.get('get-in-touch-form')) {
+if (!customElements.get('get-in-touch-form')) {
     customElements.define('get-in-touch-form', GetInTouchForm);
 }

package/src/components/get-in-touch-form/get-in-touch-form.readme.md

@@ -1,18 +1,24 @@
-# Config: 
+# Config:
+
 The form field settings are defined in the site's config.mjs, when rendered on the server it is stored in "window.getConfig().componentsConfigs.form_config", and this config is also defined in the client's "window.getConfig().componentsConfigs.formConfig" and is used when rendering the form on the client. If the config in "window" is not available, then the config is taken from "get-in-touch-form-data.json". There can be several settings for forms, the form selects it by id (it is defined in the "data-form-id" attribute of the form component), this allows you to customize the fields of several forms in different ways (for example, on the page the form has all the fields, and in the popup the form has other types of fields)
 
 # Form in popup:
+
 if form will be rendered in popup we need to define attribute "data-in-popup", that will change some styles of form to fit the popup styles.
 
 # Placement:
+
 The "placement" variable is needed to track conversions. If the form is in a popup, then "placement" determined by the button that opened the popup with the form. If the form is already on the page, this value is defined in the form constructor (currently "this.placement = 'main' ").
 
 # Data-attributes:
+
 data-in-popup: if form is on popup
 data-form-id="form-id": determine id of config that will be applyed to form
 
-# Config object: 
+# Config object:
+
 ("?" means "unnecessary")
+
 ```json
 {
         "id": "string",
@@ -26,6 +32,7 @@ data-form-id="form-id": determine id of config that will be applyed to form
             "from": "string",
             "subject": "string"
         },
+        "endpointForEmails": "some fancy url for gudhub API",
         "inputs": [
             {
                 "name": "string",
@@ -37,7 +44,9 @@ data-form-id="form-id": determine id of config that will be applyed to form
         ]
     },
 ```
+
 ## Types description:
+
 email: will be checked by email rules;
 phone: will be checked by phone number rules;
 short: max length 64 symbols;
@@ -45,4 +54,50 @@ long: max length 128 symbols;
 textarea: tag "textarea";
 
 ## Width:
-defines the width of the field in the row. The total width of the row is 12. That is, if 2 fields have a width of 6, then they will take up half of the line each
+
+defines the width of the field in the row. The total width of the row is 12. That is, if 2 fields have a width of 6, then they will take up half of the line each
+
+## Correct way to handle submit in your project
+
+```js
+// by default this event handled in your main.js
+window.addEventListener("submitForm", async (event) => {
+  const { formDataObj } = event.detail;
+
+  // add other code here
+});
+```
+
+### What data contains in formDataObj
+
+```js
+{
+FormData :
+    // all data from your form inputs on website
+    name : "name"
+    phone: "phhone"
+    email: 'email'
+FormId:
+    // data from your form-config
+    button_text:"text"
+    defaultLang: "true or false"
+    id: "text"
+    inputs: Array()
+        0: {name: 'name', type: 'type', required: 'required', placeholder: "placeholder", width: 12}
+        1: {name: 'name', type: 'type', required: 'required', placeholder: 'placeholder *', errorText: 'errorText', …}
+        langCode: "text"
+    mailConfig:
+        from: "from"
+        subject: "subject"
+        to: "to"
+        subtitle: "subtitle"
+        subtitleSuccess: "subtitleSuccess"
+        title: "title"
+        titleFail:"titleFail"
+        titleSuccess: "titleSuccess"
+FormPlacement: "FormPlacement"
+Referrer: "Referrer"
+Url: "/"
+Website: "Website"
+}
+```

package/src/components/get-in-touch-form/validationCallbacks.js

@@ -0,0 +1,36 @@
+const emailValidation = (input) => {
+    const regex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
+
+    let isValid = regex.test(input.value);
+
+    if (!isValid) {
+        input.classList.add('error');
+        input.parentElement.classList.add('error-input');
+    } else {
+        input.classList.remove('error');
+        input.parentElement.classList.remove('error-input');
+    }
+
+    return isValid;
+};
+
+const phoneValidation = (input) => {
+    const regex = /^\d{10}$/;
+
+    let isValid = regex.test(input.value);
+
+    if (!isValid) {
+        input.classList.add('error');
+        input.parentElement.classList.add('error-input');
+    } else {
+        input.classList.remove('error');
+        input.parentElement.classList.remove('error-input');
+    }
+
+    return isValid;
+};
+
+export const validationCallbacks = {
+    email: emailValidation,
+    phone: phoneValidation
+};

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

@@ -53,26 +53,47 @@ class ImageComponent extends GHComponent {
             }
         })
         
-        await new Promise(async (resolve) => {
-            // Use new Image to have ability get params like from real image, for example naturalWidth
-            this.image = new Image();
-        
-            this.image.addEventListener('load', () => {
-                const srcHasParams = this.image.getAttribute('src').indexOf('?') !== -1;
-                let src = srcHasParams ? this.image.getAttribute('src').substring(0, image.getAttribute('src').indexOf('?')) : this.image.getAttribute('src');
-                if(src.indexOf('&') !== -1) {
-                    src = src.substring(0, src.indexOf('&'))
-                }
-                this.extension = src.substring(src.lastIndexOf('.'), src.length);
-                this.path = src.substring(0, src.length - this.extension.length);
-                
-                this.imageWidth = this.image.naturalWidth;
-                resolve();
-            });
-        
-            this.image.setAttribute('src', this.src);
-        })
-        super.render(html);
+        let attempts = 0;
+        let imageLoaded = false;
+
+        while (!imageLoaded && attempts < 5) {
+            try {
+                await new Promise(async (resolve, reject) => {
+                    // Use new Image to have ability get params like from real image, for example naturalWidth
+                    this.image = new Image();
+
+                    this.image.addEventListener('load', () => {
+                        const srcHasParams = this.image.getAttribute('src').indexOf('?') !== -1;
+                        let src = srcHasParams ? this.image.getAttribute('src').substring(0, this.image.getAttribute('src').indexOf('?')) : this.image.getAttribute('src');
+                        if (src.indexOf('&') !== -1) {
+                            src = src.substring(0, src.indexOf('&'))
+                        }
+                        this.extension = src.substring(src.lastIndexOf('.'), src.length);
+                        this.path = src.substring(0, src.length - this.extension.length);
+
+                        this.imageWidth = this.image.naturalWidth;
+
+                        imageLoaded = true;
+
+                        resolve();
+                    });
+
+                    this.image.onerror = () => {
+                        reject();
+                    };
+
+                    this.image.setAttribute('src', this.src);
+                });
+            } catch (error) {
+                console.error(`11111111111111111 Image load failed "${this.src}". Attempt "${attempts + 1}"`);
+                attempts++;
+            }
+        }
+        if (imageLoaded) {
+            super.render(html);
+        } else {
+            console.error(`11111111111111111 Image load failed "${this.src}".`);
+        }
         // caller == 'client' ? this.clientRender() : super.render(html);
     }
 

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

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

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

@@ -0,0 +1,29 @@
+<section>
+  <div class="container">
+    ${json.title ? `
+      <h2 class="h2" gh-id="${ghId}.title"></h2>
+    ` : ''}
+    ${json.subtitle ? `
+      <p class="subtitle" gh-id="${ghId}.subtitle"></p>
+  ` : ''}
+
+  <div class="masonry-grid"></div>
+
+  <div class="button-wrapper">
+    ${json.button ? `
+      <button id="grid-add-items" class="btn" gh-id="${ghId}.button"></button>
+    ` : ''}
+  </div>
+
+  <div id="modal">
+    <div class="modal-loader">
+      <svg viewBox="25 25 50 50">
+        <circle r="20" cy="50" cx="50"></circle>
+      </svg>
+    </div>
+    <div class="close-modal">
+      <span>&times;</span>
+    </div>
+    <img class="modal-img" src="">
+  </div>
+</section>