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. //