☰

Offline Indicator

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

2014-03-13 يوللانغان نەشرى. ئەڭ يېڭى نەشرىنى كۆرۈش.

  1. // ==UserScript==
  2. // @id              offline-indicator@loucypher
  3. // @name            Offline Indicator
  4. // @namespace       https://github.com/LouCypher/userscripts
  5. // @description     Add icon to web page on bottom right as indicator when in offline mode.
  6. // @version         2.1pre
  7. // @author          LouCypher
  8. // @contributor     Tango! Desktop Project (icon)
  9. // @license         WTFPL
  10. // @CSS-license     MIT License
  11. // @SVG-license     Public domain
  12. // @icon            https://raw.github.com/LouCypher/userscripts/master/offline-indicator/icon48.png
  13. // @icon64URL       https://raw.github.com/LouCypher/userscripts/master/offline-indicator/icon64.png
  14. // @contributionURL http://loucypher.github.io/userscripts/donate.html?Offline+Indicator
  15. // @resource        CSS https://raw.github.com/LouCypher/userscripts/master/offline-indicator/offline-indicator.css
  16. // @resource        SVG https://raw.github.com/LouCypher/userscripts/master/offline-indicator/offline-indicator.svg
  17. // @resource        CHANGELOG https://raw.github.com/LouCypher/userscripts/master/offline-indicator/CHANGELOG.txt
  18. // @resource        LICENSE https://raw.github.com/LouCypher/userscripts/master/licenses/WTFPL/LICENSE.txt
  19. // @include         /^(https?|ftp|unmht):.*/
  20. // @grant           GM_addStyle
  21. // @grant           GM_getResourceURL
  22. // @grant           GM_getResourceText
  23. // ==/UserScript==
  24. /* This program is free software. It comes without any warranty, to
  25.  * the extent permitted by applicable law. You can redistribute it
  26.  * and/or modify it under the terms of the Do What The Fuck You Want
  27.  * To Public License, Version 2, as published by Sam Hocevar. See
  28.  * http://www.wtfpl.net/ for more details. */
  29.  
  30.  
  31.  
  32. const DIV_ID = "offline-indicator";
  33. const DIV_CLASS = "browser-is-offline";
  34.  
  35. function $(aId) {
  36.   return document.getElementById(aId);
  37. }
  38.  
  39. function toggleIndicator() {
  40.   $(DIV_ID).classList.toggle(DIV_CLASS);
  41. }
  42.  
  43. // Run on HTML document only
  44. if (document instanceof HTMLDocument) {
  45.   GM_addStyle(GM_getResourceText("CSS"));
  46.  
  47.   // Append <div> to <html> element
  48.   var div = document.documentElement.appendChild(document.createElement("div"));
  49.   div.id = DIV_ID;
  50.  
  51.   var img = div.appendChild(document.createElement("img"));
  52.   img.src = GM_getResourceURL("SVG");
  53.   if (typeof opera === "object")
  54.     img.src = img.src.replace(/^data:/, "data:image/svg+xml");
  55.   img.alt = img.title = "Working offline";
  56.  
  57.   if (!navigator.onLine)
  58.     toggleIndicator();
  59.  
  60.   window.addEventListener("offline", toggleIndicator);
  61.   window.addEventListener("online", toggleIndicator);
  62. }