diff --git a/data/collusion.js b/data/collusion.js index af85cc1..7f598e5 100644 --- a/data/collusion.js +++ b/data/collusion.js @@ -1,3 +1,5 @@ +'use strict'; + var visualizations = {}; var currentVisualization; var allConnections = []; diff --git a/data/index.html b/data/index.html index 596c3b0..9d01e6a 100644 --- a/data/index.html +++ b/data/index.html @@ -11,9 +11,8 @@
diff --git a/data/infobar.js b/data/infobar.js index 3b1f0fa..3c7b0be 100644 --- a/data/infobar.js +++ b/data/infobar.js @@ -1,3 +1,5 @@ +'use strict'; + function initMap(){ var oriMapViewBox = mapcanvas.getAttribute('viewBox'); @@ -7,10 +9,10 @@ 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; + if (node.mozMatchesSelector('[type=checkbox], td [type=checkbox]')) return; while(node.mozMatchesSelector('.node *')){ node = node.parentElement; } - if (node.querySelector('[type=checkbox]')) return; // console.log('svg node: %o, name: %s, data node: %s', node, node.getAttribute('data-name'), aggregate.nodeForKey(node.getAttribute('data-name'))); updateInfo(node.dataset.name); }else{ @@ -76,7 +78,13 @@ function updateMap(countryCode){ setZoom(newViewBox, mapcanvas); } - +function getLongDate(Short){ + var months = ['January','February','March','April','May','June','July','August','September','October','November','December']; + var number_deco = ['st','nd','rd','th','th','th','th','th','th']; + var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'] + var array = Short.split('/'); + return days[new Date(Number(array[2]), Number(array[0])-1, Number(array[1])).getDay()]+', '+months[Number(array[0])-1]+' '+Number(array[1])+number_deco[Number(array[0].slice(-1))]+', '+array[2]; +} // updates info on the info panel function updateInfo(nodeName){ @@ -99,6 +107,11 @@ function updateInfo(nodeName){ } } + var HTMLnode = document.querySelector('[data-name="'+nodeName+'"]'); + document.querySelector('.info-first-access').textContent = getLongDate(HTMLnode.children[4].textContent); + document.querySelector('.info-last-access').textContent = getLongDate(HTMLnode.children[5].textContent); + + // update the connections list var nodeList = aggregate.nodeForKey(nodeName); var htmlList = ""; @@ -109,8 +122,7 @@ function updateInfo(nodeName){ numConnectedSites++; } } - document.querySelector(".num-connected-sites").innerHTML - = ( numConnectedSites > 1) ? ( numConnectedSites + " Connected Sites" ) : ( numConnectedSites + " Connected Site" ) ; + document.querySelector(".num-connected-sites").textContent = numConnectedSites; document.querySelector(".connections-list ul").innerHTML = htmlList; document.querySelector("#content").classList.add("showinfo"); diff --git a/data/list.js b/data/list.js index b074476..683d112 100644 --- a/data/list.js +++ b/data/list.js @@ -1,9 +1,10 @@ +'use strict'; + // List Visualization // Display data in tabular format (function(visualizations){ -"use strict"; var list = new Emitter(); visualizations.list = list; @@ -86,7 +87,6 @@ function initList(){ }); // Add handler for rows document.querySelector('.list-table').addEventListener('click', function(event){ - // FIXME: This selector is too broad var url = event.target.parentNode.dataset.sortKey; if (event.target.mozMatchesSelector('td:nth-child(1)')){ var checkbox = event.target.querySelector('input') @@ -302,6 +302,10 @@ function initializeHandlers(){ selectAllRows(event.target.checked); }, false); + document.querySelector('.list-footer').querySelector(".legend-toggle").addEventListener("click", function(event){ + toggleLegendSection(event.target,document.querySelector('.list-footer')); + }); + document.querySelector('.stage-stack').addEventListener('click', function(event){ var target = event.target; if(target.mozMatchesSelector('.block-pref a')){ diff --git a/data/style.css b/data/style.css index d7d5bf3..eed54c2 100644 --- a/data/style.css +++ b/data/style.css @@ -137,12 +137,6 @@ h3 { background: #303539; line-height: 28px; } -.btn.orange a{ - background: rgb(250, 105, 0); -} -.btn.orange a:hover{ - background: rgb(200, 75, 0); -} .btn_group .dropdown_options.expanded a:hover{ cursor: pointer; @@ -324,11 +318,14 @@ h3 { flex:1; display:flex; flex-direction:column; +<<<<<<< HEAD margin-top:15px; } .connections-list ul li{ padding:2px 2px 2px 10px; +======= +>>>>>>> azlen-c2_fresh_start } .highlight-country{ @@ -352,10 +349,10 @@ h3 { } .blue-text { - color: #64aac5; + color: #4CC7E6; } .dark-blue-text{ - color:#317792; + color: #0C87A6; } .info .filters{ @@ -402,17 +399,22 @@ h3 { } .connections-list ul{ + margin-top:50px; font-size: 12px; line-height: 15px; list-style-type: none; - min-height: 75px; + min-height: 150px; overflow-y: auto; flex:1; } +.connections-list ul li{ + padding:2px 2px 2px 10px; + cursor: pointer; +} + .connections-list ul li:hover, .settings-page ul li:hover{ - cursor: pointer; background-color: #475B61; } @@ -442,35 +444,6 @@ h3 { /*margin-right: 300px;*/ } -.list-footer{ - flex: none; - display: none; -} - -.list .list-footer{ - display: block; -} -.list-footer h3{ - font-size: 12px; - margin-bottom:10px; -} -.list-footer-btns{ - display:flex; - justify-content:space-between; - align-items:flex-start; -} -.list-footer-btns .btn{ - margin-right:20px; - color: rgb(234, 234, 234); - border: 0; -} -.list-footer-btns .btn a{ - padding-right:10px; -} -.btn-spacer{ - flex:1; -} - /* SVG STYLES */ @@ -734,7 +707,7 @@ text { .preferences{ background-size: 16px; background-repeat: no-repeat; - background-position: center; + background-position: center left; } [data-pref=watch] .preferences{ @@ -906,10 +879,11 @@ text { -/* Legend for Graph and Clock */ +/* Legend for Graph and Clock and Site Preferences for List*/ .graph-footer, -.clock-footer{ +.clock-footer, +.list-footer{ margin-right: 30px; flex: none; } @@ -931,7 +905,6 @@ text { .legend-header header{ display: inline-block; font-size: 15px; - color: #4CC7E6; margin-bottom: 3px; } @@ -972,6 +945,8 @@ text { opacity: 1; } + + .legend-controls .legend-canvas-small, .legend-controls .legend-canvas-large{ height: 18px; @@ -980,6 +955,12 @@ text { margin-right: 5px; } +.legend-controls .column .btn img{ + position: relative; + top: 4px; + margin-right: 5px; +} + .legend-controls .legend-canvas-small{ width: 17px; }