https://www.buergerinstitut.de/app/plugins/mrm-customizer/public/js/mrm-customizer-public.js?ver=1.0.0

1(function ($) {
2  'use strict';
3
4  /**
5   * All of the code for your public-facing JavaScript source
6   * should reside in this file.
7   *
8   * Note: It has been assumed you will write jQuery code here, so the
9   * $ function reference has been prepared for usage within the scope
10   * of this function.
11   *
12   * This enables you to define handlers, for when the DOM is ready:
13   *
14   * $(function() {
15   *
16   * });
17   *
18   * When the window is loaded:
19   *
20   * $( window ).load(function() {
21   *
22   * });
23   *
24   * ...and/or other possibilities.
25   *
26   * Ideally, it is not considered best practise to attach more than a
27   * single DOM-ready or window-load handler for a particular page.
28   * Although scripts in the WordPress core, Plugins and Themes may be
29   * practising this, we should strive to set a better example in our own work.
30   */
31  jQuery(document).ready(function ($) {
32    /*
33    * This Code is based on Waypoints. Since Waypoints is already integrated through the visual composer, a new implementation wouldn't normally necessary.
34    * Unfortunately the version served by vc is too old to use the inview libary from the newer version.
35    * Hence I have to integrate also the new version of Waypoints.
36    * Although both versions are added the old script is only working.
37    * If integrated in to other environment the old syntax has to be upgraded.
38    * */
39
40    $('.counterto').each(function (i) {
41      // Store an id with format "uniqueId_{index}" in a variable.
42
43      var idc = 'counter_' + i;
44      // Give the ID to the div
45      $(this).attr('id', idc);
46      //Copy style of counter to parent-element
47      var $array = ['color', 'background-color', 'font-weight', 'font-size', 'border-radius', 'border-color', 'border-style', 'display'];
48      /*
49      *Shorten repeated element, change this to change all $this.
50      *Creates a new id for every new counter in DOM
51      */
52      var $this = $('#' + idc);
53      //Copy the properties from array to parent
54      $.each($array, function (item, value) {
55        $this.parent('.big').css(value, $this.css(value));
56      });
57      //Fallback overwrite CSS for Mozilla and IE
58      if ($this.data('border-shape') === 'round') {
59        $this.parent('.big').addClass('cornerround');
60      }
61      if ($this.data('border-shape') === 'rounded') {
62        $this.parent('.big').addClass('cornerrounded');
63      }
64      if ($this.data('border-outline') === 'blue') {
65        $this.parent('.big').addClass('borderblue');
66      }
67      if ($this.data('border-outline') === 'turqouise') {
68        $this.parent('.big').addClass('bordertur');
69      }
70      if ($this.data('border-outline') === 'pink') {
71        $this.parent('.big').addClass('borderpink');
72      }
73      if ($this.data('border-outline') === 'violet') {
74        $this.parent('.big').addClass('borderviolet');
75      }
76      if ($this.data('border-outline') === 'orange') {
77        $this.parent('.big').addClass('borderorange');
78      }
79      if ($this.data('border-outline') === 'grey') {
80        $this.parent('.big').addClass('bordergrey');
81      }
82      if ($this.data('border-outline') === 'standard') {
83        $this.parent('.big').addClass('borderstand');
84      }
85      if ($this.data('border-outline') === 'black') {
86        $this.parent('.big').addClass('borderblack');
87      }
88      //Reset CSS of counter, because values should only be applied to parent element
89      $this.css('background-color', 'transparent');
90      $this.css('border-width', '0');
91      //Define fontsize (h1,h2...) at beginning and add it to parent
92      $this.parent('.big').addClass($(this).data('fontsize'));
93      //Initialize waypoint
94      var waypoint = $this.waypoint({
95        handler: function (direction) {
96          var disable = this;
97          //Check direction
98          var dataDirection = $(this).data('direction');
99          //Check animationtype
100          var animationtype = $(this).data('animation');
101          //Check icon
102          var icontype = $(this).data('icon');
103          //Check iconsize
104          var iconsize = $(this).data('iconsize');
105          //Check animatewhole
106          var animatewhole = $(this).data('animatewhole');
107
108          //Function counter start
109          function counterFunction () {
110            $(this).countTo('restart');
111
112            //Counter animation or whole element when in view
113            if (animatewhole === 'counter') {
114              $this.addClass('animated ' + animationtype);
115            } else {
116              //Animate when in view, whole
117              $this.parent('.big').addClass('animated ' + animationtype);
118            }
119            //Add icontype and iconsize to .iconcounter class sibling
120            $this.siblings('.iconcounter').addClass('fa-' + icontype + ' fa-' + iconsize);
121
122            //Reset CSS-Attributes
123            $this.parent('.big').css('fontSize', '');
124            $this.countTo({
125              //Animate after count ends
126              onComplete: function (value) {
127                $this.parent('.big').removeClass('animated ' + animationtype);
128                $this.removeClass('animated ' + animationtype);
129                //FontSize grow relative to initial value
130                var fontSize = parseInt($(this).css('font-size'));

131                var fontSizeoutput = fontSize + $(this).data('animate-fontsize') + 'px';
132                //Animate FontSize after finish
133                $(this).parent('.big').animate({fontSize: fontSizeoutput});
134              }
135
136            });
137          }
138
139          //Both directions
140          if (dataDirection === 'both') {
141            if (direction === 'down' || direction === 'up') {
142              counterFunction();
143              //Reset when not in view, both
144              var inview = new Waypoint.Inview({
145                element: $this[0],
146                exit: function (direction) {
147                  $this.countTo('restart');
148                  $(this).countTo('stop');
149                  $this.parent('.big').css('fontSize', '');
150                  $this.parent('.big').removeClass('animated ' + animationtype);
151                },
152              });
153            }
154          }
155          //Only Direction Down
156          else if (dataDirection === 'down') {
157            if (direction === 'down') {
158              counterFunction();
159            }
160          }
161          //Trigger once, on/off
162          if ($this.data('once') === 'yes')
163            $this.waypoint('disable');
164        },
165        offset: '50%'
166      });
167
168    });
169
170  });
171})(jQuery);