https://moratelindo.co.id/js/progressbars.js

1jQuery(function ($) {
2
3    var $radialPb = $("[data-radialprogress]");
4
5    $radialPb.on('scrollSpy:enter',function () {
6        if (!$(this).hasClass('is-completed')) {
7            $(this).addClass('is-completed');
8            var idEl = '#' + $(this).attr('id');
9            radialProgress($(idEl)[0])
10                .diameter($(this).data('diameter'))
11                .value($(this).data('value'))
12                .duration($(this).data('duration'))
13                .delay($(this).data('delay'))
14                .progressStyle($(this).data('style'))
15                .render();
16
17        }
18    }).scrollSpy();
19
20    function stepProgress() {
21        var $stepContainer = $(this).siblings('.progress-steps');
22        var widthGlobal = 100;
23        var $progressbar = $(this);
24        var padding = Number($stepContainer.data('padding'));
25        var maxStep = $('[data-transitiongoal]', $stepContainer).length;
26        var widthLocal = widthGlobal - padding * 2;
27        $('[data-transitiongoal]', $stepContainer).each(function (i) {
28            var value = Number($(this).data('transitiongoal')),
29                position = (padding + widthLocal * value / 100);
30            $(this).data('position', position);
31            if (padding === 0) {
32                if (i == maxStep - 1){
33                    $(this).css({'margin-left': '-' + $(this).outerWidth() + 'px'});
34                } else if (i != 0){
35                    $(this).css({'margin-left': '-' + $(this).outerWidth() / 2 + 'px'});
36                }
37                $(this).css({'left': position + '%'});
38            } else {
39                $(this).css({
40                    'left': position + '%',
41                    'margin-left': '-' + $(this).outerWidth() / 2 + 'px'
42                });
43            }
44            $(this).attr('data-position', position);
45        });
46        var step = Number($progressbar.data('step'));
47        $('li:nth-child(' + step + ')', $stepContainer).addClass('active');
48        var progress = Number($('li:nth-child(' + step + ')', $stepContainer).data('position'));
49        if (step == maxStep) {
50            progress = '100%';
51        }
52        $progressbar.css('width', progress + '%');
53    }
54
55    var pbType = {
56        default_pb: {
57            display_text: 'center'
58        },
59        animate_pb: {
60            display_text: 'center',
61            update: function (current_percentage, $this) {
62                $this.parent('.progress-striped').find('.progressbar-back-text').addClass('is-visible').css('left', current_percentage + '%');
63            }
64        },
65        steps_pb: {
66            display_text: 'none'
67        }
68    };
69
70    var $pb = $('[data-progressbar] .progress-bar:not(.progress-bar-loader)');
71    $pb.on('scrollSpy:enter',function () {
72        var $pbType = $(this).parents('[data-progressbar]').data('progressbar');
73        if ($pbType === '') {
74            $pbType = 'default_pb'
75        }
76        else if ($pbType == 'steps_pb') {
77            stepProgress.call($(this));
78        }
79
80        $(this).addClass('active').progressbar($.extend({}, pbType[$pbType]));
81        if($('.j-progress-tab').size()>0){
82            $('.j-progress-tab .active .progress-step__dot').click();
83        }
84    }).scrollSpy();
85
86    // + j-progress-tab
87
88    $('.j-progress-tab').each(function(){
89        var el = $(this);
90        var i = 0;
91        el.find('.progress-step').each(function(){
92            var tabMenuEl = $(this);
93            tabMenuEl.attr('data-tab-id', i);
94            i++;
95        });
96    });
97
98    $('.j-progress-tab .progress-step__dot').click(function(e){
99        e.preventDefault();
100        progressTabClick($(this));
101        progressTabNavigation($(this));
102    });
103
104    function progressTabClick(el){
105        var parent = el.closest('.progress-step');
106        var box = el.closest('.j-progress-tab');
107        box.find('.progress-step').removeClass('active');
108        parent.addClass('active');
109        var progressbar = box.find('.progress-bar');
110        var newposition = parent.attr('data-position');
111        progressbar.animate({
112            width : newposition + "%"
113        }, 100);
114        var arrow = box.find('.b-progress-tab-arr');
115        arrow.css('left', newposition + "%");
116    }
117
118    function progressTabNavigation(el){
119        var parent = el.closest('.progress-step');
120        elID = parent.attr('data-tab-id');
121        var box = el.closest('.j-progress-tab');
122        box.find('.b-tab-progress').hide();
123        box.find('.b-tab-progress').eq(elID).show();
124    }
125    // - j-progress-tab
126
127});