joshua/dash-visualizer
1
0
Fork 0
mirror of https://github.com/seigler/dash-visualizer synced 2025-07-27 01:36:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: persistent mute button

Browse source
This commit is contained in:
Joshua Seigler 2016-09-09 22:35:25 -04:00
parent 601082cebe
commit cfa9b4673e
3 changed files with 60 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

34
app.js
View file

@ -1,7 +1,15 @@
'use strict'; 'use strict';
(function() { //(function() {
var socket = io("https://blockchain.masternode.io/");
var transactionList = document.getElementById('transactionList');
var muteButton = document.getElementById('muteToggle');
var muted = false;
function playSound(url) { function playSound(url) {
if (muted === true) {
return;
}
var audio = document.createElement('audio'); var audio = document.createElement('audio');
audio.style.display = "none"; audio.style.display = "none";
audio.src = url; audio.src = url;
@ -13,6 +21,14 @@
document.body.appendChild(audio); document.body.appendChild(audio);
} }
var toggleMute = function() {
muted = !muted;
if (localStorage) {
localStorage.setItem('muted', muted);
}
muteButton.className = (muted === true ? 'is-muted' : '');
}
var onTransaction = function(data) { var onTransaction = function(data) {
console.log(data); console.log(data);
playSound('assets/bell.mp3'); playSound('assets/bell.mp3');
@ -54,8 +70,18 @@
transactionList.insertBefore(newBlock, transactionList.firstChild); transactionList.insertBefore(newBlock, transactionList.firstChild);
}; };
var socket = io("https://blockchain.masternode.io/"); if (localStorage) {
var transactionList = document.getElementById('transactionList'); muted = localStorage.getItem('muted');
if (muted === null) {
muted = false;
localStorage.setItem('muted', muted);
} else {
muted = (muted == 'true'); // localStorage stores strings not objects?
}
muteButton.className = (muted === true ? 'is-muted' : '');
}
muteButton.onclick = toggleMute;
socket.on('connect', function() { socket.on('connect', function() {
document.getElementById('connectionStatus').className = 'is-connected'; document.getElementById('connectionStatus').className = 'is-connected';
@ -70,4 +96,4 @@
socket.on('reconnecting', function() { socket.on('reconnecting', function() {
document.getElementById('connectionStatus').className = 'is-connecting'; document.getElementById('connectionStatus').className = 'is-connecting';
}); });
})(); //})();

1
index.html
View file

@ -6,6 +6,7 @@
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<div id="muteToggle"></div>
<div id="connectionStatus" class="is-connecting"></div> <div id="connectionStatus" class="is-connecting"></div>
<div id="transactionList"></div> <div id="transactionList"></div>

37
style.css
View file

@ -83,23 +83,42 @@ a {
color: inherit; color: inherit;
} }
#connectionStatus { #muteToggle, #connectionStatus {
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; width: 8em;
font-size: 0.8em;
background: white; background: white;
border-radius: 0 0 0 0.5em;
border: solid black; border: solid black;
border-width: 0 0 0.1em 0.1em;
padding: 0.5em; padding: 0.5em;
} font-size: 0.8em;
#connectionStatus:before {
display: block;
text-transform: uppercase; text-transform: uppercase;
font-weight: bold; font-weight: bold;
width: 8em;
text-align: center; text-align: center;
color: black;
}
#muteToggle {
left: 0;
border-radius: 0 0 0.5em 0;
border-width: 0 0.1em 0.1em 0;
transition: opacity 0.5s;
opacity: 0;
cursor: pointer;
}
#muteToggle:hover {
opacity: 1;
}
#muteToggle:before {
content: 'Mute';
}
#muteToggle.is-muted:before {
content: 'Un-mute';
}
#connectionStatus {
right: 0;
border-radius: 0 0 0 0.5em;
border-width: 0 0 0.1em 0.1em;
transition: transform 0.5s; transition: transform 0.5s;
transform: none; transform: none;
} }