diff --git a/data/collusion.js b/data/collusion.js index ec4a3b0..de0b29a 100644 --- a/data/collusion.js +++ b/data/collusion.js @@ -24,7 +24,7 @@ const STATUS = 12; const CACHEABLE = 13; const FROM_PRIVATE_MODE = 14; -const vizcanvas = document.querySelector('.vizcanvas'); +var vizcanvas = document.querySelector('.vizcanvas'); var mapDocument, mapcanvas; document.querySelector('.world-map').addEventListener('load', function(event){ mapDocument = event.target.contentDocument; @@ -83,9 +83,6 @@ function elem(name, attributes, children){ window.addEventListener('load', function(evt){ addon.emit("privateWindowCheck"); // Wire up events - // document.querySelector('.btn_group.visualization').click(); - // document.querySelector('[data-value=' + (localStorage.visualization || 'Graph') + ']').click(); - // document.querySelector('[data-value=' + (localStorage.visualization || 'Graph') + ']').setAttribute("data-selected").click(); document.querySelector('[data-value=' + (localStorage.visualization || 'Graph') + ']').setAttribute("data-selected", true); document.querySelector('.btn_group.visualization [data-selected]').classList.remove("collapsed"); switchVisualization(localStorage.visualization.toLowerCase() || 'graph'); @@ -140,6 +137,13 @@ function resetAddtionalUI(){ clearAllBubbles(); // show vizcanvas again in case it is hidden document.querySelector(".vizcanvas").classList.remove("hide"); + // toggle graph legend section + console.log(currentVisualization.name); + if( currentVisualization.name != "graph" ){ + document.querySelector(".graph-legend").classList.add("hidden"); + }else{ + document.querySelector(".graph-legend").classList.remove("hidden") + } } diff --git a/data/index.html b/data/index.html index 982e2bd..3653485 100644 --- a/data/index.html +++ b/data/index.html @@ -118,6 +118,107 @@ +
+
+
LEGEND & CONTROLS
+
Hide
+
+
+
+
+ + + + + Visited Site + +
+
+ + + + + Never Visited Site + +
+
+ + + + + Connection + +
+
+
+
+ + + + + + Watched Sites + +
+
+ + + + + + + + Blocked Sites + +
+
+ + + + + + Hidden Sites + +
+
+
+
+ + + + + Secure Connection + +
+
+ + + + + Unsecured Connection + +
+
+
+
+ + + + + Cookies + +
+
+ + + + + No Cookies + +
+
+
+

Site Preferences

diff --git a/data/style.css b/data/style.css index 1173a85..190affa 100644 --- a/data/style.css +++ b/data/style.css @@ -545,10 +545,6 @@ text { strokewidth: 3px; } -line{ - stroke: #FFF; -} - .greyed-out{ opacity: 0.2; } @@ -826,3 +822,123 @@ line{ } + +/* Legend for Graph */ + +.graph-legend{ + margin-right: 30px; + flex: none; +} + +.graph-legend .legend-header{ + overflow: hidden; + border-bottom: 1px solid #fff; + padding-bottom: 5px; +} + +.legend-header div:first-of-type{ + float: left; +} + +.legend-header div:last-of-type{ + float: right; +} + +.graph-legend header{ + display: inline-block; + font-size: 15px; + color: #4CC7E6; + margin-bottom: 3px; +} + +.graph-legend .legend-toggle{ + display: inline-block; + font-size: 12px; + cursor: pointer; +} + +.graph-legend .legend-controls{ + clear: both; + padding: 10px 0; +} + +.graph-legend .column{ + float: left; +} + +.graph-legend .column .btn{ + width: 170px; + margin-right: 30px; + margin-bottom: 8px; + opacity: 0.4; +} + +.graph-legend .column .btn:hover{ + opacity: 1; +} + +.graph-legend .column .btn.active{ + opacity: 1; +} + +.graph-legend .legend-canvas-small, +.graph-legend .legend-canvas-large{ + height: 18px; + position: relative; + top: 7px; + margin-right: 5px; +} + +.graph-legend .legend-canvas-small{ + width: 17px; +} + +.graph-legend .legend-canvas-large{ + width: 34px; +} + +.visitedSites, +.unvisitedSites{ + fill: #FFF; +} + +.connectionLine{ + stroke: #FFF; + stroke-width: 2; +} + +.watchedSites{ + fill: #FFF; + stroke: #268CB7; + stroke-width: 2; +} + +.blockedSites{ + fill: #FFF; + stroke: #FF0000; + stroke-width: 2; +} + +.hiddenSites{ + fill: #FFF; + stroke: #FA9828; + stroke-width: 2; +} + +.secureConnection{ + stroke: #107A10; + stroke-width: 2; +} + +.unsecureConnection{ + stroke: #FFFF00; + stroke-width: 2; +} + +.cookies{ + fill: #800080; +} + +.noCookies{ + fill: #FFF; +} diff --git a/data/ui.js b/data/ui.js index 7f46348..8a07f24 100644 --- a/data/ui.js +++ b/data/ui.js @@ -400,3 +400,29 @@ document.querySelector(".connections-list ul").addEventListener("click", functio } } }); + + +/* Legend & Controls for Graph ===================================== */ + +document.querySelector(".graph-legend .legend-controls").addEventListener("click", function(event){ + if (event.target.mozMatchesSelector(".btn, .btn *")){ + var btn = event.target; + while(btn.mozMatchesSelector('.btn *')){ + btn = btn.parentElement; + } + btn.classList.toggle("active"); + } +}); + +document.querySelector(".graph-legend .legend-toggle").addEventListener("click", function(event){ + var controlsSection = document.querySelector(".graph-legend .legend-controls"); + if ( controlsSection.classList.contains("hidden") ){ + controlsSection.classList.remove("hidden"); + event.target.innerHTML = "Hide"; + }else{ + controlsSection.classList.add("hidden"); + event.target.innerHTML = "Show"; + } + +}); +