michael@0: michael@0: michael@0: michael@0: michael@0: michael@0: michael@0: michael@0: michael@0: michael@0: michael@0: michael@0: michael@0: michael@0: michael@0: michael@0: michael@0: michael@0: michael@0: michael@0: michael@0: michael@0: michael@0: michael@0: michael@0: document.getAnonymousElementByAttribute(this, "anonid", "progressRing"); michael@0: michael@0: michael@0: document.getAnonymousElementByAttribute(this, "anonid", michael@0: "progressNotification"); michael@0: michael@0: null michael@0: null michael@0: michael@0: michael@0: michael@0: michael@0: michael@0: michael@0: { michael@0: this.updateProgress(this.getAttribute("progress")) michael@0: } michael@0: this._img.src = PROGRESS_RING_IMG; michael@0: } michael@0: else if (this._img.complete) { michael@0: let ctx = this._progressCircleCtx; michael@0: ctx.clearRect(0, 0, michael@0: this._progressCanvas.width, this._progressCanvas.height); michael@0: michael@0: // Save the state, so we can undo the clipping michael@0: ctx.save(); michael@0: michael@0: ctx.beginPath(); michael@0: let center = this._progressCanvas.width / 2; michael@0: ctx.arc(center, center, center, startAngle, endAngle, false); michael@0: ctx.lineTo(center, center); michael@0: ctx.closePath(); michael@0: ctx.clip(); michael@0: michael@0: // Draw circle image. michael@0: ctx.translate(center, center); michael@0: ctx.rotate(endAngle); michael@0: ctx.drawImage(this._img, -center, -center); michael@0: michael@0: ctx.restore(); michael@0: } else { michael@0: // Image is still loading michael@0: } michael@0: return [startAngle, endAngle]; michael@0: ]]> michael@0: michael@0: michael@0: michael@0: michael@0: {}; michael@0: } michael@0: this._progressCircleCtx.clearRect(0, 0, michael@0: this._progressCanvas.width, this._progressCanvas.height); michael@0: this.removeAttribute("progress"); michael@0: ]]> michael@0: michael@0: michael@0: michael@0: michael@0: michael@0: michael@0: michael@0: michael@0: michael@0: michael@0: michael@0: michael@0: michael@0: michael@0: