@gudhub/ssg-web-components-library 1.0.9 → 1.0.11

package/package.json

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

package/src/components/about-us-image-counter/about-us-image-counter.scss

@@ -32,6 +32,10 @@ about-us-image-counter {
             display: flex;
             justify-content: center;
             align-items: center;
+
+            img {
+                height: 100%;
+            }
         }
     }
 

package/src/components/accordion-only/accordion-only-data.json

@@ -0,0 +1,30 @@
+{
+    "title": "accordion-only",
+    "subtitle": "subtitle",
+    "items": [
+      {
+        "title": "Expandable-vertical",
+        "text": "Be certain that our website development agency will provide only first-rate web-based software and website programming. With constantly advancing progress and great competition in the web development field Quality Assurance (QA) became one of the important traits that clients seek in web development firms, and Atlasiko Inc. enables this feature. We also offer you our testing services to ensure that all developed solutions have functionalities adequate to your initial request. Be certain that our website development agency will provide only first-rate web-based software and website programming. With constantly advancing progress and great competition in the web development field Quality Assurance (QA) became one of the important traits that clients seek in web development firms, and Atlasiko Inc. enables this feature. We also offer you our testing services to ensure that all developed solutions have functionalities adequate to your initial request."
+      },
+      {
+        "title": "Expandable-vertical",
+        "text": "Be certain that our website development agency will provide only first-rate web-based software and website programming. With constantly advancing progress and great competition in the web development field Quality Assurance (QA) became one of the important traits that clients seek in web development firms, and Atlasiko Inc. enables this feature. We also offer you our testing services to ensure that all developed solutions have functionalities adequate to your initial request. Be certain that our website development agency will provide only first-rate web-based software and website programming. With constantly advancing progress and great competition in the web development field Quality Assurance (QA) became one of the important traits that clients seek in web development firms, and Atlasiko Inc. enables this feature. We also offer you our testing services to ensure that all developed solutions have functionalities adequate to your initial request."
+      },
+      {
+        "title": "Expandable-vertical",
+        "text": "Be certain that our website development agency will provide only first-rate web-based software and website programming. With constantly advancing progress and great competition in the web development field Quality Assurance (QA) became one of the important traits that clients seek in web development firms, and Atlasiko Inc. enables this feature. We also offer you our testing services to ensure that all developed solutions have functionalities adequate to your initial request. Be certain that our website development agency will provide only first-rate web-based software and website programming. With constantly advancing progress and great competition in the web development field Quality Assurance (QA) became one of the important traits that clients seek in web development firms, and Atlasiko Inc. enables this feature. We also offer you our testing services to ensure that all developed solutions have functionalities adequate to your initial request."
+      },
+      {
+        "title": "Expandable-vertical",
+        "text": "Be certain that our website development agency will provide only first-rate web-based software and website programming. With constantly advancing progress and great competition in the web development field Quality Assurance (QA) became one of the important traits that clients seek in web development firms, and Atlasiko Inc. enables this feature. We also offer you our testing services to ensure that all developed solutions have functionalities adequate to your initial request. Be certain that our website development agency will provide only first-rate web-based software and website programming. With constantly advancing progress and great competition in the web development field Quality Assurance (QA) became one of the important traits that clients seek in web development firms, and Atlasiko Inc. enables this feature. We also offer you our testing services to ensure that all developed solutions have functionalities adequate to your initial request."
+      },
+      {
+        "title": "Expandable-vertical",
+        "text": "Be certain that our website development agency will provide only first-rate web-based software and website programming. With constantly advancing progress and great competition in the web development field Quality Assurance (QA) became one of the important traits that clients seek in web development firms, and Atlasiko Inc. enables this feature. We also offer you our testing services to ensure that all developed solutions have functionalities adequate to your initial request. Be certain that our website development agency will provide only first-rate web-based software and website programming. With constantly advancing progress and great competition in the web development field Quality Assurance (QA) became one of the important traits that clients seek in web development firms, and Atlasiko Inc. enables this feature. We also offer you our testing services to ensure that all developed solutions have functionalities adequate to your initial request."
+      },
+      {
+        "title": "Expandable-vertical",
+        "text": "Be certain that our website development agency will provide only first-rate web-based software and website programming. With constantly advancing progress and great competition in the web development field Quality Assurance (QA) became one of the important traits that clients seek in web development firms, and Atlasiko Inc. enables this feature. We also offer you our testing services to ensure that all developed solutions have functionalities adequate to your initial request. Be certain that our website development agency will provide only first-rate web-based software and website programming. With constantly advancing progress and great competition in the web development field Quality Assurance (QA) became one of the important traits that clients seek in web development firms, and Atlasiko Inc. enables this feature. We also offer you our testing services to ensure that all developed solutions have functionalities adequate to your initial request."
+      }
+    ]
+  }

