Merge pull request #155 from DC-development/master

Bugfix #148 "animateInView doesnt work" , Bugfix #138 "undefined strings in SVG output"
pguso · Aug 5, 2018 · 2a145af · 2a145af
2 parents 9bf0ae8 + 32bec77
commit 2a145af
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -41,7 +41,6 @@ <h3>Circliful</h3>
             <div id="test-circle7"></div>
         </div>
     </div>
-
     <div class="row">
         <div class="col-lg-2">
             <div id="test-circle6"></div>
@@ -58,6 +57,7 @@ <h3>Circliful</h3>
         $("#test-circle").circliful({
             animation: 1,
             animationStep: 5,
+            animateInView: true,
             foregroundBorderWidth: 15,
             backgroundBorderWidth: 15,
             percent: 38,
@@ -66,8 +66,9 @@ <h3>Circliful</h3>
             textColor: '#666',
         });
         $("#test-circle2").circliful({
-            animation: 0,
+            animation: 1,
             animationStep: 6,
+            animateInView: true,
             foregroundBorderWidth: 5,
             backgroundColor: "none",
             fillColor: '#eee',

diff --git a/js/jquery.circliful.js b/js/jquery.circliful.js
@@ -37,14 +37,14 @@
             textColor: '#666',
             textY: null,
             textX: null,
-            multiPercentage: 0,
+            multiPercentage: 0, //Todo: Deprecate setting. This should be detected when perctentages-length is >1 All initialized objects must subsequently use the percentages-array(!)
             percentages: [],
             multiPercentageLegend: 0,
             textBelow: false,
             noPercentageSign: false,
             replacePercentageByText: null,
             halfCircle: false,
-            animateInView: false,
+            animateInView: false,//Todo: Deprecate setting. This should be done by default if animate=1
             decimals: 0,
             alwaysDecimals: false,
             title: 'Circle Chart',
@@ -133,8 +133,10 @@
 
             if (settings.icon !== 'none') {
                 icon = '<text text-anchor="middle" x="' + iconX + '" y="' + iconY + '" class="icon" style="font-size: ' + settings.iconSize + 'px" fill="' + settings.iconColor + '">&#x' + settings.icon + '</text>';
+            } else {
+                icon = '';
             }
-
+            
             if (settings.halfCircle) {
                 var rotate = 'transform="rotate(-180,100,100)"';
                 circleContainer
@@ -179,8 +181,10 @@
 
             if (settings.animation === 1) {
                 if (settings.animateInView) {
+                    checkAnimation(); //This will initially check after drawing for each element with
+                    //animateInVIew set to true. 
                     $(window).scroll(function () {
-                        checkAnimation();
+                        checkAnimation(); //This will recheck viewport positioning, when the page gets scrolled
                     });
                 } else {
                     animate();
@@ -321,8 +325,7 @@
 
             function isElementInViewport() {
                 // Get the scroll position of the page.
-                var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') !== -1) ? 'body' : 'html');
-                var viewportTop = $(scrollElem).scrollTop();
+                var viewportTop = $(window).scrollTop();
                 var viewportBottom = viewportTop + $(window).height();
 
                 // Get the position of the element on the page.