| 1 |
( function () { |
| 2 |
document.querySelectorAll( '.bkml-wrap' ).forEach( function ( wrap ) { |
| 3 |
if ( wrap.dataset.animate !== '1' ) return; |
| 4 |
var ring = wrap.querySelector( '.bkml-ring' ); |
| 5 |
if ( !ring ) return; |
| 6 |
|
| 7 |
var current = parseFloat( wrap.dataset.current ) || 0; |
| 8 |
var goal = parseFloat( wrap.dataset.goal ) || 100; |
| 9 |
var pct = Math.min( 1, current / goal ); |
| 10 |
var r = parseFloat( ring.getAttribute( 'r' ) ); |
| 11 |
var circ = 2 * Math.PI * r; |
| 12 |
var finalOff = circ * ( 1 - pct ); |
| 13 |
|
| 14 |
/* Start from fully offset */ |
| 15 |
ring.style.strokeDashoffset = circ; |
| 16 |
|
| 17 |
var observed = false; |
| 18 |
var io = new IntersectionObserver( function ( entries ) { |
| 19 |
entries.forEach( function ( entry ) { |
| 20 |
if ( entry.isIntersecting && !observed ) { |
| 21 |
observed = true; |
| 22 |
ring.style.strokeDashoffset = finalOff; |
| 23 |
} |
| 24 |
} ); |
| 25 |
}, { threshold: 0.4 } ); |
| 26 |
io.observe( wrap ); |
| 27 |
} ); |
| 28 |
} )(); |
| 29 |
|
