Merge pull request #19 from TheCodeRaccoons/Develop

JorchCortez · web-flow · commit 43d83571f9b1 · 2024-10-06T00:45:10.000-07:00
Updating scripts
diff --git a/Dist/Functional/CMSFilter.js b/Dist/Functional/CMSFilter.js
@@ -337,9 +337,8 @@ class CMSFilter {
     }
 
     SetActiveTags() {
+        if(!this.tagTemplateContainer) return;
         this.InitializeTagTemplate();
-        // Clear existing tags before adding new ones
-        this.tagTemplateContainer.innerHTML = "";
     
         const filterTags = Object.keys(this.activeFilters);
         filterTags.forEach(tag => {
diff --git a/Dist/Functional/FormatNumbers.js b/Dist/Functional/FormatNumbers.js
@@ -67,11 +67,13 @@ class NumberFormatter {
 
 const InitializeFormatNumbers = () => {
     try {
+        window.trickeries = window.trickeries || [];
         const numbersToFormat = document.querySelectorAll('[wt-formatnumber-element="number"]');
         if (!numbersToFormat || numbersToFormat.length === 0) throw new Error("No elements found to format.");
 
         numbersToFormat.forEach((numberContainer) => {
-            new NumberFormatter(numberContainer);
+            let instance = new NumberFormatter(numberContainer);
+            window.trickeries.push({'FormatNumber': instance});
         });
     } catch (err) {
         console.error(`Format Number found an Error while initializing: ${err.message}`);
diff --git a/Dist/Functional/Marquee.js b/Dist/Functional/Marquee.js
@@ -6,25 +6,27 @@ class Marquee {
             this.container = _container;
             this.elements = Array.from(this.container.children);
             if (this.elements.length === 0) throw new Error("No elements found inside the marquee container.");
-            this.speed =_container.getAttribute('wt-marquee-speed') || 50;
-            this.direction = _container.getAttribute('wt-marquee-direction') || 'left' 
-            this.viewportWidth = window.innerWidth;
-            this.parentWidth = this.container.parentElement.offsetWidth;
-            this.totalWidth = this.calculateTotalWidth();
-            this.scrollPosition = 0;
+
+            this.speed = _container.getAttribute('wt-marquee-speed') || 50;
+            this.direction = _container.getAttribute('wt-marquee-direction') || 'left'; // 'left', 'right', 'top', 'bottom'
+            this.isVertical = this.direction === 'top' || this.direction === 'bottom';
+            this.parentSize = this.isVertical ? this.container.parentElement.offsetHeight : this.container.parentElement.offsetWidth;
             this.gapSize = this.getGapSize();
 
+            this.scrollPosition = 0;
+            this.totalSize = this.calculateTotalSize();
             this.fillContainer();
+            this.setMarqueeStyles();
             this.startMarquee();
             this.handleResize();
         } catch (err) {
             console.error(`Error initializing Marquee: ${err.message}`);
         }
     }
 
-    calculateTotalWidth() {
+    calculateTotalSize() {
         const gapTotal = (this.elements.length - 1) * this.gapSize;
-        return this.elements.reduce((total, el) => total + el.offsetWidth, 0) + gapTotal;
+        return this.elements.reduce((total, el) => total + (this.isVertical ? el.offsetHeight : el.offsetWidth), 0) + gapTotal;
     }
 
     getGapSize() {
@@ -33,57 +35,76 @@ class Marquee {
     }
 
     fillContainer() {
-        let totalWidth = this.calculateTotalWidth();
-        const targetWidth = this.parentWidth * 1.5;
-        
-        while (totalWidth < targetWidth) {
+        let totalSize = this.calculateTotalSize();
+        const targetSize = this.parentSize * 1.5; 
+
+        while (totalSize < targetSize) {
             this.elements.forEach(el => {
                 const clone = el.cloneNode(true);
                 this.container.appendChild(clone);
             });
             this.elements = Array.from(this.container.children);
-            totalWidth = this.calculateTotalWidth();
+            totalSize = this.calculateTotalSize();
         }
     }
 
+    setMarqueeStyles() {
+        this.container.style.display = 'flex';
+        this.container.style.flexDirection = this.isVertical ? 'column' : 'row';
+        this.container.style.whiteSpace = 'nowrap';
+        this.container.style.position = 'relative';
+    }
+
     startMarquee() {
         this.marqueeInterval = setInterval(() => {
-            this.scrollPosition += this.direction === 'left' ? -1 : 1;
-
+            this.scrollPosition += (this.direction === 'left' || this.direction === 'top') ? -1 : 1;
             this.moveOffscreenElement();
 
-            this.container.style.transform = `translateX(${this.scrollPosition}px)`;
+            if (this.isVertical) {
+                this.container.style.transform = `translate3d(0, ${this.scrollPosition}px, 0)`;
+            } else {
+                this.container.style.transform = `translate3d(${this.scrollPosition}px, 0, 0)`;
+            }
         }, this.speed);
     }
 
     moveOffscreenElement() {
         const firstElement = this.container.firstElementChild;
-        const firstElementWidth = firstElement.offsetWidth + this.gapSize;
-
-        if (this.direction === 'left' && this.scrollPosition <= -firstElementWidth) {
-            this.container.style.transition = 'none';
-            this.container.appendChild(firstElement);
-            this.scrollPosition += firstElementWidth;
-            requestAnimationFrame(() => {
-                this.container.style.transition = '';
-            });
-        } else if (this.direction === 'right' && this.scrollPosition >= -firstElementWidth / 2) {
-            const lastElement = this.container.lastElementChild;
-            this.container.style.transition = 'none';
-            this.container.insertBefore(lastElement, firstElement);
-            this.scrollPosition -= firstElementWidth;
-            requestAnimationFrame(() => {
-                this.container.style.transition = '';
-            });
+        const lastElement = this.container.lastElementChild;
+        
+        const firstElementSize = this.isVertical ? firstElement.offsetHeight : firstElement.offsetWidth;
+        const firstElementTotalSize = firstElementSize + this.gapSize;
+
+        const lastElementSize = this.isVertical ? lastElement.offsetHeight : lastElement.offsetWidth;
+        const lastElementTotalSize = lastElementSize + this.gapSize;
+
+        if (this.direction === 'left' || this.direction === 'top') {
+            if (this.scrollPosition <= -firstElementTotalSize) {
+                this.container.style.transition = 'none';
+                this.container.appendChild(firstElement);
+                this.scrollPosition += firstElementTotalSize;
+                requestAnimationFrame(() => {
+                    this.container.style.transition = '';
+                });
+            }
+        } else if (this.direction === 'right' || this.direction === 'bottom') {
+            if (this.scrollPosition >= -firstElementTotalSize / 2) {
+                this.container.style.transition = 'none';
+                this.container.insertBefore(lastElement, firstElement);
+                this.scrollPosition -= lastElementTotalSize; 
+                requestAnimationFrame(() => {
+                    this.container.style.transition = '';
+                });
+            }
         }
     }
 
+
     handleResize() {
         window.addEventListener('resize', () => {
             clearInterval(this.marqueeInterval);
-            this.viewportWidth = window.innerWidth;
-            this.parentWidth = this.container.parentElement.offsetWidth;
-            this.totalWidth = this.calculateTotalWidth();
+            this.parentSize = this.isVertical ? this.container.parentElement.offsetHeight : this.container.parentElement.offsetWidth;
+            this.totalSize = this.calculateTotalSize();
             this.fillContainer();
             this.startMarquee();
         });
@@ -96,11 +117,13 @@ class Marquee {
 
 const InitializeMarquee = () => {
     try {
+        window.trickeries = window.trickeries || [];
         const marqueeContainers = document.querySelectorAll('[wt-marquee-element="container"]');
         if (!marqueeContainers || marqueeContainers.length === 0) throw new Error("No marquee containers found.");
 
         marqueeContainers.forEach(container => {
-            new Marquee(container);
+            let instance = new Marquee(container);
+            window.trickeries.push({'Marquee': instance});
         });
     } catch (err) {
         console.error(`Error in InitializeMarquee: ${err.message}`);
@@ -111,4 +134,4 @@ if (/complete|interactive|loaded/.test(document.readyState)) {
     InitializeMarquee();
 } else {
     window.addEventListener('DOMContentLoaded', InitializeMarquee);
-}
+};
diff --git a/Dist/WebflowOnly/CMSSelect.js b/Dist/WebflowOnly/CMSSelect.js
@@ -1,24 +1,59 @@
-'use strict'
+'use strict';
 
-const InitializeCMSSelect = () => {
-
-    const selectElements = document.querySelectorAll('[wt-cmsselect-element^="select-"], [wt-cmsselect-element="select"]');
-    
-    if(!selectElements || selectElements.length === 0) return;
+class CMSSelect {
+    constructor(selectElement) {
+        try {
+            this.selectElement = selectElement;
+            this.attributeValue = this.selectElement.getAttribute('wt-cmsselect-element');
+            this.index = this.attributeValue.replace('select', '');
+            
+            // Fetch the corresponding options
+            this.options = document.querySelectorAll(`[wt-cmsselect-element="target${this.index}"]`);
+            if (!this.options || this.options.length === 0) throw new Error(`No options found for select ${this.index}`);
 
-    for(let select of selectElements){
-        const _sel      = select.getAttribute('wt-cmsselect-element');
-        let index       = _sel.replace('select','');
-        let _opts       = document.querySelectorAll(`[wt-cmsselect-element="target${index}"]`);
+            // Populate the select element
+            this.populateSelect();
+        } catch (err) {
+            console.error(`Error initializing CMSSelect: ${err.message}`);
+        }
+    }
 
-        for(let opt of _opts) {
-            let val     = opt.getAttribute('wt-cmsselect-value');
-            let text    = opt.innerText;
-            
-            if(text && text !== "")
-            select.add( new Option(text, (val ? val : text)))
+    populateSelect() {
+        try {
+            this.options.forEach(opt => {
+                const value = opt.getAttribute('wt-cmsselect-value');
+                const text = opt.innerText;
+                
+                if (text && text.trim() !== "") {
+                    const option = new Option(text, value || text);
+                    this.selectElement.add(option);
+                }
+            });
+        } catch (err) {
+            console.error(`Error populating select: ${err.message}`);
         }
     }
 }
 
-window.addEventListener('DOMContentLoaded', InitializeCMSSelect());
+const InitializeCMSSelect = () => {
+    try {
+        window.trickeries = window.trickeries || [];
+        const selectElements = document.querySelectorAll('[wt-cmsselect-element^="select-"], [wt-cmsselect-element="select"]');
+        
+        if (!selectElements || selectElements.length === 0) throw new Error("No select elements found.");
+
+        selectElements.forEach(selectElement => {
+            const instance = new CMSSelect(selectElement);
+            window.trickeries.push({ 'CMSSelect': instance });
+        });
+    } catch (err) {
+        console.error(`Error during CMSSelect initialization: ${err.message}`);
+    }
+};
+
+// Ensure the script runs when the DOM is fully loaded
+if (/complete|interactive|loaded/.test(document.readyState)) {
+    InitializeCMSSelect();
+} else {
+    window.addEventListener('DOMContentLoaded', InitializeCMSSelect);
+}
diff --git a/Dist/WebflowOnly/MirrorClick.js b/Dist/WebflowOnly/MirrorClick.js
@@ -1,22 +1,50 @@
-'use strict'
 
-const InitializeMirrorClick = () => {
+'use strict';
+
+class MirrorClick {
+    constructor(triggerElement) {
+        try {
+            this.triggerElement = triggerElement;
+            this.triggerAttr = triggerElement.getAttribute('wt-mirrorclick-element');
+            this.index = this.triggerAttr.replace('trigger', '');
+            this.targetElement = document.querySelector(`[wt-mirrorclick-element="target${this.index}"]`);
 
-    let triggers = document.querySelectorAll('[wt-mirrorclick-element^="trigger-"], [wt-mirrorclick-element="trigger"]');
-    
-    if(!triggers || triggers.length === 0) return;
+            if (!this.targetElement) throw new Error(`Target element not found for trigger: ${this.index}`);
 
-    for(let trigger of triggers) {
-        let _triggerAttr    = trigger.getAttribute('wt-mirrorclick-element');
-        let _index          = _triggerAttr.replace('trigger','');
-        let _target         = document.querySelector(`[wt-mirrorclick-element="target${_index}"]`);
+            this.bindClickEvent();
+        } catch (err) {
+            console.error(`Error initializing MirrorClick: ${err.message}`);
+        }
+    }
 
-        if(_target) {
-            trigger.addEventListener('click', () => {
-                _target.click();
-            })
+    bindClickEvent() {
+        try {
+            this.triggerElement.addEventListener('click', () => {
+                this.targetElement.click();
+            });
+        } catch (err) {
+            console.error(`Error binding click event for MirrorClick: ${err.message}`);
         }
     }
 }
 
-window.addEventListener('DOMContentLoaded', InitializeMirrorClick());
+const InitializeMirrorClick = () => {
+    try {
+        window.trickeries = window.trickeries || [];
+        const triggers = document.querySelectorAll('[wt-mirrorclick-element^="trigger-"], [wt-mirrorclick-element="trigger"]');
+        if (!triggers || triggers.length === 0) throw new Error("No trigger elements found.");
+
+        triggers.forEach((triggerElement) => {
+            let instance = new MirrorClick(triggerElement);
+            window.trickeries.push({'MirrorClick': instance});
+        });
+    } catch (err) {
+        console.error(`MirrorClick found an error during initialization: ${err.message}`);
+    }
+};
+
+if (/complete|interactive|loaded/.test(document.readyState)) {
+    InitializeMirrorClick();
+} else {
+    window.addEventListener('DOMContentLoaded', InitializeMirrorClick);
+};
diff --git a/README.md b/README.md
@@ -24,10 +24,10 @@
 <br />
 <div align="center">
     <a href="https://github.com/TheCodeRaccoons/WebflowTrickery">
-        <img src="https://raw.githubusercontent.com/TheCodeRaccoons/Imagery/16a395115ab598a94a7d1ab93f182218d8bbb751/wt-logo.svg" alt="Webflow Trickery Logo" height="140" />
+        <img src="https://raw.githubusercontent.com/TheCodeRaccoons/Imagery/16a395115ab598a94a7d1ab93f182218d8bbb751/wt-logo.svg" alt="WebTricks Logo" height="140" />
     </a>
     <h5 align="center">
-        Webflow Trickery aims to create easy to implement, reusable functionalities for the web. As it's name implies, the main platform this project targets is <a href="https://webflow.com/">Webflow</a>, but the majority of the scripts are made with general web development in mind. Meaning that most of this scripts should work without an issue on any website unless it is a CMS functionality or a Webflow specific script.
+        WebTricks aims to create easy to implement, reusable functionalities for the web. As it's name implies, the main platform this project targets is <a href="https://webflow.com/">Webflow</a>, but the majority of the scripts are made with general web development in mind. Meaning that most of this scripts should work without an issue on any website unless it is a CMS functionality or a Webflow specific script.
     </h5>
     <p align="center">
         <a target="_blank" href="https://github.com/TheCodeRaccoons/WebflowTrickery/issues/new/choose">Request a functionality</a>
@@ -54,12 +54,12 @@ All of the documentation is explained by functionality in <a href="https://coder
 <p>
 	As any other developer using no-code web design tools I've struggled with the ability to bring specific, more complex functionalities to platforms like Webflow.
 	<br/><br/>
-	 Over the past couple of years I started noticing some of this functionalities are not only commonly used but also requested by many in the community. Webflow trickery aims to empower developers and designers alike, provinding both simple and complex functionalities that could, in other cases, take longer to develop from scratch.
+	 Over the past couple of years I started noticing some of this functionalities are not only commonly used but also requested by many in the community. WebTricks aims to empower developers and designers alike, provinding both simple and complex functionalities that could, in other cases, take longer to develop from scratch.
 	 <br/><br/>
 	This being said even though most of this functionalities are built for Webflow, there's many that can be used in any other web project and platform. Feel free to see the full <a href="https://coderacoons.webflow.io/tools/webflow-trickery">documentation</a> in our site for the complete list of functionalities and scripts available.
 </p>
 <sub>
-   Webflow Trickery might have been started as a personal project, but I'm a believer that a project for the comunity by the comunity can offer way more value than any single dev could provide so feel free to contribute to this project and use any solution here.
+   WebTricks might have been started as a personal project, but I'm a believer that a project for the comunity by the comunity can offer way more value than any single dev could provide so feel free to contribute to this project and use any solution here.
 </sub>
 
 <h2 id="getting-started">Getting Started</h2>

Original file line number	Diff line number	Diff line change
`@@ -337,9 +337,8 @@ class CMSFilter {`
`337`	`337`	`}`
`338`	`338`
`339`	`339`	`SetActiveTags() {`
	`340`	`+ if(!this.tagTemplateContainer) return;`
`340`	`341`	`this.InitializeTagTemplate();`
`341`		`- // Clear existing tags before adding new ones`
`342`		`- this.tagTemplateContainer.innerHTML = "";`
`343`	`342`
`344`	`343`	`const filterTags = Object.keys(this.activeFilters);`
`345`	`344`	`filterTags.forEach(tag => {`