Add switch toggle for sound notifications

src/js/main.js

@@ -11,6 +11,7 @@ $(function() {
   let newMessages = 0;
   let FADE_TIME = 150; // ms
   let TYPING_TIMER_LENGTH = 400; // ms
+  let soundEnabled = true;
 
   let COLORS = [
     '#e21400', '#ffe400', '#ff8f00',
@@ -330,7 +331,7 @@ $(function() {
     if (!isActive) {
       newMessages++;
       favicon.badge(newMessages);
-      if (beep) {
+      if (soundEnabled && beep) {
         beep.play();
       }
     }
@@ -551,4 +552,10 @@ $(function() {
     this.setSelectionRange(0, 9999);
   });
 
+  $('input.bs-switch').bootstrapSwitch();
+
+  $('input.bs-switch').on('switchChange.bootstrapSwitch', function(event, state) {
+    soundEnabled = state;
+  });  
+
 });

src/public/style.css

@@ -272,3 +272,8 @@ textarea#share-text {
 .form-control[readonly] {
   color: black !important;
 }
+
+.bootstrap-switch-handle-on.bootstrap-switch-primary {  
+  background: #2a9fd6 !important;
+  border-color: #2a9fd6 !important;
+}

src/views/index.mustache

@@ -6,6 +6,7 @@
   <title>darkwire.io - anonymous, encrypted chat</title>
   <meta name="description" content="darkwire.io is the simplest way to chat online anonymously.">
   <link rel="shortcut icon" type="image/png" href="favicon.ico">
+  <link rel="stylesheet" href="vendor/bootstrap-switch.min.css">
   <link rel="stylesheet" href="vendor/bootstrap.min.css">
   <link href='https://fonts.googleapis.com/css?family=Source+Code+Pro:400,500,600,700,300' rel='stylesheet' type='text/css'>
   <link rel="stylesheet" href="style.css">
@@ -107,6 +108,9 @@
               </div>
             </div>
           </div>
+          <br>
+          <h6>Sound</h6>
+          <input type="checkbox" name="my-checkbox" class="form-control bs-switch" checked>
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-default encryption-active" data-dismiss="modal">Close</button>
@@ -183,6 +187,7 @@
   <script type="text/javascript" src="vendor/underscore.min.js"></script>
   <script type="text/javascript" src="vendor/modernizr-custom.min.js"></script>
   <script type="text/javascript" src="vendor/autosize.min.js"></script>
+  <script type="text/javascript" src="vendor/bootstrap-switch.min.js"></script>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js"></script>
   <script src="/main.js"></script>
 <script>