@gudhub/ssg-web-components-library 1.0.27 → 1.0.29

package/package.json

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

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

@@ -14,13 +14,14 @@ class BreadcrumbsComponent extends GHComponent {
             } catch (error) {
                 console.error(error);
             }
-        }
-        else {
+        } else {
             this.breadcrumbsConfig = window.getConfig().componentsConfigs.breadcrumbsConfig;
             this.initialRoute = this.breadcrumbsConfig[0].routesTree;
 
             let currentUrl = new URL(window.location.href);
             currentUrl = currentUrl.searchParams.get('path');
+
+            this.items = this.generateBreadcrumbs(this.initialRoute, currentUrl);
         }
 
         this.items === null ? console.error(`Didn't find current route in config, current URL: ${currentUrl}`) : null;

package/src/components/breadcrumbs/breadcrumbs-component.readme.md

@@ -1,6 +1,26 @@
+# Work types
+
+    We have two different ways to use this component: 
+
+        1. Automatically: looks on URL of the page, finds path in three of routes (got from "breadcrumbsConfig") and builds breadcrumbs chain 
+        2. Manually: set attribute "data-items" which will display 
+            Manually example: 
+ ```                   
+                js: this.breadcrumbs = JSON.stringify([
+                        {
+                            title: 'string',
+                            link: '/'
+                        },
+                        {
+                            title: "string"
+                        }
+                    ]);
+ ```                   
+                html: <breadcrumbs-component data-items='${breadcrumbs}'></breadcrumbs-component>
+
 # Attributes:
 
-None
+    data-items: allows for manual mode activation, parsing JSON-formatted data passed to it, and assigning the resulting JavaScript object to the items property of the current element.
 
 # Component data-object:
 

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

