commit 008bc8013eb2db6d11e6ac4bf3e814b62c1a4a51 Author: David Fifield <david@bamsoftware.com> Date: Mon Jul 9 16:53:19 2012 -0700 Provide an ✖ button to disable the badge. Rather than clicking anywhere on the badge to disable it, click on the ✖ that appears when you hover over it. This allows the rest of the badge to be a link to the information page. --- embed.html | 17 +++++++++++++++++ flashproxy.js | 24 +++++++++++++++++++++--- 2 files changed, 38 insertions(+), 3 deletions(-) diff --git a/embed.html b/embed.html index 184869f..1c4e619 100644 --- a/embed.html +++ b/embed.html @@ -36,11 +36,28 @@ body { background-color: #111; } #flashproxy-badge td { + position: relative; margin: 0; padding: 0; vertical-align: middle; text-align: center; } +#flashproxy-badge td .disable-button { + position: absolute; + margin: 0; + padding: 0; + border: 1px solid white; + color: white; + background-color: #B00; + top: 1px; + right: 1px; + width: 11px; + height: 11px; + text-align: center; + line-height: 11px; + font-size: 11px; + display: none; +} #flashproxy-badge a img { border: 0; } diff --git a/flashproxy.js b/flashproxy.js index 422be89..8f994f1 100644 --- a/flashproxy.js +++ b/flashproxy.js @@ -287,9 +287,16 @@ function make_websocket(addr) { function FlashProxy() { this.badge = new Badge(); - /* Click the badge to disable it. */ - this.badge.elem.onclick = function(event) { + this.badge.elem.onmouseover = function(event) { + this.badge.disable_button.style.display = "block"; + }.bind(this); + this.badge.elem.onmouseout = function(event) { + this.badge.disable_button.style.display = "none"; + }.bind(this); + /* Click a button to disable the badge. */ + this.badge.disable_button.onclick = function(event) { this.disable(); + this.badge.disable_button.parentNode.removeChild(this.badge.disable_button); }.bind(this); if (query.debug) this.badge_elem = debug_div; @@ -677,7 +684,7 @@ function Badge() { /* Number of proxy pairs currently connected. */ this.num_proxy_pairs = 0; - var table, tr, td, a, img; + var table, tr, td, div, a, img; table = document.createElement("table"); tr = document.createElement("tr"); @@ -696,6 +703,15 @@ function Badge() { this.elem = table; this.elem.className = "idle"; + a = document.createElement("a"); + a.setAttribute("href", "#"); + this.disable_button = document.createElement("div"); + /* HEAVY MULTIPLICATION X */ + this.disable_button.innerHTML = "✖"; + this.disable_button.className = "disable-button"; + a.appendChild(this.disable_button); + td.appendChild(a); + this.proxy_begin = function() { this.num_proxy_pairs++; this.elem.className = "active"; @@ -710,10 +726,12 @@ function Badge() { this.disable = function() { this.elem.className = "disabled"; + this.disable_button.style.display = "none"; } this.die = function() { this.elem.className = "dead"; + this.disable_button.style.display = "none"; } this.set_color = function(color) {