Add icon to web page on bottom right as indicator when in offline mode.
/**
* Offline Indicator user script
* Licensed under the MIT license
*
* Copyright (c) Zulkarnain K.
*
* Permission is hereby granted, free of charge, to any person obtaining a
* copy of this software and associated documentation files (the "Software"),
* to deal in the Software without restriction, including without limitation
* the rights to use, copy, modify, merge, publish, distribute, sublicense,
* and/or sell copies of the Software, and to permit persons to whom the
* Software is furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
* THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
* DEALINGS IN THE SOFTWARE.
**/
// ==UserScript==
// @id offline-indicator@loucypher
// @name Offline Indicator
// @namespace https://github.com/LouCypher/userscripts
// @description Add icon to web page on bottom right as indicator when in offline mode.
// @version 3.0
// @author LouCypher
// @contributor Tango! Desktop Project (icon)
// @license MIT License
// @license-icon Public domain
// @icon https://raw.github.com/LouCypher/userscripts/master/offline-indicator/icon48.png
// @icon64URL https://raw.github.com/LouCypher/userscripts/master/offline-indicator/icon64.png
// @contributionURL http://loucypher.github.io/userscripts/donate.html?Offline+Indicator
// @homepageURL https://greasyfork.org/scripts/198
// @supportURL https://greasyfork.org/scripts/198/feedback
// @resource CSS https://raw.github.com/LouCypher/userscripts/master/offline-indicator/offline-indicator.css
// @resource ICON https://raw.github.com/LouCypher/userscripts/master/offline-indicator/icon24.png
// @resource CHANGELOG https://raw.github.com/LouCypher/userscripts/master/offline-indicator/CHANGELOG.txt
// @resource LICENSE https://raw.github.com/LouCypher/userscripts/master/licenses/MIT/LICENSE.txt
// @include /^(https?|ftp|unmht):.*/
// @grant GM_addStyle
// @grant GM_getResourceURL
// @grant GM_getResourceText
// @grant GM_getValue
// @grant GM_setValue
// ==/UserScript==
const DIV_ID = "offline-indicator";
const DIV_CLASS = "browser-is-offline";
const ICON_TOP = "offline-indicator-icon-top";
const ICON_RIGHT = "offline-indicator-icon-right";
const ICON_BOTTOM = "offline-indicator-icon-bottom";
const ICON_LEFT = "offline-indicator-icon-left";
function $(aId) {
return document.getElementById(aId);
}
function toggleIndicator() {
$(DIV_ID).classList.toggle(DIV_CLASS);
}
function changePosition() {
var div = $(DIV_ID);
var isTop = div.classList.contains(ICON_TOP);
var isRight = div.classList.contains(ICON_RIGHT);
var isBottom = div.classList.contains(ICON_BOTTOM);
var isLeft = div.classList.contains(ICON_LEFT);
// If bottom-right, move to bottom-left
if (isBottom && isRight) {
div.classList.add(ICON_LEFT);
div.classList.remove(ICON_RIGHT);
GM_setValue("position", 1);
}
// If bottom-left, move to top-left
else if (isBottom && isLeft) {
div.classList.add(ICON_TOP);
div.classList.remove(ICON_BOTTOM);
GM_setValue("position", 2);
}
// If top-left, move to top-right
else if (isTop && isLeft) {
div.classList.add(ICON_RIGHT);
div.classList.remove(ICON_LEFT);
GM_setValue("position", 3);
}
// If top-right, move to bottom-right
else if (isTop && isRight) {
div.classList.add(ICON_BOTTOM);
div.classList.remove(ICON_TOP);
GM_setValue("position", 0);
}
}
// Run on HTML document only and not in frame
if (document instanceof HTMLDocument && window.self === window.top) {
GM_addStyle(GM_getResourceText("CSS"));
// Append <div> to <html> element
var div = document.documentElement.appendChild(document.createElement("div"));
div.id = DIV_ID;
var position = GM_getValue("position", 0);
switch (position) {
case 3: // top-right
div.classList.add(ICON_TOP);
div.classList.add(ICON_RIGHT);
break;
case 2: // top-left
div.classList.add(ICON_TOP);
div.classList.add(ICON_LEFT);
break;
case 1: // bottom-left
div.classList.add(ICON_BOTTOM);
div.classList.add(ICON_LEFT);
break;
default: // bottom-right
div.classList.add(ICON_BOTTOM);
div.classList.add(ICON_RIGHT);
}
var img = div.appendChild(document.createElement("img"));
img.src = GM_getResourceURL("ICON");
if (typeof opera === "object")
img.src = img.src.replace(/^data:/, "data:image/png");
img.alt = "Working offline";
img.title = img.alt + "\nClick to change its position";
img.addEventListener("click", changePosition);
if (!navigator.onLine)
toggleIndicator();
window.addEventListener("offline", toggleIndicator);
window.addEventListener("online", toggleIndicator);
}