taler/wallet-core
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

add animation

Browse Source
This commit is contained in:
Florian Dold 2016-09-23 21:57:07 +02:00
parent 667c055fc2
commit b48de94ff4
5 changed files with 142 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
background/background.html Normal file
View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script src="../lib/vendor/URI.js"></script>
<script src="../lib/vendor/lodash.core.min.js"></script>
<script src="../lib/vendor/system-csp-production.src.js"></script>
<script src="main.js"></script>
<meta charset="UTF-8">
<title>(wallet bg page)</title>
</head>
<body>
<img id="taler-logo" src="../img/icon.png">
</body>
</html>

2
background/main.ts
View File

@ -31,6 +31,8 @@ System.config({
System.import("../lib/wallet/wxMessaging")
.then((wxMessaging) => {
// Export as global for debugger
(window as any).wxMessaging = wxMessaging;
wxMessaging.wxMain();
})
.catch((e) => {

118
lib/wallet/chromeBadge.ts Normal file
View File

@ -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;
}
}

29
lib/wallet/wxMessaging.ts
View File

@ -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

7
manifest.json
View File

@ -43,12 +43,7 @@
],
"background": {
"scripts": [
"lib/vendor/URI.js",
"lib/vendor/lodash.core.min.js",
"lib/vendor/system-csp-production.src.js",
"background/main.js"
]
"page": "background/background.html"
},
"minimum_chrome_version": "47.0.2526"