Options to set the calculation point of the reading process

Author: dominicrico

README.md

@@ -40,6 +40,7 @@ Available/Default options:
 
 ```js
 options = {
+calcFrom: 'middle', // "top", "bottom", "middle" - From where of the viewport should we calc the process of reading defaults to "middle"
   showHeadline: true, // Show headline in the progress bar (only works if expand is true or type is "big")
   expand: true, // Show small bar and expand to big after passing the headline
   type: 'small', // Type of bar if expand is "false" available options are "small" or "big"

coverage/PhantomJS 1.9.8 (Mac OS X 0.0.0)/lcov-report/index.html

@@ -15,10 +15,10 @@
 <div class="header low">
     <h1>Code coverage report for <span class="entity">All files</span></h1>
     <h2>
-        Statements: <span class="metric">35.11% <small>(33 / 94)</small></span> &nbsp;&nbsp;&nbsp;&nbsp;
-        Branches: <span class="metric">25.29% <small>(22 / 87)</small></span> &nbsp;&nbsp;&nbsp;&nbsp;
+        Statements: <span class="metric">35.71% <small>(35 / 98)</small></span> &nbsp;&nbsp;&nbsp;&nbsp;
+        Branches: <span class="metric">28.26% <small>(26 / 92)</small></span> &nbsp;&nbsp;&nbsp;&nbsp;
         Functions: <span class="metric">50% <small>(8 / 16)</small></span> &nbsp;&nbsp;&nbsp;&nbsp;
-        Lines: <span class="metric">35.11% <small>(33 / 94)</small></span> &nbsp;&nbsp;&nbsp;&nbsp;
+        Lines: <span class="metric">35.71% <small>(35 / 98)</small></span> &nbsp;&nbsp;&nbsp;&nbsp;
         Ignored: <span class="metric"><span class="ignore-none">none</span></span> &nbsp;&nbsp;&nbsp;&nbsp;
     </h2>
     <div class="path"></div>
@@ -42,23 +42,23 @@ <h2>
 </thead>
 <tbody><tr>
 	<td class="file low" data-value="src/"><a href="src/index.html">src/</a></td>
-	<td data-value="35.11" class="pic low"><span class="cover-fill" style="width: 35px;"></span><span class="cover-empty" style="width:65px;"></span></td>
-	<td data-value="35.11" class="pct low">35.11%</td>
-	<td data-value="94" class="abs low">(33&nbsp;/&nbsp;94)</td>
-	<td data-value="25.29" class="pct low">25.29%</td>
-	<td data-value="87" class="abs low">(22&nbsp;/&nbsp;87)</td>
+	<td data-value="35.71" class="pic low"><span class="cover-fill" style="width: 35px;"></span><span class="cover-empty" style="width:65px;"></span></td>
+	<td data-value="35.71" class="pct low">35.71%</td>
+	<td data-value="98" class="abs low">(35&nbsp;/&nbsp;98)</td>
+	<td data-value="28.26" class="pct low">28.26%</td>
+	<td data-value="92" class="abs low">(26&nbsp;/&nbsp;92)</td>
 	<td data-value="50" class="pct medium">50%</td>
 	<td data-value="16" class="abs medium">(8&nbsp;/&nbsp;16)</td>
-	<td data-value="35.11" class="pct low">35.11%</td>
-	<td data-value="94" class="abs low">(33&nbsp;/&nbsp;94)</td>
+	<td data-value="35.71" class="pct low">35.71%</td>
+	<td data-value="98" class="abs low">(35&nbsp;/&nbsp;98)</td>
 	</tr>
 
 </tbody>
 </table>
 </div>
 </div>
 <div class="footer">
-    <div class="meta">Generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Thu Jul 16 2015 10:01:41 GMT+0200 (CEST)</div>
+    <div class="meta">Generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Thu Jul 16 2015 11:55:11 GMT+0200 (CEST)</div>
 </div>
 <script src="prettify.js"></script>
 <script>

coverage/PhantomJS 1.9.8 (Mac OS X 0.0.0)/lcov-report/src/index.html

@@ -15,10 +15,10 @@
 <div class="header low">
     <h1>Code coverage report for <span class="entity">src/</span></h1>
     <h2>
-        Statements: <span class="metric">35.11% <small>(33 / 94)</small></span> &nbsp;&nbsp;&nbsp;&nbsp;
-        Branches: <span class="metric">25.29% <small>(22 / 87)</small></span> &nbsp;&nbsp;&nbsp;&nbsp;
+        Statements: <span class="metric">35.71% <small>(35 / 98)</small></span> &nbsp;&nbsp;&nbsp;&nbsp;
+        Branches: <span class="metric">28.26% <small>(26 / 92)</small></span> &nbsp;&nbsp;&nbsp;&nbsp;
         Functions: <span class="metric">50% <small>(8 / 16)</small></span> &nbsp;&nbsp;&nbsp;&nbsp;
-        Lines: <span class="metric">35.11% <small>(33 / 94)</small></span> &nbsp;&nbsp;&nbsp;&nbsp;
+        Lines: <span class="metric">35.71% <small>(35 / 98)</small></span> &nbsp;&nbsp;&nbsp;&nbsp;
         Ignored: <span class="metric"><span class="ignore-none">none</span></span> &nbsp;&nbsp;&nbsp;&nbsp;
     </h2>
     <div class="path"><a href="../index.html">All files</a> &#187; src/</div>
@@ -42,23 +42,23 @@ <h2>
 </thead>
 <tbody><tr>
 	<td class="file low" data-value="ng-reading-indicator.js"><a href="ng-reading-indicator.js.html">ng-reading-indicator.js</a></td>
-	<td data-value="35.11" class="pic low"><span class="cover-fill" style="width: 35px;"></span><span class="cover-empty" style="width:65px;"></span></td>
-	<td data-value="35.11" class="pct low">35.11%</td>
-	<td data-value="94" class="abs low">(33&nbsp;/&nbsp;94)</td>
-	<td data-value="25.29" class="pct low">25.29%</td>
-	<td data-value="87" class="abs low">(22&nbsp;/&nbsp;87)</td>
+	<td data-value="35.71" class="pic low"><span class="cover-fill" style="width: 35px;"></span><span class="cover-empty" style="width:65px;"></span></td>
+	<td data-value="35.71" class="pct low">35.71%</td>
+	<td data-value="98" class="abs low">(35&nbsp;/&nbsp;98)</td>
+	<td data-value="28.26" class="pct low">28.26%</td>
+	<td data-value="92" class="abs low">(26&nbsp;/&nbsp;92)</td>
 	<td data-value="50" class="pct medium">50%</td>
 	<td data-value="16" class="abs medium">(8&nbsp;/&nbsp;16)</td>
-	<td data-value="35.11" class="pct low">35.11%</td>
-	<td data-value="94" class="abs low">(33&nbsp;/&nbsp;94)</td>
+	<td data-value="35.71" class="pct low">35.71%</td>
+	<td data-value="98" class="abs low">(35&nbsp;/&nbsp;98)</td>
 	</tr>
 
 </tbody>
 </table>
 </div>
 </div>
 <div class="footer">
-    <div class="meta">Generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Thu Jul 16 2015 10:01:41 GMT+0200 (CEST)</div>
+    <div class="meta">Generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Thu Jul 16 2015 11:55:11 GMT+0200 (CEST)</div>
 </div>
 <script src="../prettify.js"></script>
 <script>

coverage/PhantomJS 1.9.8 (Mac OS X 0.0.0)/lcov-report/src/ng-reading-indicator.js.html

@@ -15,10 +15,10 @@
 <div class="header low">
     <h1>Code coverage report for <span class="entity">src/ng-reading-indicator.js</span></h1>
     <h2>
-        Statements: <span class="metric">35.11% <small>(33 / 94)</small></span> &nbsp;&nbsp;&nbsp;&nbsp;
-        Branches: <span class="metric">25.29% <small>(22 / 87)</small></span> &nbsp;&nbsp;&nbsp;&nbsp;
+        Statements: <span class="metric">35.71% <small>(35 / 98)</small></span> &nbsp;&nbsp;&nbsp;&nbsp;
+        Branches: <span class="metric">28.26% <small>(26 / 92)</small></span> &nbsp;&nbsp;&nbsp;&nbsp;
         Functions: <span class="metric">50% <small>(8 / 16)</small></span> &nbsp;&nbsp;&nbsp;&nbsp;
-        Lines: <span class="metric">35.11% <small>(33 / 94)</small></span> &nbsp;&nbsp;&nbsp;&nbsp;
+        Lines: <span class="metric">35.71% <small>(35 / 98)</small></span> &nbsp;&nbsp;&nbsp;&nbsp;
         Ignored: <span class="metric"><span class="ignore-none">none</span></span> &nbsp;&nbsp;&nbsp;&nbsp;
     </h2>
     <div class="path"><a href="../index.html">All files</a> &#187; <a href="index.html">src/</a> &#187; ng-reading-indicator.js</div>
@@ -229,7 +229,13 @@ <h2>
 202
 203
 204
-205</td><td class="line-coverage"><span class="cline-any cline-yes">1</span>
+205
+206
+207
+208
+209
+210
+211</td><td class="line-coverage"><span class="cline-any cline-yes">1</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1</span>
@@ -282,6 +288,7 @@ <h2>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1</span>
 <span class="cline-any cline-yes">4</span>
 <span class="cline-any cline-yes">8</span>
@@ -301,6 +308,10 @@ <h2>
 <span class="cline-any cline-yes">4</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">4</span>
+<span class="cline-any cline-yes">4</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">4</span>
 <span class="cline-any cline-yes">1</span>
 <span class="cline-any cline-yes">3</span>
 <span class="cline-any cline-yes">1</span>
@@ -355,23 +366,24 @@ <h2>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1</span>
 <span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
@@ -471,6 +483,7 @@ <h2>
               expandOffset = null,
               expandOnHeadline = false,
               options = {
+                calcFrom: 'middle',
                 showHeadline: true,
                 expand: true,
                 type: 'small',
@@ -503,6 +516,10 @@ <h2>
           }
 &nbsp;
           extendDeep(options, scope.userOptions());
+&nbsp;
+          <span class="missing-if-branch" title="else path not taken" >E</span>if (options.calcFrom !== 'bottom' &amp;&amp; options.calcFrom !== 'top' &amp;&amp; options.calcFrom !== 'bottom') {
+            options.calcFrom = 'middle';
+          }
 &nbsp;
           if (!options.expand &amp;&amp; options.type !== 'small') {
             angular.element(element).addClass('ng-reading-indicator-expanded');
@@ -559,13 +576,16 @@ <h2>
 &nbsp;
 <span class="fstat-no" title="function not covered" >          function updateProgress() {</span>
 <span class="cstat-no" title="statement not covered" >            var scrollPos = angular.element($window)[0].scrollY || angular.element($window)[0].pageYOffset;</span>
+<span class="cstat-no" title="statement not covered" >            var origScrollPos = scrollPos;</span>
 &nbsp;
-<span class="cstat-no" title="statement not covered" >            if (article[0].scrollHeight - window.innerHeight &gt; 0) {</span>
-<span class="cstat-no" title="statement not covered" >              progress = (scrollPos &lt;= top) ? 0 : ((scrollPos-top) / bottom) * 100;</span>
-            } else {
-<span class="cstat-no" title="statement not covered" >              progress = (scrollPos &lt;= top) ? 0 : (((scrollPos-top)+((top + bottom) - (document.body.offsetHeight - window.innerHeight))) / bottom) * 100;</span>
+<span class="cstat-no" title="statement not covered" >            if (options.calcFrom === 'middle') {</span>
+<span class="cstat-no" title="statement not covered" >              scrollPos = origScrollPos + (window.innerHeight / 2);</span>
+            } else <span class="cstat-no" title="statement not covered" >if (options.calcFrom === 'bottom') {</span>
+<span class="cstat-no" title="statement not covered" >              scrollPos = origScrollPos + window.innerHeight;</span>
             }
 &nbsp;
+<span class="cstat-no" title="statement not covered" >            progress = (scrollPos &lt;= top) ? 0 : ((scrollPos-top) / (top-bottom)) * 100;</span>
+&nbsp;
 <span class="cstat-no" title="statement not covered" >            if (options.readingTime.enable) {</span>
 <span class="cstat-no" title="statement not covered" >              scope.$apply( <span class="fstat-no" title="function not covered" >function(){</span></span>
 <span class="cstat-no" title="statement not covered" >                scope.readingTime = calculateReadingTime();</span>
@@ -576,8 +596,6 @@ <h2>
 &nbsp;
 <span class="cstat-no" title="statement not covered" >            progressBar.style.width = progress + '%';</span>
 &nbsp;
-<span class="cstat-no" title="statement not covered" >            console.log(options, expandOffset.top, options.topOffset);</span>
-&nbsp;
 <span class="cstat-no" title="statement not covered" >            if ((!options.expand &amp;&amp; options.type === 'small' &amp;&amp; scrollPos &gt;= (top + expandOffset.top + options.topOffset)) || (options.expand &amp;&amp; scrollPos &gt; top &amp;&amp; scrollPos &lt; (top + expandOffset.top + options.topOffset))) {</span>
 <span class="cstat-no" title="statement not covered" >              angular.element(element)[0].style.height = '5px';</span>
 <span class="cstat-no" title="statement not covered" >              angular.element(element).addClass('ng-reading-indicator-shrink');</span>
@@ -642,7 +660,7 @@ <h2>
 
 </div>
 <div class="footer">
-    <div class="meta">Generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Thu Jul 16 2015 10:01:41 GMT+0200 (CEST)</div>
+    <div class="meta">Generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Thu Jul 16 2015 11:55:11 GMT+0200 (CEST)</div>
 </div>
 <script src="../prettify.js"></script>
 <script>