package/src/components/accordion-only/accordion-only.html

@@ -0,0 +1,37 @@
+<section>
+    <div class="container">
+        <div class="flex-wrapper">
+            ${(() => {
+                    const halfLength = Math.ceil(json.items.length / 2);
+                    const firstColumnItems = json.items.slice(0, halfLength);
+                    const secondColumnItems = json.items.slice(halfLength);
+
+                    const reduceItems = (items) => {
+                        return items.reduce((acc, item, index) => acc + `
+                            <div class="primary-block" onclick="toggleExpand()">
+                                <div class="visible-content">
+                                    ${item.title ? `<h3 class="title" gh-id="${ghId}.items.${index}.title"></h3>` : ''}
+                                    <div class="icon">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" fill="none"><path d="M1 8.33333L8.5 14.8148L16 8.33333M8.5 15L8.5 0" stroke="none" stroke-width="2"></path></svg>
+                                    </div>
+                                </div>
+                                <div class="expandable-wrapper">
+                                    <div class="content">
+                                        ${item.title ? `<p class="text" gh-id="${ghId}.items.${index}.text"></p>` : ''}
+                                    </div>
+                                </div>
+                            </div>
+                        `, '')
+                    }
+                    return `
+                        <div class="accordion-column">
+                            ${reduceItems(firstColumnItems)}
+                        </div>
+                        <div class="accordion-column">
+                            ${reduceItems(secondColumnItems)}
+                        </div>
+                    `;
+            })()}
+        </div>
+    </div>
+</section>

package/src/components/accordion-only/accordion-only.js

@@ -0,0 +1,44 @@
+import html from './accordion-only.html';
+import './accordion-only.scss';
+import jsonTemplate from './accordion-only-data.json';
+
+class AccordionOnly extends GHComponent {
+    constructor() {
+        super();
+        super.setDefaultData(jsonTemplate);
+        this.openedElement;
+    }
+
+    async onServerRender() {
+        this.ghId = this.getAttribute('data-gh-id') || null;
+        this.json = await super.getGhData(this.ghId);
+
+        if (this.ghId) {
+            super.render(html);
+        }
+    }
+
+    onClientReady() {
+        
+    }
+
+    toggleExpand(element) {
+        const isOpening = element.classList.toggle('expand');
+        const toggleOverflow = (element, bool) => {
+            const action = bool ? 'add' : 'remove';
+            element.classList[action]('overflow')
+        };
+        if (isOpening) {
+            setTimeout(() => toggleOverflow(element, true), 0);
+            if (this.openedElement && this.openedElement !== element) {
+                this.openedElement.classList.remove('expand');
+                toggleOverflow(this.openedElement, false);
+            }
+            this.openedElement = element;
+        } else {
+            toggleOverflow(element, false);
+        }
+    }
+}
+
+window.customElements.define('accordion-only', AccordionOnly);

package/src/components/accordion-only/accordion-only.readme.md

