@gudhub/ssg-web-components-library 1.0.69 → 1.0.71

package/package.json

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

package/src/components/cookies-popup/config.js

@@ -1,6 +1,6 @@
-export const aboutUsBanner = {
-    tag: 'about-us-banner',
+export const cookiesPopup = {
+    tag: 'cookies-popup',
     category: 'Utilities',
-    src: '@gudhub/ssg-web-components-library/src/components/about-us-banner/about-us-banner.js',
+    src: '@gudhub/ssg-web-components-library/src/components/cookies-popup/cookies-popup.js',
     serverOnly: false
 }

package/src/components/cookies-popup/cookies-popup.html

@@ -1,8 +1,26 @@
 <div class="cookies_popup">
+    <div class="cross" onclick="close()">
+        <svg  width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M16.6018 5.75L6.10181 16.25" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M6.10181 5.75L16.6018 16.25" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+    </div>
     <div class="container">
         <div class="flex_wrap">
-            <div class="text">By continuing to use this site, you agree to our <a href="/privacy-policy/">cookie policy</a>.</div>
-            <div class="popup_btn" onclick="gotIt()">GOT IT</div>
+            <div class="text-wrapper">
+                <svg width="43" height="40" viewBox="0 0 43 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M39.8892 19.0804C39.8361 19.4321 39.9021 19.7923 39.9206 20.1487C39.9538 20.7743 40.0031 21.3993 40.0174 22.0239C40.0601 23.9057 39.9438 25.8682 39.0112 27.5497C38.9358 27.6855 38.8565 27.8202 38.772 27.9536C38.7041 28.0613 38.6235 28.1601 38.5357 28.2521C37.7526 29.0746 37.0511 29.9835 36.4066 30.9432C35.3544 32.5098 34.5822 34.6574 33.156 35.9061C32.0312 36.8909 30.4859 37.2464 29.0839 37.6413C27.7692 38.0115 26.7659 38.7955 25.558 39.3888C24.3962 39.9592 23.0151 40.0912 21.7422 39.945C20.6748 39.8226 19.6464 39.9089 18.5832 39.6512C17.5875 39.4096 16.5647 39.0162 15.6255 38.7281C13.3749 38.0376 10.794 38.3171 8.8505 36.8297C7.30613 35.6484 6.27007 33.918 4.6284 32.8458C3.9146 32.3798 3.19035 31.9 2.65689 31.236C1.28481 29.5288 2.32514 27.1254 1.66876 25.1724C1.59093 24.9399 1.50123 24.7083 1.39871 24.4776C1.3242 24.2963 1.24352 24.1178 1.15714 23.9418C-0.167012 21.2375 -0.370143 17.9893 0.627478 15.144C0.678261 14.9997 0.744705 14.8602 0.827761 14.732C1.40488 13.8412 2.19273 13.0705 2.59946 12.0828C2.99434 11.125 3.03041 10.0657 3.3351 9.08139C3.70245 7.89488 4.46372 6.6685 5.5031 5.96655C6.72236 5.14406 8.15662 4.69888 9.37873 3.79571C11.1215 2.5081 12.8059 0.898714 14.9107 0.220027C17.0384 -0.466727 18.9843 0.666631 21.0996 0.742094C21.3018 0.749213 21.504 0.750162 21.709 0.750162C21.7166 0.750162 21.7237 0.750162 21.7313 0.750162C22.7432 0.748738 23.5989 1.51001 23.7042 2.51664C23.7308 2.76819 23.7916 3.01071 23.9012 3.22855C24.1731 3.7696 24.1637 4.41032 23.8983 4.95469C23.3934 5.99076 22.8946 7.62815 23.6881 9.17774C24.4223 10.6125 25.7783 11.0961 26.8139 11.2465C27.6117 11.3623 28.2514 11.9499 28.4598 12.7283C28.7203 13.7031 29.2405 14.8891 30.2628 15.3338C31.3957 15.8265 33.0093 15.4985 34.0943 15.1692C34.7545 14.9689 35.4759 15.1165 35.9889 15.5773C36.5532 16.0837 37.4327 16.6271 38.5826 16.5835C38.5826 16.5835 40.2832 16.4587 39.8883 19.0809L39.8892 19.0804Z" fill="#F7B658"/>
+                    <path d="M7.30615 10.6286C7.82537 9.29401 9.60467 8.62671 11.0138 9.73871C12.4224 10.8507 11.4537 13.5963 8.62793 13.3718C6.76083 13.2237 6.78741 11.9632 7.30663 10.6281L7.30615 10.6286ZM19.7024 2.75869C18.6582 2.4388 17.7238 3.30449 17.8448 4.37804C17.9425 5.24515 18.6924 5.9713 19.5306 6.14168C20.635 6.36617 21.5866 6.5916 21.6174 5.09185C21.6022 4.92147 21.5719 4.75678 21.5268 4.59968C21.2937 3.78336 20.5116 3.00786 19.7019 2.75916L19.7024 2.75869ZM16.3346 17.3405C16.0797 17.3941 15.8552 17.2736 15.5999 17.3134C15.2776 17.3637 14.963 17.527 14.7171 17.7377C12.626 19.5298 16.8652 21.9949 18.5885 20.2769C19.5709 19.2973 19.5377 17.3628 18.0218 16.9418C17.701 16.8526 17.3464 16.8488 17.0299 16.9579C16.7902 17.0405 16.6136 17.265 16.3716 17.3315C16.3593 17.3348 16.3469 17.3376 16.3351 17.3405H16.3346ZM24.7204 12.1331C24.5851 12.07 24.4712 11.9513 24.3872 11.7264C24.2349 11.3187 24.3692 11.0315 23.9876 10.7515C22.6791 9.7914 21.9074 11.6718 21.9672 12.6419C22.0355 13.7472 22.654 15.0424 23.8315 15.2954C24.5742 15.4549 25.4294 15.2104 25.9491 14.6476C26.317 14.2489 26.5585 13.621 26.3972 13.0871C26.1005 12.1065 25.4105 12.4558 24.7204 12.1336V12.1331ZM9.57809 23.2389C8.49172 22.2185 6.59709 21.8397 5.64931 23.3556C5.2701 23.9242 5.2701 24.6821 5.45994 25.2507C6.21788 26.956 8.30235 26.0087 9.79119 26.2004C9.93357 26.1425 10.0389 26.0343 10.1125 25.891C10.1861 25.7481 10.2278 25.5701 10.2435 25.3751C10.2592 25.18 10.2482 24.9664 10.216 24.7524C10.0076 24.3029 10.0076 23.9242 9.81112 23.5939C9.73519 23.4562 9.65593 23.3352 9.57809 23.2389ZM15.0598 29.1852C13.9872 29.6086 13.0399 30.9351 13.7978 32.0718C14.5558 32.8297 16.0716 32.0718 16.7176 33.141C16.8082 33.3219 16.9074 33.4177 17.009 33.4538C17.2121 33.5255 17.4247 33.3584 17.5913 33.1368C17.6744 33.0257 17.7465 32.9014 17.7997 32.786C18.9141 31.1244 17.7774 28.282 15.5121 29.0053C15.3564 29.048 15.2041 29.1088 15.0598 29.1852ZM27.708 24.8772C28.2235 23.7121 28.1271 21.9437 26.6402 21.6053C26.0346 21.4672 25.2937 21.704 25.1784 22.3874C24.9382 23.8108 22.0507 22.3272 22.3554 24.3551C22.579 25.843 24.1295 26.5089 25.5353 26.3328C26.4636 26.2166 27.3288 25.7334 27.7076 24.8772H27.708ZM35.7042 19.601C34.6662 18.9337 32.1451 19.9802 32.6643 21.4961C33.1836 23.012 35.1854 23.7533 36.372 22.938C37.5585 22.1221 37.763 21.1288 37.1698 20.3134C36.5765 19.4976 35.7047 19.6015 35.7047 19.6015L35.7042 19.601ZM29.9335 32.741C30.0934 32.0718 30.8513 30.9351 30.0934 30.7452C29.3355 30.5559 28.1983 30.5559 27.5775 31.2355C27.4736 31.3072 27.3744 31.3855 27.2799 31.4714C27.186 31.5573 27.0967 31.6503 27.0142 31.7519C26.6535 32.1942 26.2961 32.7837 26.4138 33.3765C26.4987 33.8045 26.8025 34.1828 27.2026 34.3575C27.8637 34.6465 28.6136 34.3717 29.1475 33.9204C29.2543 33.8302 29.3525 33.7324 29.4389 33.6313C29.5604 33.4889 29.6606 33.339 29.7422 33.188C29.8238 33.0376 29.8855 32.8876 29.9339 32.741H29.9335Z" fill="#593412"/>
+                    <path d="M37.1507 13.7411C37.2219 14.0486 37.098 14.5038 36.7013 14.4544C36.1417 14.3846 34.9666 14.7767 34.8517 14.0671C34.7374 13.3604 35.809 12.8934 36.5371 13.1098C36.8327 13.1976 37.0715 13.3984 37.1512 13.7415L37.1507 13.7411ZM42.1972 15.7634C41.8526 15.4378 41.5233 15.2759 41.1834 15.8085C40.8816 16.2816 41.4464 16.7876 41.323 17.256C41.1996 17.7244 41.1042 18.0116 41.7354 18.125C42.2143 18.2114 42.7848 17.807 42.9234 17.359C43.0861 16.8312 42.7169 16.2987 42.37 15.9371C42.3116 15.8763 42.2537 15.8175 42.1967 15.7634H42.1972ZM41.5171 13.6367C40.8844 13.6367 40.5997 14.2294 41.098 14.4274C41.5964 14.6248 42.6637 13.8346 41.5171 13.6367ZM29.2689 1.1251C28.7217 0.808067 28.1778 1.17826 28.5096 1.59876C28.8413 2.01973 30.1617 1.87071 29.2689 1.1251ZM38.9201 14.6082C38.556 14.5958 37.9224 14.8673 38.7388 15.3424C39.0159 15.5038 39.6709 16.1739 39.7264 15.472C39.7639 14.9993 39.3771 14.6238 38.9201 14.6082ZM38.52 11.9561C38.2096 12.2655 37.9509 12.7468 38.257 12.8763C38.6946 13.061 39.7283 12.9167 39.5764 12.2584C39.5233 12.0282 39.2371 11.7914 39.024 11.6969C38.9106 11.6466 38.706 11.7705 38.5195 11.9561H38.52ZM25.0293 0.450214C24.5049 0.30451 24.2433 1.05486 24.6059 1.41746C24.9685 1.78006 24.5457 2.14028 25.3316 2.38328C26.1176 2.62676 26.1176 0.752063 25.0293 0.449739V0.450214ZM25.707 3.8949C25.4493 3.90819 25.2837 4.17017 25.3392 4.41175C25.4061 4.70173 25.643 4.71455 25.8769 4.79665C26.0236 4.84791 26.1968 5.22712 26.3838 5.05721C26.4313 5.0145 26.4493 4.94663 26.4465 4.88256C26.4289 4.48246 26.1935 3.86927 25.7066 3.8949H25.707Z" fill="#F7B658"/>
+                </svg>
+                <div class="text desktop">We use cookies in the delivery of our services. To learn about the cookies we use and information about your preferences and opt-out choices, please click here. By using our platfrom you agree to use of cookies. <a href="${linkToPage}">Cookies Policy</a></div>
+                <div class="text mobile">We use cookies to analyze our traffic.</br> <a href="${linkToPage}">Read cookies policies</a></div>
+            </div>
+            <div class="flex-wrapper">
+                <div class="btn empty" onclick="decline()">Decline</div>
+                <div class="btn" onclick="gotIt()">Accept</div>
+
+            </div>
         </div>
     </div>
 </div>

package/src/components/cookies-popup/cookies-popup.js

@@ -1,27 +1,115 @@
-import html from './cookies-popup.html';
-import './cookies-popup.scss';
+import html from "./cookies-popup.html";
+import "./cookies-popup.scss";
 
 class CookiesPopup extends GHComponent {
-    
     constructor() {
         super();
+        this.linkToPage = this.getAttribute('data-page') || "/privacy-policy/";
     }
 
     async onServerRender() {
         super.render(html);
     }
 
-    onClientReady () {
-        if ( localStorage.getItem('agreeWithCookies') == null ) {
-            this.classList.add('show');
+    async onClientReady() {
+        let inEU = localStorage.getItem("inEU");
+
+        if (inEU == null) {
+            await fetch("https://ipapi.co/json/").then((response) => response.json()).then((data) => inEU = data.in_eu);
+            localStorage.setItem("inEU", inEU)
+        }
+
+        inEU = true; // для теста
+
+        if (inEU) {
+            let hasDayPassed = this.checkTime();
+            let showPopup = (localStorage.getItem("agreeWithCookies") == null) || (localStorage.getItem("agreeWithCookies") === "false" && hasDayPassed);
+
+            if (showPopup) {
+                this.classList.add("show");
+
+                const script = document.createElement('script');
+                script.innerHTML = `
+                    window.dataLayer = window.dataLayer || [];
+                    function gtag(){dataLayer.push(arguments);}
+                    gtag('consent', 'default', {
+                        'ad_storage': 'denied',
+                        'analytics_storage': 'denied',
+                        'functionality_storage': 'denied',
+                        'security_storage': 'granted',
+                        'wait_for_update': 500
+                    });
+                `;
+
+                document.querySelector('head').prepend(script);
+            }
+        }
+    }
+
+    async gotIt() {
+        localStorage.setItem("agreeWithCookies", "true");
+        this.classList.add("hide");
+
+        let ifGtagExist = await this.checkGtag();
+        if (ifGtagExist) {
+            gtag('consent', 'update', {
+                'ad_storage': 'granted',
+                'analytics_storage': 'granted',
+                'functionality_storage': 'granted',
+                'security_storage': 'granted',
+                'personalization_storage': 'granted',
+                'wait_for_update': 500
+            });
         }
+
+    }
+    decline() {
+        const now = Date.now();
+        localStorage.setItem("cookieConsentTime", now.toString());
+
+        localStorage.setItem("agreeWithCookies", "false");
+        this.classList.add("hide");
+
+    }
+    close() {
+        this.classList.add("hide");
     }
 
-    gotIt() {
-        this.classList.add('hide');
-        localStorage.setItem('agreeWithCookies', true);
+    checkGtag() {
+        return new Promise((resolve) => {
+            const interval = setInterval(() => {
+                if (typeof gtag === 'function') {
+                    clearInterval(interval);
+                    resolve(true);
+                }
+            }, 1000);
+
+            setTimeout(() => {
+                clearInterval(interval);
+                resolve(false);
+            }, 5100);
+        });
     }
+    checkTime() {
+        const savedTime = localStorage.getItem("cookieConsentTime");
 
+        if (savedTime) {
+            const savedTimestamp = parseInt(savedTime, 10);
+            const now = Date.now();
+
+            const oneDayInMs = 24 * 60 * 60 * 1000;
+
+            const hasDayPassed = now - savedTimestamp > oneDayInMs;
+
+            if (hasDayPassed) {
+                return true;
+            } else {
+                return false;
+            }
+        } else {
+            return true;
+        }
+    }
 }
 
-window.customElements.define('cookies-popup', CookiesPopup);
+window.customElements.define("cookies-popup", CookiesPopup);

package/src/components/cookies-popup/cookies-popup.scss

@@ -1,8 +1,9 @@
 cookies-popup {
     display: none;
+
     &.show {
         display: block;
-        background-color: #4D555B;
+        background-color: #10182F;
         padding: 15px 0;
         position: fixed;
         bottom: 0;
@@ -10,59 +11,134 @@ cookies-popup {
         width: 100%;
         z-index: 10;
         transition: all 1s ease;
+
         &.hide {
             bottom: -100%;
         }
+
+        .cross {
+            cursor: pointer;
+            margin-left: 15px;
+        }
+
         .flex_wrap {
             display: flex;
             align-items: center;
-            justify-content: center;
+            justify-content: space-between;
+            gap: 30px;
         }
+
         .text {
             color: #fff;
             font-size: 16px;
             line-height: 25px;
-            margin-right: 60px;
+
             a {
                 color: #fff;
                 font-size: 14px;
                 line-height: 22px;
                 text-decoration: underline;
                 transition: all .2s ease;
+
                 &:hover {
                     color: #00BFD6;
                 }
             }
         }
-        .popup_btn {
-            padding: 8px 40px;
-            background-color: #00BFD6;
-            border: 1px solid #00BFD6;
-            color: #fff;
-            font-size: 14px;
-            line-height: 22px;
-            border-radius: 50px;
+
+        .flex-wrapper {
+            gap: 15px;
+            align-items: center;
+        }
+
+        .text-wrapper {
+            display: flex;
+            gap: 15px;
+            align-items: center;
+
+            .text.mobile {
+                display: none;
+            }
+
+            a {
+                font-size: 18px;
+                text-decoration: none;
+
+                &:hover {
+                    color: #D9D9D9;
+                }
+            }
+
+            svg {
+                min-width: 60px;
+            }
+        }
+
+        .btn {
+            font-size: 18px;
             cursor: pointer;
-            transition: all .2s ease;
-            white-space: nowrap;
+            padding: 10px 25px;
+            color: #10182F;
+            border-radius: 5px;
+            background-color: #fff;
+            border: 2px solid transparent;
+            transition: all 0.3s ease-in;
+
             &:hover {
-                background-color: #fff;
-                color: #00BFD6;
+                color: #fff;
+                background-color: #10182F;
+                border-color: #fff;
+            }
+
+            &.empty {
+                color: #fff;
+                background-color: transparent;
+                border-color: #fff;
+
+                &:hover {
+                    color: #10182F;
+                    background-color: #fff;
+                    border-color: #10182F;
+                }
             }
         }
+
     }
 }
 
-@media screen and (max-width: 450px) {
+@media screen and (max-width: 950px) {
+    cookies-popup.show .flex_wrap {
+        .text.desktop {
+            display: none;
+        }
+
+        .text.mobile {
+            display: block;
+        }
+    }
+}
+@media screen and (max-width: 675px) {
     cookies-popup.show {
-        .text {
-            color: #fff;
-            font-size: 14px;
-            line-height: 18px;
-            margin-right: 15px;
+        .container {
+            padding: 0 15px;
         }
-        .popup_btn {
+
+        .btn {
             padding: 8px 20px;
         }
     }
+}
+@media screen and (max-width: 620px) {
+    cookies-popup.show {
+        .flex_wrap {
+            flex-direction: column;
+            gap: 15px;
+        }
+
+        .text-wrapper {
+            justify-content: center;
+            width: 100%;
+            gap: 15px;
+        }
+    }
 }

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

@@ -13,17 +13,7 @@ class ImageComponent extends GHComponent {
     }
 
     async onClientReady() {
-        window.addEventListener('load', () => {
-            // We delay image loading to improve LCP Google PageSpeed
-            const timeoutForBase = this.hasAttribute('image-load-delay') ? this.getAttribute('image-load-delay') : 500;
-
-            let timeout;
-            clearTimeout(timeout);
-
-            timeout = setTimeout(() => {
-                this.generateSources();
-            }, timeoutForBase);
-        });
+        this.generateSources();
 
         if (this.hasAttribute('data-rerender')) {
             await this.render('client');
@@ -37,6 +27,7 @@ class ImageComponent extends GHComponent {
         this.lazyload = this.hasAttribute('lazyload');
         this.dataSrc = this.getAttribute('data-src');
         this.dataUrl = this.getAttribute('data-url');
+        this.isRenderOnServer = this.getAttribute('data-render-on-server');
         
         this.width = this.hasAttribute('width') ? this.getAttribute('width') : false;
         this.height = this.hasAttribute('height') ? this.getAttribute('height') : false;
@@ -103,6 +94,10 @@ class ImageComponent extends GHComponent {
             });
         
             super.render(html);
+
+            if (this.isRenderOnServer) {
+                this.generateSources();
+            }
         } catch (error) {
             console.error(`Rendering failed for ${this.src}.`);
         }

package/src/config.js

@@ -64,6 +64,8 @@ export { youtubePlayer } from './components/youtube-player/config.js';
 export { getInTouchBlockWithImage } from './components/get-in-touch-block-with-image/config.js';
 export { PageBannerImageAndMenu } from './components/page-banner-image-and-menu/config.js';
 export { GoogleAnalytics } from './components/google-analytics/config.js';
+export { cookiesPopup } from './components/cookies-popup/config.js';
+