Added delay to piechart animation

diff --git a/codebox/static/coffee/pie_chart.coffee b/codebox/static/coffee/pie_chart.coffee
index 11ba88663b6e5988055ee13ab0d2e1c1793f7e2b..0c5230ab512410b933ea3417a9d8e6a5be291b21 100644 (file)
--- a/codebox/static/coffee/pie_chart.coffee
+++ b/codebox/static/coffee/pie_chart.coffee
@@ -1,6 +1,11 @@
 $(document).ready ->
     $('piechart').each (_, p) ->
         $p = $ p
+
+        wait_time = $p.attr 'data-anim-wait'
+        if wait_time? and wait_time > 0
+            await new Promise (res) -> setTimeout res, wait_time
+
         segments = $p.attr 'data-segments'
         size = ($p.attr 'data-size') || 256
 
@@ -13,7 +18,7 @@ $(document).ready ->
         total = 0
         for i in [1..segments]
             total += parseInt ($p.attr "data-segment-#{i}")
-        
+
         half_size = size / 2
         fill_perc = 0.01
         anim = ->
@@ -39,6 +44,6 @@ $(document).ready ->
 
             if fill_perc < 1
                 window.requestAnimationFrame anim
-        
+
         window.requestAnimationFrame anim
 

diff --git a/codebox/static/js/pie_chart.js b/codebox/static/js/pie_chart.js
index a6a3edcbbc8277ff7ef6d7bc62ac6d891d680b70..916d24562d97d2d47ca34b65f865baefaec0140a 100644 (file)
--- a/codebox/static/js/pie_chart.js
+++ b/codebox/static/js/pie_chart.js
@@ -1,9 +1,15 @@
 // Generated by CoffeeScript 2.4.1
 (function() {
   $(document).ready(function() {
-    return $('piechart').each(function(_, p) {
-      var $p, anim, canvas, ctx, fill_perc, half_size, i, j, ref, segments, size, total;
+    return $('piechart').each(async function(_, p) {
+      var $p, anim, canvas, ctx, fill_perc, half_size, i, j, ref, segments, size, total, wait_time;
       $p = $(p);
+      wait_time = $p.attr('data-anim-wait');
+      if ((wait_time != null) && wait_time > 0) {
+        await new Promise(function(res) {
+          return setTimeout(res, wait_time);
+        });
+      }
       segments = $p.attr('data-segments');
       size = ($p.attr('data-size')) || 256;
       canvas = document.createElement("canvas");

diff --git a/codebox/static/js/pie_chart.js.map b/codebox/static/js/pie_chart.js.map
index 251caefa2bd8cbc6c46225194d5627bb3d3f09d8..ff886f1fad258fe40a1b8560437c32dc2872f79d 100644 (file)
--- a/codebox/static/js/pie_chart.js.map
+++ b/codebox/static/js/pie_chart.js.map
@@ -6,8 +6,8 @@
     "coffee/pie_chart.coffee"
   ],
   "names": [],
-  "mappings": ";AAAA;EAAA,CAAA,CAAE,QAAF,CAAW,CAAC,KAAZ,CAAkB,QAAA,CAAA,CAAA;WACd,CAAA,CAAE,UAAF,CAAa,CAAC,IAAd,CAAmB,QAAA,CAAC,CAAD,EAAI,CAAJ,CAAA;AACf,UAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,GAAA,EAAA,SAAA,EAAA,SAAA,EAAA,CAAA,EAAA,CAAA,EAAA,GAAA,EAAA,QAAA,EAAA,IAAA,EAAA;MAAA,EAAA,GAAK,CAAA,CAAE,CAAF;MACL,QAAA,GAAW,EAAE,CAAC,IAAH,CAAQ,eAAR;MACX,IAAA,GAAO,CAAC,EAAE,CAAC,IAAH,CAAQ,WAAR,CAAD,CAAA,IAAyB;MAEhC,MAAA,GAAS,QAAQ,CAAC,aAAT,CAAuB,QAAvB;MACT,MAAM,CAAC,KAAP,GAAe;MACf,MAAM,CAAC,MAAP,GAAgB;MAChB,EAAE,CAAC,MAAH,CAAU,MAAV;MACA,GAAA,GAAM,MAAM,CAAC,UAAP,CAAkB,IAAlB;MAEN,KAAA,GAAQ;MACR,KAAS,qFAAT;QACI,KAAA,IAAS,QAAA,CAAU,EAAE,CAAC,IAAH,CAAQ,CAAA,aAAA,CAAA,CAAgB,CAAhB,CAAA,CAAR,CAAV;MADb;MAGA,SAAA,GAAY,IAAA,GAAO;MACnB,SAAA,GAAY;MACZ,IAAA,GAAO,QAAA,CAAA,CAAA;AACH,YAAA,GAAA,EAAA,KAAA,EAAA,CAAA,EAAA,KAAA,EAAA;QAAA,GAAA,GAAM;QACN,KAAS,0FAAT;UACI,KAAA,GAAQ,CAAC,QAAA,CAAU,EAAE,CAAC,IAAH,CAAQ,CAAA,aAAA,CAAA,CAAgB,CAAhB,CAAA,CAAR,CAAV,CAAD,CAAA,GAA2C;UACnD,KAAA,GAAQ,EAAE,CAAC,IAAH,CAAQ,CAAA,aAAA,CAAA,CAAgB,CAAhB,CAAkB,MAAlB,CAAR;UAER,GAAG,CAAC,SAAJ,CAAA;UACA,GAAG,CAAC,MAAJ,CAAW,SAAX,EAAsB,SAAtB;UACA,GAAG,CAAC,GAAJ,CAAQ,SAAR,EAAmB,SAAnB,EAA8B,SAA9B,EAA0C,CAAC,CAAD,GAAK,IAAI,CAAC,EAAV,GAAe,CAAC,KAAA,GAAQ,GAAT,CAAf,GAA+B,KAAzE,EAAkF,CAAC,CAAD,GAAK,IAAI,CAAC,EAAV,GAAe,GAAf,GAAqB,KAAvG;UACA,GAAG,CAAC,SAAJ,CAAA;UACA,GAAG,CAAC,SAAJ,GAAgB;UAChB,GAAG,CAAC,IAAJ,CAAA;UAEA,GAAA,IAAO;QAXX;QAaA,SAAA,IAAa,SAAA,GAAY,EAAZ,GAAiB;QAE9B,IAAG,SAAA,IAAa,CAAhB;UACI,SAAA,GAAY;UACZ,MAAM,CAAC,qBAAP,CAA6B,IAA7B,EAFJ;;QAIA,IAAG,SAAA,GAAY,CAAf;iBACI,MAAM,CAAC,qBAAP,CAA6B,IAA7B,EADJ;;MArBG;aAwBP,MAAM,CAAC,qBAAP,CAA6B,IAA7B;IAzCe,CAAnB;EADc,CAAlB;AAAA",
+  "mappings": ";AAAA;EAAA,CAAA,CAAE,QAAF,CAAW,CAAC,KAAZ,CAAkB,QAAA,CAAA,CAAA;WACd,CAAA,CAAE,UAAF,CAAa,CAAC,IAAd,CAAmB,MAAA,QAAA,CAAC,CAAD,EAAI,CAAJ,CAAA;AACf,UAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,GAAA,EAAA,SAAA,EAAA,SAAA,EAAA,CAAA,EAAA,CAAA,EAAA,GAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA;MAAA,EAAA,GAAK,CAAA,CAAE,CAAF;MAEL,SAAA,GAAY,EAAE,CAAC,IAAH,CAAQ,gBAAR;MACZ,IAAG,mBAAA,IAAe,SAAA,GAAY,CAA9B;QACI,MAAM,IAAI,OAAJ,CAAY,QAAA,CAAC,GAAD,CAAA;iBAAS,UAAA,CAAW,GAAX,EAAgB,SAAhB;QAAT,CAAZ,EADV;;MAGA,QAAA,GAAW,EAAE,CAAC,IAAH,CAAQ,eAAR;MACX,IAAA,GAAO,CAAC,EAAE,CAAC,IAAH,CAAQ,WAAR,CAAD,CAAA,IAAyB;MAEhC,MAAA,GAAS,QAAQ,CAAC,aAAT,CAAuB,QAAvB;MACT,MAAM,CAAC,KAAP,GAAe;MACf,MAAM,CAAC,MAAP,GAAgB;MAChB,EAAE,CAAC,MAAH,CAAU,MAAV;MACA,GAAA,GAAM,MAAM,CAAC,UAAP,CAAkB,IAAlB;MAEN,KAAA,GAAQ;MACR,KAAS,qFAAT;QACI,KAAA,IAAS,QAAA,CAAU,EAAE,CAAC,IAAH,CAAQ,CAAA,aAAA,CAAA,CAAgB,CAAhB,CAAA,CAAR,CAAV;MADb;MAGA,SAAA,GAAY,IAAA,GAAO;MACnB,SAAA,GAAY;MACZ,IAAA,GAAO,QAAA,CAAA,CAAA;AACH,YAAA,GAAA,EAAA,KAAA,EAAA,CAAA,EAAA,KAAA,EAAA;QAAA,GAAA,GAAM;QACN,KAAS,0FAAT;UACI,KAAA,GAAQ,CAAC,QAAA,CAAU,EAAE,CAAC,IAAH,CAAQ,CAAA,aAAA,CAAA,CAAgB,CAAhB,CAAA,CAAR,CAAV,CAAD,CAAA,GAA2C;UACnD,KAAA,GAAQ,EAAE,CAAC,IAAH,CAAQ,CAAA,aAAA,CAAA,CAAgB,CAAhB,CAAkB,MAAlB,CAAR;UAER,GAAG,CAAC,SAAJ,CAAA;UACA,GAAG,CAAC,MAAJ,CAAW,SAAX,EAAsB,SAAtB;UACA,GAAG,CAAC,GAAJ,CAAQ,SAAR,EAAmB,SAAnB,EAA8B,SAA9B,EAA0C,CAAC,CAAD,GAAK,IAAI,CAAC,EAAV,GAAe,CAAC,KAAA,GAAQ,GAAT,CAAf,GAA+B,KAAzE,EAAkF,CAAC,CAAD,GAAK,IAAI,CAAC,EAAV,GAAe,GAAf,GAAqB,KAAvG;UACA,GAAG,CAAC,SAAJ,CAAA;UACA,GAAG,CAAC,SAAJ,GAAgB;UAChB,GAAG,CAAC,IAAJ,CAAA;UAEA,GAAA,IAAO;QAXX;QAaA,SAAA,IAAa,SAAA,GAAY,EAAZ,GAAiB;QAE9B,IAAG,SAAA,IAAa,CAAhB;UACI,SAAA,GAAY;UACZ,MAAM,CAAC,qBAAP,CAA6B,IAA7B,EAFJ;;QAIA,IAAG,SAAA,GAAY,CAAf;iBACI,MAAM,CAAC,qBAAP,CAA6B,IAA7B,EADJ;;MArBG;aAwBP,MAAM,CAAC,qBAAP,CAA6B,IAA7B;IA9Ce,CAAnB;EADc,CAAlB;AAAA",
   "sourcesContent": [
-    "$(document).ready ->\n    $('piechart').each (_, p) ->\n        $p = $ p\n        segments = $p.attr 'data-segments'\n        size = ($p.attr 'data-size') || 256\n\n        canvas = document.createElement \"canvas\"\n        canvas.width = size\n        canvas.height = size\n        $p.append canvas\n        ctx = canvas.getContext \"2d\"\n\n        total = 0\n        for i in [1..segments]\n            total += parseInt ($p.attr \"data-segment-#{i}\")\n        \n        half_size = size / 2\n        fill_perc = 0.01\n        anim = ->\n            acc = 0\n            for i in [1..segments]\n                ratio = (parseInt ($p.attr \"data-segment-#{i}\")) * fill_perc\n                color = $p.attr \"data-segment-#{i}-color\"\n\n                ctx.beginPath()\n                ctx.moveTo half_size, half_size\n                ctx.arc half_size, half_size, half_size, (-2 * Math.PI * (ratio + acc) / total), (-2 * Math.PI * acc / total)\n                ctx.closePath()\n                ctx.fillStyle = color\n                ctx.fill()\n\n                acc += ratio\n\n            fill_perc += fill_perc / 10 + 0.01\n\n            if fill_perc >= 1\n                fill_perc = 1\n                window.requestAnimationFrame anim\n\n            if fill_perc < 1\n                window.requestAnimationFrame anim\n        \n        window.requestAnimationFrame anim\n\n"
+    "$(document).ready ->\n    $('piechart').each (_, p) ->\n        $p = $ p\n\n        wait_time = $p.attr 'data-anim-wait'\n        if wait_time? and wait_time > 0\n            await new Promise (res) -> setTimeout res, wait_time\n\n        segments = $p.attr 'data-segments'\n        size = ($p.attr 'data-size') || 256\n\n        canvas = document.createElement \"canvas\"\n        canvas.width = size\n        canvas.height = size\n        $p.append canvas\n        ctx = canvas.getContext \"2d\"\n\n        total = 0\n        for i in [1..segments]\n            total += parseInt ($p.attr \"data-segment-#{i}\")\n\n        half_size = size / 2\n        fill_perc = 0.01\n        anim = ->\n            acc = 0\n            for i in [1..segments]\n                ratio = (parseInt ($p.attr \"data-segment-#{i}\")) * fill_perc\n                color = $p.attr \"data-segment-#{i}-color\"\n\n                ctx.beginPath()\n                ctx.moveTo half_size, half_size\n                ctx.arc half_size, half_size, half_size, (-2 * Math.PI * (ratio + acc) / total), (-2 * Math.PI * acc / total)\n                ctx.closePath()\n                ctx.fillStyle = color\n                ctx.fill()\n\n                acc += ratio\n\n            fill_perc += fill_perc / 10 + 0.01\n\n            if fill_perc >= 1\n                fill_perc = 1\n                window.requestAnimationFrame anim\n\n            if fill_perc < 1\n                window.requestAnimationFrame anim\n\n        window.requestAnimationFrame anim\n\n"
   ]
 }
\ No newline at end of file

diff --git a/codebox/views/problem/problem.moon b/codebox/views/problem/problem.moon
index e746630d906f0b8b88a53a4c62e867a26aa88540..03d0c0dec3159123f7379a098e97613339ddf87e 100644 (file)
--- a/codebox/views/problem/problem.moon
+++ b/codebox/views/problem/problem.moon
@@ -46,6 +46,7 @@ class ProblemsView extends html.Widget
                                                                piechart {
                                                                        style: 'display: inline-block; width: 100%'
                                                                        class: "pad-12 ta-center"
+                                                                       "data-anim-wait": 500,
                                                                        "data-segments": 4,
                                                                        "data-segment-1": correct,
                                                                        "data-segment-1-color": "#44ff44",