@@ -0,0 +1,32 @@
+# Attributes:
+
+data-items-in-row=[number]: to calculate item width in flex container;
+
+data-items-shadow: to turn on grid_item shadows;
+
+data-border-top-on-hover: to add grid_item border top on hover
+
+
+
+# Component data-object: 
+("?" means "unnecessary")
+```json
+{
+    "title?": "string",
+    "subtitle?": "string",
+    "button_text?": "string",
+    "items": [ {
+    	"title?": "string",
+    	"link?": "string",
+    	"letter?": "symbol",
+		"marker?": "symbol",
+    	"icon?": {
+    		"src": "string",
+    		"alt": "string",
+    	    "title": "string",
+    	},
+    	"text?": "string",
+    	"list?": ["string"] // in most cases, either text or a list is used
+    } ]
+}
+```

package/src/components/accordion-only/accordion-only.scss

@@ -0,0 +1,106 @@
+accordion-only {
+    --hover-transition-duration: .2s;
+    --expand-transition-duration: .5s;
+    --gap: 20px;
+    .flex-wrapper {
+        display: flex;
+        gap: var(--gap);
+    }
+    .accordion-column {
+        width: calc(50% - (var(--gap) / 2));
+        & > *:not(:last-child) {
+            margin-bottom: 20px;
+        }
+    }
+    .primary-block {
+        width: 100%;
+        background: var(--block-primary-bg-color);
+        border-radius: var(--block-primary-border-radius);
+        box-shadow: var(--block-primary-box-shadow);
+        cursor: pointer;
+        transition: box-shadow var(--hover-transition-duration) ease;
+        &:hover, &.expand {
+            box-shadow: 0 3px 18px rgba(18,57,153,.2);
+        }
+        .visible-content {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 16px;
+            .title {
+                margin-bottom: 0;
+                transition: color var(--hover-transition-duration) ease;
+            }
+            .icon {
+                width: 24px;
+                height: 24px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                svg {
+                    width: 16px;
+                    height: auto;
+                    transition: transform var(--hover-transition-duration) linear;
+                    path {
+                        stroke: #000;
+                        transition: stroke var(--hover-transition-duration) ease;
+                    }
+                }
+            }
+        }
+        .expandable-wrapper {
+            max-height: 0;
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+            overflow: hidden;
+            transition: max-height var(--expand-transition-duration) ease;
+            .content {
+                padding: 20px 15px;
+                .text {
+                    font-size: var(--text-font-size);
+                    font-weight: var(--text-font-weight);
+                    color: var(--block-primary-text-color);
+                    line-height: 140%;
+                    letter-spacing: 0.01em;
+                    text-align: inherit;
+                }
+            }
+        }
+        &.expand {
+            .expandable-wrapper {
+                max-height: 200px;
+            }
+            .icon {
+                svg {
+                    transform: rotate(180deg);
+                }
+            }
+        }
+        &.overflow {
+            .expandable-wrapper {
+                overflow: auto;
+            }
+        }
+        &:hover, &.expand {
+            .title {
+                color: var(--block-primary-accent-color);
+            }
+            .icon {
+                svg {
+                    path {
+                        stroke: var(--block-primary-accent-color);
+                    }
+                }
+            }
+        }
+    }
+    @media screen and (max-width: 800px) {
+        .flex-wrapper {
+            flex-direction: column;
+        }
+        .accordion-column {
+            width: 100%;
+        }
+    }
+}

package/src/components/accordion-only/config.js

@@ -0,0 +1,6 @@
+
+export const accordionOnly = {
+  tag: 'accordion-only',
+  src: '@gudhub/ssg-web-components-library/src/components/accordion-only/accordion-only.js',
+  serverOnly: false
+}

package/src/components/edit-mode/edit-mode.js

