https://opttab.com/wp-content/themes/brighthub/elements/assets/js/counter.js

1(function ($) {
2  // Helper function to init odometer
3  var initOdometer = function ($number, isEditorMode) {
4    var data = $number.data();
5    var el = $number[0];
6    var startNumber = data["startnumber"],
7      endNumber = data["endnumber"],
8      separator = data["delimiter"],
9      duration = data["duration"];
10
11    if (typeof Odometer === "undefined") {
12      return;
13    }
14    if (!separator || typeof separator !== "string" || separator.indexOf("ddd") === -1) {
15      separator = "(,ddd)";
16    }
17
18    var odometerDuration = isEditorMode ? 0 : duration;
19
20    var od = new Odometer({
21      el: el,
22      value: endNumber,
23      format: separator,
24      theme: "default",
25      duration: odometerDuration
26    });
27
28    el._odometer = od;
29  };
30
31  var pxl_widget_counter_handler = function ($scope) {
32    var delay = Number($scope.find(".pxl-counter__value").attr("data-delay")) + 300 || 300;
33    var isEditorMode =
34      typeof elementorFrontend !== "undefined" &&
35      elementorFrontend.config &&
36      elementorFrontend.config.is_edit_mode;
37
38    setTimeout(function () {
39      elementorFrontend.waypoint(
40        $scope.find(".pxl-counter__value:not(.effect-odometer)"),
41        function () {
42          var $number = $(this),
43            data = $number.data();
44
45          var decimalMatch = String(data.toValue || "").match(/\.(\d+)/);
46          if (decimalMatch) data.rounding = decimalMatch[1].length;
47
48          if (typeof $.fn.numerator === "function") {
49            $number.numerator(data);
50          }
51        },
52        { offset: "95%", triggerOnce: true }
53      );
54
55      var $odometerElements = $scope.find(".pxl-counter__value.effect-odometer");
56
57      if (isEditorMode) {
58        $odometerElements.each(function () {
59          initOdometer($(this), true);
60        });
61      } else {
62        elementorFrontend.waypoint(
63          $odometerElements,
64          function () {
65            initOdometer($(this), false);
66          },
67          { offset: "95%", triggerOnce: true }
68        );
69      }
70    }, delay);
71  };
72
73  // --- Helpers ---
74  function getNumberFromText($el) {
75    return Number(($el.text() || "0").replace(/[^\d.]/g, "")) || 0;
76  }
77
78  function updateCounterFromSelect($select) {
79    var value = Number($select.val());
80    var $inner = $select.closest(".e-con-inner");
81    var $counter = $inner.find(".pxl-counter__value").first();
82    if (!$counter.length) return;
83
84    var duration = Number($counter.attr("data-duration")) || 2000;
85    var delimiter = $counter.attr("data-delimiter") || ",";
86
87    $counter.attr("data-endnumber", value).attr("data-to-value", value);
88
89    if ($counter.hasClass("effect-odometer")) {
90      var el = $counter[0];
91      if (!delimiter || typeof delimiter !== "string" || delimiter.indexOf("ddd") === -1) {
92        delimiter = "(,ddd)";
93      }
94      if (!el._odometer) {
95        el._odometer = new Odometer({
96          el: el,
97          value: getNumberFromText($counter),
98          format: delimiter,
99          theme: "default",
100          duration: duration
101        });
102      } else {
103        el._odometer.options.duration = duration;
104        el._odometer.options.format = delimiter;
105      }
106      el._odometer.update(value);
107    } else {
108      if (typeof $.fn.numerator === "function") {
109        $counter.numerator({
110          fromValue: getNumberFromText($counter),
111          toValue: value,
112          duration: duration,
113          delimiter: delimiter
114        });
115      } else {
116        $counter.text(value.toLocaleString());
117      }
118    }
119  }
120
121  function pxl_select_change_counter_handler($scope) {
122    $scope.find("select.pxl-select-change-counter__select").each(function () {
123      var $select = $(this);
124      $select.off(".pxlChange").on("change.pxlChange", function () {
125        updateCounterFromSelect($select);
126      });
127    });
128  }
129
130  $(document).on("change", "select.pxl-select-change-counter__select", function () {
131    updateCounterFromSelect($(this));
132  });
133
134  $(window).on("elementor/frontend/init", function () {
135    elementorFrontend.hooks.addAction(
136      "frontend/element_ready/pxl_counter.default",
137      pxl_widget_counter_handler
138    );
139    elementorFrontend.hooks.addAction(
140      "frontend/element_ready/pxl_select_change_counter_value.default",
141      pxl_select_change_counter_handler
142    );
143  });
144})(jQuery);