From 73f74cc83fa780dd6ef60577d3982e3f4f52aefa Mon Sep 17 00:00:00 2001 From: hackademix Date: Mon, 11 Nov 2019 10:52:40 +0100 Subject: Best effort to make media placeholders visible and clickable. --- src/content/PlaceHolder.js | 18 ++++++++++++++---- src/content/content.css | 8 ++++++-- 2 files changed, 20 insertions(+), 6 deletions(-) diff --git a/src/content/PlaceHolder.js b/src/content/PlaceHolder.js index 7043caf..8d183dd 100644 --- a/src/content/PlaceHolder.js +++ b/src/content/PlaceHolder.js @@ -135,7 +135,7 @@ var PlaceHolder = (() => { let setImage = () => replacement.style.backgroundImage = `url(${ICON_URL})`; if (ns.embeddingDocument) { - replacement.classList.add("document"); + replacement.classList.add("__ns__document"); window.stop(); setTimeout(setImage, 0); // defer to bypass window.stop(); } else { @@ -160,8 +160,13 @@ var PlaceHolder = (() => { replacement._placeHolderObj = this; replacement._placeHolderElement = element; - element.replaceWith(replacement); + + // do our best to bring it to front + for (let p = replacement; p = p.parentElement;) { + p.classList.add("__ns__pop2top"); + }; + this.replacements.add(replacement); } @@ -195,9 +200,14 @@ var PlaceHolder = (() => { } close(replacement) { - replacement.classList.add("closing"); + replacement.classList.add("__ns__closing"); this.replacements.delete(replacement); - window.setTimeout(() => replacement.remove(), 500); + window.setTimeout(() => { + for (let p = replacement; p = p.parentElement;) { + p.classList.remove("__ns__pop2top"); + }; + replacement.remove() + }, 500); } } diff --git a/src/content/content.css b/src/content/content.css index 949501e..5d37612 100644 --- a/src/content/content.css +++ b/src/content/content.css @@ -11,12 +11,16 @@ a.__NoScript_PlaceHolder__ { z-index: 2147483647 !important; } +.__ns__pop2top { + z-index: 2147483647 !important; +} + a.__NoScript_PlaceHolder__:hover { opacity: 1; text-decoration: underline; } -a.__NoScript_PlaceHolder__.closing { +a.__NoScript_PlaceHolder__.__ns__closing { transition: .4s all; opacity: 0; transform: scale(0, 0); @@ -70,7 +74,7 @@ a.__NoScript_PlaceHolder__ > span { .__NoScript_PlaceHolder__:hover > span > span { background: rgba(255, 250, 200, .8) } -a.__NoScript_PlaceHolder__.document { +a.__NoScript_PlaceHolder__.__ns__document { position: fixed !important; top: 0 !important; bottom: 0 !important; -- cgit v1.2.3