зеркало из https://github.com/mozilla/lightbeam.git
some toggle buttons for Clock view are working
This commit is contained in:
Mavis Ou
Родитель
c4daa07b21
Коммит
49552e0918
|
|
@ -115,8 +115,16 @@ function onConnection(conn){
|
|||
|
||||
|
||||
function appendNodeG(bucket,connection,nodeType){
|
||||
var classes = [ "node", nodeType ];
|
||||
if ( nodeType == "source" && highlightSource ){
|
||||
classes.push("highlighted");
|
||||
}
|
||||
if ( nodeType == "target" && highlightTarget ){
|
||||
classes.push("highlighted");
|
||||
}
|
||||
|
||||
var g = svg('g', {
|
||||
'class': 'node ' + nodeType,
|
||||
'class': classes.join(" "),
|
||||
'data-name': connection[nodeType]
|
||||
});
|
||||
g.appendChild(svg('circle', {
|
||||
|
|
@ -347,5 +355,26 @@ function updateTime(){
|
|||
}
|
||||
|
||||
|
||||
|
||||
/* for Highlighting and Colouring -------------------- */
|
||||
var highlightSource = true;
|
||||
var highlightTarget = true;
|
||||
var clockLegend = document.querySelector(".clock-footer");
|
||||
|
||||
legendBtnClickHandler(clockLegend);
|
||||
|
||||
clockLegend.querySelector(".toggle-visited").addEventListener("click", function(event){
|
||||
var visited = document.querySelectorAll(".source");
|
||||
toggleVizElements(visited,"highlighted");
|
||||
highlightSource = !highlightSource;
|
||||
});
|
||||
|
||||
clockLegend.querySelector(".toggle-target").addEventListener("click", function(event){
|
||||
var targets = document.querySelectorAll(".target");
|
||||
toggleVizElements(targets,"highlighted");
|
||||
highlightTarget = !highlightTarget;
|
||||
});
|
||||
|
||||
|
||||
})(visualizations);
|
||||
|
||||
|
|
|
|||
|
|
@ -241,4 +241,41 @@ function resetCanvas(){
|
|||
}
|
||||
|
||||
|
||||
|
||||
/* for Highlighting and Colouring -------------------- */
|
||||
|
||||
var highlightVisited = true;
|
||||
var highlightNeverVisited = true;
|
||||
var highlightConnections = true;
|
||||
var highlightCookies = false;
|
||||
var graphLegend = document.querySelector(".graph-footer");
|
||||
|
||||
legendBtnClickHandler(graphLegend);
|
||||
|
||||
graphLegend.querySelector(".toggle-visited").addEventListener("click", function(event){
|
||||
var visited = document.querySelectorAll(".visitedYes, .visitedBoth");
|
||||
toggleVizElements(visited,"highlighted");
|
||||
highlightVisited = !highlightVisited;
|
||||
});
|
||||
|
||||
graphLegend.querySelector(".toggle-never-visited").addEventListener("click", function(event){
|
||||
var neverVisited = document.querySelectorAll(".visitedNo");
|
||||
toggleVizElements(neverVisited,"highlighted");
|
||||
highlightNeverVisited = !highlightNeverVisited;
|
||||
});
|
||||
|
||||
graphLegend.querySelector(".toggle-connections").addEventListener("click", function(event){
|
||||
var cookiesConnections = document.querySelectorAll(".edge");
|
||||
toggleVizElements(cookiesConnections,"highlighted");
|
||||
highlightConnections = !highlightConnections;
|
||||
});
|
||||
|
||||
graphLegend.querySelector(".toggle-cookies").addEventListener("click", function(event){
|
||||
var cookiesConnections = document.querySelectorAll(".cookieYes");
|
||||
toggleVizElements(cookiesConnections,"coloured");
|
||||
highlightCookies = !highlightCookies;
|
||||
});
|
||||
|
||||
|
||||
|
||||
})(visualizations);
|
||||
|
|
|
|||
|
|
@ -229,7 +229,7 @@
|
|||
Visited Site("source")
|
||||
</a>
|
||||
</div>
|
||||
<div class="btn toggle-never-visited active">
|
||||
<div class="btn toggle-target active">
|
||||
<a>
|
||||
<svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="targetSites" cx="8" cy="8" r="6" />
|
||||
|
|
@ -239,7 +239,7 @@
|
|||
</div>
|
||||
</section>
|
||||
<section class="column">
|
||||
<div class="btn toggle-visited active">
|
||||
<div class="btn">
|
||||
<a>
|
||||
<svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="watchedSites" cx="8" cy="8" r="6" />
|
||||
|
|
@ -247,7 +247,7 @@
|
|||
Watched Sites
|
||||
</a>
|
||||
</div>
|
||||
<div class="btn toggle-never-visited active">
|
||||
<div class="btn">
|
||||
<a>
|
||||
<svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="blockedSites" cx="8" cy="8" r="6" />
|
||||
|
|
@ -258,7 +258,7 @@
|
|||
</div>
|
||||
</section>
|
||||
<section class="column">
|
||||
<div class="btn toggle-visited active">
|
||||
<div class="btn">
|
||||
<a>
|
||||
<svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="hiddenSites" cx="8" cy="8" r="6" />
|
||||
|
|
@ -268,13 +268,13 @@
|
|||
</div>
|
||||
</section>
|
||||
<section class="column">
|
||||
<div class="legend-label toggle-visited active">
|
||||
<div class="legend-label">
|
||||
<svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="selectedSites" cx="8" cy="8" r="6" />
|
||||
</svg>
|
||||
Selected Site
|
||||
</div>
|
||||
<div class="legend-label toggle-never-visited active">
|
||||
<div class="legend-label">
|
||||
<svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="colludedSites" cx="8" cy="8" r="6" />
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -516,12 +516,19 @@ text {
|
|||
.sourceSites{
|
||||
fill: #FFF;
|
||||
stroke: none;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.target,
|
||||
.targetSites{
|
||||
fill: #FFDD64;
|
||||
stroke: none;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.source.highlighted,
|
||||
.target.highlighted{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -627,14 +634,14 @@ text {
|
|||
|
||||
.edge{
|
||||
stroke: #FFF;
|
||||
opacity: 0.5;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.visitedYes,
|
||||
.visitedNo,
|
||||
.visitedBoth{
|
||||
fill: #FFFFFF;
|
||||
opacity: 0.5;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.visitedYes.highlighted,
|
||||
|
|
|
|||
61
data/ui.js
61
data/ui.js
|
|
@ -404,13 +404,6 @@ document.querySelector(".connections-list ul").addEventListener("click", functio
|
|||
|
||||
/* Legend & Controls ===================================== */
|
||||
|
||||
/* for Graph -------------------- */
|
||||
|
||||
var highlightVisited = true;
|
||||
var highlightNeverVisited = true;
|
||||
var highlightConnections = true;
|
||||
var highlightCookies = false;
|
||||
|
||||
function toggleLegendSection(eventTarget,elmToToggle){
|
||||
if ( elmToToggle.classList.contains("hidden") ){
|
||||
elmToToggle.classList.remove("hidden");
|
||||
|
|
@ -421,9 +414,14 @@ function toggleLegendSection(eventTarget,elmToToggle){
|
|||
}
|
||||
}
|
||||
|
||||
var graphLegend = document.querySelector(".graph-footer");
|
||||
function toggleVizElements(elements,classToggle){
|
||||
toArray(elements).forEach(function(elm){
|
||||
elm.classList.toggle(classToggle);
|
||||
});
|
||||
}
|
||||
|
||||
graphLegend.querySelector(".legend-controls").addEventListener("click", function(event){
|
||||
function legendBtnClickHandler(legendElm){
|
||||
legendElm.querySelector(".legend-controls").addEventListener("click", function(event){
|
||||
if (event.target.mozMatchesSelector(".btn, .btn *")){
|
||||
var btn = event.target;
|
||||
while(btn.mozMatchesSelector('.btn *')){
|
||||
|
|
@ -432,53 +430,8 @@ graphLegend.querySelector(".legend-controls").addEventListener("click", function
|
|||
btn.classList.toggle("active");
|
||||
}
|
||||
});
|
||||
|
||||
graphLegend.querySelector(".legend-toggle").addEventListener("click", function(event){
|
||||
var controlsSection = graphLegend.querySelector(".legend-controls");
|
||||
toggleLegendSection(event.target,controlsSection);
|
||||
});
|
||||
|
||||
graphLegend.querySelector(".toggle-visited").addEventListener("click", function(event){
|
||||
var visited = document.querySelectorAll(".visitedYes, .visitedBoth");
|
||||
toggleGraphElements(visited,"highlighted","highlightVisited");
|
||||
});
|
||||
|
||||
graphLegend.querySelector(".toggle-never-visited").addEventListener("click", function(event){
|
||||
var neverVisited = document.querySelectorAll(".visitedNo");
|
||||
toggleGraphElements(neverVisited,"highlighted","highlightNeverVisited");
|
||||
});
|
||||
|
||||
graphLegend.querySelector(".toggle-connections").addEventListener("click", function(event){
|
||||
var cookiesConnections = document.querySelectorAll(".edge");
|
||||
toggleGraphElements(cookiesConnections,"highlighted","highlightConnections");
|
||||
});
|
||||
|
||||
graphLegend.querySelector(".toggle-cookies").addEventListener("click", function(event){
|
||||
var cookiesConnections = document.querySelectorAll(".cookieYes");
|
||||
toggleGraphElements(cookiesConnections,"coloured","highlightCookies");
|
||||
});
|
||||
|
||||
function toggleGraphElements(elements,classToggle,flag){
|
||||
console.log(toArray(elements).length);
|
||||
toArray(elements).forEach(function(elm){
|
||||
elm.classList.toggle(classToggle);
|
||||
});
|
||||
switch(flag){
|
||||
case "highlightVisited":
|
||||
highlightVisited = !highlightVisited;
|
||||
case "highlightNeverVisited":
|
||||
highlightNeverVisited = !highlightNeverVisited;
|
||||
case "highlightConnections":
|
||||
highlightConnections = !highlightConnections;
|
||||
case "highlightCookies":
|
||||
highlightCookies = !highlightCookies;
|
||||
break;
|
||||
default:
|
||||
console.log("toggle flag=" + flag);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* for Clock -------------------- */
|
||||
|
||||
document.querySelector(".clock-footer .legend-toggle").addEventListener("click", function(event){
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче