commit cbaa1c2982eb6d5703b8ee77d042fc72d4e01d73 Author: David Fifield david@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()