File manager - Edit - /home/jardides/www/Jardi-design/plugins/pagebuilderck/animnumber/assets/animnumber.js
Back
/** * @name Page Builder CK * @package com_pagebuilderck * @copyright Copyright (C) 2015. All rights reserved. * @license GNU General Public License version 2 or later; see LICENSE.txt * @author Cedric Keiflin - https://www.template-creator.com - https://www.joomlack.fr */ function pbckAnimnumberInit(numberName) { if (! numberName) return; var animnumber = jQuery('#'+numberName).find('> .inner').length ? jQuery('#'+numberName).find('> .inner') : jQuery('#'+numberName); if (animnumber.attr('data-running') == '1') { return; // clearInterval(animnumber.u); // needed to avoid problem on redraw } var opts = {}; // pour cercle var disableCircle = parseFloat(animnumber.attr('data-disable-circle')) || 0; opts.pieDiameter = parseFloat(animnumber.attr('data-pieDiameter')) || 380; opts.pieThickness = parseFloat(animnumber.attr('data-pieThickness')) || 70; opts.piePadding = parseFloat(animnumber.attr('data-piePadding')) || 0; opts.pieColor = animnumber.attr('data-pieColor') || '#20B2AA'; // pour cercle opts.startRadius = animnumber.attr('data-startRadius') || 0; // en % opts.endRadius = animnumber.attr('data-endRadius') || 100; // en % opts.offsetRadius = animnumber.attr('data-offsetRadius') || 0; // en % // pour texte opts.startValue = animnumber.attr('data-startValue') || 0; opts.startValue = parseFloat(opts.startValue.toString().replace(',', '.')); opts.endValue = animnumber.attr('data-endValue') || 100; opts.endValue = parseFloat(opts.endValue.toString().replace(',', '.')); opts.step = animnumber.attr('data-step') || 1; opts.step = parseFloat(opts.step.toString().replace(',', '.')); opts.time = parseFloat(animnumber.attr('data-time')) || 2000; opts.thousands = animnumber.attr('data-thousands') || ''; opts.decimal = animnumber.attr('data-decimal') || ''; opts.suffix = animnumber.attr('data-suffix') || ''; pieID = numberName+'canvas'; if (opts.pieThickness > opts.pieDiameter/3) { console.log('PAGE BUILDER CK - Animated Number Error : can not find the canvas in '); return; } var ctx; animnumber.find('canvas').remove(); animnumber.find('.animnumberckpie').empty(); var rad; var radNew; var radSum; radSum = 0.005; animnumber.attr('data-running', '1'); if (! disableCircle) { animnumber.find('.animnumberckpie').append('<canvas id="'+pieID+'"></canvas>'); var canvas = document.getElementById(pieID); canvas.setAttribute("width", opts.pieDiameter); canvas.setAttribute("height", opts.pieDiameter); canvas.style.position = "absolute"; canvas.style.left = "50%"; canvas.style.top = "50%"; canvas.style.marginLeft = -opts.pieDiameter/2 + 'px'; canvas.style.marginTop = -opts.pieDiameter/2 + 'px'; if (canvas && canvas.getContext) { ctx = canvas.getContext("2d"); ctx.rotate(Math.PI*(3/2)); ctx.translate(-opts.pieDiameter,0); } else { console.log('PAGE BUILDER CK - Animated Number Error : can not find the canvas in ' + numberName); return; } pbckAnimnumberResize(animnumber); rad = 0; ctx.clearRect(0,0,opts.pieDiameter,opts.pieDiameter); animnumber.u = setInterval( function(){ radNew = rad; pbckAnimnumberDraw(ctx, opts, radNew); if(rad<=1.002){ rad = (rad+radSum); } else if (rad<=1){ rad = rad; } else { rad = 1; clearInterval(animnumber.u); animnumber.attr('data-running', '0'); } var number = parseFloat((opts.endValue - opts.startValue) * rad / opts.step) * opts.step + opts.startValue; var numbertext = pbckAnimnumberFormatNumber(number, opts.thousands, opts.decimal, opts.suffix); animnumber.find('.animnumberckvalue').text(numbertext).css('line-height', opts.pieDiameter +'px'); },opts.time*radSum ); } else { rad = 0; animnumber.u = setInterval( function(){ radNew = rad; // pbckAnimnumberDraw(ctx, opts, radNew); if (rad<1){ rad = (rad+radSum); } else if (rad<=1){ rad = rad; } else { rad = 1; clearInterval(animnumber.u); animnumber.attr('data-running', '0'); } var number = parseFloat((opts.endValue - opts.startValue) * rad / opts.step) * opts.step + opts.startValue; var numbertext = pbckAnimnumberFormatNumber(number, opts.thousands, opts.decimal, opts.suffix); animnumber.find('.animnumberckvalue').text(numbertext).css('line-height', ''); },opts.time*radSum ); } function pbckAnimnumberFormatNumber(num, thousands, decimal, suffix) { // searh if the decimal has been put in the number if (decimal && animnumber.attr('data-endValue').toString().split(decimal).length > 1) { numtmp = animnumber.attr('data-endValue').toString(); nums = numtmp.split(decimal); if (nums[1]) { num = num.toFixed(nums[1].length).replace('.', decimal); } decimal = false; } else { if (decimal) { num = num.toFixed(2) // always two decimal digits .replace('.', decimal); // replace decimal point character with , } else { num = num.toFixed(0); } } if (thousands) { num = num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1' + thousands); } if (suffix) { num = num + suffix; } return num; } } function pbckAnimnumberDraw(ctx, opts, radNew) { ctx.clearRect(0,0,opts.pieDiameter,opts.pieDiameter); ctx.globalCompositeOperation = 'source-over'; ctx.beginPath(); var startrad = Math.PI*2 * parseFloat(opts.startRadius) / 100 + opts.offsetRadius * Math.PI*2 / 100; var endrad = startrad + radNew * Math.PI*2 * parseFloat(opts.endRadius - opts.startRadius) / 100; ctx.arc((opts.pieDiameter)/2, (opts.pieDiameter)/2, (opts.pieDiameter)/2-opts.pieThickness,startrad,endrad,false); ctx.lineWidth = opts.pieThickness-(opts.piePadding*2); ctx.strokeStyle = opts.pieColor; ctx.stroke(); ctx.closePath(); } // function to be called when the window is resized for reponsive behavior function pbckAnimnumberResize($this){ var canvas = $this.find('canvas'); if (! canvas.length) return; canvas.css({'margin-left': -canvas.width()/2, 'margin-top': -canvas.height()/2}); } // check the element position to animate the number when visbile on the screen jQuery(document).ready(function($){ jQuery('.cktype[data-type="animnumber"]').each(function() { var $this = jQuery(this); $window = jQuery(window); $this.removeClass('animatenumberck'); // function to be called whenever the window is scrolled or resized function animnumberckupdate($this){ var top = $this.offset().top; var pos = $window.scrollTop(); var height = $this.height(); var windowheight = $(window).height(); // check if totally above or totally below viewport if (top + height < pos || top > pos + windowheight) { // if (! $this.hasClass('noreplayck')) $this.removeClass('animatenumberck'); return; } // animate the content if found if (top < pos || top > pos + windowheight-30) { // is out of the screen } else { if (! $this.hasClass('animatenumberck')) { $this.addClass('animatenumberck'); pbckAnimnumberInit($this.attr('id')); pbckAnimnumberResize($this); } } } animnumberckupdate($this); $window.scroll(function() { animnumberckupdate($this); }); $window.resize(function() { pbckAnimnumberResize($this); }); }); });
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.02 |
proxy
|
phpinfo
|
Settings