// ==UserScript==
// @name Discord: Hide Image
// @name:zh-TW Discord 隱藏圖片
// @name:zh-CN Discord 隐藏图片
// @name:ja Discord 画像を非表示
// @name:ko Discord 이미지 숨기기
// @name:ru Discord Скрыть изображение
// @version 1.0.2
// @description Make images opacity lower.
// @description:zh-TW 使圖片較為透明。
// @description:zh-CN 使图片较为透明。
// @description:ja 画像の不透明度を低くします。
// @description:ko 이미지의 불투명도를 낮추십시오.
// @description:ru Уменьшите непрозрачность изображений.
// @author Hayao-Gai
// @namespace https://github.com/HayaoGai
// @icon https://i.imgur.com/rE9N0R7.png
// @match https://discord.com/channels/*
// @grant GM_getValue
// @grant GM_setValue
// @downloadURL none
// ==/UserScript==
/* jshint esversion: 6 */
(function() {
'use strict';
// icons made by https://www.flaticon.com/authors/pixel-perfect
const iconOn = ``;
const iconOff = ``;
// css
const textStyle = `
.hide-set {
transition: opacity 0.3s;
opacity: 0.1 !important;
}
.switch-set {
fill: white;
text-align: center;
bottom: 10px;
cursor: pointer;
pointer-events: all;
}`;
// update
let updating = false;
css();
init(10);
locationChange();
window.addEventListener("scroll", update, true);
function init(times) {
console.log("init!");
for (let i = 0; i < times; i++) {
setTimeout(switchButton, 500 * i);
setTimeout(() => getTarget("img:not(.hide-set)"), 500 * i); // all images.
setTimeout(() => getTarget("video:not(.hide-set)"), 500 * i); // all videos ( gifs ).
setTimeout(() => getTarget(".animatedContainer-1pJv5C:not(.hide-set)"), 500 * i); // the image on top of server channel lists.
setTimeout(() => getTarget(".avatarContainer-2inGBK:not(.hide-set)"), 500 * i); // the avatar images in channels.
}
stopHide();
}
function switchButton() {
// check exist
const isExist = document.querySelector(".switch-set");
if (!!isExist) return;
// left panel ( parent )
const leftPanel = document.querySelector("nav.wrapper-1Rf91z");
if (!leftPanel) return;
// add switch button
const button = document.createElement("div");
button.className = "unreadMentionsIndicatorBottom-BXS58x switch-set";
button.innerHTML = getToggle() ? iconOn : iconOff;
button.addEventListener("click", onClick);
leftPanel.appendChild(button);
}
function getToggle() {
return GM_getValue("switch", true);
}
function onClick() {
const afterClick = !getToggle();
GM_setValue("switch", afterClick);
this.innerHTML = afterClick ? iconOn : iconOff;
init(3);
}
function getTarget(target) {
// check toggle
if (!getToggle()) return;
// hide target
document.querySelectorAll(target).forEach(t => {
t.classList.add("hide-set");
t.addEventListener("mouseenter", showTarget);
t.addEventListener("mouseleave", hideTarget);
});
}
function showTarget() {
this.style.opacity = 1;
}
function hideTarget() {
this.style.opacity = 0.1;
}
function stopHide() {
// check toggle
if (getToggle()) return;
// show target
document.querySelectorAll(".hide-set").forEach(hide => {
hide.classList.remove("hide-set");
hide.removeEventListener("mouseenter", showTarget);
hide.removeEventListener("mouseleave", hideTarget);
});
}
function update() {
if (updating) return;
updating = true;
init(3);
setTimeout(() => { updating = false; }, 1000);
}
function css() {
const style = document.createElement("style");
style.type = "text/css";
style.innerHTML = textStyle;
document.head.appendChild(style);
}
function locationChange() {
window.addEventListener('locationchange', () => init(3));
// situation 1
history.pushState = (f => function pushState(){
var ret = f.apply(this, arguments);
window.dispatchEvent(new Event('pushState'));
window.dispatchEvent(new Event('locationchange'));
return ret;
})(history.pushState);
// situation 2
history.replaceState = (f => function replaceState(){
var ret = f.apply(this, arguments);
window.dispatchEvent(new Event('replaceState'));
window.dispatchEvent(new Event('locationchange'));
return ret;
})(history.replaceState);
// situation 3
window.addEventListener('popstate', () => window.dispatchEvent(new Event('locationchange')));
}
})();