[tor-commits] [flashproxy/master] Add a badge class with a counter.

[dcf at torproject.org]

commit cbaa1c2982eb6d5703b8ee77d042fc72d4e01d73
Author: David Fifield <david at bamsoftware.com>
Date:   Sat Mar 31 16:45:03 2012 -0700

    Add a badge class with a counter.
---
 embed.html    |   22 ++++++++++++++++
 flashproxy.js |   78 ++++++++++++++++++++++++++++++++++++++++++++++++++------
 2 files changed, 91 insertions(+), 9 deletions(-)

diff --git a/embed.html b/embed.html
index c88827b..d572bdb 100644
--- a/embed.html
+++ b/embed.html
@@ -7,6 +7,28 @@ body {
 	margin: 0;
 	padding: 0;
 }
+#flashproxy-badge {
+	position: relative;
+	margin: 0;
+	padding: 0;
+	width: 70px;
+	height: 23px;
+}
+#flashproxy-badge div {
+	position: absolute;
+	width: 70px;
+	top: 4px;
+}
+#flashproxy-badge div p {
+	top: 20px;
+	margin: 0;
+	padding: 0;
+	margin-left: 47px;
+	margin-right: 2px;
+	text-align: center;
+	color: white;
+	font-size: 12px;
+}
 #flashproxy-badge.debug {
 	position: absolute;
 	margin: 0;
diff --git a/flashproxy.js b/flashproxy.js
index 7e0217e..640e236 100644
--- a/flashproxy.js
+++ b/flashproxy.js
@@ -29,6 +29,8 @@
  * query is not done. The "client" parameter must be given as well.
  */
 
+var FLASHPROXY_INFO_URL = "https://crypto.stanford.edu/flashproxy/";
+
 var DEFAULT_FACILITATOR_ADDR = {
     host: "tor-facilitator.bamsoftware.com",
     port: 9002
@@ -180,20 +182,13 @@ function FlashProxy()
 
     this.query = parse_query_string(window.location.search.substr(1));
 
+    this.badge = new Badge();
     if (this.query.debug) {
         debug_div = document.createElement("pre");
         debug_div.className = "debug";
-
         this.badge_elem = debug_div;
     } else {
-        var img;
-
-        debug_div = undefined;
-        img = document.createElement("img");
-        img.setAttribute("src", "https://crypto.stanford.edu/flashproxy/badge.png");
-        img.setAttribute("border", 0);
-
-        this.badge_elem = img;
+        this.badge_elem = this.badge.elem;
     }
     this.badge_elem.setAttribute("id", "flashproxy-badge");
 
@@ -333,8 +328,11 @@ function FlashProxy()
             puts("Complete.");
             /* Delete from the list of active proxy pairs. */
             this.proxy_pairs.splice(this.proxy_pairs.indexOf(proxy_pair), 1);
+            this.badge.proxy_end();
         }.bind(this);
         proxy_pair.connect();
+
+        this.badge.proxy_begin();
     };
 
     /* An instance of a client-relay connection. */
@@ -461,6 +459,68 @@ function FlashProxy()
     }
 }
 
+var HTML_ESCAPES = {
+    "&": "amp",
+    "<": "lt",
+    ">": "gt",
+    "'": "apos",
+    "\"": "quot"
+};
+function escape_html(s)
+{
+    return s.replace(/&<>'"/, function(x) { return HTML_ESCAPES[x] });
+}
+
+/* The usual embedded HTML badge. The "elem" member is a DOM element that can be
+   included elsewhere. */
+function Badge()
+{
+    /* Number of proxy pairs currently connected. */
+    this.num_proxy_pairs = 0;
+    /* Number of proxy pairs ever connected. */
+    this.total_proxy_pairs = 0;
+
+    this.counter_text = document.createElement("p");
+
+    var div, subdiv, a, img;
+
+    div = document.createElement("div");
+
+    a = document.createElement("a");
+    a.setAttribute("href", FLASHPROXY_INFO_URL);
+
+    img = document.createElement("img");
+    img.setAttribute("src", "https://crypto.stanford.edu/flashproxy/badge.png");
+
+    subdiv = document.createElement("div");
+
+    this.counter_text = document.createElement("p");
+
+    div.appendChild(a);
+    a.appendChild(img);
+    div.appendChild(subdiv)
+    subdiv.appendChild(this.counter_text);
+
+    this.elem = div;
+
+    this.proxy_begin = function() {
+        this.num_proxy_pairs++;
+        this.total_proxy_pairs++;
+        this.refresh();
+    };
+
+    this.proxy_end = function() {
+        this.num_proxy_pairs--;
+        this.refresh();
+    }
+
+    this.refresh = function() {
+        this.counter_text.innerHTML = escape_html(String(this.num_proxy_pairs));
+    };
+
+    this.refresh();
+}
+
 /* This is the non-functional badge that occupies space when
    flashproxy_should_disable decides that the proxy shouldn't run. */
 function DummyFlashProxy()