https://ulacab.com/wp-content/plugins/mighty-addons/assets/js/rpb.js?ver=1.9.3

1(function ($) {
2  "use strict";
3
4  window.onscroll = function() {readingProgressBar()};
5
6  // When no scroll is initialized
7  if ( document.getElementById( "ma-btt-rpb" ) ) {
8
9    var progressPath = document.querySelector( '.ma-progress-wrap path.bar' );
10    progressPath.style.transition = progressPath.style.WebkitTransition = 'none';
11
12  }
13
14  // Back to top event listener
15  $( '#ma-btt-rpb' ).on( 'click', function( event ) {
16    event.preventDefault();
17    $( 'html, body' ).animate({
18      scrollTop: 0
19    }, 550 );
20    return false;
21  });
22
23  // Updating progress
24  function readingProgressBar() {
25
26    // View 1
27    if( document.getElementById( "ma-rpb" ) ) {
28      
29      var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
30      var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
31      var scrolled = ( winScroll / height ) * 100;
32
33      document.querySelector( "#ma-rpb .ma-rpb-progress-bar" ).style.width = scrolled + "%";
34    }
35
36    // View 2
37    if ( document.getElementById( "ma-btt-rpb" ) ) {
38
39      var progressPath = document.querySelector( '.ma-progress-wrap path.bar' );
40      var pathLength = progressPath.getTotalLength();
41      progressPath.style.strokeDasharray = pathLength + ' ' + pathLength;
42      progressPath.style.strokeDashoffset = pathLength;
43      progressPath.getBoundingClientRect();
44      progressPath.style.transition = progressPath.style.WebkitTransition = 'stroke-dashoffset 10ms linear';
45
46      var scroll = $(window).scrollTop();
47      var height = $(document).height() - $(window).height();
48      var progress = pathLength - (scroll * pathLength / height);
49      progressPath.style.strokeDashoffset = progress;
50
51      // Activate progress bar after defined limit
52      $( window ).on( 'scroll', function() {
53        if ( $(this).scrollTop() > 50 ) {
54          $( '.ma-progress-wrap' ).addClass( 'active-progress' );
55        } else {
56          $( '.ma-progress-wrap' ).removeClass( 'active-progress' );
57        }
58      });
59    }
60
61  }
62
63  // Dynamic Progress Bar for Elementor Editor
64  $(window).on('elementor/frontend/init', function () {
65
66    if ( elementorFrontend.isEditMode() ) {
67
68      let rpbHtml = '<div id="ma-rpb" class="ma-rpb ma-rpb-header"><div class="ma-rpb-progress-container"><div class="ma-rpb-progress-bar"></div></div></div>';
69      
70      // On Enable RPB
71      elementor.settings.page.addChangeCallback( 'ma_enable_rpb', function( value ) {
72        if( value == 'yes' ) {
73          $( elementorFrontend.elements.$body ).append( rpbHtml );
74        } else {
75          if ( $( elementorFrontend.elements.$body ).find( '.ma-rpb' ).length ) {
76            $( elementorFrontend.elements.$body ).find( '.ma-rpb' ).remove();
77          }
78        }
79      });
80
81      // On Hide On Change
82      elementor.settings.page.addChangeCallback( 'ma_hide_on_desktop', function( value ) {
83        $( elementorFrontend.elements.$body ).find( '.ma-rpb' ).attr( 'data-hide-on-desktop', value );  
84      });
85      elementor.settings.page.addChangeCallback( 'ma_hide_on_tablet', function( value ) {
86        $( elementorFrontend.elements.$body ).find( '.ma-rpb' ).attr( 'data-hide-on-tablet', value );  
87      });
88      elementor.settings.page.addChangeCallback( 'ma_hide_on_mobile', function( value ) {
89        $( elementorFrontend.elements.$body ).find( '.ma-rpb' ).attr( 'data-hide-on-mobile', value );  
90      });
91
92      // On Position change
93      elementor.settings.page.addChangeCallback( 'ma_position', function( value ) {
94        $( elementorFrontend.elements.$body ).find( '.ma-rpb-header' ).attr( 'data-position', value );
95      });
96
97      // On view change
98      elementor.settings.page.addChangeCallback( 'ma_select_view', function( value ) {
99        // Removing old instances
100        $( elementorFrontend.elements.$body ).find( '.ma-rpb' ).remove();
101        
102        if( value == 'view1' ) {
103          $( elementorFrontend.elements.$body ).append( rpbHtml );
104        } else if( value == 'view2' ) {
105
106          let bttIcon = elementor.getPanelView().getCurrentPageView().model.attributes.ma_rpb_icon.value;
107          let hideOnDesktop = elementor.getPanelView().getCurrentPageView().model.attributes.ma_hide_on_de

107sktop;
108          let hideOnTablet = elementor.getPanelView().getCurrentPageView().model.attributes.ma_hide_on_tablet;
109          let hideOnMobile = elementor.getPanelView().getCurrentPageView().model.attributes.ma_hide_on_mobile;
110
111          let bttHtml = '<div data-hide-desktop="' + hideOnDesktop + '" data-hide-tablet="' + hideOnTablet + '" data-hide-mobile="' + hideOnMobile + '" id="ma-btt-rpb" class="ma-rpb ma-progress-wrap"><svg class="progress-circle" width="100%" height="100%" viewBox="-1 -1 102 102"><path class="bar-bg" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" /> <path class="bar" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" /> <div class="ma-rpb-icon"><i class="'+ bttIcon +'"></i></div> </svg></div>';
112
113          $( elementorFrontend.elements.$body ).append( bttHtml );
114          
115          // Attaching event listener
116          $( '#ma-btt-rpb' ).on( 'click', function( event ) {
117            event.preventDefault();
118            $( 'html, body' ).animate({
119              scrollTop: 0
120            }, 550 );
121            return false;
122          })
123        }
124      });
125
126      // On Icon change
127      elementor.settings.page.addChangeCallback( 'ma_rpb_icon', function( value ) {
128        $( elementorFrontend.elements.$body ).find( '#ma-btt-rpb .ma-rpb-icon i' ).attr( 'class', value['value'] );
129      });
130
131    }
132  });
133
134})(jQuery);