aboutsummaryrefslogtreecommitdiff
path: root/lib
diff options
context:
space:
mode:
authorFlorian Dold <florian.dold@gmail.com>2016-09-23 21:57:07 +0200
committerFlorian Dold <florian.dold@gmail.com>2016-09-23 21:57:07 +0200
commitb48de94ff477d12f59c392b14e6518174bec879c (patch)
treef0bdfac51608a958bbb7b3b0d904d204a8839d01 /lib
parent667c055fc25c3d1de6ac6d82db2b0d90f3414672 (diff)
add animation
Diffstat (limited to 'lib')
-rw-r--r--lib/wallet/chromeBadge.ts118
-rw-r--r--lib/wallet/wxMessaging.ts29
2 files changed, 125 insertions, 22 deletions
diff --git a/lib/wallet/chromeBadge.ts b/lib/wallet/chromeBadge.ts
new file mode 100644
index 000000000..2443378b2
--- /dev/null
+++ b/lib/wallet/chromeBadge.ts
@@ -0,0 +1,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;
+ }
+} \ No newline at end of file
diff --git a/lib/wallet/wxMessaging.ts b/lib/wallet/wxMessaging.ts
index 514cdce13..2e3659429 100644
--- a/lib/wallet/wxMessaging.ts
+++ b/lib/wallet/wxMessaging.ts
@@ -30,6 +30,7 @@ import Port = chrome.runtime.Port;
import {Notifier} from "./types";
import {Contract} from "./types";
import MessageSender = chrome.runtime.MessageSender;
+import {ChromeBadge} from "./chromeBadge";
"use strict";
@@ -165,26 +166,6 @@ function makeHandlers(db: IDBDatabase,
}
-class ChromeBadge implements Badge {
- setText(s: string) {
- chrome.browserAction.setBadgeText({text: s});
- }
-
- setColor(c: string) {
- chrome.browserAction.setBadgeBackgroundColor({color: c});
- }
-
- startBusy() {
- this.setColor("#00F");
- this.setText("...");
- }
-
- stopBusy() {
- this.setText("");
- }
-}
-
-
function dispatch(handlers: any, req: any, sender: any, sendResponse: any) {
if (req.type in handlers) {
Promise
@@ -302,6 +283,9 @@ function handleHttpPayment(headerList: chrome.webRequest.HttpHeader[],
console.log("ignoring non-taler 402 response");
}
+// Useful for debugging ...
+export let wallet: Wallet|undefined = undefined;
+export let badge: ChromeBadge|undefined = undefined;
export function wxMain() {
chrome.browserAction.setBadgeText({text: ""});
@@ -330,9 +314,10 @@ export function wxMain() {
})
.then((db: IDBDatabase) => {
let http = new BrowserHttpLib();
- let badge = new ChromeBadge();
+ badge = new ChromeBadge();
let notifier = new ChromeNotifier();
- let wallet = new Wallet(db, http, badge, notifier);
+ console.log("setting wallet");
+ wallet = new Wallet(db, http, badge, notifier);
// Handlers for messages coming directly from the content
// script on the page