Best effort to make media placeholders visible and clickable.

This commit is contained in:
hackademix 2019-11-11 10:52:40 +01:00
parent 118eb535aa
commit 73f74cc83f
2 changed files with 20 additions and 6 deletions

View File

@ -135,7 +135,7 @@ var PlaceHolder = (() => {
let setImage = () => replacement.style.backgroundImage = `url(${ICON_URL})`; let setImage = () => replacement.style.backgroundImage = `url(${ICON_URL})`;
if (ns.embeddingDocument) { if (ns.embeddingDocument) {
replacement.classList.add("document"); replacement.classList.add("__ns__document");
window.stop(); window.stop();
setTimeout(setImage, 0); // defer to bypass window.stop(); setTimeout(setImage, 0); // defer to bypass window.stop();
} else { } else {
@ -160,8 +160,13 @@ var PlaceHolder = (() => {
replacement._placeHolderObj = this; replacement._placeHolderObj = this;
replacement._placeHolderElement = element; replacement._placeHolderElement = element;
element.replaceWith(replacement); 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); this.replacements.add(replacement);
} }
@ -195,9 +200,14 @@ var PlaceHolder = (() => {
} }
close(replacement) { close(replacement) {
replacement.classList.add("closing"); replacement.classList.add("__ns__closing");
this.replacements.delete(replacement); 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);
} }
} }

View File

@ -11,12 +11,16 @@ a.__NoScript_PlaceHolder__ {
z-index: 2147483647 !important; z-index: 2147483647 !important;
} }
.__ns__pop2top {
z-index: 2147483647 !important;
}
a.__NoScript_PlaceHolder__:hover { a.__NoScript_PlaceHolder__:hover {
opacity: 1; opacity: 1;
text-decoration: underline; text-decoration: underline;
} }
a.__NoScript_PlaceHolder__.closing { a.__NoScript_PlaceHolder__.__ns__closing {
transition: .4s all; transition: .4s all;
opacity: 0; opacity: 0;
transform: scale(0, 0); transform: scale(0, 0);
@ -70,7 +74,7 @@ a.__NoScript_PlaceHolder__ > span {
.__NoScript_PlaceHolder__:hover > span > span { .__NoScript_PlaceHolder__:hover > span > span {
background: rgba(255, 250, 200, .8) background: rgba(255, 250, 200, .8)
} }
a.__NoScript_PlaceHolder__.document { a.__NoScript_PlaceHolder__.__ns__document {
position: fixed !important; position: fixed !important;
top: 0 !important; top: 0 !important;
bottom: 0 !important; bottom: 0 !important;