Commits

Ben Bass committed 8701061

support for excanvas

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]-->
         <script src="piefull.js" type="text/javascript"></script>
         <script>
             window.onload = (function() {
         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>
-        <p>
         The test pass mark was <span class="piefull">65%</span>, which was
         <span class="piefull">ten percent (10%)</span> higher than last year
         - the average mark was <span class="piefull">45</span> which was fairly
         <span class="piefull">woeful</span>.
-        </p>
         <h2>About</h2>
         <p><em><strong>piefull</strong></em> is a fairly trivial script to allow inline pie-charts, currently representing a single value expressed as a percentage.</p>
         <p>Examples where this could be useful include resource allocation, task completion status, and so on.</p>
-        <p>Elements which have class <code>piefull</code> will have their content parsed and if something which looks like a number is found therein, the element will be <em>replaced</em> with a pie-chart canvas.</p>
+        <p>Elements which have class <code>piefull</code> will have their content parsed and if something which looks like a number is found therein, the element will be <em>replaced</em> with a pie-chart canvas. If no such number can be extracted, no change is made to the DOM.</p>
+        <h3>Notes</h3>
+        <p>IE8 is supported through the use of the <a href="http://code.google.com/p/explorercanvas/">excanvas</a> script. There are no plans to support earlier versions other than by graceful degradation. Just include something like the following in the document <code>&lt;head&gt;</code> to include excanvas:</p>
+        <blockquote><code>
+        &lt;!--[if lte IE 8]&gt;
+          &lt;script src="excanvas.js"&gt;&lt;/script&gt;
+        &lt;![endif]--&gt;
+        </code></blockquote>
+        <p>Note that when using IE8 canvas elements will not work within a <code>&lt;p&gt;</code> element. While this can probably be justified by block vs inline semantics, other browsers have no problem with it. And I'm slightly annoyed that it took me a long time to figure this out. The problem manifests as an 'Invalid source HTML for this operation' error when excanvas is attempting an '<code>insertAdjacentHTML</code>' call.</p>
         <small>Ben Bass 2011 @codedstructure</small>
     </body>
 </html>
     size: 24,
 
     main: function(size, yescol, nocol) {
-        var piesize= size || this.size;
+        if (typeof document.querySelectorAll === 'undefined') {
+            // 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 pies = document.getElementsByClassName('piefull');
+        var pies = document.querySelectorAll('.piefull');
         for (var i=0; i<pies.length; i++) {
             var pie = pies[i];
 
                 var value = percent_match[0];
                 var arclen = (2*Math.PI)*parseFloat(value)/100;
                 var canvas = document.createElement('canvas');
+                // 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;
+                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.closePath();
                     ctx.fillStyle=color;
                     ctx.fill();
+                    ctx.closePath();
                 }
                 drawArc(false, yescol);
                 drawArc(true, nocol);
-                // replace element with canvas - with title
-                // containing original element text.
-                canvas.setAttribute('title',valueText);
-                pie.innerHTML = "";
-                pie.appendChild(canvas);
             }
         };
     }