dragonwocky/notion-enhancer
1
0
Fork 0
mirror of https://github.com/notion-enhancer/notion-enhancer.git synced 2025-04-04 12:49:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(panel): debounce peek trigger

Browse Source 
e.g. do not show if mouse is moved quickly out of the window
This commit is contained in:
dragonwocky 2024-01-18 16:01:46 +11:00
parent c722c7f854
commit 493db7aa2e
Signed by: dragonwocky
GPG Key ID: 7998D08F7D7BD7A8
3 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/core/client.mjs
View File

@ -183,6 +183,7 @@ const insertPanel = async (api, db) => {
appendToDom();
useState(["panelOpen"], ([panelOpen]) => {
console.log(panelOpen);
if (panelOpen) $panelTopbarBtn.setAttribute("data-active", true);
else $panelTopbarBtn.removeAttribute("data-active");
});

20
src/core/islands/Panel.mjs
View File

@ -136,7 +136,7 @@ function Panel({
</aside>
</div>`;
let preDragWidth, dragStartX;
let preDragWidth, dragStartX, _animatedAt;
const getWidth = async (width) => {
if (width && !isNaN(width)) {
width = Math.max(width, minWidth);
@ -150,6 +150,10 @@ function Panel({
.querySelectorAll("[tabindex]")
.forEach(($el) => ($el.tabIndex = interactive ? 1 : -1));
},
isAnimated = () => {
if (!_animatedAt) return false;
return Date.now() - _animatedAt <= transitionDuration;
},
isDragging = () => !isNaN(preDragWidth) && !isNaN(dragStartX),
isPinned = () => $panel.hasAttribute("data-pinned"),
isPeeked = () => $panel.hasAttribute("data-peeked"),
@ -177,14 +181,14 @@ function Panel({
boxShadow: "none",
};
const animationState = {},
const animationState = { ...closedWidth },
easing = "cubic-bezier(0.4, 0, 0.2, 1)",
animate = ($target, keyframes) => {
const opts = { fill: "forwards", duration: transitionDuration, easing };
$target.animate(keyframes, opts);
console.log($target, keyframes);
},
animatePanel = (to) => {
_animatedAt = Date.now();
animate($panel.lastElementChild, [animationState, to]);
Object.assign(animationState, to);
};
@ -243,18 +247,22 @@ function Panel({
// hovering over the peek trigger will temporarily
// pop out an interactive preview of the panel
let _peekDebounce;
const $peekTrigger = html`<div
class="absolute z-10 right-0 h-[calc(100vh-120px)] bottom-[60px] w-[64px]
class="absolute z-10 right-0 h-[calc(100vh-120px)] bottom-[60px] w-[96px]
group-&[data-peeked]/panel:(w-[calc(var(--panel--width,0)+8px)])
group-&[data-pinned]/panel:(w-[calc(var(--panel--width,0)+8px)])"
></div>`;
$panel.prepend($peekTrigger);
$panel.addEventListener("mouseout", () => {
if (isDragging() || isPinned()) return;
if (isDragging() || isAnimated() || isPinned()) return;
if (!$panel.matches(":hover")) $panel.close();
});
$panel.addEventListener("mouseover", () => {
if (isClosed() && $panel.matches(":hover")) $panel.peek();
_peekDebounce ??= setTimeout(() => {
if (isClosed() && $panel.matches(":hover")) $panel.peek();
_peekDebounce = undefined;
}, 100);
});
// moves help button out of the way of open panel.

2
src/core/islands/TopbarButton.mjs
View File

@ -13,7 +13,7 @@ function TopbarButton({ icon, ...props }, ...children) {
user-select-none h-[28px] w-[33px] duration-[20ms]
transition inline-flex items-center justify-center mr-[2px]
rounded-[3px] hover:bg-[color:var(--theme--bg-hover)]
[data-active]:bg-[color:var(--theme--bg-hover)]`,
&[data-active]:bg-[color:var(--theme--bg-hover)]`,
});
return html`<button ...${props}>
<i