countup added (#435)

countup added

js/tabler.js

+import { CountUp } from "countup.js";
+
 const tabler = {
   hexToRgbA: function(hex, opacity) {
     let c;
@@ -59,6 +61,19 @@ $(document).ready(function() {
   // $('[data-toggle="tooltip"]').tooltip();
   // $('[data-toggle="popover"]').popover();
 
+  /* 
+    CountUp
+  */
+  let countups = document.querySelectorAll("[data-countup]");
+  for(let i = 0;i<countups.length;i++){
+    let dataCountUp;
+    if(countups[i].getAttribute("data-countup") != ''){
+      dataCountUp = JSON.parse(countups[i].getAttribute("data-countup"));
+    }
+    let countup = new CountUp(countups[i],parseFloat(countups[i].innerText),dataCountUp);
+    countup.start();
+  }
+
   /*
   Imask plugin
    */

package.json

@@ -111,6 +111,7 @@
     "apexcharts": "3.12.0",
     "autosize": "4.0.2",
     "bootstrap": "twbs/bootstrap#e2530d3",
+    "countup.js": "2.0.4",
     "fullcalendar": "3.10.1",
     "imask": "6.0.1",
     "jquery": "3.4.1",

pages/_data/libs.json

@@ -22,7 +22,8 @@
       "@fullcalendar/interaction/main.min.js",
       "@fullcalendar/timegrid/main.min.js",
       "@fullcalendar/list/main.min.js"
-    ]
+    ],
+    "countup": "countup.js/dist/countUp.min.js"
   },
   "css": {
     "jqvmap": "jqvmap/dist/jqvmap.min.css",

pages/_data/menu.yml

@@ -140,6 +140,9 @@ docs:
     colors: 
       title: Colors
       url: docs/colors.html
+    countup:
+      title: Countup
+      url: docs/countup.html
     cursors: 
       title: Cursors
       url: docs/cursors.html

pages/_docs/countup.md

+---
+title: Countup
+menu: docs.countup
+---
+
+Countups with many options that can be found [**here**](https://inorganik.github.io/countUp.js/)
+
+To make countup add `data-countup` to any html text tag.
+
+### Default countup
+
+Set number to count up.
+
+{% example %}
+    <h1 data-countup>30000</h1>
+{% endexample %}
+
+### Duration
+
+Set the `duration` of the countup. (2s is set by default)
+
+{% example %}
+    <h1 data-countup>30000</h1>
+    <h1 data-countup='{"duration":4}'>30000</h1>
+    <h1 data-countup='{"duration":6}'>30000</h1>
+{% endexample %}
+
+### Starting value
+
+Set the start value of countup using `startVal`.
+If you set it bigger than the `count`, countup will run reverse.
+
+{% example %}
+    <h1 data-countup='{"startVal":12345}'>30000</h1>
+    <h1 data-countup='{"startVal":47655}'>30000</h1>
+{% endexample %}
+
+### Decimal places
+
+Set how many decimal places to show using `decimalPlaces`.
+
+{% example %}
+    <h1 data-countup>3.123</h1>
+    <h1 data-countup='{"decimalPlaces":1}'>3.123</h1>
+    <h1 data-countup='{"decimalPlaces":2}'>3.123</h1>
+    <h1 data-countup='{"decimalPlaces":3}'>3.123</h1>
+{% endexample %}
+
+### Easing
+
+Disable easing using `"useEasing": false`. (`true` by default)
+
+{% example %}
+    <h1 data-countup>30000</h1>
+    <h1 data-countup='{"useEasing": false}'>30000</h1>
+{% endexample %}
+
+### Use grouping
+
+Disable grouping using `"useGrouping": false`. (`true` by default)
+
+{% example %}
+    <h1 data-countup>30000</h1>
+    <h1 data-countup='{"useGrouping": false}'>30000</h1>
+{% endexample %}
+
+### Separator
+
+Set seperator that seperates groups using `separator`. (`,` by default)
+
+{% example %}
+    <h1 data-countup>3000000</h1>
+    <h1 data-countup='{"separator":" "}'>3000000</h1>
+    <h1 data-countup='{"separator":"-"}'>3000000</h1>
+    <h1 data-countup='{"separator":":"}'>3000000</h1>
+{% endexample %}
+
+### Decimal separator
+
+Set decimal separator using `decimal`. (`.` by default)
+
+{% example %}
+    <h1 data-countup='{"decimalPlaces":2}'>3.12</h1>
+    <h1 data-countup='{"decimalPlaces":2,"decimal":".."}'>3.12</h1>
+    <h1 data-countup='{"decimalPlaces":2,"decimal":"^"}'>3.12</h1>
+    <h1 data-countup='{"decimalPlaces":2,"decimal":":"}'>3.12</h1>
+{% endexample %}
+
+### Prefix
+
+Set countup prefix using `prefix`.
+
+{% example %}
+    <h1 data-countup='{"prefix":"$"}'>30000</h1>
+    <h1 data-countup='{"prefix":"€"}'>30000</h1>
+    <h1 data-countup='{"prefix":"£"}'>30000</h1>
+{% endexample %}
+
+### Suffix
+
+Set countup suffix using `suffix`.
+
+{% example %}
+    <h1 data-countup='{"suffix":"%"}'>30</h1>
+    <h1 data-countup='{"suffix":"‰"}'>30</h1>
+    <h1 data-countup='{"suffix":"k"}'>30</h1>
+{% endexample %}
+
+Of course you can mix all of these:
+
+{% example %}
+    <h1 data-countup='{"duration":6,"startVal":12345,"decimalPlaces":2,"separator":" ","prefix":"$"}'>64547834.76</h1>
+{% endexample %}
+
+To do more advanced stuff with countups go [**here**](https://inorganik.github.io/countUp.js/) to check how it's done.
\ No newline at end of file

pages/tmp4.html

@@ -2,6 +2,40 @@
 tmp: true
 ---
 
+<div class="card">
+    <div class="card-header">
+        <h2 class="card-title">CountUp</h2>
+    </div>
+	<div class="card-body">
+        <div class="row">
+            <div class="col-6 col-md-4 col-xl-2 my-3 text-center">
+                <h1 class="mb-0" data-countup>30000</h1>
+                <small>(Default)</small>
+            </div>
+            <div class="col-6 col-md-4 col-xl-2 my-3 text-center">
+                <h1 class="mb-0" data-countup='{"duration":10}'>30000</h1>
+                <small>(Duration 10s)</small>
+            </div>
+            <div class="col-6 col-md-4 col-xl-2 my-3 text-center">
+                <h1 class="mb-0" data-countup='{"useGrouping":false}'>30000</h1>
+                <small>(No comma)</small>
+            </div>
+            <div class="col-6 col-md-4 col-xl-2 my-3 text-center">
+                <h1 class="mb-0" data-countup='{"separator":" "}'>30000000</h1>
+                <small>(Space)</small>
+            </div>
+            <div class="col-6 col-md-4 col-xl-2 my-3 text-center">
+                <h1 class="mb-0" data-countup='{"suffix":"%"}'>30</h1>
+                <small>(Suffix)</small>
+            </div>
+            <div class="col-6 col-md-4 col-xl-2 my-3 text-center">
+                <h1 class="mb-0" data-countup='{"prefix":"$"}'>30000</h1>
+                <small>(Prefix)</small>
+            </div>
+        </div>
+    </div>
+</div>
+
 <div class="mb-3">
 	<label class="form-label">Tags</label>
 	{% include ui/form/selectize.html key="tags" %}