From b29e2af93a008a1d6d288356125745fb83fd8775 Mon Sep 17 00:00:00 2001 From: Immo Schulz-Gerlach Date: Thu, 4 Oct 2018 11:28:27 +0200 Subject: [PATCH] updated README clearified that color option will be ignored in CSS mode. --- README.html | 14 ++-- README.md | 2 +- doc/index.html | 4 +- doc/jQuery.fn.html | 19 +++-- doc/jQuery.fn.progressPie.contentPlugin.html | 57 ++++++++++++-- doc/jQuery.fn.progressPie.html | 29 +++---- doc/jQuery.html | 10 +-- ...query-progresspiesvg-checkComplete.js.html | 2 +- ...jquery-progresspiesvg-controlIcons.js.html | 2 +- doc/jquery-progresspiesvg-errorIcons.js.html | 2 +- doc/jquery-progresspiesvg-image.js.html | 2 +- ...jquery-progresspiesvg-valueDisplay.js.html | 2 +- doc/jquery-progresspiesvg.js.html | 34 +++++---- doc/progressPies.html | 14 ++-- doc/progresspiesvgAppl.js.html | 2 +- doc/styles/jsdoc-default.css | 75 ++++++++++--------- 16 files changed, 168 insertions(+), 102 deletions(-) diff --git a/README.html b/README.html index 65450f3..9964619 100644 --- a/README.html +++ b/README.html @@ -118,8 +118,8 @@

Basics

Example corresponding to both data elements above:

