RevelaNetwork/Revela-v4
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Work around a really fucking weird bug with iframes, bruuuuh

Browse source
This commit is contained in:
wearrrrr 2024-01-10 10:01:17 -06:00
parent 2dae1f4801
commit d1df3e4cf7
3 changed files with 20 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/components/UVRegistrar.astro
View file

@ -15,15 +15,17 @@
if (!isUrl(url)) url = 'https://www.google.com/search?q=' + url; if (!isUrl(url)) url = 'https://www.google.com/search?q=' + url;
else if (!(url.startsWith('https://') || url.startsWith('http://'))) url = 'http://' + url; else if (!(url.startsWith('https://') || url.startsWith('http://'))) url = 'http://' + url;
let iframe = document.createElement('iframe'); let iframe = document.getElementById('proxy-frame');
iframe.src = window.__uv$config.prefix + window.__uv$config.encodeUrl(url); iframe.src = window.__uv$config.prefix + window.__uv$config.encodeUrl(url);
iframe.style.pointerEvents = "auto";
iframe.classList.add("proxy-frame"); iframe.classList.add("proxy-frame");
iframe.style.opacity = 0;
document.body.appendChild(iframe); document.body.appendChild(iframe);
iframe.addEventListener('load', () => { iframe.addEventListener('load', () => {
let topBar = document.getElementById('top-bar');
loadingContent.style.opacity = 0; loadingContent.style.opacity = 0;
iframe.style.opacity = 1; iframe.style.opacity = 1;
let topBar = document.createElement('div'); topBar.style.opacity = 1;
topBar.innerHTML = "";
topBar.classList.add("top-bar"); topBar.classList.add("top-bar");
let closeButton = document.createElement('button'); let closeButton = document.createElement('button');
closeButton.classList.add("close-button") closeButton.classList.add("close-button")
@ -31,14 +33,13 @@
closeButton.addEventListener('click', () => { closeButton.addEventListener('click', () => {
iframe.style.opacity = 0; iframe.style.opacity = 0;
topBar.style.opacity = 0; topBar.style.opacity = 0;
setTimeout(() => { iframe.style.pointerEvents = "none";
iframe.remove(); topBar.style.pointerEvents = "none";
topBar.remove();
}, 500);
}); });
let urlText = document.createElement('p'); let urlText = document.createElement('p');
urlText.classList.add("url-text"); urlText.classList.add("url-text");
urlText.innerText = url urlText.innerText = url
topBar.style.pointerEvents = "auto";
topBar.appendChild(closeButton); topBar.appendChild(closeButton);
topBar.appendChild(urlText); topBar.appendChild(urlText);
document.body.appendChild(topBar); document.body.appendChild(topBar);

15
src/layouts/Layout.astro
View file

@ -83,23 +83,27 @@ body > * {
width: 100%; width: 100%;
height: 60vh; height: 60vh;
} }
.proxy-frame { #proxy-frame {
display: block; display: block;
position: absolute; position: absolute;
z-index: 1000; z-index: 1000;
width: 100vw; width: 100vw;
height: 90vh; height: 100vh;
top: 10vh; top: 5vh;
border: none; border: none;
background-color: #080808; background-color: #080808;
transition: opacity 250ms ease-in-out transition: opacity 250ms ease-in-out;
pointer-events: none;
}
#proxy-frame {
opacity: 0;
} }
.top-bar { .top-bar {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0 1rem; padding: 0 1rem;
height: 10vh; height: 5vh;
background-color: #080808; background-color: #080808;
color: white; color: white;
position: fixed; position: fixed;
@ -108,6 +112,7 @@ body > * {
width: 100vw; width: 100vw;
z-index: 100; z-index: 100;
transition: opacity 250ms ease-in-out; transition: opacity 250ms ease-in-out;
pointer-events: none;
} }
.close-button { .close-button {
padding: 5px; padding: 5px;

2
src/pages/index.astro
View file

@ -9,6 +9,8 @@ import UVRegistrar from '../components/UVRegistrar.astro';
<form class="url-input-form" id="url-input-form"> <form class="url-input-form" id="url-input-form">
<input class="url-input" type="text" placeholder="Search..."> <input class="url-input" type="text" placeholder="Search...">
<div id="loading-content">Loading...</div> <div id="loading-content">Loading...</div>
<div id="top-bar"></div>
<iframe src="" id="proxy-frame"></iframe>
</form> </form>
</div> </div>
<UVRegistrar></UVRegistrar> <UVRegistrar></UVRegistrar>