7.0.10

Added: number format, reverse animation options, minimal animation option Fixes: font weight not staying if counter gains, technical issue with odometer class names, possibly some HTML injection issue with custom fonts, and the count box having decimals when reloaded
livecountsedit · Aug 25, 2024 · c1ec18e · c1ec18e
1 parent 4a431dc
commit c1ec18e
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 14 deletions.
diff --git a/counter.js b/counter.js
@@ -1,6 +1,6 @@
 const LCEDIT = {
-    saveVersion: 4,
-    versionName: "7.0.9",
+    saveVersion: 5,
+    versionName: "7.0.10",
     util: {
         clamp: (input, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) => {
             if (isNaN(input)) input = 0;
@@ -189,7 +189,9 @@ let defaultCounter = {
     meanRate: 0,
     min: 0,
     minRate: 0,
+    numberFormat: ",ddd",
     offlineGains: false,
+    reverseAnimation: false,
     showBanner: false,
     showChart: false,
     showFooter: false,

diff --git a/livecountsedit/index.css b/livecountsedit/index.css
@@ -78,7 +78,7 @@ body {
     border-radius: 15px;
 }
 
-.counter-container {
+.counter-area {
     padding: 20px 5px;
     width: 98%;
     height: 87%;

diff --git a/livecountsedit/index.html b/livecountsedit/index.html
@@ -45,19 +45,21 @@
         </div>
         <div class="tab-stuff"></div>
         <div class="counter-content">
-            <div class="counter-container">
+            <div class="counter-area">
                 <img class="banner" src="../default_banner.png" id="counter-banner">
                 <img class="avatar" src="../default.png" id="counter-avatar">
                 <div class="counter-title" id="counter-title">Username</div>
-                <div class="counter odometer" id="counter-counter">0</div>
+                <div class="counter-container">
+                    <div class="counter odometer" id="counter-counter">0</div>
+                </div>
                 <div class="footer" id="counter-footer">Followers</div>
                 <br>
                 <div id="counter-chart" style="height: 45%;"></div>
             </div>
         </div>
     </div>
     <div class="page-footer">
-        <span>Version 7.0.9 - <a href="../index.html">Back to main page</a> - <a href="https://github.com/livecountsedit/livecountsedit.github.io/wiki/New-Updates-Not-Working%3F">Not working?</a> - <a href="../about/discord.html">Join the Livecountsedit Discord Server.</a> This site is a parody of popular realtime counters.</span>
+        <span>Version 7.0.10 - <a href="../index.html">Back to main page</a> - <a href="https://github.com/livecountsedit/livecountsedit.github.io/wiki/New-Updates-Not-Working%3F">Not working?</a> - <a href="../about/discord.html">Join the Livecountsedit Discord Server.</a> This site is a parody of popular realtime counters.</span>
     </div>
     <script src="../odometer/odometer.js"></script>
     <script src="../highstock.js"></script>

diff --git a/livecountsedit/lcedit.js b/livecountsedit/lcedit.js
@@ -48,6 +48,7 @@ window.onload = function () {
     initMenu().then(() => {
         if (document.getElementById('tab-link-0')) document.getElementById('tab-link-0').click();
         fillForms();
+        refreshCount();
         updateGainType(counter.settings.gainType);
         document.querySelector('#gainType').addEventListener('input', event => {
             updateGainType(event.target.value);
@@ -152,21 +153,24 @@ function updateStuff() {
     clearInterval(saveData.updater);
     odometers = Odometer.init();
     odometers[0].options = {
-        animation: ['default','byDigit','count'][counter.settings.animationType],
+        animation: ['default','byDigit','count', 'minimal'][counter.settings.animationType],
         downColor: counter.settings.downColor,
         duration: counter.settings.animationDuration * 1000,
         removeLeadingZeros: counter.settings.animationType === 1,
+        reverseAnimation: counter.settings.reverseAnimation,
+        format: counter.settings.numberFormat || ",ddd",
         upColor: counter.settings.upColor
     }
+    odometers[0].render();
     document.querySelector('#counter-banner').src = counter.settings.bannerURL;
     document.querySelector('#counter-avatar').src = counter.settings.imageURL;
     saveData.allowHTML ? document.querySelector('#counter-title').innerHTML = counter.settings.title : document.querySelector('#counter-title').innerText = counter.settings.title
     document.querySelector('#counter-title').style.color = counter.settings.titleColor;
     saveData.allowHTML ? document.querySelector('#counter-footer').innerHTML = counter.settings.footer : document.querySelector('#counter-footer').innerText = counter.settings.footer
     document.querySelector('#counter-footer').style.color = counter.settings.footerColor;
     document.querySelector('#counter-counter').innerText = counter.getApparentCount();
-    document.querySelector('#counter-counter').style.color = counter.settings.counterColor;
-    document.querySelector('.counter-container').style.backgroundColor = counter.settings.bgColor;
+    document.querySelector('.counter-container').style.color = counter.settings.counterColor;
+    document.querySelector('.counter-area').style.backgroundColor = counter.settings.bgColor;
     LCEDIT.util.setVisible(document.querySelector('#counter-banner'), counter.settings.showBanner)
     LCEDIT.util.setVisible(document.querySelector('#counter-avatar'), counter.settings.showImage, 'inline-block')
     LCEDIT.util.setVisible(document.querySelector('#counter-chart'), counter.settings.showChart)
@@ -294,14 +298,20 @@ function loadMyFont() {
             font = counter.settings.font;
             break;
         case 6:
-            document.head.innerHTML += `<link href="https://fonts.googleapis.com/css?family=${encodeURIComponent(counter.settings.font).replaceAll("%20","+")}:100,200,300,400,500,600,700,800,900&display=swap" rel="stylesheet">`;
+            if (!document.getElementById(`font-${counter.settings.font}`)) {
+                const fontStuff = document.createElement("link");
+                fontStuff.href = `https://fonts.googleapis.com/css?family=${encodeURIComponent(counter.settings.font).replaceAll("%20","+")}:100,200,300,400,500,600,700,800,900&display=swap`;
+                fontStuff.rel = "stylesheet";
+                fontStuff.id = `font-${counter.settings.font}`
+                document.head.appendChild(fontStuff);
+            }
             font = counter.settings.font;
             break;
         default:
             font = "none";
     }
     document.querySelector(".counter-content").style.fontFamily = font;
-    document.querySelector(".counter").style.fontWeight = counter.settings.fontWeight;
+    document.querySelector(".counter-container").style.fontWeight = counter.settings.fontWeight;
 }
 
 function setPaused(paused) {

diff --git a/livecountsedit/lcedit.json b/livecountsedit/lcedit.json
@@ -444,6 +444,16 @@
                                 }
                             ]
                         },
+                        {
+                            "type": "checkbox",
+                            "elements": [
+                                {
+                                    "label": "Reverse odometer animation direction",
+                                    "id": "reverseAnimation",
+                                    "type": "checkbox"
+                                }
+                            ]
+                        },
                         {
                             "type": "section",
                             "elements": [
@@ -510,7 +520,25 @@
                                     "selectOptions": [
                                         ["0", "Odometer (default)"],
                                         ["1", "Odomter (YouTube Studio)"],
-                                        ["2", "Counting"]
+                                        ["2", "Counting"],
+                                        ["3", "Odometer (minimal animation)"]
+                                    ]
+                                }
+                            ]
+                        },
+                        {
+                            "type": "section",
+                            "elements": [
+                                {
+                                    "label": "Number format",
+                                    "id": "numberFormat",
+                                    "type": "option",
+                                    "tag": "select",
+                                    "selectOptions": [
+                                        [",ddd", "12,345 (comma separator)"],
+                                        [".ddd", "12.345 (dot separator)"],
+                                        [" ddd", "12 345 (space separator)"],
+                                        ["d", "12345 (no separator)"]
                                     ]
                                 }
                             ]

diff --git a/odometer/odometer.js b/odometer/odometer.js
@@ -46,7 +46,7 @@
     };
 
     removeClass = function (el, name) {
-        return el.className = el.className.replace(new RegExp("(^| )" + (name.split(' ').join('|')) + "( |$)", 'gi'), ' ');
+        return el.className = el.className.replace(new RegExp("(^| )" + (name.split(' ').join('|')) + "( |$)", 'gi'), ' ').replace(/ +/g, " ");
     };
 
     addClass = function (el, name) {

diff --git a/studio/odometer.js b/studio/odometer.js
@@ -46,7 +46,7 @@
   };
 
   removeClass = function (el, name) {
-      return el.className = el.className.replace(new RegExp("(^| )" + (name.split(' ').join('|')) + "( |$)", 'gi'), ' ');
+      return el.className = el.className.replace(new RegExp("(^| )" + (name.split(' ').join('|')) + "( |$)", 'gi'), ' ').replace(/ +/g, " ");
   };
 
   addClass = function (el, name) {