☰

Offline Indicator

Add icon to web page on bottom right as indicator when in offline mode.

  1. /**
  2.  * Offline Indicator user script
  3.  * Licensed under the MIT license
  4.  *
  5.  * Copyright (c) Zulkarnain K.
  6.  *
  7.  * Permission is hereby granted, free of charge, to any person obtaining a
  8.  * copy of this software and associated documentation files (the "Software"),
  9.  * to deal in the Software without restriction, including without limitation
  10.  * the rights to use, copy, modify, merge, publish, distribute, sublicense,
  11.  * and/or sell copies of the Software, and to permit persons to whom the
  12.  * Software is furnished to do so, subject to the following conditions:
  13.  *
  14.  * The above copyright notice and this permission notice shall be included in
  15.  * all copies or substantial portions of the Software.
  16.  *
  17.  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  18.  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  19.  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
  20.  * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  21.  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
  22.  * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
  23.  * DEALINGS IN THE SOFTWARE.
  24.  **/
  25.  
  26. // ==UserScript==
  27. // @id              offline-indicator@loucypher
  28. // @name            Offline Indicator
  29. // @namespace       https://github.com/LouCypher/userscripts
  30. // @description     Add icon to web page on bottom right as indicator when in offline mode.
  31. // @version         3.0
  32. // @author          LouCypher
  33. // @contributor     Tango! Desktop Project (icon)
  34. // @license         MIT License
  35. // @license-icon    Public domain
  36. // @icon            https://raw.github.com/LouCypher/userscripts/master/offline-indicator/icon48.png
  37. // @icon64URL       https://raw.github.com/LouCypher/userscripts/master/offline-indicator/icon64.png
  38. // @contributionURL http://loucypher.github.io/userscripts/donate.html?Offline+Indicator
  39. // @homepageURL     https://greatest.deepsurf.us/scripts/198
  40. // @supportURL      https://greatest.deepsurf.us/scripts/198/feedback
  41. // @resource        CSS https://raw.github.com/LouCypher/userscripts/master/offline-indicator/offline-indicator.css
  42. // @resource        ICON https://raw.github.com/LouCypher/userscripts/master/offline-indicator/icon24.png
  43. // @resource        CHANGELOG https://raw.github.com/LouCypher/userscripts/master/offline-indicator/CHANGELOG.txt
  44. // @resource        LICENSE https://raw.github.com/LouCypher/userscripts/master/licenses/MIT/LICENSE.txt
  45. // @include         /^(https?|ftp|unmht):.*/
  46. // @grant           GM_addStyle
  47. // @grant           GM_getResourceURL
  48. // @grant           GM_getResourceText
  49. // @grant           GM_getValue
  50. // @grant           GM_setValue
  51. // ==/UserScript==
  52.  
  53. const DIV_ID = "offline-indicator";
  54. const DIV_CLASS = "browser-is-offline";
  55. const ICON_TOP = "offline-indicator-icon-top";
  56. const ICON_RIGHT = "offline-indicator-icon-right";
  57. const ICON_BOTTOM = "offline-indicator-icon-bottom";
  58. const ICON_LEFT = "offline-indicator-icon-left";
  59.  
  60. function $(aId) {
  61.   return document.getElementById(aId);
  62. }
  63.  
  64. function toggleIndicator() {
  65.   $(DIV_ID).classList.toggle(DIV_CLASS);
  66. }
  67.  
  68. function changePosition() {
  69.   var div = $(DIV_ID);
  70.   var isTop = div.classList.contains(ICON_TOP);
  71.   var isRight = div.classList.contains(ICON_RIGHT);
  72.   var isBottom = div.classList.contains(ICON_BOTTOM);
  73.   var isLeft = div.classList.contains(ICON_LEFT);
  74.  
  75.   // If bottom-right, move to bottom-left
  76.   if (isBottom && isRight) {
  77.     div.classList.add(ICON_LEFT);
  78.     div.classList.remove(ICON_RIGHT);
  79.     GM_setValue("position", 1);
  80.   }
  81.  
  82.   // If bottom-left, move to top-left
  83.   else if (isBottom && isLeft) {
  84.     div.classList.add(ICON_TOP);
  85.     div.classList.remove(ICON_BOTTOM);
  86.     GM_setValue("position", 2);
  87.   }
  88.  
  89.   // If top-left, move to top-right
  90.   else if (isTop && isLeft) {
  91.     div.classList.add(ICON_RIGHT);
  92.     div.classList.remove(ICON_LEFT);
  93.     GM_setValue("position", 3);
  94.   }
  95.  
  96.   // If top-right, move to bottom-right
  97.   else if (isTop && isRight) {
  98.     div.classList.add(ICON_BOTTOM);
  99.     div.classList.remove(ICON_TOP);
  100.     GM_setValue("position", 0);
  101.   }
  102. }
  103.  
  104. // Run on HTML document only and not in frame
  105. if (document instanceof HTMLDocument && window.self === window.top) {
  106.   GM_addStyle(GM_getResourceText("CSS"));
  107.  
  108.   // Append <div> to <html> element
  109.   var div = document.documentElement.appendChild(document.createElement("div"));
  110.   div.id = DIV_ID;
  111.  
  112.   var position = GM_getValue("position", 0);
  113.   switch (position) {
  114.     case 3:   // top-right
  115.       div.classList.add(ICON_TOP);
  116.       div.classList.add(ICON_RIGHT);
  117.       break;
  118.     case 2:   // top-left
  119.       div.classList.add(ICON_TOP);
  120.       div.classList.add(ICON_LEFT);
  121.       break;
  122.     case 1:   // bottom-left
  123.       div.classList.add(ICON_BOTTOM);
  124.       div.classList.add(ICON_LEFT);
  125.       break;
  126.     default:  // bottom-right
  127.       div.classList.add(ICON_BOTTOM);
  128.       div.classList.add(ICON_RIGHT);
  129.   }
  130.  
  131.   var img = div.appendChild(document.createElement("img"));
  132.   img.src = GM_getResourceURL("ICON");
  133.   if (typeof opera === "object")
  134.     img.src = img.src.replace(/^data:/, "data:image/png");
  135.   img.alt = "Working offline";
  136.   img.title = img.alt + "\nClick to change its position";
  137.   img.addEventListener("click", changePosition);
  138.  
  139.   if (!navigator.onLine)
  140.     toggleIndicator();
  141.  
  142.   window.addEventListener("offline", toggleIndicator);
  143.   window.addEventListener("online", toggleIndicator);
  144. }