From cd87a329fc6db3d77bfb46ec29b0c7daf75df67c Mon Sep 17 00:00:00 2001
From: chylex <contact@chylex.com>
Date: Mon, 28 Aug 2017 22:14:07 +0200
Subject: [PATCH] Add a network error notification if the device goes offline

Closes #145
---
 Resources/Scripts/code.js | 38 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/Resources/Scripts/code.js b/Resources/Scripts/code.js
index 1f003383..a6eb6e02 100644
--- a/Resources/Scripts/code.js
+++ b/Resources/Scripts/code.js
@@ -952,6 +952,44 @@
     };
   }
   
+  //
+  // Block: Detect and notify about connection issues.
+  //
+  (function(){
+    let onConnectionError = function(){
+      return if $("#tweetduck-conn-issues").length;
+      
+      let ele = $(`
+<div id="tweetduck-conn-issues" class="Layer NotificationListLayer">
+  <ul class="NotificationList">
+    <li class="Notification Notification--red" style="height:63px;">
+      <div class="Notification-inner">
+        <div class="Notification-icon"><span class="Icon Icon--medium Icon--circleError"></span></div>
+        <div class="Notification-content"><div class="Notification-body">Experiencing connection issues</div></div>
+        <button type="button" class="Notification-closeButton" aria-label="Close"><span class="Icon Icon--smallest Icon--close" aria-hidden="true"></span></button>
+      </div>
+    </li>
+  </ul>
+</div>
+`).appendTo(document.body);
+
+      ele.find("button").click(function(){
+        ele.fadeOut(200);
+      });
+    };
+    
+    let onConnectionFine = function(){
+      let ele = $("#tweetduck-conn-issues");
+      
+      ele.fadeOut(200, function(){
+        ele.remove();
+      });
+    };
+    
+    window.addEventListener("offline", onConnectionError);
+    window.addEventListener("online", onConnectionFine);
+  })();
+  
   //
   // Block: Custom reload function with memory cleanup.
   //