From: Brendan Hansen Date: Tue, 1 Oct 2019 16:12:21 +0000 (-0500) Subject: Added delay to piechart animation X-Git-Url: https://git.brendanfh.com/?a=commitdiff_plain;h=13e7e78122a47955002c7449869823f69c9f78ce;p=codebox.git Added delay to piechart animation --- diff --git a/codebox/static/coffee/pie_chart.coffee b/codebox/static/coffee/pie_chart.coffee index 11ba886..0c5230a 100644 --- 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 a6a3edc..916d245 100644 --- 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 251caef..ff886f1 100644 --- 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 e746630..03d0c0d 100644 --- 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",