[Update] Adding initial scripts.

Initial scripts and folders got added to the project, this include several functionalities:
- Copy to Clipboard
- Hide Container
- Limit Text
- Read Time
- Social Links
- Tabs Slider

All this functionalities have been tested multiple times and may only require a cleanup before the first official release

Author: JorchCortez

Dist/Functional/CopyToClipboard.js

@@ -0,0 +1,51 @@
+/*
+ * Trigger element  = wt-copycb-element="trigger"
+ * Target element   = wt-copycb-element="target"
+ * textTarget       = wt-copycb-element="textTarget"
+ * copiedMsg        = wt-copycb-copiedMsg
+ * activeClass      = wt-copycb-activeClass
+ */
+
+'use strict'
+
+const UpdateTriggerDisplay = (_txt, _target, _trigger, _class ) => {
+    if (_txt){ 
+        if(_target) _target.innerText = _txt;
+        else _trigger.innerHTML = _txt;
+    } 
+
+    if (_class) _trigger.classList.toggle(_class);
+}
+
+const SetCopyToClipboard = () => {
+    const copyTriggers = document.querySelectorAll('[wt-copycb-element^="trigger-"], [wt-copycb-element="trigger"]');
+
+    if(!copyTriggers || copyTriggers.length === 0) return;
+
+    for(let _trigger of copyTriggers) {
+        let _triggerAttr    = _trigger.getAttribute(`wt-copycb-element`);
+        let index           = _triggerAttr.replace('trigger','');
+        let _target         = document.querySelector(`[wt-copycb-element="target${index}"]`);
+
+        if(_target) {
+            _trigger.addEventListener('click', () => {
+                let textToCopy  = _target.innerText;
+                let copiedTxt   = _trigger.getAttribute("wt-copycb-copiedMsg");
+                let activeClass = _trigger.getAttribute('wt-copycb-activeClass');
+                let timeOut     = _trigger.getAttribute('wt-copycb-timeout') || 2000;
+                let _defaultTxt = _trigger.innerText;
+                let textTarget  = document.querySelector(`[wt-copycb-element="textTarget${index}"]`);
+    
+                UpdateTriggerDisplay(copiedTxt, textTarget, _trigger, activeClass);
+    
+                setTimeout(() => {
+                    UpdateTriggerDisplay(_defaultTxt, textTarget, _trigger, activeClass);
+                }, timeOut);
+    
+                navigator.clipboard.writeText(textToCopy);
+            });
+        }
+    }
+}
+
+window.addEventListener('DOMContentLoaded', SetCopyToClipboard());

Dist/Functional/HideContainer.js

@@ -0,0 +1,37 @@
+'use strict'
+
+const SetHideContainers = () => {
+    let containers      = document.querySelectorAll('[wt-hidecontainer-element^="container-"], [wt-hidecontainer-element="container"]');
+    let err             = [];
+    let valid           = true;
+
+    if(!containers || containers.length === 0) {
+        err.push(`%cThere are no containers in this page.`);
+        valid = false;
+    }
+
+    if (!valid) {
+        console.log("%cThanks for using Webflow Trickery","color: blue; font-size: 18px; padding: 8px; font-weight:500");            
+        console.log("%cIt seems like you're missing an element that is required for the integration.","color: red; font-size: 12px; padding: 8px; font-weight:500");
+        for(let e of err){
+            console.log(e,"color: red; font-size: 12px; padding: 8px; font-weight:500")
+        }
+        return;
+    }
+
+    for(let _container of containers) {
+        let _cmsList    = _container.querySelector('[wt-hidecontainer-element="list"]');
+        let _r          = _container.getAttribute('wt-hidecontainer-remove');
+        if(!_cmsList) return;
+        if(_cmsList.classList.contains("w-dyn-empty")) {
+            if(_r) {
+                _container.remove();
+            }
+            else{
+                _container.style.display = 'none';
+            }
+        }
+    }
+}
+
+window.addEventListener('DOMContentLoaded', SetHideContainers());

