Commits

Ben Bass  committed 6737f61

minor updates, jshint fixes

  • Participants
  • Parent commits 8701061

Comments (0)

Files changed (2)

 <!DOCTYPE html>
 <html>
     <head>
-        <!--include excanvas for IE support-->
         <!--[if lte IE 8]>
           <script src="excanvas.js" type="text/javascript"></script>
         <![endif]-->
         higher than last year - the average mark was
         &lt;span class="piefull"&gt;45&lt;/span&gt; which was fairly
         &lt;span class="piefull"&gt;woeful&lt;/span&gt;.
-        </code>code
+        </code>
         <h2>into this:</h2>
         The test pass mark was <span class="piefull">65%</span>, which was
         <span class="piefull">ten percent (10%)</span> higher than last year
  *
  */
 
-piefull = {
+var piefull = {
+    // default parameters
     yescol: '#00F',
     nocol: '#0F0',
     size: 24,
 
+    // constants
+    PERCENT_RE: /(-?\d+(?:\.\d*)?(?:e[+\-]?\d+)?)%?/i,
+    START_ANGLE: (2 * Math.PI) * 0.75,
+
     main: function(size, yescol, nocol) {
+        var that = this;
         if (typeof document.querySelectorAll === 'undefined') {
-            // we don't serve your type here.
+            // we don't serve your type here...
             return;
         }
-        var piesize = size || this.size;
-        var yescol = yescol || this.yescol;
-        var nocol = nocol || this.nocol;
-        var startAngle=(2*Math.PI)*0.75;
-        var percent_re = /(-?\d+(?:\.\d*)?(?:e[+\-]?\d+)?)%?/i;
+        var _piesize = size || this.size;
+        var _yescol = yescol || this.yescol;
+        var _nocol = nocol || this.nocol;
+        var _drawArc = function(ctx, arclen, full) {
+            ctx.beginPath();
+            ctx.moveTo(_piesize / 2,_piesize / 2);
+            ctx.arc(_piesize / 2,_piesize / 2, _piesize / 2,
+                    that.START_ANGLE, that.START_ANGLE + arclen, !full);
+            ctx.fillStyle = full ? _yescol : _nocol;
+            ctx.fill();
+            ctx.closePath();
+        };
 
         var pies = document.querySelectorAll('.piefull');
         for (var i=0; i<pies.length; i++) {
 
             // extract percentage from element text
             var valueText = pie.textContent || pie.innerText;
-            var percent_match = percent_re.exec(valueText)
+            var percent_match = that.PERCENT_RE.exec(valueText);
             // if no percentage found, don't change anything.
-            if (percent_match != null) {
+            if (percent_match !== null) {
                 var value = percent_match[0];
+                // convert percentage to arc length
                 var arclen = (2*Math.PI)*parseFloat(value)/100;
+                // create canvas element
                 var canvas = document.createElement('canvas');
+                // copy across class and id elements if present
+                var attr = pie.getAttribute('class');
+                if (attr) {
+                    canvas.setAttribute('class', attr);
+                }
+                attr = pie.getAttribute('id');
+                if (attr) {
+                    canvas.setAttribute('id', attr);
+                }
                 // replace element with canvas - with title
                 // containing original element text.
                 pie.parentNode.replaceChild(canvas, pie);
-                canvas.setAttribute('title',valueText);
-                canvas.width=piesize;
-                canvas.height=piesize;
+                canvas.setAttribute('title', valueText);
+                canvas.width = _piesize;
+                canvas.height = _piesize;
                 if (typeof canvas.getContext === 'undefined') {
                     // excanvas support
                     canvas = window.G_vmlCanvasManager.initElement(canvas);
                 }
                 var ctx = canvas.getContext('2d');
-                var drawArc = function(full,color) {
-                    ctx.beginPath();
-                    ctx.moveTo(piesize/2,piesize/2);
-                    ctx.arc(piesize/2,piesize/2,piesize/2,
-                            startAngle,startAngle+arclen, full);
-                    ctx.fillStyle=color;
-                    ctx.fill();
-                    ctx.closePath();
-                }
-                drawArc(false, yescol);
-                drawArc(true, nocol);
+                _drawArc(ctx, arclen, true);
+                _drawArc(ctx, arclen, false);
             }
-        };
+        }
     }
 };
-
-