mozilla
/
lightbeam
зеркало из https://github.com/mozilla/lightbeam.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

[Closed #373] added glowing effect to selected nodes

This commit is contained in:
Mavis Ou 2013-08-21 16:12:57 -07:00
Родитель af136b0a10
Коммит 5144d1b53c
7 изменённых файлов: 129 добавлений и 33 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

3
data/clock.js
Просмотреть файл

@ -216,6 +216,8 @@ function resetCanvas(){
// You will still need to remove timer events
var parent = vizcanvas.parentNode;
var newcanvas = vizcanvas.cloneNode(false);
var vizcanvasDefs = document.querySelector(".vizcanvas defs").cloneNode(true);
newcanvas.appendChild(vizcanvasDefs);
parent.replaceChild(newcanvas, vizcanvas);
vizcanvas = newcanvas;
}
@ -391,7 +393,6 @@ document.querySelector('#content').addEventListener('click', function(event){
while(node.mozMatchesSelector('.node *')){
node = node.parentElement;
}
// console.log(node);
applyHighlightingEffect(node.getAttribute("data-name"));
}
}

2
data/graph.js
Просмотреть файл

@ -278,6 +278,8 @@ function resetCanvas(){
// You will still need to remove timer events
var parent = vizcanvas.parentNode;
var newcanvas = vizcanvas.cloneNode(false);
var vizcanvasDefs = document.querySelector(".vizcanvas defs").cloneNode(true);
newcanvas.appendChild(vizcanvasDefs);
parent.replaceChild(newcanvas, vizcanvas);
vizcanvas = newcanvas;
aggregate.off('update', onUpdate);

8
data/index.html
Просмотреть файл

@ -285,6 +285,14 @@
<div class="stage">
<svg class="vizcanvas" width="100%" height="100%" viewBox="-350 -450 700 500">
<defs>
<radialGradient fy="50%" fx="50%" r="50%" cy="50%" cx="50%" id="selected-glow">
<stop style="stop-color:rgb(255,255,255);stop-opacity:1" offset="0%"></stop>
<stop style="stop-color:rgb(0,0,0);stop-opacity:0" offset="100%"></stop>
</radialGradient>
<radialGradient fy="50%" fx="50%" r="50%" cy="50%" cx="50%" id="connected-glow">
<stop style="stop-color:#2E8CB3;stop-opacity:1" offset="0%"></stop>
<stop style="stop-color:rgb(0,0,0);stop-opacity:0" offset="100%"></stop>
</radialGradient>
</defs>
</svg>
</div><!-- .stage -->

17
data/infobar.js
Просмотреть файл

@ -9,21 +9,26 @@ document.querySelector('#content').addEventListener('click', function(event){
// click could happen on .node or an element inside of .node
if (event.target.mozMatchesSelector('.node, .node *')){
var node = event.target;
var name;
if (node.mozMatchesSelector('[type=checkbox], td [type=checkbox]')) return;
while(node.mozMatchesSelector('.node *')){
node = node.parentElement;
}
// console.log('svg node: %o, name: %s, data node: %s', node, node.getAttribute('data-name'), aggregate.nodeForKey(node.getAttribute('data-name')));
updateInfo(node.getAttribute("data-name"));
}else{
//console.log('does not match .node: %o', event.target);
name = node.getAttribute("data-name");
selectedNodeEffect(name);
updateInfo(name);
}
},false);
document.querySelector(".connections-list ul").addEventListener("click", function(event){
if (event.target.mozMatchesSelector("li")){
updateInfo(event.target.innerHTML);
var name = event.target.innerHTML;
var previouslySelected = document.querySelector(".connections-list ul li[data-selected]");
if ( previouslySelected ){
document.querySelector(".connections-list ul li[data-selected]").removeAttribute("data-selected");
}
event.target.setAttribute("data-selected",true);
resetAllGlow("connected");
connectedNodeEffect(name);
});
// get server info from http://freegeoip.net

19
data/style.css
Просмотреть файл

@ -604,6 +604,10 @@ a:hover{
background-color: #6FC3E5;
}
.connections-list ul li[data-selected]{
background-color: #73A4B8;
}
.stage-stack{
padding: 20px 0 20px 40px;
flex-direction: column;
@ -737,20 +741,20 @@ text {
opacity: 0.2;
}
.clicked-node.node{
.clicked-node.node circle:last-child{
stroke-width: 2;
fill: #fff;
}
.clicked-node.node.source{
.clicked-node.node.source circle:last-child{
stroke: #128764;
}
.clicked-node.node.target{
.clicked-node.node.target circle:last-child{
stroke: #F1C40F;
}
.colluded-source.node, .colluded-target.node{
.colluded-source.node circle:last-child, .colluded-target.node circle:last-child{
stroke: #fff;
stroke-width: 1;
}
@ -897,6 +901,10 @@ text {
cursor: pointer;
}
.list-table tr.selected-connected-row{
background-color: #73A4B8;
}
[data-pref=watch]{
color: teal;
}
@ -933,7 +941,8 @@ text {
.list-table tbody tr:hover,
.list-table tbody tr.checked{
background: #33464d;
background: rgba(255,255,255,1);
color: #000;
}
.list-table .visited-row td{

11
data/tooltip.js
Просмотреть файл

@ -3,6 +3,7 @@
var tooltipTimer;
var tooltip;
// for Clock view
function showTooltip(event){
if (!tooltip){
tooltip = document.getElementById('tooltip');
@ -11,14 +12,15 @@ function showTooltip(event){
tooltip.style.display = 'inline-block';
// console.error(event, event.target, event.target.dataset);
tooltip.innerHTML = event.target.getAttribute(["data-name"]);
var rect = event.target.getClientRects()[0];
var rect = event.target.querySelector(":last-child").getClientRects()[0];
var tooltipWidth = tooltip.offsetWidth;
tooltip.style.top = (rect.top - 45) + 'px';
tooltip.style.top = (rect.top - 40) + 'px';
tooltip.style.left = (rect.left + (rect.width / 2) - (tooltipWidth / 2)) + 'px';
setTooltipTimeout();
return false;
}
// for Graph view
function d3ShowTooltip(node, idx){
if (!tooltip){
tooltip = document.getElementById('tooltip');
@ -27,9 +29,10 @@ function d3ShowTooltip(node, idx){
tooltip.style.display = 'inline-block';
// console.error(event, event.target, event.target.dataset);
tooltip.innerHTML = node.name;
var rect = this.getClientRects()[0];
var shapeNode = this.querySelector(".site") || this.querySelector("[data-name]"); // look for "site"(circle) node or "tracker(triangle)" node
var rect = shapeNode.getClientRects()[0];
var tooltipWidth = tooltip.offsetWidth;
tooltip.style.top = (rect.top - 55) + 'px';
tooltip.style.top = (rect.top - 40) + 'px';
tooltip.style.left = (rect.left + (rect.width / 2) - (tooltipWidth / 2)) + 'px';
return false;
}

102
data/ui.js
Просмотреть файл

@ -359,23 +359,6 @@ function roundOffTimestamp(connections){
});
}
/* Info Panel Connections List ===================================== */
document.querySelector(".connections-list ul").addEventListener("click", function(event){
if (event.target.mozMatchesSelector("li")){
if ( currentVisualization.name === "clock" ){
applyHighlightingEffect(event.target.innerHTML);
}
else if ( currentVisualization.name === "list" ){
//currentVisualization.emit("showFilteredTable", event.target.innerHTML);
}else{
}
}
});
/* Legend & Controls ===================================== */
function toggleLegendSection(eventTarget,legendElm){
@ -406,3 +389,88 @@ function legendBtnClickHandler(legendElm){
}
});
}
/* Glowing Effect for Graph/Clock & Highlighting Effect for List ============= */
function selectedNodeEffect(name){
if ( currentVisualization.name == "graph" || currentVisualization.name == "clock"){
resetAllGlow("all");
}
if ( currentVisualization.name == "graph" ){
addGlow(name,"selected");
}
if ( currentVisualization.name == "list" ){
resetHighlightedRow();
}
}
function connectedNodeEffect(name){
console.log(name);
if ( currentVisualization.name != "list" ){
var glow;
while( glow ){
glow = document.querySelector(".connected-glow");
glow.parentNode.removeChild(glow);
}
addGlow(name,"connected");
}else{
resetHighlightedRow();
var row = document.querySelector(".list-table tr[data-name='"+name+"']");
if (row ){
row.classList.add("selected-connected-row");
}
}
}
// for Graph & Clock
function addGlow(name,type){
var gNodes = document.querySelectorAll(".node[data-name='"+name+"']");
var siteNode, shape, type, radiusBase, cx, cy, r;
toArray(gNodes).forEach(function(gNode){
siteNode = gNode.childNodes[0];
shape = siteNode.nodeName.toLowerCase();
type = ( type == "selected") ? "selected-glow" : "connected-glow";
radiusBase = ( currentVisualization.name == "graph" ) ? 40 : 20;
cx = siteNode.getAttribute("cx") || 0;
cy = siteNode.getAttribute("cy") || 0;
r = ( shape == "circle" ) ? radiusBase : radiusBase+10;
d3.select(gNode)
.insert('circle', ":first-child")
.attr('cx', cx)
.attr('cy', cy)
.attr('r', r)
.attr("fill", "url(#"+type+")")
.classed(type, true);
});
}
// for Graph & Clock
function resetAllGlow(type){
var selectedGlow;
var connectedGlow;
if ( type == "selected" || type == "all"){
while( document.querySelector(".selected-glow") ){
selectedGlow = document.querySelector(".selected-glow");
selectedGlow.parentNode.removeChild(selectedGlow);
}
}
if ( type == "connected" || type == "all"){
while( document.querySelector(".connected-glow") ){
connectedGlow = document.querySelector(".connected-glow");
connectedGlow.parentNode.removeChild(connectedGlow);
}
}
}
// for List
function resetHighlightedRow(){
var preHighlighted = document.querySelector(".list-table .selected-connected-row");
if ( preHighlighted ){
preHighlighted.classList.remove("selected-connected-row");
}
}