Merge pull request #1 from TheCodeRaccoons/main

[Update] added the features to Develop for a pre-release

Author: JorchCortez

.github/FUNDING.yml

@@ -0,0 +1,3 @@
+# These are supported funding model platforms
+
+ko_fi: thecoderaccon

Dist/Functional/CopyToClipboard.js

@@ -1,19 +1,10 @@
-/*
- * 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);
 }
 

Dist/Functional/CountUp.js

@@ -0,0 +1,34 @@
+'use strict'
+
+const InitializeCountUp = () => {
+    let counters = document.querySelectorAll("[wt-countup-element='counter']");
+
+    if(!counters || counters.length === 0) return;
+
+    for(let c of counters) {
+        let target  = c.getAttribute("wt-countup-target") || 0;
+        if (!target) return;
+        let prefix  = c.getAttribute("wt-countup-prefix") || "";
+        let suffix  = c.getAttribute("wt-countup-suffix") || "";
+        let step    = +c.getAttribute("wt-countup-step");
+        let speed   = +c.getAttribute("wt-countup-speed") || 10;
+        let v       = 0;
+
+        let counterUp = () => {
+            c.innerHTML = `${prefix}${v}${suffix}`;
+            if (step) v += step;
+            else v++;
+            if (v > target) clearInterval(stop);
+        }
+
+        let stop = setInterval(() => {
+            try {
+                counterUp();
+            } catch (err) {
+                clearInterval(stop);
+            }
+        }, speed);
+    }
+};
+
+window.addEventListener("DOMContentLoaded", InitializeCountUp());

Dist/Functional/FormatNumbers.js

@@ -0,0 +1,71 @@
+/*
+ * Number formating using Intl.NumberFormat.
+ * Requirements: 
+ * Element with custom attribute fn-formatnumber="true"
+ * A Style in the same element to format choosing between "Currency", "decimal", "percent", "unit"
+ * In case of the element being "Currency" or "Unit" the sent "fn-formatnumber-currency" or "fn-formatnumber-unit" option
+ * Optional: set locales for the formatting
+ * list of units can be found here for now: https://tc39.es/proposal-unified-intl-numberformat/section6/locales-currencies-tz_proposed_out.html#sec-issanctionedsimpleunitidentifier
+ * currency uses regular notation for them.
+ */
+
+
+let FormatNo = (element, locales, number, options) => {
+    let final = Intl.NumberFormat(locales, options).format(number);
+    if (!final) return;
+    element.innerHTML = final;
+}
+const InitializeFormatNumbers = () => {
+    let numbersToFormat = document.querySelectorAll('[wt-formatnumber-element="number"]');
+
+    if(!numbersToFormat || numbersToFormat.length === 0) return;
+
+    for(let numberContainer of numbersToFormat) {
+        let locales     = numberContainer.getAttribute("wt-formatnumber-locales");
+        let style       = numberContainer.getAttribute("wt-formatnumber-style");
+        let currency    = numberContainer.getAttribute("wt-formatnumber-currency");
+        let unit        = numberContainer.getAttribute("wt-formatnumber-unit");
+        let options     = null;
+
+        if (style) {
+            switch (style) {
+                case 'currency':
+                    if (!currency) return;
+                    options = {
+                        style: style,
+                        currency: currency
+                    }
+                    break;
+                case 'decimal':
+                    options = {
+                        style: style
+                    };
+                    break;
+                case 'percent':
+                    options = {
+                        style: style
+                    };
+                    break;
+                case 'unit':
+                    options = {
+                        style: style,
+                        unit: unit
+                    };
+                    break;
+                default:
+                    console.log(`undefined`);
+            }
+        }
+    
+        let value = numberContainer.textContent
+        if (!value) return;
+    
+        try {
+            FormatNo(numberContainer, locales, value, options);
+        } catch (error) {
+            numberContainer.innerHTML = `there was an error processing the format, ${error}`;
+        }
+    }
+}
+
+window.addEventListener('DOMContentLoaded', InitializeFormatNumbers())

Dist/WebflowOnly/CMSSelect.js

@@ -0,0 +1,24 @@
+'use strict'
+
+const InitializeCMSSelect = () => {
+
+    const selectElements = document.querySelectorAll('[wt-cmsselect-element^="select-"], [wt-cmsselect-element="select"]');
+    
+    if(!selectElements || selectElements.length === 0) return;
+
+    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}"]`);
+
+        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)))
+        }
+    }
+}
+
+window.addEventListener('DOMContentLoaded', InitializeCMSSelect());

Dist/Functional/HideContainer.js Dist/WebflowOnly/HideContainer.jsDist/Functional/HideContainer.js renamed to Dist/WebflowOnly/HideContainer.js

@@ -1,19 +1,4 @@
-/*!
- * 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
- * 
- */
+'use strict'
 
 var Webflow = Webflow || [];
 Webflow.push(function () {