Greasy Fork

Greasy Fork is available in English.

Preview Quicker-Action`s link

Display link preview window after staying on the link for a period of time

当前为 2023-05-27 提交的版本，查看 最新版本。

// ==UserScript==
// @name          Preview Quicker-Action`s link
// @description  Display link preview window after staying on the link for a period of time
// @namespace    HDG520
// @version      1.0
// @match        https://getquicker.net/Share/*
// @grant        GM_addStyle
// ==/UserScript==

let previewWindow = null;
let isExpanded = false;
const WIDTH_PERCENT_EXPANDED = '50%';
const WIDTH_PERCENT_COLLAPSED = '0';
const HEIGHT_PERCENT = '100%';
const BUTTON_WIDTH_PERCENT = '1%';
const HOVER_TIME = 800;
const TRANSITION_SPEED = '0.5s';
const FIRST_URI = document.querySelector("body > div.body-wrapper > div > div > div:nth-child(4) > table > tbody > tr:nth-child(2) > td:nth-child(2) > div > div > a").href;


GM_addStyle(`
    #link-preview-window {
        position: fixed;
        top: 0;
        bottom: 0;
        width: ${WIDTH_PERCENT_EXPANDED};
        height: ${HEIGHT_PERCENT};
        right: -${WIDTH_PERCENT_COLLAPSED};
        background-color: rgba(255, 255, 255, 1) ;
        z-index: 9999;
        border: none;
        transition: width ${TRANSITION_SPEED} ease-in-out;
    }

    #preview-button {
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        height: 15px;
        width: ${BUTTON_WIDTH_PERCENT};
        right: ${WIDTH_PERCENT_COLLAPSED};
        background-color: rgba(255, 255, 255, 0);
        border: none;
        z-index: 9999;
        cursor: pointer;
        font-size: 18px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: right ${TRANSITION_SPEED} ease-in-out;
    }

    #preview-button:hover {
        background-color: white;
    }

    #preview-button.expanded::before {
        content: '▶';
    }

    #preview-button:not(.expanded)::before {
        content: '◀';
    }
`);

function createPreviewWindow() {
    previewWindow = document.createElement('div');
    previewWindow.id = 'link-preview-window';
    previewWindow.innerHTML = `<iframe frameborder="0" height="100%" width="100%" src="${FIRST_URI}"></iframe>`;
    document.body.appendChild(previewWindow);
}

function togglePreviewWindow() {
    if (!previewWindow) {
        createPreviewWindow();
    }
    isExpanded = !isExpanded;

    previewWindow.style.width = isExpanded ? WIDTH_PERCENT_EXPANDED : WIDTH_PERCENT_COLLAPSED;
    document.getElementById('preview-button').style.right = isExpanded ? WIDTH_PERCENT_EXPANDED : WIDTH_PERCENT_COLLAPSED;
    document.getElementById('preview-button').classList.toggle('expanded', isExpanded);
}

function updatePreviewWindow(url) {
    if (isExpanded && previewWindow) {
        previewWindow.innerHTML = `<iframe frameborder="0" height="100%" width="100%" src="${url}"></iframe>`;
    }
}

let timeoutId = null;
document.addEventListener('mouseover', (event) => {
    clearTimeout(timeoutId);
    var uri = event.target.hrefurl
    if (event.target.tagName.toLowerCase() === 'a' && previewWindow.innerHTML.indexOf(event.target.href) === -1) {
        timeoutId = setTimeout(() => {
            updatePreviewWindow(event.target.href);
        }, HOVER_TIME);
    }
});

document.addEventListener('mouseout', () => {
    clearTimeout(timeoutId);
});

const previewButton = document.createElement('div');
previewButton.id = 'preview-button';
previewButton.onclick = togglePreviewWindow;

document.querySelector('body > div.body-wrapper > div > div').appendChild(previewButton);

window.addEventListener('resize', () => {
    if (isExpanded) {
        document.getElementById('preview-button').style.right = WIDTH_PERCENT_EXPANDED;
    }
});