@@ -1,7 +1,7 @@
 <section>
   <div class="container">
     ${json.title ? `
-      <h2 class="h2" gh-id="${ghId}.title"></h2>
+      <h${json?.hLevel ?? 2} class="h1" gh-id="${ghId}.title"></h${json?.hLevel ?? 2}>
     ` : ''}
     ${json.subtitle ? `
       <p class="subtitle" gh-id="${ghId}.subtitle"></p>

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

@@ -20,11 +20,25 @@ class MasonryGallery extends GHComponent {
         this.ghId = this.getAttribute('data-gh-id') || null;
         this.json = await super.getGhData(this.ghId);
 
-        const isMoreItems = this.json.moreItems ? this.json.moreItems : null;
-        
-        // Passing second array to client
-        this.setAttribute('init-images', JSON.stringify(this.json.items));
-        this.setAttribute('add-array', JSON.stringify(isMoreItems));
+        if (Array.isArray(this.json.items)) {
+            const isMoreItems = this.json.moreItems ? this.json.moreItems : null;
+
+            // Passing second array to client
+            this.setAttribute('init-images', JSON.stringify(this.json.items));
+            this.setAttribute('add-array', JSON.stringify(isMoreItems));
+        } else if (typeof this.json.items === 'object' && this.json.items !== null) {
+            const {
+                initCount = null,
+                moreCount = null,
+                url
+            } = this.json.items;
+
+            this.setAttribute('images-url', url);
+            this.setAttribute('init-count', initCount);
+            this.setAttribute('more-count', moreCount);
+        } else {
+            console.error('const "images" is neither an array nor an object');
+        }
 
         super.render(html);
     }
@@ -32,8 +46,34 @@ class MasonryGallery extends GHComponent {
     async onClientReady() {
         const modal = document.getElementById('modal');
 
-        const initImages = JSON.parse(this.getAttribute('init-images'));
-        this.moreImages = JSON.parse(this.getAttribute('add-array'));
+        if (this.hasAttribute('images-url')) {
+            try {
+                const url = this.getAttribute('images-url');
+
+                const response = await fetch(url);
+                const data = await response.json();
+
+                const { images } = data;
+
+                const isInitImagesEqualNull = this.getAttribute('init-count') === 'null';
+                
+                const initCountImages = this.hasAttribute('init-count') && !isInitImagesEqualNull ? this.getAttribute('init-count') : images.length;
+
+                const initImages = images.slice(0, initCountImages);
+                const initMoreImages = images.slice(initCountImages);
+
+                this.allImagesArrayLength = images.length;
+                this.initCountImages = initCountImages;
+
+                this.initImages = initImages;
+                this.moreImages = initMoreImages;
+            } catch (error) {
+                console.error(error);
+            }
+        } else {
+            this.initImages = JSON.parse(this.getAttribute('init-images'));
+            this.moreImages = JSON.parse(this.getAttribute('add-array'));
+        }
 
         const grid = this.imagesContainer;
         
@@ -45,11 +85,12 @@ class MasonryGallery extends GHComponent {
         });
 
         // Add initial images to the grid
-        this.addImages(initImages);
+        this.addImages(this.initImages);
 
         // Add more images to the grid
         this.buttonMoreInit();
 
+        // Button for modal window which open form
         if (this.contactUsButton && this.contactUsButtonId) {
             const contactUsHTML = `
                 <div class='contact-us-wrapper'>
@@ -112,14 +153,19 @@ class MasonryGallery extends GHComponent {
 
     addImages = (imagesSrcArray) => {
         // Iterate through each image source and add it to the grid
-        imagesSrcArray.forEach(({ image }) => {
-            const { src, alt, title, fullImage } = image;
-
-            this.addImage(src, alt, title, fullImage);
-        });
+        if (this.hasAttribute('images-url')) {
+            // TODO: need to add alt and title for images in case when we fetch them from endpoint
+            imagesSrcArray.forEach(({ src, fullImage }) => this.addImage(src, null, null, fullImage));
+        } else {
+            imagesSrcArray.forEach(({ image }) => {
+                const { src, alt, title, fullImage } = image;
+    
+                this.addImage(src, alt, title, fullImage);
+            });
+        }
     }
 
-    addImage(imageSrc, imageAlt, imageTitle, fullImageSrc = null) {
+    addImage(imageSrc, imageAlt = '', imageTitle = '', fullImageSrc = null) {
         const msnry = this.msnry;
 
         const promise = new Promise((res, rej) => {
@@ -171,28 +217,45 @@ class MasonryGallery extends GHComponent {
         const buttonWrapper = document.querySelector('.button-wrapper');
         const button = buttonWrapper.querySelector('#grid-add-items');
         const addImages = this.addImages;
-        const images = this.moreImages;
 
-        if (!masonryGrid || !button || !buttonWrapper) return;
+        const isInitCountEqualAllLength = this.initCountImages === this.allImagesArrayLength;
+        
+        if (!masonryGrid || !button || !buttonWrapper || !this.moreImages || isInitCountEqualAllLength) {
+            if (button) button.remove();
+            return;
+        };
+
+        // Make a copy of moreImages to avoid modifying the original array
+        let images = [...this.moreImages];
+
+        // Get more-count attribute value
+        const moreCountImages = parseInt(this.getAttribute('more-count')) || images.length;
 
-        // Add additional images to the grid
         button.addEventListener('click', async () => {
-            // If we set max-height for block, this code remove styles which hide content, when we clicked show more
+            // If we set max-height for block, this code removes styles which hide content, when we click show more
             masonryGrid.style.maxHeight = 'none';
             masonryGrid.style.overflowY = 'visible';
-            masonryGrid.style.scrollbarWidth = 'auto'; 
-            masonryGrid.style.msOverflowStyle = 'auto'; 
-            
-            const styleSheet = document.styleSheets[0]; 
+            masonryGrid.style.scrollbarWidth = 'auto';
+            masonryGrid.style.msOverflowStyle = 'auto';
+
+            const styleSheet = document.styleSheets[0];
             styleSheet.insertRule('.masonry-grid::-webkit-scrollbar { display: auto; }', styleSheet.cssRules.length);
 
-            // For animation, when we open full block of images
+            // Get the next batch of images
+            const imagesToAdd = images.slice(0, moreCountImages);
+
+            // Delay use to prevent masonry async bugs 
             setTimeout(() => {
-                addImages(images);
+                addImages(imagesToAdd);
+
+                // Update the images array to remove added images
+                images = images.slice(moreCountImages); 
 
-                button.disabled = true;
-                button.style.display = 'none';
-            }, 100)
+                if (images.length === 0) {
+                    button.disabled = true;
+                    button.style.display = 'none';
+                }
+            }, 100);
         });
     }
 }

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

@@ -1,3 +1,19 @@
+# Description
+
+    To implement the functionality of the "Load more" button, we need to pass two values ​​to the JSON: `initCount` and `moreCount`, or just `initCount`.
+        1. If only `initCount` is passed in the JSON, clicking the "Load more" button will open all photos at once.
+        
+        2. If only `moreCount` without `initCount` is passed in the JSON, the Load More button will not appear and all images will be displayed at once.
+
+        3. If both values ​​are passed in JSON, then the number of images specified in `initCount` will be displayed first. 
+           Clicking the "Upload more" button will load additional images, the number of which corresponds to the `moreCount' value.
+
+# Variants
+
+    We have two options how you can use this component:
+        1. When items it's array with objects where we can have as a key image 
+        2. When items it's object with endpoint for fetching data with images
+
 # Attributes:
 
     data-column-width: we need to pass column width value (number), for gap between grid items
@@ -9,32 +25,49 @@
 ("?" means "unnecessary")
 
 ```json
-    {
-        "title?": "Item Title",
-        "subtitle?": "Item Subtitle",
-        "button?": "Button text",
-        "items": [ // main set of images for first render
-            {
-                // basicly grid was created for 3 columns, it can be changed by changing .grid-item width(it accepts value in percents) 
-                "image": {
-                    "src": "Path To File", // path should be like '/assets/...../photo1.png' and changing only the numbers for the others images in the end of name of the file
-                    "alt": "Item Alt",
-                    "title": "Item Title",
-                    "fullImage?": "Path To File" // it must be image for modal window, when we click on image from grid
+
+    #Variant-1
+
+        {
+            "title?": "Item Title",
+            "subtitle?": "Item Subtitle",
+            "button?": "Button text",
+            "items": [ // main set of images for first render
+                {
+                    // basicly grid was created for 3 columns, it can be changed by changing .grid-item width(it accepts value in percents) 
+                    "image": {
+                        "src": "Path To File", // path should be like '/assets/...../photo1.png' and changing only the numbers for the others images in the end of name of the file
+                        "alt": "Item Alt",
+                        "title": "Item Title",
+                        "fullImage?": "Path To File" // it must be image for modal window, when we click on image from grid
+                    }
                 }
-            }
-        ],
-        "moreItems?": [ // images which will be added to layout when you press the button
-            {
-                "image": {
-                    "src": "Path To File", // path should be like '/assets/...../photo1.png' and changing only the numbers for the others images in the end of name of the file
-                    "alt": "Item Alt",
-                    "title": "Item Title",
-                    "fullImage?": "Path To File" // it must be image for modal window, when we click on image from grid
+            ],
+            "moreItems?": [ // images which will be added to layout when you press the button
+                {
+                    "image": {
+                        "src": "Path To File", // path should be like '/assets/...../photo1.png' and changing only the numbers for the others images in the end of name of the file
+                        "alt": "Item Alt",
+                        "title": "Item Title",
+                        "fullImage?": "Path To File" // it must be image for modal window, when we click on image from grid
+                    }
                 }
+            ]
+        }
+
+    #Variant-2
+    
+        {
+            "title?": "Item Title",
+            "subtitle?": "Item Subtitle",
+            "button?": "Button text",
+            "items": {
+                "url": "Endpoint for fetching",
+                "initCount": "number",
+                "moreCount": "number"
             }
-        ]
-    }
+        }
+
 ```
 
 ## Button settings