updated README

clearified that color option will be ignored in CSS mode.
isg-software · Oct 4, 2018 · b29e2af · b29e2af
1 parent 8316bec
commit b29e2af
Show file tree

Hide file tree

Showing 16 changed files with 168 additions and 102 deletions.
diff --git a/README.html b/README.html
@@ -118,8 +118,8 @@ <h4 id="basics">Basics</h4>
 Example corresponding to both data elements above:</p>
 
 <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
-    \((function() {
-        \)(&quot;.percent&quot;).progressPie(); //default mode
+    $(function() {
+        $(&quot;.percent&quot;).progressPie(); //default mode
         $(&quot;.pie[data-percent]&quot;).progressPie({ //specifying options object
             valueData:&quot;percent&quot;,
             color:&quot;navy&quot;,
@@ -133,8 +133,8 @@ <h4 id="basics">Basics</h4>
 <li><p>In case the values aren&#8217;t static but should be updatable, the initialization should be done with the <code>setupProgressPie()</code> method and the parameterless <code>progressPie()</code> method can be used multiple times to (re)draw die graph:</p>
 
 <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
-    \((function() {
-        \)(&quot;.pie[data-percent]&quot;).setupProgressPie({ //specifying options
+    $(function() {
+        $(&quot;.pie[data-percent]&quot;).setupProgressPie({ //specifying options
             valueData:&quot;percent&quot;,
             color:&quot;navy&quot;,
             size:30
@@ -159,8 +159,8 @@ <h4 id="basics">Basics</h4>
 
 The JavaScript call:
 
-<pre><code>\((&quot;#pie1&quot;).setupProgressPie({
-    valueInput: \)(&quot;#inp1&quot;)
+<pre><code>$(&quot;#pie1&quot;).setupProgressPie({
+    valueInput: $(&quot;#inp1&quot;)
 }).progressPie();
 </code></pre>
 
@@ -182,7 +182,7 @@ <h4 id="options">Options</h4>
 <li><code>$.fn.progressPie.Mode.RED</code>: The pie is drawn in red color regardless of the percentual value.</li>
 <li><code>$.fn.progressPie.Mode.GREEN</code>: The pie is drawn in green color regardless of the percentual value.</li>
 <li><code>$.fn.progressPie.Mode.COLOR</code>: The color of the pie is depending on the percentual value (see above). The color is the same green color as in mode GREEN for a value of 100 percent, the same red color as in mode RED for a value of 0%, a yellowish mix of both for 50% and a gradient in between green and yellow for values greater than 50% resp. between red and yellow for values less than 50%.</li>
-<li><code>$.fn.progressPie.Mode.CSS</code>: The colors (<code>stroke</code> of foreground and background and <code>fill</code> of background) as well as the <code>vertical-align</code> style of the root <code>svg</code> element are left unspecified. If this mode is chosen, you have to define the colors and vertical alignment via CSS rules (see examples)!</li>
+<li><code>$.fn.progressPie.Mode.CSS</code>: The colors (<code>stroke</code> of foreground and background and <code>fill</code> of background) as well as the <code>vertical-align</code> style of the root <code>svg</code> element are left unspecified. If this mode is chosen, you have to define the colors and vertical alignment via CSS rules (see examples)! Note: If the <code>mode</code> option is set to CSS mode, any <code>color</code> option will be ignored!</li>
 <li><code>$.fn.progressPie.Mode.MASK</code>: The pie or ring chart is not added to the main, visible area of the SVG but is instead inserted as a mask which is then applied to the topmost background layer. This requires at least one background layer to be present: Any layer other than the pie layer (which is inserted in any mode but MASK or IMASK) can only be inserted by a content plug-in, i.e. this mode is only made to be combined with at least one content plug-in (see the <code>contentPlugin</code> option). Since content plug-ins may insert either a foreground layer (draw on top of the chart) or a background layer, the <code>contentPlugin</code> option must hold at least one plug-in drawing into the background.<br />
 As has already been said, the mask defined by the pie chart gets applied to the topmost background layer. By default that means that the output of the first content plug-in drawing into the background will only be visible in those parts of the graphic which would normally be covered by the pie chart.<br />
 In MASK mode the space around the pie or ring chart is always transparent, the pie itself is white by default. If you understand masking and wish to change that, you may alter the colors of the chart and its background (filled background inside the circle) by using using options like <code>strokeColor</code>, <code>color</code>, <code>backgroundColor</code> etc., the space outside the chart&#8217;s circle is always transparent in this mode.<br />

diff --git a/README.md b/README.md
@@ -138,7 +138,7 @@ To modify the looks or behaviour, the function takes exactly one argument, which
 	* `$.fn.progressPie.Mode.RED`: The pie is drawn in red color regardless of the percentual value.
 	* `$.fn.progressPie.Mode.GREEN`: The pie is drawn in green color regardless of the percentual value.
 	* `$.fn.progressPie.Mode.COLOR`: The color of the pie is depending on the percentual value (see above). The color is the same green color as in mode GREEN for a value of 100 percent, the same red color as in mode RED for a value of 0%, a yellowish mix of both for 50% and a gradient in between green and yellow for values greater than 50% resp. between red and yellow for values less than 50%.
-	* `$.fn.progressPie.Mode.CSS`: The colors (`stroke` of foreground and background and `fill` of background) as well as the `vertical-align` style of the root `svg` element are left unspecified. If this mode is chosen, you have to define the colors and vertical alignment via CSS rules (see examples)!
+	* `$.fn.progressPie.Mode.CSS`: The colors (`stroke` of foreground and background and `fill` of background) as well as the `vertical-align` style of the root `svg` element are left unspecified. If this mode is chosen, you have to define the colors and vertical alignment via CSS rules (see examples)! Note: If the `mode` option is set to CSS mode, any `color` option will be ignored!
 	* `$.fn.progressPie.Mode.MASK`: The pie or ring chart is not added to the main, visible area of the SVG but is instead inserted as a mask which is then applied to the topmost background layer. This requires at least one background layer to be present: Any layer other than the pie layer (which is inserted in any mode but MASK or IMASK) can only be inserted by a content plug-in, i.e. this mode is only made to be combined with at least one content plug-in (see the `contentPlugin` option). Since content plug-ins may insert either a foreground layer (draw on top of the chart) or a background layer, the `contentPlugin` option must hold at least one plug-in drawing into the background.        
 		As has already been said, the mask defined by the pie chart gets applied to the topmost background layer. By default that means that the output of the first content plug-in drawing into the background will only be visible in those parts of the graphic which would normally be covered by the pie chart.     
 		In MASK mode the space around the pie or ring chart is always transparent, the pie itself is white by default. If you understand masking and wish to change that, you may alter the colors of the chart and its background (filled background inside the circle) by using using options like `strokeColor`, `color`, `backgroundColor` etc., the space outside the chart's circle is always transparent in this mode.   

diff --git a/doc/index.html b/doc/index.html
@@ -159,7 +159,7 @@ <h4>Options</h4><p>If you simply call <code>progressPie()</code>, the plug-in wi
 <li><code>$.fn.progressPie.Mode.RED</code>: The pie is drawn in red color regardless of the percentual value.</li>
 <li><code>$.fn.progressPie.Mode.GREEN</code>: The pie is drawn in green color regardless of the percentual value.</li>
 <li><code>$.fn.progressPie.Mode.COLOR</code>: The color of the pie is depending on the percentual value (see above). The color is the same green color as in mode GREEN for a value of 100 percent, the same red color as in mode RED for a value of 0%, a yellowish mix of both for 50% and a gradient in between green and yellow for values greater than 50% resp. between red and yellow for values less than 50%.</li>
-<li><code>$.fn.progressPie.Mode.CSS</code>: The colors (<code>stroke</code> of foreground and background and <code>fill</code> of background) as well as the <code>vertical-align</code> style of the root <code>svg</code> element are left unspecified. If this mode is chosen, you have to define the colors and vertical alignment via CSS rules (see examples)!</li>
+<li><code>$.fn.progressPie.Mode.CSS</code>: The colors (<code>stroke</code> of foreground and background and <code>fill</code> of background) as well as the <code>vertical-align</code> style of the root <code>svg</code> element are left unspecified. If this mode is chosen, you have to define the colors and vertical alignment via CSS rules (see examples)! Note: If the <code>mode</code> option is set to CSS mode, any <code>color</code> option will be ignored!</li>
 <li><code>$.fn.progressPie.Mode.MASK</code>: The pie or ring chart is not added to the main, visible area of the SVG but is instead inserted as a mask which is then applied to the topmost background layer. This requires at least one background layer to be present: Any layer other than the pie layer (which is inserted in any mode but MASK or IMASK) can only be inserted by a content plug-in, i.e. this mode is only made to be combined with at least one content plug-in (see the <code>contentPlugin</code> option). Since content plug-ins may insert either a foreground layer (draw on top of the chart) or a background layer, the <code>contentPlugin</code> option must hold at least one plug-in drawing into the background.<br>  As has already been said, the mask defined by the pie chart gets applied to the topmost background layer. By default that means that the output of the first content plug-in drawing into the background will only be visible in those parts of the graphic which would normally be covered by the pie chart.<br>  In MASK mode the space around the pie or ring chart is always transparent, the pie itself is white by default. If you understand masking and wish to change that, you may alter the colors of the chart and its background (filled background inside the circle) by using using options like <code>strokeColor</code>, <code>color</code>, <code>backgroundColor</code> etc., the space outside the chart's circle is always transparent in this mode.<br>  See JSDoc for these Mode constants and the examples page on content plug-ins!</li>
 <li><code>$.fn.progressPie.Mode.IMASK</code>: Inverted Mask Mode: This resembles the <code>MASK</code> mode above, only the mask in inverted: By default, the foreground of the pie is black and all the background (inside and outside of the chart) is white, meaning any part of the first background layer which would be visible in normal mode will still be visible, but the chart is not drawn on top of that background layer, but it's “cut out of” the background, leaving a pie-/ring-shaped transparent hole in the background layer.<br>  In this mode, too, you may alter the default colors of the mask (defining a grade of transparency) by other options.<br>  See JSDoc for these Mode constants and the examples page on content plug-ins!</li>
 </ul>
@@ -497,7 +497,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li><a href="jQuery
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.2</a> on Sat Sep 29 2018 18:48:02 GMT+0200 (CEST)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Thu Oct 04 2018 11:27:43 GMT+0200 (CEST)
 </footer>
 
 <script> prettyPrint(); </script>

diff --git a/doc/jQuery.fn.html b/doc/jQuery.fn.html
@@ -29,10 +29,7 @@ <h1 class="page-title">Namespace: fn</h1>
 <header>
 
         <h2>
-            <span class="ancestors"><a href="jQuery.html">jQuery</a>.</span>
-
-        fn
-        </h2>
+            <span class="ancestors"><a href="jQuery.html">jQuery</a>.</span>fn</h2>
 
 
 </header>
@@ -105,7 +102,9 @@ <h2>
 
 
 
-
+
+
+
 
 
         <h3 class="subsection-title">Namespaces</h3>
@@ -126,7 +125,9 @@ <h3 class="subsection-title">Methods</h3>
 
 
 
+
     <h4 class="name" id=".progressPie()"><span class="type-signature">(static) </span>progressPie()<span class="signature">(options)</span><span class="type-signature"></span></h4>
+
 
 
 
@@ -282,12 +283,16 @@ <h5>Returns:</h5>
 
 
 
+
+
 
 
 
 
 
+
     <h4 class="name" id=".setupProgressPie()"><span class="type-signature">(static) </span>setupProgressPie()<span class="signature">(options, replace)</span><span class="type-signature"></span></h4>
+
 
 
 
@@ -476,6 +481,8 @@ <h5>Returns:</h5>
 
 
 
+
+
 
 
 
@@ -498,7 +505,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li><a href="jQuery
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.2</a> on Sat Sep 29 2018 18:48:02 GMT+0200 (CEST)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Thu Oct 04 2018 11:27:43 GMT+0200 (CEST)
 </footer>
 
 <script> prettyPrint(); </script>

diff --git a/doc/jQuery.fn.progressPie.contentPlugin.html b/doc/jQuery.fn.progressPie.contentPlugin.html
@@ -29,10 +29,7 @@ <h1 class="page-title">Namespace: contentPlugin</h1>
 <header>
 
         <h2>
-            <span class="ancestors"><a href="jQuery.html">jQuery</a><a href="jQuery.fn.html">.fn</a><a href="jQuery.fn.progressPie.html">.progressPie</a>.</span>
-
-        contentPlugin
-        </h2>
+            <span class="ancestors"><a href="jQuery.html">jQuery</a><a href="jQuery.fn.html">.fn</a><a href="jQuery.fn.progressPie.html">.progressPie</a>.</span>contentPlugin</h2>
 
 
 </header>
@@ -85,7 +82,7 @@ <h2>
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="jquery-progresspiesvg.js.html">jquery-progresspiesvg.js</a>, <a href="jquery-progresspiesvg.js.html#line1298">line 1298</a>
+        <a href="jquery-progresspiesvg.js.html">jquery-progresspiesvg.js</a>, <a href="jquery-progresspiesvg.js.html#line1302">line 1302</a>
     </li></ul></dd>
 
 
@@ -107,7 +104,9 @@ <h2>
 
 
 
-
+
+
+
 
 
 
@@ -1679,7 +1678,9 @@ <h3 class="subsection-title">Methods</h3>
 
 
 
+
     <h4 class="name" id=".backgroundRect"><span class="type-signature">(static) </span>backgroundRect<span class="signature">(args)</span><span class="type-signature"></span></h4>
+
 
 
 
@@ -1829,12 +1830,16 @@ <h5>Requires:</h5>
 
 
 
+
+
 
 
 
 
 
+
     <h4 class="name" id=".checkComplete"><span class="type-signature">(static) </span>checkComplete<span class="signature">(args)</span><span class="type-signature"></span></h4>
+
 
 
 
@@ -2005,12 +2010,16 @@ <h5>Requires:</h5>
 
 
 
+
+
 
 
 
 
 
+
     <h4 class="name" id=".cross"><span class="type-signature">(static) </span>cross<span class="signature">(args)</span><span class="type-signature"></span></h4>
+
 
 
 
@@ -2191,12 +2200,16 @@ <h5>Requires:</h5>
 
 
 
+
+
 
 
 
 
 
+
     <h4 class="name" id=".exclamationMark"><span class="type-signature">(static) </span>exclamationMark<span class="signature">(args)</span><span class="type-signature"></span></h4>
+
 
 
 
@@ -2333,12 +2346,16 @@ <h5>Requires:</h5>
 
 
 
+
+
 
 
 
 
 
+
     <h4 class="name" id=".image"><span class="type-signature">(static) </span>image<span class="signature">(args)</span><span class="type-signature"></span></h4>
+
 
 
 
@@ -2517,12 +2534,16 @@ <h5>Requires:</h5>
 
 
 
+
+
 
 
 
 
 
+
     <h4 class="name" id=".pause"><span class="type-signature">(static) </span>pause<span class="signature">(args)</span><span class="type-signature"></span></h4>
+
 
 
 
@@ -2655,12 +2676,16 @@ <h5>Requires:</h5>
 
 
 
+
+
 
 
 
 
 
+
     <h4 class="name" id=".play"><span class="type-signature">(static) </span>play<span class="signature">(args)</span><span class="type-signature"></span></h4>
+
 
 
 
@@ -2797,12 +2822,16 @@ <h5>Requires:</h5>
 
 
 
+
+
 
 
 
 
 
+
     <h4 class="name" id=".precent"><span class="type-signature">(static) </span>precent<span class="signature">(args)</span><span class="type-signature"></span></h4>
+
 
 
 
@@ -2959,12 +2988,16 @@ <h5>Requires:</h5>
 
 
 
+
+
 
 
 
 
 
+
     <h4 class="name" id=".rawValue"><span class="type-signature">(static) </span>rawValue<span class="signature">(args)</span><span class="type-signature"></span></h4>
+
 
 
 
@@ -3117,12 +3150,16 @@ <h5>Requires:</h5>
 
 
 
+
+
 
 
 
 
 
+
     <h4 class="name" id=".stop"><span class="type-signature">(static) </span>stop<span class="signature">(args)</span><span class="type-signature"></span></h4>
+
 
 
 
@@ -3269,12 +3306,16 @@ <h5>Requires:</h5>
 
 
 
+
+
 
 
 
 
 
+
     <h4 class="name" id=".warning"><span class="type-signature">(static) </span>warning<span class="signature">(args)</span><span class="type-signature"></span></h4>
+
 
 
 
@@ -3419,6 +3460,8 @@ <h5>Requires:</h5>
 
 
 
+
+
 
 
 
@@ -3441,7 +3484,7 @@ <h2><a href="index.html">Home</a></h2><h3>Namespaces</h3><ul><li><a href="jQuery
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.2</a> on Sat Sep 29 2018 18:48:02 GMT+0200 (CEST)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Thu Oct 04 2018 11:27:43 GMT+0200 (CEST)
 </footer>
 
 <script> prettyPrint(); </script>