diff --git a/app.js b/app.js
index 937e65a..09c903c 100644
--- a/app.js
+++ b/app.js
@@ -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';
});
-})();
+//})();
diff --git a/index.html b/index.html
index d18be56..462397f 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,7 @@
+
diff --git a/style.css b/style.css
index ce51381..28030ad 100644
--- a/style.css
+++ b/style.css
@@ -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;
}