Indian separators (#291)

* update demo for new option

* indian separators option

* update packages

* add test, update tests

* add new option to README

Author: inorganik

README.md

@@ -50,6 +50,7 @@ interface CountUpOptions {
   decimalPlaces?: number; // number of decimal places (0)
   duration?: number; // animation duration in seconds (2)
   useGrouping?: boolean; // example: 1,000 vs 1000 (true)
+  useIndianSeparators?: boolean; // example: 1,00,000 vs 100,000 (false)
   useEasing?: boolean; // ease animation (true)
   smartEasingThreshold?: number; // smooth easing for large numbers above this if useEasing (999)
   smartEasingAmount?: number; // amount to be eased for numbers above threshold (333)

demo/demo-nomodule.js

@@ -97,7 +97,9 @@ window.onload = function () {
     }
   }
   var stringifyArray = function (arr) { return '[\'' + arr.join('\', \'') + '\']'; };
+
   // COUNTUP AND CODE VISUALIZER
+
   function createCountUp() {
     establishOptionsFromInputs();
     demo = new countUp.CountUp('myTargetElement', endVal, options);
@@ -129,6 +131,7 @@ window.onload = function () {
       duration: Number(el('duration').value),
       useEasing: el('useEasing').checked,
       useGrouping: el('useGrouping').checked,
+      useIndianSeparators: el('useIndianSeparators').checked,
       easingFn: typeof getEasingFn() === 'undefined' ? null : getEasingFn(),
       separator: el('separator').value,
       decimal: el('decimal').value,
@@ -169,6 +172,7 @@ window.onload = function () {
     opts += (options.useEasing) ? '' : indentedLine("useEasing: " + options.useEasing);
     opts += (options.useEasing && options.easingFn) ? indentedLine("easingFn") : '';
     opts += (options.useGrouping) ? '' : indentedLine("useGrouping: " + options.useGrouping);
+    opts += (options.useIndianSeparators) ? indentedLine("useIndianSeparators: " + options.useIndianSeparators) : '';
     opts += (options.separator !== ',') ? indentedLine("separator: '" + options.separator + "'") : '';
     opts += (options.decimal !== '.') ? indentedLine("decimal: '" + options.decimal + "'") : '';
     opts += (options.prefix.length) ? indentedLine("prefix: '" + options.prefix + "'") : '';

demo/demo.js

@@ -94,7 +94,9 @@ window.onload = function () {
     }
   }
   var stringifyArray = function (arr) { return '[\'' + arr.join('\', \'') + '\']'; };
+
   // COUNTUP AND CODE VISUALIZER
+
   function createCountUp() {
     establishOptionsFromInputs();
     demo = new CountUp('myTargetElement', endVal, options);
@@ -132,6 +134,7 @@ window.onload = function () {
       duration: Number(el('duration').value),
       useEasing: el('useEasing').checked,
       useGrouping: el('useGrouping').checked,
+      useIndianSeparators: el('useIndianSeparators').checked,
       easingFn: typeof getEasingFn() === 'undefined' ? null : getEasingFn(),
       separator: el('separator').value,
       decimal: el('decimal').value,
@@ -172,6 +175,7 @@ window.onload = function () {
     opts += (options.useEasing) ? '' : indentedLine("useEasing: " + options.useEasing);
     opts += (options.useEasing && options.easingFn) ? indentedLine("easingFn") : '';
     opts += (options.useGrouping) ? '' : indentedLine("useGrouping: " + options.useGrouping);
+    opts += (options.useIndianSeparators) ? indentedLine("useIndianSeparators: " + options.useIndianSeparators) : '';
     opts += (options.separator !== ',') ? indentedLine("separator: '" + options.separator + "'") : '';
     opts += (options.decimal !== '.') ? indentedLine("decimal: '" + options.decimal + "'") : '';
     opts += (options.prefix.length) ? indentedLine("prefix: '" + options.prefix + "'") : '';

dist/countUp.d.ts

@@ -3,6 +3,7 @@ export interface CountUpOptions {
     decimalPlaces?: number;
     duration?: number;
     useGrouping?: boolean;
+    useIndianSeparators?: boolean;
     useEasing?: boolean;
     smartEasingThreshold?: number;
     smartEasingAmount?: number;

dist/countUp.js

@@ -15,13 +15,14 @@ var CountUp = /** @class */ (function () {
         var _this = this;
         this.endVal = endVal;
         this.options = options;
-        this.version = '2.3.2';
+        this.version = '2.4.0';
         this.defaults = {
             startVal: 0,
             decimalPlaces: 0,
             duration: 2,
             useEasing: true,
             useGrouping: true,
+            useIndianSeparators: false,
             smartEasingThreshold: 999,
             smartEasingAmount: 333,
             separator: ',',
@@ -89,10 +90,16 @@ var CountUp = /** @class */ (function () {
             x2 = x.length > 1 ? _this.options.decimal + x[1] : '';
             if (_this.options.useGrouping) {
                 x3 = '';
+                var factor = 3, j = 0;
                 for (var i = 0, len = x1.length; i < len; ++i) {
-                    if (i !== 0 && (i % 3) === 0) {
+                    if (_this.options.useIndianSeparators && i === 4) {
+                        factor = 2;
+                        j = 1;
+                    }
+                    if (i !== 0 && (j % factor) === 0) {
                         x3 = _this.options.separator + x3;
                     }
+                    j++;
                     x3 = x1[len - i - 1] + x3;
                 }
                 x1 = x3;

dist/countUp.min.js

@@ -21,13 +21,14 @@
             var _this = this;
             this.endVal = endVal;
             this.options = options;
-            this.version = '2.3.2';
+            this.version = '2.4.0';
             this.defaults = {
                 startVal: 0,
                 decimalPlaces: 0,
                 duration: 2,
                 useEasing: true,
                 useGrouping: true,
+                useIndianSeparators: false,
                 smartEasingThreshold: 999,
                 smartEasingAmount: 333,
                 separator: ',',
@@ -95,10 +96,16 @@
                 x2 = x.length > 1 ? _this.options.decimal + x[1] : '';
                 if (_this.options.useGrouping) {
                     x3 = '';
+                    var factor = 3, j = 0;
                     for (var i = 0, len = x1.length; i < len; ++i) {
-                        if (i !== 0 && (i % 3) === 0) {
+                        if (_this.options.useIndianSeparators && i === 4) {
+                            factor = 2;
+                            j = 1;
+                        }
+                        if (i !== 0 && (j % factor) === 0) {
                             x3 = _this.options.separator + x3;
                         }
+                        j++;
                         x3 = x1[len - i - 1] + x3;
                     }
                     x1 = x3;