Dist/Functional/LimitText.js

@@ -0,0 +1,19 @@
+'use strict'
+
+const LimitText = () => {
+    let _fullText = document.querySelectorAll('[wt-limittext-element="text"]');
+
+    if(!_fullText || _fullText.length === 0) return;
+
+    for (text of _fullText) {
+        let suffix          = text.getAttribute("wt-limittext-suffix") || null;
+        let textLength      = text.getAttribute("wt-limittext-length") || 300 ;
+        let description = text.innerText;
+        if (description.length > textLength) {
+            var _substr = `${description.substring(0, textLength)} ${ suffix ? suffix : "..."}`;
+            text.innerText = _substr;
+        }
+    }
+}
+
+window.addEventListener('DOMContentLoaded', LimitText());

Dist/Functional/ReadTime.js

@@ -0,0 +1,48 @@
+'use strict'
+
+const SetReadTime = () => {
+    const timeDisplays   = document.querySelectorAll('[wt-readtime-element="display"]');
+    const container     = document.querySelector('[wt-readtime-element="article"]'); 
+
+    let valid = true;
+    let err = []
+
+    if(!timeDisplays || timeDisplays.length === 0) {
+        err.push(`%c display element is missing`);
+        valid = false;
+    }
+    if(!container){
+        err.push(`%c article element is missing`);
+        valid = false;
+    }
+
+    if (!valid) {
+        console.log("%cThanks for using Webflow Trickery","color: blue; font-size: 18px; padding: 8px; font-weight:500");            
+        console.log("%cIt seems like you're missing an element that is required for the integration.","color: red; font-size: 12px; padding: 8px; font-weight:500");
+        for(let e of err){
+            console.log(e,"color: red; font-size: 12px; padding: 8px; font-weight:500")
+        }
+        return;
+    }
+
+    const text          = container.innerText;
+    const words         = text.trim().split(/\s+/).length;
+    const wpm           = container.getAttribute("wt-readtime-words") || 225;
+    const suffix        = container.getAttribute('wt-readtime-suffix');
+    const smallsuffix   = container.getAttribute('wt-readtime-smallsuffix');
+    const rawTime       = words / wpm;
+
+    for(let display of timeDisplays) {
+        if(rawTime < 1 ) { 
+            display.innerText = smallsuffix ? smallsuffix : "less than a minute.";
+        }
+        else if(rawTime == 1 ) { 
+            display.innerText = "a minute.";
+        }
+        else {
+            display.innerText = suffix ? `${Math.ceil(rawTime)} ${suffix}` : `${Math.ceil(rawTime)} minutes.`;
+        }
+    }
+}
+
+window.addEventListener('DOMContentLoaded', SetReadTime());

Dist/Functional/ShareLink.js

@@ -0,0 +1,53 @@
+'use strict'
+
+const CheckNodelist = (arr) => {
+    return (arr && arr.length !== 0);
+}
+
+const SetLinks = (_arr, link) => {
+    for(let elem of _arr) {
+        elem.setAttribute("href", link );
+        elem.setAttribute("target", '_blank');
+    }
+}
+
+const SetShareLinks = () => {
+    let title           = document.title;
+    let url             = window.location.href;
+    let unencodedURI    = `${url}&title='${title}'&description='${title}'`;
+    let encoded         = encodeURI(unencodedURI);
+
+    let social_fb       = document.querySelectorAll('[wt-share-element="facebook"]');
+    let social_tw       = document.querySelectorAll('[wt-share-element="twitter"]');
+    let social_ln       = document.querySelectorAll('[wt-share-element="linkedin"]');
+    let social_wp       = document.querySelectorAll('[wt-share-element="whatsapp"]'); 
+    let social_pi       = document.querySelectorAll('[wt-share-element="pinterest"]'); 
+    let social_red      = document.querySelectorAll('[wt-share-element="reddit"]');  
+    let social_cp       = document.querySelectorAll('[wt-share-element="copy"]');
+
+    if (CheckNodelist(social_fb)) {
+        SetLinks(social_fb,`https://www.facebook.com/sharer/sharer.php?u=${encoded}`);
+    }
+    if (CheckNodelist(social_tw)) {
+        SetLinks(social_tw,`https://twitter.com/share?url=${encoded}`);
+    }
+    if (CheckNodelist(social_ln)) {
+        SetLinks(social_ln,`https://www.linkedin.com/shareArticle?mini=true&url='${encoded}`);
+    }
+    if (CheckNodelist(social_wp)) {
+        SetLinks(social_wp,`https://wa.me/?text=${encoded}`);
+    }
+    if (CheckNodelist(social_pi)) {
+        SetLinks(social_pi,`http://pinterest.com/pin/create/button/?url=${encoded}`);
+    }
+    if (CheckNodelist(social_red)) {
+        SetLinks(social_red,`http://www.reddit.com/submit?url=${encoded}`);
+    } 
+    if (CheckNodelist(social_cp)) {
+        for(let btn of social_cp) {
+            btn.addEventListener('click', () => navigator.clipboard.writeText(`${url}`));
+        }
+    }
+}
+
+window.addEventListener('DOMContentLoaded', SetShareLinks());

