made the notifications startable/stoppable

drag-drop-render.js

@@ -6,11 +6,12 @@ function handleFiles(files) {
     files = [ files ];
   }
 
-  document.body.appendChild(document.createElement('br'));
+  var container = document.getElementsByClassName('file-container')[0];
+  container.innerHTML = '';
   files.forEach(function (name) {
     var div = document.createElement('div');
     div.innerHTML = name;
-    document.body.appendChild(div);
+    container.appendChild(div);
   });
 }
 

index.html

@@ -9,10 +9,13 @@
     <script>require('./drag-drop-render')</script>
 
     <div>
-      <h1>Hello World!</h1>
-      We are using node <script>document.write(process.versions.node)</script>,
-      Chrome <script>document.write(process.versions.chrome)</script>,
-      and Electron <script>document.write(process.versions.electron)</script>.
+      <h3>Notifications</h3>
+      <button class="start-notify">Start</button>
+      <button class="stop-notify">Stop</button>
+    </div>
+    <div class="drag-n-drop">
+      <h3>Drag and Drop Area</h3>
+      <div class="file-container"></div>
     </div>
   </body>
 </html>

notifications.js

@@ -1,11 +1,21 @@
-;(function () {
-  var electron = require('electron');
-  var ipc = electron.ipcRenderer;
-  // This file runs in a render thread of the Electron app. It must be required (directly or
-  // indirectly) from one of the html files.
+var electron = require('electron');
+var ipc = electron.ipcRenderer;
+// This file runs in a render thread of the Electron app. It must be required (directly or
+// indirectly) from one of the html files.
+
+var timeoutId;
+var stopped;
+var count;
+
+function startNotifications() {
+  stopped = false;
+  count = 0;
+  if (timeoutId) {
+    clearTimeout(timeoutId);
+  }
 
-  var count = 0;
   function notifyUser() {
+    timeoutId = null;
     count += 1;
     var notif = new window.Notification('Annoying Alert ' + count, {
       body: 'See what happens when you try to click on it.',
@@ -18,11 +28,31 @@
       notif.close();
     };
     notif.onclose = function () {
-      if (count < 10) {
-        setTimeout(notifyUser, 5000);
+      if (!stopped && count < 10) {
+        timeoutId = setTimeout(notifyUser, 5000);
       }
     };
     ipc.send('notification', count);
   }
-  setTimeout(notifyUser, 1000);
-}());
+
+  timeoutId = setTimeout(notifyUser, 1000);
+}
+
+function stopNotifications() {
+  stopped = true;
+  if (timeoutId) {
+    clearTimeout(timeoutId);
+    timeoutId = null;
+  }
+  // Let the progress bar know that we are finished.
+  ipc.send('notification', 0);
+}
+
+document.body.addEventListener('click', function (ev) {
+  if (ev.target.classList.contains('start-notify')) {
+    startNotifications();
+  }
+  else if (ev.target.classList.contains('stop-notify')) {
+    stopNotifications();
+  }
+});