Incognito3 / src /components /FrameManager.astro
Alex Scott
rebrand space to incognito
46c7a16
---
import { Icon } from 'astro-icon/components';
---
<div onmouseenter="setTitle()" id="framemanager" class="hidden group flex absolute z-10 max-w-[500px] bg-inherit max-h-[20px] top-0 w-full">
<div class="transition-all duration-200 ease-linear invisible group-hover:visible bg-[--background] group-hover:h-[51.4px] w-full px-[7px] py-[10px] flex items-center border-l-[1px] border-r-[1px] border-b-[1px] border-[--border-color] h-[15px] shadow-[rgba(0,0,0,0.24)_0px_3px_8px] rounded-b-[5px]">
<img class="w-[20px] h-[20px] mx-[5px]" loading="lazy" src="/logo.svg" />
<input id="title" class="bg-transparent border-none mx-[10px] flex-grow text-[--text-color]" disabled="disabled"></input>
<button id="createlink" onclick="createLink()" class="mr-[5px] text-[--accent] border-none bg-transparent cursor-pointer py-[5px] px-[7px] ml-[5px] text-[22px]">
<Icon name="mdi:attachment" />
</button>
<button onclick="refreshIframe()" class="mr-[5px] text-[--accent] border-none bg-transparent cursor-pointer py-[5px] px-[7px] ml-[5px] text-[22px]">
<Icon name="mdi:refresh" />
</button>
<button onclick="exitIframe()" class="mr-[5px] text-[--accent] border-none bg-transparent cursor-pointer py-[5px] px-[7px] ml-[5px] text-[22px]">
<Icon name="mdi:close" />
</button>
</div>
</div>
<script>
import { navigate } from 'astro:transitions/client';
function defineVars() {
const iframe = document.getElementById("iframe") as HTMLIFrameElement;
const win = iframe.contentWindow;
//return both the iframe and the iframe's window
//Usage: [variable].iframe or [variable].win
return { iframe, win }
}
window.createLink = function() {
const vars = defineVars();
if (vars?.win?.__uv) {
navigator.clipboard.writeText(new URL('./?link=' + encodeURIComponent(__uv$config.encodeUrl!(vars?.win?.__uv.location.href)), location.href).href);
}
else if (vars?.win?.$scramjet) {
navigator.clipboard.writeText(new URL(`./?link=${encodeURIComponent(
vars?.win?.location.href
.replace(vars?.win?.location.origin, '')
.replace(vars?.win?.$scramjet.config.prefix, '')
)}`, location.href).href);
}
}
window.exitIframe = function() {
const vars = defineVars();
if (vars?.win?.__uv || vars?.win?.__get$ProxyUrl || vars?.win?.$scramjet) {
navigate("/");
}
}
window.refreshIframe = function() {
const vars = defineVars();
if (vars?.win?.__uv || vars?.win?.__get$ProxyUrl || vars?.win?.$scramjet) {
vars?.win?.location.reload();
}
}
window.setTitle = function() {
const vars = defineVars();
if (vars?.win && vars?.win?.__uv || vars?.win?.__get$ProxyUrl || vars?.win?.$scramjet) {
//@ts-ignore this is really complicated and I am not in the mood to deal with it
document.getElementById("title").value = Object.getOwnPropertyDescriptor(Document.prototype, 'title').get.call(vars?.win.document);
}
}
</script>