0

I'm using a script to animate four sets of numbers on a page. I would like the numbers to be editable from within the admin (a SuperTable field).

Currently I have this:

<ul class="counters">
   {% for stats in entry.statsPanels %}
   <li><span id="tal-{{ loop.index0 }}" class="tal">0</span>{{ stats.statDescription }}</li>
   {% endfor %}
</ul>

Which is working fine for looping through and pulling back the 'Stat Descriptions'.

SuperTable field in Admin

Somehow I also need to loop through the 'Stats Number' column and embed this into the JavaScript that animates the numbers... at the moment they're hard coded '400, 60, 1800, 40'.

     $(document).ready(function(){
      function numberWithCommas(n) {
       var parts=n.toString().split(".");
       return parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      }

      var endingCounterVar = [400, 60, 1800, 40];

      for (let i = 0; i <= 3; i++) {

      let counter = { var: 0 };
      let tal = document.getElementById("tal-"+i);

      TweenMax.to(counter, 5, {
       var: endingCounterVar[i],
       onUpdate: function () {
        let nwc = numberWithCommas(counter.var);
        tal.innerHTML = nwc;
       },
       ease:Circ.easeOut
     });
    }
   });

Any help is very much appreciated.

Thank you

Martin

0

You could output the numbers in a data attribute on a wrapping HTML element:

{% set numbers = '' %} 

{% for stats in entry.statsPanels %}
    {% set numbers = numbers ~ stats.statsNumber %}
    {% if not loop.last %}
        {% set numbers = numbers ~ ',' %}
    {% endif %}
{% endfor %}

<div class="myComponent" data-numbers="{{ numbers }}">
...
</div>

Then you can read them in your JavaScript file:

var endCounterVar = $('.myComponent').data('numbers');

if (endCounterVar.length) {
    endCounterVar = endCounterVar.split(',');
}

This might not be the cleanest/shortest way to achieve this in Twig, mind you!

  • Hello, thank you for your response Martin. I'm not sure if i've understood you correctly but I get the error Calling unknown method: verbb\supertable\elements\SuperTableBlockElement::statsNumber() – Martin Jan 14 at 16:05
  • statsNumber was my guess at what your field handle was for the number field. If you include the correct field handle, hopefully that should resolve your issue. (edit: looks like I made it plural by mistake - try statNumber instead) – Martin Spain Jan 14 at 17:59
  • Hi, the numbers are now being passed into the data-numbers="402,602,1800,40" attribute, in fact they're appearing as comma a separated group wherever the {{ numbers }} tag is placed, but they need to be passed into the actual javascript file so they can processed into the page. It may be clearer if you see a link to the script i'm using codepen.io/jonathan/pen/VqdJVj – Martin Jan 15 at 10:04
  • OK, so now you have the numbers in a data attribute, your JavaScript can access that data attribute using the jQuery .data() function. In your JavaScript file or code snippet, you need to change the line that says var endingCounterVar = [2100, 1000, 1500, 1800]; – Martin Spain Jan 15 at 14:40
  • The second code example in my answer above shows how to take that data attribute value and pull it into your JavaScript file using the jQuery data() function. – Martin Spain Jan 15 at 14:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.