<script type="text/javascript">
-    \((function() {
-        \)(".percent").progressPie(); //default mode
+    $(function() {
+        $(".percent").progressPie(); //default mode
         $(".pie[data-percent]").progressPie({ //specifying options object
             valueData:"percent",
             color:"navy",
@@ -133,8 +133,8 @@ 
Basics

 
  • In case the values aren’t static but should be updatable, the initialization should be done with the setupProgressPie() method and the parameterless progressPie() method can be used multiple times to (re)draw die graph:
    
 
 
    <script type="text/javascript">
-    \((function() {
-        \)(".pie[data-percent]").setupProgressPie({ //specifying options
+    $(function() {
+        $(".pie[data-percent]").setupProgressPie({ //specifying options
             valueData:"percent",
             color:"navy",
             size:30
@@ -159,8 +159,8 @@ 
    Basics
    
 
 The JavaScript call:
 
-
    \(("#pie1").setupProgressPie({
-    valueInput: \)("#inp1")
+
    $("#pie1").setupProgressPie({
+    valueInput: $("#inp1")
 }).progressPie();
 
    
 
@@ -182,7 +182,7 @@ 
    Options
    
 
  • $.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/README.md b/README.md
index 8955e3b..76dc915 100644
--- 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
index fd61990..907613b 100644
--- a/doc/index.html
+++ b/doc/index.html
@@ -159,7 +159,7 @@ 
    Options
    If you simply call progressPie(), the plug-in wi
 
  • $.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.
      See JSDoc for these Mode constants and the examples page on content plug-ins!
    • 
 
  • $.fn.progressPie.Mode.IMASK: Inverted Mask Mode: This resembles the MASK 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.
      In this mode, too, you may alter the default colors of the mask (defining a grade of transparency) by other options.
      See JSDoc for these Mode constants and the examples page on content plug-ins!
    • 
 
@@ -497,7 +497,7 @@ 
    Home
    Namespaces
    • 
 
 
 
 
diff --git a/doc/jQuery.fn.html b/doc/jQuery.fn.html
index f7dd807..2656bd6 100644
--- a/doc/jQuery.fn.html
+++ b/doc/jQuery.fn.html
@@ -29,10 +29,7 @@ 
      Namespace: fn
      
 
      
     
         
      
-            jQuery.
-        
-        fn
-        
      
+            jQuery.fn
         
     
 
      
@@ -105,7 +102,9 @@ 
      
 
     
 
-     
+    
+
+    
 
     
         
      Namespaces
      
@@ -126,7 +125,9 @@ 
      Methods
      
 
     
 
+    
     
      (static) progressPie()(options)
      
+    
 
     
 
@@ -282,12 +283,16 @@ 
      Returns:
      
 
 
 
+
+
         
             
 
     
 
+    
     
      (static) setupProgressPie()(options, replace)
      
+    
 
     
 
@@ -476,6 +481,8 @@ 
      Returns:
      
 
 
 
+
+
         
     
 
@@ -498,7 +505,7 @@ 
      Home
      Namespaces
      • 
 
 
 
 
diff --git a/doc/jQuery.fn.progressPie.contentPlugin.html b/doc/jQuery.fn.progressPie.contentPlugin.html
index 39c55c0..67890f1 100644
--- a/doc/jQuery.fn.progressPie.contentPlugin.html
+++ b/doc/jQuery.fn.progressPie.contentPlugin.html
@@ -29,10 +29,7 @@ 
        Namespace: contentPlugin
        
 
        
     
         
        
-            jQuery.fn.progressPie.
-        
-        contentPlugin
-        
        
+            jQuery.fn.progressPie.contentPlugin
         
     
 
        
@@ -85,7 +82,7 @@ 
        
     
     
        Source:
        
     
        
     
 
@@ -107,7 +104,9 @@ 
        
 
     
 
-     
+    
+
+    
 
     
 
@@ -1679,7 +1678,9 @@ 
        Methods
        
 
     
 
+    
     
        (static) backgroundRect(args)
        
+    
 
     
 
@@ -1829,12 +1830,16 @@ 
        Requires:
        
 
 
 
+
+
         
             
 
     
 
+    
     
        (static) checkComplete(args)
        
+    
 
     
 
@@ -2005,12 +2010,16 @@ 
        Requires:
        
 
 
 
+
+
         
             
 
     
 
+    
     
        (static) cross(args)
        
+    
 
     
 
@@ -2191,12 +2200,16 @@ 
        Requires:
        
 
 
 
+
+
         
             
 
     
 
+    
     
        (static) exclamationMark(args)
        
+    
 
     
 
@@ -2333,12 +2346,16 @@ 
        Requires:
        
 
 
 
+
+
         
             
 
     
 
+    
     
        (static) image(args)
        
+    
 
     
 
@@ -2517,12 +2534,16 @@ 
        Requires:
        
 
 
 
+
+
         
             
 
     
 
+    
     
        (static) pause(args)
        
+    
 
     
 
@@ -2655,12 +2676,16 @@ 
        Requires:
        
 
 
 
+
+
         
             
 
     
 
+    
     
        (static) play(args)
        
+    
 
     
 
@@ -2797,12 +2822,16 @@ 
        Requires:
        
 
 
 
+
+
         
             
 
     
 
+    
     
        (static) precent(args)
        
+    
 
     
 
@@ -2959,12 +2988,16 @@ 
        Requires:
        
 
 
 
+
+
         
             
 
     
 
+    
     
        (static) rawValue(args)
        
+    
 
     
 
@@ -3117,12 +3150,16 @@ 
        Requires:
        
 
 
 
+
+
         
             
 
     
 
+    
     
        (static) stop(args)
        
+    
 
     
 
@@ -3269,12 +3306,16 @@ 
        Requires:
        
 
 
 
+
+
         
             
 
     
 
+    
     
        (static) warning(args)
        
+    
 
     
 
@@ -3419,6 +3460,8 @@ 
        Requires:
        
 
 
 
+
+
         
     
 
@@ -3441,7 +3484,7 @@ 
        Home
        Namespaces
        • 
 
 
 
 
diff --git a/doc/jQuery.fn.progressPie.html b/doc/jQuery.fn.progressPie.html
index a0d87df..b576f99 100644
--- a/doc/jQuery.fn.progressPie.html
+++ b/doc/jQuery.fn.progressPie.html
@@ -29,10 +29,7 @@ 
          Namespace: progressPie
          
 
          
     
         
          
-            jQuery.fn.
-        
-        progressPie
-        
          
+            jQuery.fn.progressPie
         
     
 
          
@@ -98,7 +95,9 @@ 
          
 
     
 
-     
+    
+
+    
 
     
         
          Namespaces
          
@@ -382,7 +381,7 @@ 
          Properties:
          
     
     
          Source:
          
     
          
     
 
@@ -540,7 +539,7 @@ 
          Properties:
          
     
     
          Source:
          
     
          
     
 
@@ -734,7 +733,7 @@ 
          Properties:
          
     
     
          Source:
          
     
          
     
 
@@ -1363,7 +1362,7 @@ 
          Properties:
          
     
     
          Source:
          
     
          
     
 
@@ -1430,7 +1429,7 @@ 
          (stat
     
     
          Source:
          
     
          
     
 
@@ -1498,7 +1497,7 @@ 
          (static) <
     
     
          Source:
          
     
          
     
 
@@ -1525,7 +1524,9 @@ 
          Methods
          
 
     
 
+    
     
          (static) colorByPercent(percent, alpha)
          
+    
 
     
 
@@ -1654,7 +1655,7 @@ 
          Parameters:
          
     
     
          Source:
          
     
          
     
 
@@ -1680,6 +1681,8 @@ 
          Parameters:
          
 
 
 
+
+
         
     
 
@@ -1702,7 +1705,7 @@ 
          Home
          Namespaces
          • 
 
 
 
 
diff --git a/doc/jQuery.html b/doc/jQuery.html
index 8d4a9b6..126da92 100644
--- a/doc/jQuery.html
+++ b/doc/jQuery.html
@@ -28,9 +28,7 @@ 
            Namespace: jQuery
            
 
 
            
     
-        
            
-        jQuery
-        
            
+        
            jQuery
            
         
     
 
            
@@ -103,7 +101,9 @@ 
            
 
     
 
-     
+    
+
+    
 
     
         
            Namespaces
            
@@ -137,7 +137,7 @@ 
            Home
            Namespaces
            • 
 
 
 
 
diff --git a/doc/jquery-progresspiesvg-checkComplete.js.html b/doc/jquery-progresspiesvg-checkComplete.js.html
index 2403111..62387d2 100644
--- a/doc/jquery-progresspiesvg-checkComplete.js.html
+++ b/doc/jquery-progresspiesvg-checkComplete.js.html
@@ -236,7 +236,7 @@ 
              Home
              Namespaces
              • 
 
 
 
 
diff --git a/doc/jquery-progresspiesvg-controlIcons.js.html b/doc/jquery-progresspiesvg-controlIcons.js.html
index ee4a5ae..3d11ce6 100644
--- a/doc/jquery-progresspiesvg-controlIcons.js.html
+++ b/doc/jquery-progresspiesvg-controlIcons.js.html
@@ -198,7 +198,7 @@ 
                Home
                Namespaces
                • 
 
 
 
 
diff --git a/doc/jquery-progresspiesvg-errorIcons.js.html b/doc/jquery-progresspiesvg-errorIcons.js.html
index 0d83e1a..be6b6de 100644
--- a/doc/jquery-progresspiesvg-errorIcons.js.html
+++ b/doc/jquery-progresspiesvg-errorIcons.js.html
@@ -482,7 +482,7 @@ 
                  Home
                  Namespaces
                  • 
 
 
 
 
diff --git a/doc/jquery-progresspiesvg-image.js.html b/doc/jquery-progresspiesvg-image.js.html
index 63ec8bf..a7accb8 100644
--- a/doc/jquery-progresspiesvg-image.js.html
+++ b/doc/jquery-progresspiesvg-image.js.html
@@ -238,7 +238,7 @@ 
                    Home
                    Namespaces
                    • 
 
 
 
 
diff --git a/doc/jquery-progresspiesvg-valueDisplay.js.html b/doc/jquery-progresspiesvg-valueDisplay.js.html
index caa7fc8..2aacf2c 100644
--- a/doc/jquery-progresspiesvg-valueDisplay.js.html
+++ b/doc/jquery-progresspiesvg-valueDisplay.js.html
@@ -202,7 +202,7 @@ 
                      Home
                      Namespaces
                      • 
 
 
 
 
diff --git a/doc/jquery-progresspiesvg.js.html b/doc/jquery-progresspiesvg.js.html
index a0fd89a..f3316c4 100644
--- a/doc/jquery-progresspiesvg.js.html
+++ b/doc/jquery-progresspiesvg.js.html
@@ -628,23 +628,27 @@ 
                        Source: jquery-progresspiesvg.js
                        
 		function getModeAndColor(me, opts) {
 			var mode = opts.mode;
 			var color = opts.color;
-			//color may be a function or a constant
-			var ct = typeof color;
-			if (ct !== "undefined" && ct !== "string" && ct !== "function") {
-				throw new Error("option 'color' has to be either a function or a string, but is of type '" + ct + "'!");
-			}
-			if (ct === 'function') {
-				mode = internalMode.USER_COLOR_FUNC;
+			if (mode === self.Mode.CSS) {
+				color = undefined;
 			} else {
-				if (ct === 'undefined' && typeof opts.colorAttr === "string") {
-					color = me.attr(opts.colorAttr);
+				//color may be a function or a constant
+				var ct = typeof color;
+				if (ct !== "undefined" && ct !== "string" && ct !== "function") {
+					throw new Error("option 'color' has to be either a function or a string, but is of type '" + ct + "'!");
 				}
-				if (typeof color === 'string') {
-					mode = internalMode.USER_COLOR_CONST;
-				} else if (typeof opts.colorFunctionAttr === "string") {
-					color = me.attr(opts.colorFunctionAttr);
+				if (ct === 'function') {
+					mode = internalMode.USER_COLOR_FUNC;
+				} else {
+					if (ct === 'undefined' && typeof opts.colorAttr === "string") {
+						color = me.attr(opts.colorAttr);
+					}
 					if (typeof color === 'string') {
-						mode = internalMode.DATA_ATTR_FUNC;
+						mode = internalMode.USER_COLOR_CONST;
+					} else if (typeof opts.colorFunctionAttr === "string") {
+						color = me.attr(opts.colorFunctionAttr);
+						if (typeof color === 'string') {
+							mode = internalMode.DATA_ATTR_FUNC;
+						}
 					}
 				}
 			}
@@ -1379,7 +1383,7 @@ 
                        Home
                        Namespaces
                        • 
 
 
 
 
diff --git a/doc/progressPies.html b/doc/progressPies.html
index 79d0930..928f47f 100644
--- a/doc/progressPies.html
+++ b/doc/progressPies.html
@@ -28,9 +28,7 @@ 
                          Namespace: progressPies
                          
 
 
                          
     
-        
                          
-        progressPies
-        
                          
+        
                          progressPies
                          
         
     
 
                          
@@ -140,7 +138,9 @@ 
                          
 
     
 
-     
+    
+
+    
 
     
 
@@ -225,7 +225,9 @@ 
                          Methods
                          
 
     
 
+    
     
                          (static) draw()
                          
+    
 
     
 
@@ -309,6 +311,8 @@ 
                          (static) drawHome
                          Namespaces
                          • 
 
 
 
 
diff --git a/doc/progresspiesvgAppl.js.html b/doc/progresspiesvgAppl.js.html
index 7acefa3..3b80d6d 100644
--- a/doc/progresspiesvgAppl.js.html
+++ b/doc/progresspiesvgAppl.js.html
@@ -200,7 +200,7 @@ 
                            Home
                            Namespaces
                            • 
 
 
 
 
diff --git a/doc/styles/jsdoc-default.css b/doc/styles/jsdoc-default.css
index 24aa20f..9207bc8 100644
--- a/doc/styles/jsdoc-default.css
+++ b/doc/styles/jsdoc-default.css
@@ -78,6 +78,10 @@ article dl {
     margin-bottom: 40px;
 }
 
+article img {
+  max-width: 100%;
+}
+
 section
 {
     display: block;
@@ -153,7 +157,7 @@ h1
     margin: 12px 24px 20px;
 }
 
-h2, h3
+h2, h3.subsection-title
 {
     font-size: 30px;
     font-weight: 700;
@@ -161,6 +165,13 @@ h2, h3
     margin-bottom: 12px;
 }
 
+h3
+{
+    font-size: 24px;
+    letter-spacing: -0.5px;
+    margin-bottom: 12px;
+}
+
 h4
 {
     font-size: 18px;
@@ -185,8 +196,34 @@ h6
     font-style: italic;
 }
 
-.ancestors { color: #999; }
-.ancestors a
+table
+{
+    border-spacing: 0;
+    border: 0;
+    border-collapse: collapse;
+}
+
+td, th
+{
+    border: 1px solid #ddd;
+    margin: 0px;
+    text-align: left;
+    vertical-align: top;
+    padding: 4px 6px;
+    display: table-cell;
+}
+
+thead tr
+{
+    background-color: #ddd;
+    font-weight: bold;
+}
+
+th { border-right: 1px solid #aaa; }
+tr > th:last-child { border-right: 1px solid #ddd; }
+
+.ancestors, .attribs { color: #999; }
+.ancestors a, .attribs a
 {
     color: #999 !important;
     text-decoration: none;
@@ -296,44 +333,12 @@ h6
   user-select: text;
 }
 
-.params, .props
-{
-    border-spacing: 0;
-    border: 0;
-    border-collapse: collapse;
-}
-
 .params .name, .props .name, .name code {
     color: #4D4E53;
     font-family: Consolas, Monaco, 'Andale Mono', monospace;
     font-size: 100%;
 }
 
-.params td, .params th, .props td, .props th
-{
-    border: 1px solid #ddd;
-    margin: 0px;
-    text-align: left;
-    vertical-align: top;
-    padding: 4px 6px;
-    display: table-cell;
-}
-
-.params thead tr, .props thead tr
-{
-    background-color: #ddd;
-    font-weight: bold;
-}
-
-.params .params thead tr, .props .props thead tr
-{
-    background-color: #fff;
-    font-weight: bold;
-}
-
-.params th, .props th { border-right: 1px solid #aaa; }
-.params thead .last, .props thead .last { border-right: 1px solid #ddd; }
-
 .params td.description > p:first-child,
 .props td.description > p:first-child
 {