Browse Source

Fix weird hover behavior on some browsers?

pull/46/head
coomdev 2 years ago
parent
commit
15f703c25d
  1. 2
      main.meta.js
  2. 11
      main.user.js
  3. 11
      src/Embedding.svelte

2
main.meta.js

@ -1,7 +1,7 @@
// ==UserScript== // ==UserScript==
// @name PNGExtraEmbed // @name PNGExtraEmbed
// @namespace https://coom.tech/ // @namespace https://coom.tech/
// @version 0.70 // @version 0.71
// @description uhh // @description uhh
// @author You // @author You
// @match https://boards.4channel.org/* // @match https://boards.4channel.org/*

11
main.user.js

@ -1,7 +1,7 @@
// ==UserScript== // ==UserScript==
// @name PNGExtraEmbed // @name PNGExtraEmbed
// @namespace https://coom.tech/ // @namespace https://coom.tech/
// @version 0.70 // @version 0.71
// @description uhh // @description uhh
// @author You // @author You
// @match https://boards.4channel.org/* // @match https://boards.4channel.org/*
@ -14455,7 +14455,10 @@
$$invalidate(3, isAudio = type.mime.startsWith("audio/")); $$invalidate(3, isAudio = type.mime.startsWith("audio/"));
$$invalidate(2, isImage = type.mime.startsWith("image/")); $$invalidate(2, isImage = type.mime.startsWith("image/"));
if (hovering) { if (hovering) {
setTimeout(recompute, 10); setTimeout(() => {
recompute();
hoverUpdate();
}, 20);
} }
} }
async function bepis() { async function bepis() {
@ -14521,7 +14524,9 @@
if (isVideo) if (isVideo)
hoverVideo.pause(); hoverVideo.pause();
} }
let lastev;
function hoverUpdate(ev) { function hoverUpdate(ev) {
lastev = lastev || ev;
if ($settings.dh) if ($settings.dh)
return; return;
if (!contracted) if (!contracted)
@ -14529,7 +14534,7 @@
const [sw, sh] = [visualViewport.width, visualViewport.height]; const [sw, sh] = [visualViewport.width, visualViewport.height];
let width = dims[0]; let width = dims[0];
let height = dims[1] + 25; let height = dims[1] + 25;
let { clientX, clientY } = ev; let { clientX, clientY } = ev || lastev;
let top = Math.max(0, clientY * (sh - height) / sh); let top = Math.max(0, clientY * (sh - height) / sh);
let threshold = sw / 2; let threshold = sw / 2;
let marginX = (clientX <= threshold ? clientX : sw - clientX) + 45; let marginX = (clientX <= threshold ? clientX : sw - clientX) + 45;

11
src/Embedding.svelte

@ -71,7 +71,10 @@
isImage = type.mime.startsWith('image/') isImage = type.mime.startsWith('image/')
if (hovering) { if (hovering) {
// reset hovering to recompute proper image coordinates // reset hovering to recompute proper image coordinates
setTimeout(recompute, 10); setTimeout(() => {
recompute();
hoverUpdate();
}, 20);
} }
} }
@ -150,14 +153,16 @@
if (isVideo) hoverVideo.pause() if (isVideo) hoverVideo.pause()
} }
function hoverUpdate(ev: MouseEvent) { let lastev: MouseEvent | undefined;
function hoverUpdate(ev?: MouseEvent) {
lastev = lastev || ev;
if ($settings.dh) return; if ($settings.dh) return;
if (!contracted) return if (!contracted) return
const [sw, sh] = [visualViewport.width, visualViewport.height] const [sw, sh] = [visualViewport.width, visualViewport.height]
// shamelessly stolen from 4chanX // shamelessly stolen from 4chanX
let width = dims[0] let width = dims[0]
let height = dims[1] + 25 let height = dims[1] + 25
let { clientX, clientY } = ev let { clientX, clientY } = (ev || lastev!)
let top = Math.max(0, (clientY * (sh - height)) / sh) let top = Math.max(0, (clientY * (sh - height)) / sh)
let threshold = sw / 2 let threshold = sw / 2
let marginX: number | string = let marginX: number | string =

Loading…
Cancel
Save