Double Ctrl Image Zoom (Edge Style)

Double Ctrl to zoom images like Edge browser
Verze ze dne 15. 10. 2025. Zobrazit nejnovější verzi.
Zeptejte se na otázku, přidejte recenzi nebo skript nahlašte.
Wrap lines
// ==UserScript==
// @name         Double Ctrl Image Zoom (Edge Style)
// @namespace    https://products.agarmen.com
// @version      1.01
// @description  Double Ctrl to zoom images like Edge browser
// @match        *://*/*
// @grant        none
// @author       @emberasim
// @license      MIT
// ==/UserScript==

(function () {
  'use strict';

  let lastCtrlTime = 0;
  const DOUBLE_PRESS_INTERVAL = 400; // ms
  let overlayDiv = null;
  let zoomedImg = null;

  // Track mouse position
  let mouseX = 0, mouseY = 0;
  document.addEventListener('mousemove', e => {
    mouseX = e.clientX;
    mouseY = e.clientY;
  });

  // Create overlay
  function createOverlay(imgSrc) {
    disposeOverlay(); // remove old one if any

    overlayDiv = document.createElement('div');
    overlayDiv.style.position = 'fixed';
    overlayDiv.style.top = 0;
    overlayDiv.style.left = 0;
    overlayDiv.style.width = '100vw';
    overlayDiv.style.height = '100vh';
    overlayDiv.style.backgroundColor = 'rgba(0,0,0,0.8)';
    overlayDiv.style.display = 'flex';
    overlayDiv.style.alignItems = 'center';
    overlayDiv.style.justifyContent = 'center';
    overlayDiv.style.zIndex = 999999;
    //overlayDiv.style.cursor = 'zoom-out';
    overlayDiv.style.backdropFilter = 'blur(2px)';
    overlayDiv.style.opacity = '0';
    overlayDiv.style.transition = 'opacity 0.2s ease';

    zoomedImg = document.createElement('img');
    zoomedImg.src = imgSrc;
    zoomedImg.style.maxWidth = '90vw';
    zoomedImg.style.maxHeight = '90vh';
    zoomedImg.style.borderRadius = '8px';
    zoomedImg.style.boxShadow = '0 0 20px rgba(0,0,0,0.6)';
    zoomedImg.style.transition = 'transform 0.2s ease';
    zoomedImg.style.transform = 'scale(1.05)';

    overlayDiv.appendChild(zoomedImg);
    document.body.appendChild(overlayDiv);

    // Fade in
    requestAnimationFrame(() => (overlayDiv.style.opacity = '1'));

    // Close handlers
    overlayDiv.addEventListener('click', disposeOverlay);
    document.addEventListener('keydown', escListener, { once: true });
  }

  function escListener(e) {
    if (e.key === 'Escape') disposeOverlay();
  }

  function disposeOverlay() {
    if (overlayDiv) {
      overlayDiv.style.opacity = '0';
      setTimeout(() => {
        if (overlayDiv) overlayDiv.remove();
        overlayDiv = null;
        zoomedImg = null;
      }, 200);
    }
  }

  // Detect double Ctrl
  window.addEventListener('keydown', (e) => {
    if (e.key === 'Control') {
      const now = Date.now();
      if (now - lastCtrlTime < DOUBLE_PRESS_INTERVAL) {
        // get elements under the mouse pointer
        const elems = document.elementsFromPoint(mouseX, mouseY);
        const hoveredImg = elems.find(el => el.tagName && el.tagName.toLowerCase() === 'img');

        if (hoveredImg) {
          //console.log('IMG Tag Found:', hoveredImg.src);
          createOverlay(hoveredImg.src);
          e.preventDefault();
        }
      }
      lastCtrlTime = now;
    } else if (e.key === 'Escape') {
      disposeOverlay();
    }
  });

})();