MediaWiki:Gadget-ShroomScript.js

/* General-purpose JavaScript used for The 'Shroom */

/* * Special Issue 195: dynamic curtain */

function ShroomCurtain(container) { this.container = container; this.canvas = document.createElement('canvas'); this.button = document.createElement('button'); this.ctx = this.canvas.getContext('2d'); this.raf = this.renderCurtains.bind(this); this.oc = this.openCurtain.bind(this); this.canvas.className = 'shroom195curtain-canvas'; this.button.className = 'shroom195curtain-button'; this.button.textContent = 'Open the curtains'; var ct = localStorage.getItem('shroom_195curtain'); var execute = ct ? parseInt(ct) + 30 * 60 * 1000 < Date.now : true; if (execute) { this.container.insertBefore(this.button, this.container.firstChild); this.container.insertBefore(this.canvas, this.container.firstChild); requestAnimationFrame(this.raf); this.button.addEventListener('click', this.oc); window.addEventListener('resize', this.setCanvasSize.bind(this)); this.setCanvasSize; }	var placeholder = document.querySelector('.shroom195curtain-placeholder'); placeholder.classList.add('exit'); setTimeout(function {		return placeholder.parentNode.removeChild(placeholder);	}, 1000); }

ShroomCurtain.prototype.openCurtain = function openCurtain { var _this = this; this.opening = Date.now; this.button.removeEventListener('click', this.oc); this.button.classList.add('exit'); setTimeout(function {		return _this.button.parentNode.removeChild(_this.button);	}, 1000); localStorage.setItem('shroom_195curtain', Date.now.toString); }; ShroomCurtain.prototype.setCanvasSize = function setCanvasSize { var containerSize = this.container.getBoundingClientRect; this.canvas.width = Math.round(containerSize.width * window.devicePixelRatio); this.canvas.height = Math.round(containerSize.height * window.devicePixelRatio); this.canvas.style.width = ''.concat(containerSize.width, 'px'); this.canvas.style.height = ''.concat(containerSize.height, 'px'); }; ShroomCurtain.prototype.renderCurtains = function renderCurtains(timestamp) { this.ctx.resetTransform; this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); var openingDuration = this.opening ? Date.now - this.opening : 0; var openingProgress = openingDuration / (this.canvas.width / window.devicePixelRatio * 4 + 1000); this.ctx.fillStyle = 'rgba(0,0,0,'.concat(1 - this.inAndOut(Math.min(openingProgress, 1)), ')'); this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height); this.renderCurtain(timestamp, true, openingDuration); this.renderCurtain(timestamp, false, openingDuration); if (openingProgress <= 1) requestAnimationFrame(this.raf); else this.container.removeChild(this.canvas); }; ShroomCurtain.prototype.renderCurtain = function renderCurtain(timestamp, left, openingDuration) { var m = left ? -1 : 1;	var neededFolds = Math.max(Math.round(this.canvas.width / window.devicePixelRatio / 90), 2); var foldWidth = this.canvas.width / neededFolds / 2; var curtainOffset = Math.pow(Math.min(openingDuration / (this.canvas.width / window.devicePixelRatio * 4 + 1000), 1), 2) * this.canvas.width / 2; var curtainSkewOffset = (this.inAndOut(Math.min(openingDuration / 3000, 1)) * m * -150 + Math.sin(timestamp / 1000) * (foldWidth / 6)) * window.devicePixelRatio; var gr = this.ctx.createLinearGradient(left ? this.canvas.width : 0, 0, this.canvas.width / 2, 0); gr.addColorStop(0, '#900'); gr.addColorStop(.95, '#c00'); gr.addColorStop(1, '#a00'); this.ctx.fillStyle = gr; this.ctx.save; this.ctx.beginPath; this.ctx.moveTo(left ? this.canvas.width : 0, 0); this.ctx.lineTo(this.canvas.width / 2 + m * (1 - curtainOffset), 0); this.ctx.lineTo(this.canvas.width / 2 + curtainSkewOffset + m * (1 - curtainOffset), this.canvas.height); this.ctx.lineTo(left ? this.canvas.width : 0, this.canvas.height); this.ctx.closePath; this.ctx.fill; this.ctx.clip; for (var i = 0; i < neededFolds; i++) { var foldX = left ? this.canvas.width - foldWidth * (i + 1) : foldWidth * i;		var slideOffset = curtainOffset / ((neededFolds - i - 1) / (neededFolds - 1) + 1) * m;		var subtractSway = -Math.tan(curtainSkewOffset / this.canvas.height) * (i / neededFolds); var foldGr = this.ctx.createLinearGradient(foldX - slideOffset, 0, foldX + foldWidth - slideOffset, 0); for (var grI = 0; grI <= 1; grI += .1) // cos((x - .5) * PI * 2) + 1 foldGr.addColorStop(grI, 'rgba(0,0,0,'.concat((Math.cos((grI - .5) * Math.PI * 2) + 1) * .1, ')')); this.ctx.setTransform(1, 0, Math.tan(foldWidth / 3 / this.canvas.height) * Math.cos(timestamp / (1000 + Math.cos(foldX) * 100) + Math.cos(foldX * 1.2)) - subtractSway, 1, 0, 0); this.ctx.fillStyle = foldGr; this.ctx.fillRect(foldX - slideOffset, 0, foldWidth, this.canvas.height); }	this.ctx.restore; }; ShroomCurtain.prototype.inAndOut = function inAndOut(t) { return 3 * t * t - 2 * t * t * t; }; var curtainContainer = document.querySelector('.shroom195curtain'); if (curtainContainer) { new ShroomCurtain(curtainContainer); }