зеркало из https://github.com/mozilla/lightbeam.git
fixed up clashes in the merge
This commit is contained in:
Azlen Elza
Коммит
ca78c5213e
|
|
@ -2,19 +2,19 @@
|
|||
font-family: 'Open Sans';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: url('font/opensans-italic-webfont.woff') format('woff')
|
||||
src: url('font/OpenSans-LightItalic.ttf') format('truetype')
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: bold;
|
||||
font-weight: 700;
|
||||
src: url('font/opensans-bold-webfont.woff') format('woff')
|
||||
src: url('font/OpenSans-Regular.ttf') format('truetype')
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('font/opensans-regular-webfont.woff') format('woff')
|
||||
src: url('font/OpenSans-Light.ttf') format('truetype')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -72,8 +72,12 @@ 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('.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');
|
||||
if ( localStorage.userHasOptedIntoSharing && localStorage.userHasOptedIntoSharing === 'true' ){
|
||||
startUploadTimer();
|
||||
}
|
||||
|
|
@ -181,7 +185,7 @@ function startSharing(){
|
|||
function stopSharing(){
|
||||
if (confirm('You are about to stop sharing data with the Mozilla Collusion server.\n\n' +
|
||||
'By clicking Okay you will no longer be uploading data.')){
|
||||
uploadButton.innerHTML = '<i class="icon-arrow-up"></i>Share Data';
|
||||
uploadButton.innerHTML = '<img src="image/collusion_icon_share.png" /></i>Share Data';
|
||||
localStorage.userHasOptedIntoSharing = false;
|
||||
if (uploadTimer){
|
||||
clearTimeout(uploadTimer);
|
||||
|
|
|
|||
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичные данные
data/font/opensans-bold-webfont.woff
Двоичные данные
data/font/opensans-bold-webfont.woff
Двоичный файл не отображается.
Двоичные данные
data/font/opensans-bolditalic-webfont.woff
Двоичные данные
data/font/opensans-bolditalic-webfont.woff
Двоичный файл не отображается.
Двоичные данные
data/font/opensans-italic-webfont.woff
Двоичные данные
data/font/opensans-italic-webfont.woff
Двоичный файл не отображается.
Двоичные данные
data/font/opensans-regular-webfont.woff
Двоичные данные
data/font/opensans-regular-webfont.woff
Двоичный файл не отображается.
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 488 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 957 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 370 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 872 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 703 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 642 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 734 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 817 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 970 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 807 B |
102
data/index.html
102
data/index.html
|
|
@ -10,43 +10,79 @@
|
|||
<body>
|
||||
<div class="main">
|
||||
<aside class="controls">
|
||||
<div class='collusion-title'>
|
||||
<h1>Collusion</h1>
|
||||
</div>
|
||||
<div class="btn_group filter" style="margin-bottom: 10px">
|
||||
<div data-view class="dropdown_button">
|
||||
<a class="invi_focus" href="#"></a>
|
||||
<a class="selected_time"><i class="icon-time"></i>Today</a>
|
||||
<div class="downarrow"><i class="icon-sort-down"></i></div>
|
||||
<header>
|
||||
<div class="collusion-icon">
|
||||
</div>
|
||||
<div data-list class="dropdown_options collapsed">
|
||||
<a data-selected data-value="Today">Today</a>
|
||||
<a data-value="BBB">BBB</a>
|
||||
<a data-value="CCC">CCC</a>
|
||||
<a data-value="DDD">DDD</a>
|
||||
</div>
|
||||
</div>
|
||||
<span>Current View:</span>
|
||||
<img class="logo" src="image/collusion_wordmark_temp.png" />
|
||||
</header>
|
||||
<div class="btn_group visualization">
|
||||
<div data-view class="dropdown_button">
|
||||
<a class="invi_focus" href="#"></a>
|
||||
<a class="selected_visualization">Graph</a>
|
||||
<div class="downarrow"><i class="icon-sort-down"></i></div>
|
||||
<span>VISUALIZATION</span>
|
||||
<div class="arrow">
|
||||
<i class="icon-sort-down"></i><i class="icon-sort-up hidden"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div data-list class="dropdown_options collapsed">
|
||||
<a data-selected data-value="Graph">Graph</a>
|
||||
<a data-value="Clock">Clock</a>
|
||||
<a data-value="List">List</a>
|
||||
<div data-list class="dropdown_options">
|
||||
<a class="collapsed" data-value="Graph">
|
||||
<img src="image/collusion_icon_graph.png" />graph
|
||||
</a>
|
||||
<a class="collapsed" data-value="Clock">
|
||||
<img src="image/collusion_icon_clock.png" />clock
|
||||
</a>
|
||||
<a class="collapsed" data-value="List">
|
||||
<img src="image/collusion_icon_list.png" />list
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn_group session">
|
||||
<div data-view class="dropdown_button">
|
||||
<span>SESSION</span>
|
||||
<div class="arrow">
|
||||
<i class="icon-sort-down"></i><i class="icon-sort-up hidden"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div data-list class="dropdown_options">
|
||||
<a data-selected data-value="recent">recent site</a>
|
||||
<a class="collapsed" data-value="last10sites">last 10 sites</a>
|
||||
<a class="collapsed" data-value="daily">daily</a>
|
||||
<a class="collapsed" data-value="weekly">weekly</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<a class="upload">
|
||||
<img src="image/collusion_icon_share.png" />share
|
||||
</a>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<a class="download">
|
||||
<img src="image/collusion_icon_save.png" />download
|
||||
</a>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<a class="reset-data">
|
||||
<img src="image/collusion_icon_reset.png" />reset
|
||||
</a>
|
||||
</div>
|
||||
<ul class="controls_options">
|
||||
<li class="upload"><a><i class="icon-arrow-up"></i>Share Data</a></li>
|
||||
<li class="download"><a><i class="icon-arrow-down"></i>Download data</a></li>
|
||||
<li class="reset-data"><a><i class="icon-refresh"></i>Reset data</a></li>
|
||||
<li class="settings"><a>Toggle Settings</a></li>
|
||||
<li class="show-info-button"><a>Toggle Info Panel</a></li>
|
||||
<li><input type="checkbox" class="help-mode" /> Help Mode </li>
|
||||
</ul>
|
||||
<div class="square-button-controls">
|
||||
<div class="square-button">
|
||||
<a class="help-mode"><img src="image/collusion_icon_help.png" /></a>
|
||||
<div class="button-label">HELP</div>
|
||||
</div>
|
||||
<div class="square-button">
|
||||
<a class="settings"><img src="image/collusion_icon_settings.png" /></a>
|
||||
<div class="button-label">SETTINGS</div>
|
||||
</div>
|
||||
<div class="square-button">
|
||||
<a class="about"><img src="image/collusion_icon_about.png" /></a>
|
||||
<div class="button-label">ABOUT</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collusion-url">
|
||||
www.mozilla.org/collusion
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="content-flex">
|
||||
|
|
@ -2713,12 +2749,12 @@
|
|||
<div class="stage-footer">
|
||||
<h3>SITE PREFERENCES</h3>
|
||||
<div class="stage-footer-btns">
|
||||
<button class="block-pref btn">Block Site</button>
|
||||
<button class="hide-pref btn">Hide Site</button>
|
||||
<button class="watch-pref btn">Watch Site</button>
|
||||
<button class="no-pref btn">Remove</button>
|
||||
<div class="block-pref btn"><a>Block Site</a></div>
|
||||
<div class="hide-pref btn"><a>Hide Site</a></div>
|
||||
<div class="watch-pref btn"><a>Watch Site</a></div>
|
||||
<div class="no-pref btn"><a>Remove</a></div>
|
||||
<div class="btn-spacer"></div>
|
||||
<button class="toggle-hidden btn orange">Hide Hidden</button>
|
||||
<div class="toggle-hidden btn orange"><a>Hide Hidden</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- .stage-stack -->
|
||||
|
|
|
|||
216
data/style.css
216
data/style.css
|
|
@ -9,12 +9,18 @@
|
|||
dropdown buttons: #363636
|
||||
sidebar "link" buttons: #939393
|
||||
*/
|
||||
|
||||
|
||||
/* New colour scheme:
|
||||
sidebar, info panel
|
||||
background:#404850
|
||||
*/
|
||||
|
||||
html, body{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
background-color: #2E2B2B;
|
||||
background-color: #000;
|
||||
color: #EAEAEA;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -34,56 +40,69 @@ h3 {
|
|||
|
||||
.main{
|
||||
position: relative;
|
||||
height: calc(100%);
|
||||
}
|
||||
|
||||
.collusion-title{
|
||||
height:65px;
|
||||
margin-bottom:15px;
|
||||
|
||||
}
|
||||
.collusion-title h1{
|
||||
font-size: 25px;
|
||||
vertical-align: center;
|
||||
line-height: 50px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.controls{
|
||||
width: 200px;
|
||||
padding: 15px 30px;
|
||||
width: 170px;
|
||||
padding: 15px 15px;
|
||||
float: left;
|
||||
border-top: 1px solid #555555;
|
||||
border-right: 1px solid #555555;
|
||||
z-index: 5;
|
||||
height: 100%;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background: #404850;
|
||||
}
|
||||
|
||||
.controls i:not(.icon-sort-down){
|
||||
margin-right: 5px;
|
||||
font-size: 14px;
|
||||
vertical-align: middle;
|
||||
.controls .btn{
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.btn_group > *{
|
||||
background: #363636;
|
||||
.controls header{
|
||||
height: 35px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.btn_group{
|
||||
width: 100%;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
.collusion-icon{
|
||||
border:1px solid #5ABED2;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 5px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.logo{
|
||||
float: left;
|
||||
width: 85px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.hidden{
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Button Styling =============== */
|
||||
|
||||
.btn a:hover,
|
||||
.square-button a:hover{
|
||||
background: #475B61;
|
||||
}
|
||||
|
||||
.btn_group,
|
||||
.btn{
|
||||
margin-bottom: 15px;
|
||||
background: #25292D;
|
||||
font-size: 7pt;
|
||||
letter-spacing: 1px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.btn_group .dropdown_button{
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
border: 1px solid #555555;
|
||||
border-radius: 2px;
|
||||
border-radius: 5px 0 0 0;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -92,41 +111,70 @@ h3 {
|
|||
color: #EAEAEA;
|
||||
}
|
||||
|
||||
.btn_group .downarrow{
|
||||
.btn_group .arrow{
|
||||
float: right;
|
||||
border-left: 1px solid #555555;
|
||||
padding: 0 10px;
|
||||
background: #12181B;
|
||||
border-radius: 0 5px 0 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.collapsed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.invi_focus:focus{
|
||||
outline: none;
|
||||
.btn a,
|
||||
.square-button a{
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.controls .btn_group .dropdown_options{
|
||||
line-height: 28px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.controls .btn_group div.dropdown_options a{
|
||||
.btn_group div.dropdown_options a,
|
||||
.btn a{
|
||||
margin: 0;
|
||||
display: block;
|
||||
padding-left: 10px;
|
||||
border-color: #555555;
|
||||
border-width: 0 1px 1px 1px;
|
||||
border-style: solid;
|
||||
background: #303539;
|
||||
line-height: 28px;
|
||||
}
|
||||
.btn.orange a{
|
||||
background: rgb(250, 105, 0);
|
||||
}
|
||||
.btn.orange a:hover{
|
||||
background: rgb(200, 75, 0);
|
||||
}
|
||||
|
||||
.controls .btn_group div.dropdown_options a[data-selected]{
|
||||
.btn_group .dropdown_options.expanded a:hover{
|
||||
cursor: pointer;
|
||||
background: #475B61;
|
||||
}
|
||||
|
||||
.btn_group .dropdown_options a[data-selected]{
|
||||
border-radius: 0 0 5px 5px;
|
||||
background: #5F6771;
|
||||
}
|
||||
|
||||
.btn_group .dropdown_options.expanded a{
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.btn_group .dropdown_options.expanded a:last-child{
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
|
||||
.btn_group .dropdown_options a.collapsed{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn_group img,
|
||||
.btn img{
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-right: 15px;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
|
||||
.controls ul{
|
||||
list-style-type: none;
|
||||
}
|
||||
|
|
@ -143,15 +191,62 @@ h3 {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.controls a:hover{
|
||||
color: white;
|
||||
.controls .square-button-controls{
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.controls .collusion-url{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.square-button{
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.square-button:not(:last-child){
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.square-button a{
|
||||
display: block;
|
||||
background: #25292D;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
padding: 5px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.square-button.active{
|
||||
background: #5F6771;
|
||||
}
|
||||
|
||||
.square-button img{
|
||||
position: relative;
|
||||
top: 2px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.square-button .button-label{
|
||||
font-size: 7pt;
|
||||
color: #fff;
|
||||
margin-top: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
#content{
|
||||
flex:1;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
border-top: 1px solid #555555;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#content span,
|
||||
|
|
@ -163,7 +258,7 @@ h3 {
|
|||
display:flex;
|
||||
flex-direction:column;
|
||||
height:100%;
|
||||
width:calc(100% - 200px);
|
||||
width:calc(100% - 170px);
|
||||
}
|
||||
|
||||
.stats-bar{
|
||||
|
|
@ -180,6 +275,7 @@ h3 {
|
|||
transition: width 0.5s ease;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background: #404850;
|
||||
}
|
||||
|
||||
.map-section{
|
||||
|
|
@ -234,7 +330,6 @@ h3 {
|
|||
|
||||
.showinfo .info{
|
||||
width: 300px;
|
||||
border-left: 1px solid #555555;
|
||||
}
|
||||
|
||||
.info .blue-text {
|
||||
|
|
@ -340,10 +435,12 @@ h3 {
|
|||
justify-content:space-between;
|
||||
align-items:flex-start;
|
||||
}
|
||||
.stage-footer-btns button{
|
||||
flex:none;
|
||||
.stage-footer-btns .btn{
|
||||
margin-right:20px;
|
||||
}
|
||||
.stage-footer-btns .btn a{
|
||||
padding-right:10px;
|
||||
}
|
||||
.btn-spacer{
|
||||
flex:1;
|
||||
}
|
||||
|
|
@ -680,19 +777,4 @@ line{
|
|||
clear: both;
|
||||
}
|
||||
|
||||
.btn{
|
||||
padding:5px 20px;
|
||||
background-color:#404040;
|
||||
border-radius: 2px;
|
||||
border:none;
|
||||
cursor:pointer;
|
||||
color: rgb(234, 234, 234)
|
||||
}
|
||||
|
||||
.btn.orange{background-color:#AD5E33}
|
||||
.btn:hover{
|
||||
background-color:#505050;
|
||||
}
|
||||
.btn.orange:hover{background-color:#9C4D22}/*DO THIS NEXT*?
|
||||
|
||||
|
||||
|
|
|
|||
130
data/ui.js
130
data/ui.js
|
|
@ -5,70 +5,82 @@ function toArray(nl){
|
|||
}
|
||||
|
||||
|
||||
/* DOMContentLoaded event listener */
|
||||
window.addEventListener("DOMContentLoaded", function(){
|
||||
/**************************************************
|
||||
* Buttons
|
||||
*/
|
||||
|
||||
function dropdownGroup(btnGroup, callback){
|
||||
var view = btnGroup.querySelector("[data-view]");
|
||||
var list = btnGroup.querySelector("[data-list]");
|
||||
var btnSelectCallback = function(e,btnGroup,callback){
|
||||
var targetValue = e.target.getAttribute("data-value");
|
||||
var otherOptions = btnGroup.querySelectorAll(".dropdown_options a:not([data-selected])");
|
||||
btnGroup.querySelector(".dropdown_options").classList.remove("expanded");
|
||||
btnGroup.querySelector(".arrow").querySelector(".icon-sort-down").classList.remove("hidden");
|
||||
btnGroup.querySelector(".arrow").querySelector(".icon-sort-up").classList.add("hidden");
|
||||
toArray(otherOptions).forEach(function(option){
|
||||
option.classList.add("collapsed");
|
||||
});
|
||||
callback(targetValue);
|
||||
}
|
||||
|
||||
callback = callback || function(){};
|
||||
|
||||
btnGroup.addEventListener("click", function(e){
|
||||
var selected = btnGroup.querySelector("[data-selected]");
|
||||
var targetValue = e.target.getAttribute("data-value");
|
||||
var activeDropdown = document.querySelector(".active_dropdown");
|
||||
|
||||
// opens up the current selected dropdown list
|
||||
btnGroup.querySelector(".dropdown_options").classList.toggle("collapsed");
|
||||
btnGroup.classList.toggle("active_dropdown");
|
||||
|
||||
// when user selects an option from the dropdown list
|
||||
if ( targetValue ){
|
||||
view.querySelector("a:not(.invi_focus)").innerHTML = e.target.innerHTML;
|
||||
selected.removeAttribute("data-selected");
|
||||
e.target.setAttribute("data-selected", true);
|
||||
callback(targetValue);
|
||||
}
|
||||
}, false);
|
||||
}
|
||||
|
||||
/* Bind click event listener to each of the btn_group memebers */
|
||||
var btnGroupArray = toArray(document.querySelectorAll(".btn_group"));
|
||||
btnGroupArray.forEach(function(btnGroup){
|
||||
dropdownGroup(btnGroup, function(val){
|
||||
val = val.toLowerCase();
|
||||
switch(val){
|
||||
case 'clock':
|
||||
case 'graph':
|
||||
case 'list':
|
||||
switchVisualization(val);
|
||||
break;
|
||||
default:
|
||||
console.log("selected val=" + val);
|
||||
}
|
||||
function dropdownGroup(btnGroup, callback){
|
||||
callback = callback || function(){};
|
||||
var arrow = btnGroup.querySelector(".arrow");
|
||||
arrow.addEventListener("click", function(event){
|
||||
var otherOptions = btnGroup.querySelectorAll(".dropdown_options a:not([data-selected])");
|
||||
var allOptions = btnGroup.querySelectorAll(".dropdown_options a");
|
||||
arrow.querySelector(".icon-sort-down").classList.toggle("hidden");
|
||||
arrow.querySelector(".icon-sort-up").classList.toggle("hidden");
|
||||
btnGroup.querySelector(".dropdown_options").classList.toggle("expanded");
|
||||
toArray(otherOptions).forEach(function(option){
|
||||
option.classList.toggle("collapsed");
|
||||
});
|
||||
});
|
||||
|
||||
toArray(allOptions).forEach(function(option){
|
||||
option.addEventListener("click", function(e){
|
||||
btnGroup.querySelector("[data-selected]").removeAttribute("data-selected");
|
||||
e.target.setAttribute("data-selected", true);
|
||||
btnSelectCallback(e,btnGroup,function(selectedValue){
|
||||
callback(selectedValue);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
/* Toggle Info Panel */
|
||||
document.querySelector(".show-info-button").addEventListener("click", function(){
|
||||
document.querySelector("#content").classList.toggle("showinfo");
|
||||
});
|
||||
}, false);
|
||||
}
|
||||
|
||||
|
||||
/* When a open dropdown list loses focus, collapse it. */
|
||||
window.addEventListener("click", function(e){
|
||||
var activeDropdown = document.querySelector(".active_dropdown");
|
||||
if ( activeDropdown && !activeDropdown.contains(e.target) ){
|
||||
activeDropdown.querySelector(".dropdown_options").classList.add("collapsed");
|
||||
activeDropdown.classList.remove("active_dropdown");
|
||||
/* Bind click event listener to each of the btn_group memebers */
|
||||
var btnGroupArray = toArray(document.querySelectorAll(".btn_group"));
|
||||
btnGroupArray.forEach(function(btnGroup){
|
||||
dropdownGroup(btnGroup, function(val){
|
||||
val = val.toLowerCase();
|
||||
switch(val){
|
||||
case 'clock':
|
||||
case 'graph':
|
||||
case 'list':
|
||||
switchVisualization(val);
|
||||
break;
|
||||
default:
|
||||
console.log("selected val=" + val);
|
||||
}
|
||||
}, true);
|
||||
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
/* Toggle Info Panel */
|
||||
document.querySelector(".show-info-button").addEventListener("click", function(){
|
||||
document.querySelector("#content").classList.toggle("showinfo");
|
||||
});
|
||||
|
||||
|
||||
/* When a open dropdown list loses focus, collapse it. */
|
||||
window.addEventListener("click", function(e){
|
||||
var activeDropdown = document.querySelector(".active_dropdown");
|
||||
if ( activeDropdown && !activeDropdown.contains(e.target) ){
|
||||
activeDropdown.querySelector(".dropdown_options").classList.add("collapsed");
|
||||
activeDropdown.classList.remove("active_dropdown");
|
||||
}
|
||||
}, true);
|
||||
|
||||
|
||||
document.querySelector(".download").addEventListener('click', function(evt) {
|
||||
console.log('received export data');
|
||||
var file = new Blob([exportFormat(allConnections)], {type: 'application/json'});
|
||||
|
|
@ -105,7 +117,7 @@ document.querySelector('.reset-data').addEventListener('click', function(){
|
|||
|
||||
var uploadButton = document.querySelector('.upload');
|
||||
if (localStorage.userHasOptedIntoSharing && localStorage.userHasOptedIntoSharing === 'true'){
|
||||
uploadButton.innerHTML = 'Stop Sharing';
|
||||
uploadButton.innerHTML = '<img src="image/collusion_icon_share.png" /> Stop Sharing';
|
||||
}
|
||||
|
||||
uploadButton.addEventListener('click', function(){
|
||||
|
|
@ -357,9 +369,10 @@ document.querySelector(".world-map").addEventListener("mouseleave",function(even
|
|||
|
||||
|
||||
/* Help Mode ========================= */
|
||||
document.querySelector(".help-mode").checked = false;
|
||||
document.querySelector(".help-mode").addEventListener("click", function(){
|
||||
if( this.checked ){
|
||||
var theButton = document.querySelector(".help-mode").parentElement;
|
||||
theButton.classList.toggle("active");
|
||||
if( theButton.className.contains("active") ){
|
||||
triggerHelp(document.querySelector("body"), "toggleOnHelp", currentVisualization.name);
|
||||
}else{
|
||||
triggerHelp(document.querySelector("body"), "toggleOffHelp", currentVisualization.name);
|
||||
|
|
@ -381,6 +394,7 @@ document.querySelector(".settings").addEventListener("click", function(event){
|
|||
if ( infoBarVisible ){
|
||||
document.querySelector("#content").classList.remove("showinfo");
|
||||
}
|
||||
document.querySelector(".settings").parentElement.classList.toggle("active");
|
||||
document.querySelector(".settings-page").classList.toggle("hide");
|
||||
});
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче