Michael Maurakis
1282bf2bda
settings panel handles things. Also removed open in new tab. CORS blocks any ability to do anything cool with iframes so it will likely have to be reserved for a extension or something of that kind.
77 lines
No EOL
1.9 KiB
JavaScript
77 lines
No EOL
1.9 KiB
JavaScript
// Create the floating button
|
|
const floatingButton = document.createElement('button');
|
|
floatingButton.id = 'openInNewTab';
|
|
floatingButton.className = 'floating-button';
|
|
floatingButton.title = 'Open in new window';
|
|
floatingButton.innerHTML = `
|
|
<svg viewBox="0 0 24 24" width="24" height="24">
|
|
<path fill="currentColor" d="M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/>
|
|
</svg>
|
|
`;
|
|
|
|
// Add click handler
|
|
floatingButton.addEventListener('click', () => {
|
|
window.open(window.location.href, '_blank');
|
|
});
|
|
|
|
// Add styles
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
.floating-button {
|
|
position: fixed;
|
|
right: 20px;
|
|
top: 20px;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 69, 0, 0.9);
|
|
border: none;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
transform: scale(0.9);
|
|
transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
|
|
z-index: 999999;
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.floating-button svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
color: white;
|
|
}
|
|
|
|
body:hover .floating-button {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
.floating-button:hover {
|
|
background: rgba(255, 69, 0, 1);
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
@media (hover: none) {
|
|
.floating-button {
|
|
opacity: 0.9;
|
|
transform: scale(1);
|
|
}
|
|
|
|
.floating-button:hover {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.floating-button {
|
|
bottom: 20px;
|
|
top: auto;
|
|
}
|
|
}
|
|
`;
|
|
|
|
// Add elements to page
|
|
document.head.appendChild(style);
|
|
document.body.appendChild(floatingButton);
|