@@ -40,6 +40,8 @@ class EditMode extends GHComponent {
     }
 
     disableEditors() {
+        const body = document.getElementsByTagName('body')[0];
+        body.classList.remove('edit-mode-enabled');
         const elementsToEdit = document.querySelectorAll('[gh-id]');
         if(elementsToEdit.length) {
             elementsToEdit.forEach(element => {
@@ -52,6 +54,8 @@ class EditMode extends GHComponent {
     }
 
     initEditors() {
+        const body = document.getElementsByTagName('body')[0];
+        body.classList.add('edit-mode-enabled');
         const showLoginPopup = () => this.showLoginPopup();
         const initGudHub = (auth_key) => this.initGudHub(auth_key);
         if(!document.querySelector('script[id="tinymce_script"]')) {

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

@@ -40,7 +40,7 @@ get-in-touch-form {
         $grid-columns: 12;
         @for $i from 1 through $grid-columns {
             .col-#{$i} {
-                width: percentage($i / $grid-columns);
+                width: percentage(calc($i / $grid-columns));
             }
         }
         form {

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

@@ -3,44 +3,12 @@
         <h2 gh-id="${ghId}.title"> TITLE </h2>
         ${json.subtitle ? `<p class="subtitle" gh-id="${ghId}.subtitle">SUBTITLE</p>` : ''}
         <div class="grid">
-            ${items.reduce((acc, item, index) => {
-                return acc + `
-                    <div class="grid_item primary-block ${item.button ? 'clickable bg-hover' : ''}" ${item.button && item.button.popupId ? `data-popup-id="${item.button.popupId}"` : ''}>
-                        ${item.letter ? `<div class="letter">${item.letter}</div>` : ''}
-                        <div class="top">
-                            ${item.marker ? `
-                                <div class="marker">
-                                    <span class="marker-symbol">${item.marker}</span>
-                                </div>
-                            ` : ''}
-                            ${item.icon ? `
-                                <div class="icon">
-                                    <img src="${item.icon.src ? item.icon.src : svgPlaceholder}" alt="${item.icon.alt}" title="${item.icon.title}" width="80" height="80">
-                                </div>
-                            ` : ''}
-                            ${item.title ? (() => {
-                                const tag = item.button && item.button.link ? `a href="${item.button.link}"` : 'h3';
-                                return `<${tag} class="item-title" gh-id="${ghId}.items.${index}.title">Title</${tag}>`;
-                            })() : ''}
-                            ${item.text ? `<div class="text">${item.text}</div>` : ''}
-                            ${item.list ? `
-                                <ul class="item_list">
-                                    ${item.list.reduce((acc, list_item, list_index) => acc + `
-                                        <li class="text" gh-id="${ghId}.items.${index}.list.${list_index}"></li>
-                                    `, '')}
-                                </ul>
-                            ` : ''}
-                        </div>
-                        ${item.button ? `
-                            <div class="bottom">
-                                <div class="bold_text">
-                                    <span class="link" gh-id="${ghId}.items.${index}.button.text"></span>
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none"><circle cx="10" cy="10.6282" r="10" fill="#0A79FE"/><path d="M8.25 6.62817L12 10.3782L8.25 14.1282" stroke="white"/></svg>
-                                </div>
-                            </div>
-                        ` : ''}
-                    </div>
-            `}, '')}
+            ${items.reduce((acc, item, index) => acc + `
+                ${gridItemTag 
+                    ? `<div class="grid-item-wrapper"><${gridItemTag} data-item-index="${index}" data-gh-id="${ghId}"></${gridItemTag}></div>`
+                    : 'No Grid Item'
+                }
+            `, '')}
         </div>
         ${json.button ? `
             <div class="bottom_button">

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

@@ -17,32 +17,19 @@ class GridComponent extends GHComponent {
 
         this.items = this.json.items;
 
+        const gridItem = this.children[0];
+        if (gridItem) {
+            this.gridItemTag = gridItem.tagName.toLowerCase();
+        }
+
         if (this.ghId) {
             super.render(html);
         }
     }
 
     onClientReady() {
-        const clickableGridItems = this.getElementsByClassName('grid_item clickable');
-        for (const el of clickableGridItems) {
-            el.addEventListener('mouseup', (e) => {
-                if ("a" !== e.target.tagName.toLowerCase()) {
-                    e.preventDefault();
-                    const item = e.currentTarget.querySelector(".item-title");
-                    const link = item.getAttribute("href");
-                    if (link) {
-                        if (e.button === 0) {
-                            window.location.href = link;
-                        } else if (e.button === 1) {
-                            window.open(link, '_blank');
-                        }
-                    } else {
-                        this.openPopup(e.currentTarget);
-                    }
-                }
-            });
-        }
     }
+
     openPopup (el) {
         const popupId = el.getAttribute('data-popup-id');
         window.dispatchEvent( new CustomEvent('open-popup', {

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

@@ -13,136 +13,8 @@ grid-component {
         flex-wrap: wrap;
         gap: var(--grid-gap);
     }
-    .grid_item {
+    .grid-item-wrapper {
         width: 100%;
-        max-width: 100%;
-        background: var(--block-primary-bg-color);
-        border-radius: var(--block-primary-border-radius);
-        padding: 30px;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        gap: 20px;
-        color: var(--text-color);
-        position: relative;
-        overflow: hidden;
-        .marker {
-            width: 50px;
-            height: 50px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            border-radius: 50%;
-            background-color: var(--accent-color);
-            .marker-symbol {
-                color: #FFF;
-                font-weight: 700;
-                font-size: 24px;
-            }
-        }
-        .letter {
-            position: absolute;
-            top: -20px;
-            right: -20px;
-            color: #E4E4E4;
-            font-size: 150px;
-            line-height: 75%;
-            font-weight: 700;
-            transition: all .2s ease;
-        }
-        .top {
-            display: flex;
-            flex-direction: column;
-            gap: 20px;
-            text-align: left;
-            .item-title {
-                font-size: var(--h3-font-size);
-                font-weight: var(--h3-font-weight);
-                line-height: 135%;
-                color: var(--block-primary-h-color);
-                margin-bottom: 0px;
-            }
-            .icon {
-                max-width: 80px;
-                height: 80px;
-                img {
-                    width: 100%;
-                    height: 80px;
-                    display: block;
-                }
-            }
-            .text {
-                font-size: var(--text-font-size);
-                font-weight: var(--text-font-weight);
-                color: var(--block-primary-text-color);
-                line-height: 140%;
-                letter-spacing: 0.01em;
-                text-align: inherit;
-            }
-            .item_list {
-                font-size: var(--text-font-size);
-                font-weight: var(--text-font-weight);
-                line-height: 140%;
-                letter-spacing: 0.01em;
-                color: var(--block-primary-text-color);
-                text-align: left;
-                list-style: none;
-                li {
-                    padding-left: 14px;
-                    margin-bottom: 10px;
-                    position: relative;
-                    &:last-child {
-                        margin-bottom: 0;
-                    }
-                    &::before {
-                        content: '';
-                        position: absolute;
-                        top: 9px;
-                        left: 0;
-                        width: 3px;
-                        height: 3px;
-                        border-radius: 50%;
-                        background-color: var(--block-primary-text-color);
-                    }
-                }
-            }
-        }
-        .bottom {
-            .bold_text {
-                display: flex;
-                align-items: center;
-                gap: 10px;
-                color: var(--block-primary-h-color);
-                span {
-                    font-size: var(--text-font-size);
-                    font-weight: 700;
-                    transition: color .2s ease;
-                }
-                svg {
-                    position: relative;
-                    left: 0;
-                    transition: all .2s ease;
-                }
-            }
-        }
-    }
-    .grid_item.clickable {
-        transition: all .3s ease-out;
-        &:hover {
-            background-color: var(--block-primary-bg-hover-color);
-            cursor: pointer;
-            .letter {
-                color: #fff;
-            }
-            .bold_text {
-                span {
-                    color: var(--block-primary-link-hover-color);
-                }
-                svg {
-                    left: 10px;
-                }
-            }
-        }
     }
     .bottom_button {
         margin-top: 50px;
@@ -153,8 +25,9 @@ grid-component {
         display: inline-block;
     }
     &[data-items-in-row] {
-        .grid_item {
-            max-width: calc((100% - (var(--grid-gap) * (var(--items-in-row) - 1))) / var(--items-in-row)); //formula: (100%width - (gap * (items - 1))) / items
+        .grid-item-wrapper {
+            //formula: (100%width - (gap * (items - 1))) / items
+            max-width: calc((100% - (var(--grid-gap) * (var(--items-in-row) - 1))) / var(--items-in-row));
         }
         &[data-items-in-row="5"] .grid {
             
@@ -175,15 +48,9 @@ grid-component {
             --items-in-row: 2;
         }
     }
-    @media screen and (max-width: 900px) {
-        .grid_item {
-            padding: 20px;
-            padding-left: 30px;
-        }
-    }
     @media screen and (max-width: 650px) {
         .grid {
-            .grid_item {
+            .grid-item-wrapper {
                 max-width: 100%;
             }
         }

package/src/components/grid-component/grid-items/config.js

@@ -0,0 +1,15 @@
+export const gridItemDefault = {
+  tag: 'grid-item-default',
+  src: '@gudhub/ssg-web-components-library/src/components/grid-component/grid-items/grid-item-default/grid-item-default.js',
+  serverOnly: false
+}
+export const gridItemExpandableVertical = {
+  tag: 'grid-item-expandable-vertical',
+  src: '@gudhub/ssg-web-components-library/src/components/grid-component/grid-items/grid-item-expandable-vertical/grid-item-expandable-vertical.js',
+  serverOnly: false
+}
+export const gridItemNumbered = {
+  tag: 'grid-item-numbered',
+  src: '@gudhub/ssg-web-components-library/src/components/grid-component/grid-items/grid-item-numbered/grid-item-numbered.js',
+  serverOnly: false
+}

package/src/components/grid-component/grid-items/grid-item-default/grid-item-default-data.json

@@ -0,0 +1,20 @@
+{
+  "marker": "1",
+  "letter": "W",
+  "title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  "text": "Aliquam ullamcorper nunc tempus molestie venenatis.",
+  "list": [
+    "Suspendisse enim nulla, lacinia a eros at, ultrices porttitor dolor.",
+    "Aenean eu lectus varius, tempor sem sed, maximus quam.",
+    "Aenean pulvinar felis ac eros vulputate tristique."
+  ],
+  "button": {
+    "link": "#",
+    "text": "Спробувати Безкоштовно"
+  },
+  "icon": {
+    "src": "",
+    "alt": "Image Alt",
+    "title": "Image Title"
+  }
+}

package/src/components/grid-component/grid-items/grid-item-default/grid-item-default.html

@@ -0,0 +1,35 @@
+<div class="primary-block ${json.button ? 'clickable bg-hover' : ''}" ${json.button && json.button.popupId ? `data-popup-id="${json.button.popupId}"` : ''}>
+    ${json.letter ? `<div class="letter">${json.letter}</div>` : ''}
+    <div class="top">
+        ${json.marker ? `
+            <div class="marker">
+                <span class="marker-symbol" gh-id="${ghId}.marker">${json.marker}</span>
+            </div>
+        ` : ''}
+        ${json.icon ? `
+            <div class="icon">
+                <img src="${json.icon.src ? json.icon.src : svgPlaceholder}" alt="${json.icon.alt}" title="${json.icon.title}" width="80" height="80">
+            </div>
+        ` : ''}
+        ${json.title ? (() => {
+            const tag = json.button && json.button.link ? `a href="${json.button.link}"` : 'h3';
+            return `<${tag} class="item-title" gh-id="${ghId}.title">Title</${tag}>`;
+        })() : ''}
+        ${json.text ? `<div class="text" gh-id="${ghId}.text"></div>` : ''}
+        ${json.list ? `
+            <ul class="item_list">
+                ${json.list.reduce((acc, list_item, list_index) => acc + `
+                    <li class="text" gh-id="${ghId}.list.${list_index}"></li>
+                `, '')}
+            </ul>
+        ` : ''}
+    </div>
+    ${json.button ? `
+        <div class="bottom">
+            <div class="bold_text">
+                <span class="link" gh-id="${ghId}.button.text"></span>
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none"><circle cx="10" cy="10.6282" r="10" fill="#0A79FE"/><path d="M8.25 6.62817L12 10.3782L8.25 14.1282" stroke="white"/></svg>
+            </div>
+        </div>
+    ` : ''}
+</div>