30:T474,html`

${Calendar} ${Flipper}

`31:Tb9c,Calendar = { let calendar = html`

${d3 .timeFormat('%b')(DT) .toUpperCase()}

${d3 .timeFormat('%Y')(DT) .toUpperCase()}

`; yield calendar; }32:T1ca2,{ let h = 300; let w = 600; let style = html``; yield style; }33:T748,Countdown = { function Countdown() { _(this).bindAll('update', 'executeAnimation', 'finishAnimation'); this.setVars.apply(this, arguments); this.update(); } Countdown.prototype.duration = 1000; // Add methods Countdown.prototype.setVars = function(time, el, template) { this.max = time; this.time = time; this.el = el; this.template = _(template.innerHTML).template(); this.delta = -2; }; Countdown.prototype.update = function() { this.checkTime(); this.setSizes(); this.setupAnimation(); _(this.executeAnimation).delay(20); _(this.finishAnimation).delay(this.duration * 0.9); _(this.update).delay(this.duration); }; Countdown.prototype.checkTime = function() { this.time += this.delta; this.ordinalDate = appendRank(this.time); if (this.time === 0) this.delta = 1; if (this.time === this.max) this.delta = -1; this.delta === 1 ? this.toggleDirection('up', 'down') : this.toggleDirection('down', 'up'); this.nextOrdinalDate = appendRank(this.time + this.delta); }; Countdown.prototype.toggleDirection = function(add, remove) { this.el.classList.add(add); this.el.classList.remove(remove); }; Countdown.prototype.setSizes = function() { this.currentSize = this.getSize(this.time); this.nextSize = this.getSize(this.nextTime); }; Countdown.prototype.getSize = function(time) { return time > 9 ? 'small' : ''; }; Countdown.prototype.setupAnimation = function() { this.el.innerHTML = this.template(this); this.el.classList.remove('changed'); }; Countdown.prototype.executeAnimation = function() { this.el.classList.add('changing'); }; Countdown.prototype.finishAnimation = function() { this.el.classList.add('changed'); this.el.classList.remove('changing'); }; return Countdown; }34:[] 2e:{"title":"Flip Calendar","cells":[{"id":0,"value":"md`# Flip Calendar`","pinned":false,"hidden":false,"mode":"ojs"},{"id":894,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":857,"value":"DT = d3.timeParse('%Q')(Date.now())","pinned":true,"hidden":false,"mode":"ojs"},{"id":125,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"Flipper = {\n let view = html`\n

\n\n`;\n\n yield view;\n new Countdown(\n 30,\n document.querySelector('.count'),\n document.querySelector('#count-template')\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":639,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":702,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":777,"value":"appendRank = n => {\n // let n = +d3.timeFormat('%d')(d3.timeParse('%Q')(Date.now()));\n let ordinalRankSuffix =\n n > 0\n ? ['th', 'st', 'nd', 'rd'][(n > 3 && n < 21) || n % 10 > 3 ? 0 : n % 10]\n : '';\n return n + `^{${ordinalRankSuffix}}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":820,"value":"md`## ANX`","pinned":false,"hidden":false,"mode":"ojs"},{"id":642,"value":"_ = require('underscore')","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"height = 700","pinned":true,"hidden":false,"mode":"ojs"},{"id":779,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}