vendor/store.shopware.com/c108animatedcounter/src/Resources/views/storefront/element/cms-element-animatedcounter.html.twig line 1

Open in your IDE?
  1. {% block element_animatedcounter %}
  2.     {% if 'c108ACNumberOfCounter' in element.config|keys and element.config.c108ACNumberOfCounter.value is null %}
  3.         <div class="c108acnocounter c108-alert-frontend">
  4.             <span>{{ 'animatedcounter.element.nocounterselected'|trans }}</span>
  5.         </div>
  6.     {% else %}
  7.         <div class="cms-element-animatedcounter" style="height: 100%; width: 100%">
  8.             {% block element_image_inner %}
  9.                 {% if element.config.c108ACStyle.value is null %}
  10.                     <div class="c108acnocounter c108-alert-frontend">
  11.                         <span>{{ 'animatedcounter.element.nodesignselected'|trans }}</span>
  12.                     </div>
  13.                 {% endif %}
  15.                 {% if element.config.c108ACStyle.value == 'stylecolorpalette' and element.config.c108ACColorpalette.value is null %}
  16.                     <div class="c108acnocounter c108-alert-frontend">
  17.                         <span>{{ 'animatedcounter.element.nocolorpaletteselected'|trans }}</span>
  18.                     </div>
  19.                 {% endif %}
  21.                 {% if 'c108ACNumberOfCounter' not in element.config|keys or (element.config.c108ACNumberOfCounter.value|number_format >= 1) %}
  22.                     <div id="c108acwrapper-{{ id }}" class="c108acwrapper c108acspeed-{{ element.config.c108ACSpeed.value }} c108ac-{{ element.config.c108ACStyle.value }} {% if element.config.c108ACStyle.value == 'stylecolorpalette' %}c108ac-{{ element.config.c108ACColorpalette.value }}{% endif %}">
  23.                         <div class="c108acitem" {% if element.config.c108ACStyle.value == 'stylecustom' %} style="background-color:{{ element.config.c108ACCustomCounter1BgCol.value }}; border: 2px solid {{ element.config.c108ACCustomCounter1BorderCol.value }}; padding:30px 10px;" {% endif %}>
  24.                             <span id="c108accounter-{{ id }}-1" class="c108accounter" {% if element.config.c108ACDifferentStartValues.value %}data-start-value="{{ element.config.c108ACCounter1Startvalue.value }}"{% endif %} {% if element.config.c108ACStyle.value == 'stylecustom' %} style="color:{{ element.config.c108ACCustomCounter1CounterTxtCol.value }};" {% endif %}>{{ element.config.c108ACCounter1.value }}</span>
  25.                             <span class="c108aclabel" {% if element.config.c108ACStyle.value == 'stylecustom' %} style="color:{{ element.config.c108ACCustomCounter1LabelTxtCol.value }};" {% endif %}>{{ element.config.c108ACLabel1.value }}</span>
  26.                         </div>
  27.                     {% endif %}
  28.                     {% if 'c108ACNumberOfCounter' not in element.config|keys or (element.config.c108ACNumberOfCounter.value|number_format >= 2) %}
  29.                         <div class="c108acitem" {% if element.config.c108ACStyle.value == 'stylecustom' %} style="background-color:{{ element.config.c108ACCustomCounter2BgCol.value }}; border: 2px solid {{ element.config.c108ACCustomCounter2BorderCol.value }}; padding:30px 10px;" {% endif %}>
  30.                             <span id="c108accounter-{{ id }}-2" class="c108accounter" {% if element.config.c108ACDifferentStartValues.value %}data-start-value="{{ element.config.c108ACCounter2Startvalue.value }}"{% endif %} {% if element.config.c108ACStyle.value == 'stylecustom' %} style="color:{{ element.config.c108ACCustomCounter2CounterTxtCol.value }};" {% endif %}>{{ element.config.c108ACCounter2.value }}</span>
  31.                             <span class="c108aclabel" {% if element.config.c108ACStyle.value == 'stylecustom' %} style="color:{{ element.config.c108ACCustomCounter2LabelTxtCol.value }};" {% endif %}>{{ element.config.c108ACLabel2.value }}</span>
  32.                         </div>
  33.                     {% endif %}
  34.                     {% if 'c108ACNumberOfCounter' not in element.config|keys or (element.config.c108ACNumberOfCounter.value|number_format >= 3) %}
  35.                         <div class="c108acitem" {% if element.config.c108ACStyle.value == 'stylecustom' %} style="background-color:{{ element.config.c108ACCustomCounter3BgCol.value }}; border: 2px solid {{ element.config.c108ACCustomCounter3BorderCol.value }}; padding:30px 10px;" {% endif %}>
  36.                             <span id="c108accounter-{{ id }}-3" class="c108accounter" {% if element.config.c108ACDifferentStartValues.value %}data-start-value="{{ element.config.c108ACCounter3Startvalue.value }}"{% endif %} {% if element.config.c108ACStyle.value == 'stylecustom' %} style="color:{{ element.config.c108ACCustomCounter3CounterTxtCol.value }};" {% endif %}>{{ element.config.c108ACCounter3.value }}</span>
  37.                             <span class="c108aclabel" {% if element.config.c108ACStyle.value == 'stylecustom' %} style="color:{{ element.config.c108ACCustomCounter3LabelTxtCol.value }};" {% endif %}>{{ element.config.c108ACLabel3.value }}</span>
  38.                         </div>
  39.                     {% endif %}
  40.                     {% if 'c108ACNumberOfCounter' not in element.config|keys or (element.config.c108ACNumberOfCounter.value|number_format >= 4) %}
  41.                         <div class="c108acitem" {% if element.config.c108ACStyle.value == 'stylecustom' %} style="background-color:{{ element.config.c108ACCustomCounter4BgCol.value }}; border: 2px solid {{ element.config.c108ACCustomCounter4BorderCol.value }}; padding:30px 10px;" {% endif %}>
  42.                             <span id="c108accounter-{{ id }}-4" class="c108accounter" {% if element.config.c108ACDifferentStartValues.value %}data-start-value="{{ element.config.c108ACCounter4Startvalue.value }}"{% endif %} {% if element.config.c108ACStyle.value == 'stylecustom' %} style="color:{{ element.config.c108ACCustomCounter4CounterTxtCol.value }};" {% endif %}>{{ element.config.c108ACCounter4.value }}</span>
  43.                             <span class="c108aclabel" {% if element.config.c108ACStyle.value == 'stylecustom' %} style="color:{{ element.config.c108ACCustomCounter4LabelTxtCol.value }};" {% endif %}>{{ element.config.c108ACLabel4.value }}</span>
  44.                         </div>
  45.                     {% endif %}
  46.                 </div>
  47.             {% endblock %}
  48.         </div>
  50. <script>
  51.   function startAnimatedCounter(elementid, result, speed, startvalue) {
  52.       var maxTime = speed;
  53.       var interval = Math.floor(maxTime / result);
  54.       var element = document.getElementById(elementid);
  55.       var current = startvalue - 1;
  57.       // check if start value greater than or same as result value
  58.       // if yes, set start value to zero
  59.       if(startvalue >= result || startvalue < 1){
  60.             current = 0;
  61.       }
  63.       var counter = setInterval(function() {
  64.             current += 1;
  65.             element.innerHTML = current;
  66.             if (current == result) {
  67.                 clearInterval(counter);
  68.             }
  69.         }, interval);
  70.     }
  72.     window.addEventListener("load", (event) => {
  73.       idX = "c108acwrapper-{{ id }}";
  74.       createObserver(idX);
  75.       idX="";
  76.     }, false);
  78.     function createObserver(idY) {
  79.       boxElement = document.getElementById(idY);
  80.       let observer;
  81.       observer = new IntersectionObserver(handleIntersect);
  82.       observer.observe(boxElement);
  83.     }
  85.     function handleIntersect(entries, observer) {
  86.       entries.forEach((entry) => {
  87.         if (entry.isIntersecting) {
  88.           var C108ACSpeed = entry.target.classList.item(1).replace("c108acspeed-", "");
  89.           var c108AccounterId = entry.target.id.replace("c108acwrapper-", "");
  91.           var c108ACCounterFirstValueElement = document.getElementById("c108accounter-"+ c108AccounterId +"-1");
  92.           var c108ACCounterSecondValueElement = document.getElementById("c108accounter-"+ c108AccounterId +"-2");
  93.           var c108ACCounterThirdValueElement = document.getElementById("c108accounter-"+ c108AccounterId +"-3");
  94.           var c108ACCounterFourthValueElement = document.getElementById("c108accounter-"+ c108AccounterId +"-4");
  96.           var c108ACCounter01StartValue = 0;
  97.           var c108ACCounter02StartValue = 0;
  98.           var c108ACCounter03StartValue = 0;
  99.           var c108ACCounter04StartValue = 0;
  101.           var c108ACCounterFirstValue = c108ACCounterFirstValueElement.innerHTML;
  102.           
  103.           if(c108ACCounterFirstValueElement.getAttribute("data-start-value")){
  104.             c108ACCounter01StartValue = parseInt(c108ACCounterFirstValueElement.getAttribute("data-start-value"));
  105.           }
  107.           startAnimatedCounter("c108accounter-"+ c108AccounterId +"-1", c108ACCounterFirstValue, C108ACSpeed, c108ACCounter01StartValue);
  109.           if(c108ACCounterSecondValueElement){
  110.             var c108ACCounterSecondValue = c108ACCounterSecondValueElement.innerHTML;
  112.             if(c108ACCounterSecondValueElement.getAttribute("data-start-value")){
  113.               c108ACCounter02StartValue = parseInt(c108ACCounterSecondValueElement.getAttribute("data-start-value"));
  114.             }
  116.             startAnimatedCounter("c108accounter-"+ c108AccounterId +"-2", c108ACCounterSecondValue, C108ACSpeed, c108ACCounter02StartValue);
  117.           }
  119.           if(c108ACCounterThirdValueElement){
  120.             var c108ACCounterThirdValue = c108ACCounterThirdValueElement.innerHTML;
  122.             if(c108ACCounterThirdValueElement.getAttribute("data-start-value")){
  123.               c108ACCounter03StartValue = parseInt(c108ACCounterThirdValueElement.getAttribute("data-start-value"));
  124.             }
  126.             startAnimatedCounter("c108accounter-"+ c108AccounterId +"-3", c108ACCounterThirdValue, C108ACSpeed, c108ACCounter03StartValue);
  127.           }
  129.           if(c108ACCounterFourthValueElement){
  130.             var c108ACCounterFourthValue = c108ACCounterFourthValueElement.innerHTML;
  132.             if(c108ACCounterFourthValueElement.getAttribute("data-start-value")){
  133.               c108ACCounter04StartValue = parseInt(c108ACCounterFourthValueElement.getAttribute("data-start-value"));
  134.             }
  136.             startAnimatedCounter("c108accounter-"+ c108AccounterId +"-4", c108ACCounterFourthValue, C108ACSpeed, c108ACCounter04StartValue);
  137.           }
  139.           observer.unobserve(entry.target);
  140.         }
  141.       })
  142.   }
  143. </script>
  144.   {% endif %}
  145. {% endblock %}