joshua/dash-visualizer
1
0
Fork 0
mirror of https://github.com/seigler/dash-visualizer synced 2025-07-26 01:06:12 +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

36
app.js
View file

@ -1,7 +1,15 @@
'use strict';
(function() {
function playSound(url){
//(function() {
var socket = io("https://blockchain.masternode.io/");
var transactionList = document.getElementById('transactionList');
var muteButton = document.getElementById('muteToggle');
var muted = false;
function playSound(url) {
if (muted === true) {
return;
}
var audio = document.createElement('audio');
audio.style.display = "none";
audio.src = url;
@ -13,6 +21,14 @@
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) {
console.log(data);
playSound('assets/bell.mp3');
@ -54,8 +70,18 @@
transactionList.insertBefore(newBlock, transactionList.firstChild);
};
var socket = io("https://blockchain.masternode.io/");
var transactionList = document.getElementById('transactionList');
if (localStorage) {
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() {
document.getElementById('connectionStatus').className = 'is-connected';
@ -70,4 +96,4 @@
socket.on('reconnecting', function() {
document.getElementById('connectionStatus').className = 'is-connecting';
});
})();
//})();

1
index.html
View file

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

37
style.css
View file

@ -83,23 +83,42 @@ a {
color: inherit;
}
#connectionStatus {
#muteToggle, #connectionStatus {
position: fixed;
top: 0;
right: 0;
font-size: 0.8em;
width: 8em;
background: white;
border-radius: 0 0 0 0.5em;
border: solid black;
border-width: 0 0 0.1em 0.1em;
padding: 0.5em;
}
#connectionStatus:before {
display: block;
font-size: 0.8em;
text-transform: uppercase;
font-weight: bold;
width: 8em;
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;
transform: none;
}