1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
/*
This file is part of TALER
(C) 2016 INRIA
TALER is free software; you can redistribute it and/or modify it under the
terms of the GNU General Public License as published by the Free Software
Foundation; either version 3, or (at your option) any later version.
TALER is distributed in the hope that it will be useful, but WITHOUT ANY
WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
A PARTICULAR PURPOSE. See the GNU General Public License for more details.
You should have received a copy of the GNU General Public License along with
TALER; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
*/
import {
Badge
} from "./wallet";
/**
* Polyfill for requestAnimationFrame, which
* doesn't work from a background page.
*/
function rAF(cb: (ts: number) => void) {
window.setTimeout(() => {
cb(performance.now());
}, 100);
}
export class ChromeBadge implements Badge {
canvas: HTMLCanvasElement;
ctx: CanvasRenderingContext2D;
talerLogo: HTMLImageElement;
isBusy: boolean = false;
rotationAngle: number = 0;
static rotationAngleMax = 50000;
constructor() {
let bg = chrome.extension.getBackgroundPage();
this.canvas = bg.document.createElement("canvas");
this.canvas.width = 32;
this.canvas.height = 32;
this.ctx = this.canvas.getContext("2d")!;
this.talerLogo = bg.document.getElementById("taler-logo") as HTMLImageElement;
if (!(this.talerLogo instanceof HTMLImageElement)) {
throw Error();
}
this.draw();
}
/**
* Draw the badge based on the current state.
*/
private draw() {
// Reset to identity
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.ctx.setTransform(1, 0, 0, 1, 0, 0);
this.ctx.translate(this.canvas.width / 2, this.canvas.height / 2);
this.ctx.rotate(this.rotationAngle / ChromeBadge.rotationAngleMax * Math.PI * 2);
this.ctx.translate(-this.canvas.width / 2, -this.canvas.height / 2);
this.ctx.drawImage(this.talerLogo,
0,
0,
this.talerLogo.width,
this.talerLogo.height,
0, 0, this.canvas.width, this.canvas.height);
let imageData = this.ctx.getImageData(0,
0,
this.canvas.width,
this.canvas.height);
chrome.browserAction.setIcon({imageData});
}
private animate() {
let bg: Window = chrome.extension.getBackgroundPage();
let start: number|undefined = undefined;
let step = (timestamp: number) => {
if (!start) {
start = timestamp;
}
let delta = (timestamp - start);
if (!this.isBusy && this.rotationAngle + delta >= ChromeBadge.rotationAngleMax) {
// stop if we're close enough to origin
this.rotationAngle = 0;
} else {
this.rotationAngle = (this.rotationAngle + timestamp - start) % ChromeBadge.rotationAngleMax;
}
if (this.isBusy || this.rotationAngle != 0) {
rAF(step);
}
this.draw();
};
rAF(step);
}
setText(s: string) {
chrome.browserAction.setBadgeText({text: s});
}
setColor(c: string) {
chrome.browserAction.setBadgeBackgroundColor({color: c});
}
startBusy() {
this.isBusy = true;
this.animate();
}
stopBusy() {
this.isBusy = false;
}
}
|