Dist/Functional/TabsSlider.js

@@ -0,0 +1,73 @@
+/*!
+ * Webflow Utilities v1.2.0
+ * Have you ever tried fixing the same small thing over and over again on your webflow projects?
+ * Well I have so I made a small compillation of the different fixes, utilities and tricks that will
+ * not only make my life easier in the future but hopefuly yours as well.
+ * (c) 2023 Jorge Cortez
+ * MIT License
+ * https://github.com/JorchCortez/Weblfow-Trickery
+ * 
+ * This code is a sligtly modified version of the Auto Rotate Webflow Tabs by Flowbase.co (v1.4 Updated 10/04/2023) 
+ * fixed for reusability in any project using attributes instead of classes, feel free to check it out and if needs any update 
+ * you can open an issue in github.
+ * 
+ * Webflow only function
+ * 
+ */
+
+var Webflow = Webflow || [];
+Webflow.push(function () {
+    //Allow site to load in case there's any extra integrations that require it
+    setTimeout(function () {
+
+        let tabsComponent = document.querySelectorAll("[wt-tabSlider-element='tabs']");
+
+        if (tabsComponent) {
+            tabsComponent.forEach(tabs => {
+                
+                let timeout = tabs.getAttribute("wt-tabSlider-speed") || 5000;
+                let tabBtns = tabs.querySelector("[wt-tabSlider-element='menu']");
+                var tb = Array.from(tabBtns.children);
+
+                const tabLoop = (tm, timeout) => {
+                    tabTimeout = setTimeout(setTabTimeout, timeout, tm); // 5 Second Rotation
+                }
+
+                const setTabTimeout = (tm) => {
+                    var $next = tm.querySelector(".w--current").nextElementSibling;
+                    if ($next) {
+                        $next.click(); // user click resets timeout
+                    } else {
+                        tm.firstChild.click();
+                    }
+                }
+
+                // Fix for Safari
+                if (navigator.userAgent.includes("Safari")) {
+                    tb.forEach((t) => (t.focus = function () {
+                        const x = window.scrollX, y = window.scrollY;const f = () => {
+                            setTimeout(() => window.scrollTo(x, y), 1);
+                            t.removeEventListener("focus", f)};
+                            t.addEventListener("focus", f);
+                            HTMLElement.prototype.focus.apply(this, arguments)
+                        })
+                    );
+                }
+                
+                // Reset Loops
+                tb.forEach(tBtn => {
+                    tBtn.addEventListener('click', function (e) {
+                        e.preventDefault();
+                        clearTimeout(tabTimeout);
+                        tabLoop(tabBtns, timeout);
+                    }, false);
+                })
+
+                // Start Tabs
+                var tabTimeout;
+                clearTimeout(tabTimeout);
+                tabLoop(tabBtns, timeout);
+            })
+        }
+    }, 500)
+});