add animation

author: Florian Dold <florian.dold@gmail.com> 2016-09-23 21:57:07 +0200
committer: Florian Dold <florian.dold@gmail.com> 2016-09-23 21:57:07 +0200
commit: b48de94ff477d12f59c392b14e6518174bec879c (patch)
tree: f0bdfac51608a958bbb7b3b0d904d204a8839d01
parent: 667c055fc25c3d1de6ac6d82db2b0d90f3414672 (diff)
5 files changed, 142 insertions, 28 deletions
diff --git a/background/background.html b/background/background.html
new file mode 100644
index 000000000..b72696db7
--- /dev/null
+++ b/background/background.html
@@ -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>
+\ No newline at end of file
diff --git a/background/main.ts b/background/main.ts
index 1772e0eee..60046e733 100644
--- a/background/main.ts
+++ b/background/main.ts
@@ -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) => {
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
diff --git a/manifest.json b/manifest.json
index 1291bc37a..880515731 100644
--- a/manifest.json
+++ b/manifest.json
@@ -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"
author	Florian Dold <florian.dold@gmail.com>	2016-09-23 21:57:07 +0200
committer	Florian Dold <florian.dold@gmail.com>	2016-09-23 21:57:07 +0200
commit	b48de94ff477d12f59c392b14e6518174bec879c (patch)
tree	f0bdfac51608a958bbb7b3b0d904d204a8839d01
parent	667c055fc25c3d1de6ac6d82db2b0d90f3414672 (diff)