livebook-dev/livebook
1
1
Fork 0
mirror of https://github.com/livebook-dev/livebook.git synced 2025-10-06 11:35:54 +08:00
Code Issues Projects Releases Packages Wiki Activity

Use the first cell in viewport as the default for j/k navigation (#1054)

Browse source
This commit is contained in:
Jonatan Kłosko 2022-03-15 11:52:29 +01:00 • committed by GitHub
parent 580116ea97
commit e7835c73f2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
assets/js/lib/utils.js
View file

@ -12,6 +12,11 @@ export function isEditableElement(element) {
); );
} }
export function isElementInViewport(element) {
const box = element.getBoundingClientRect();
return box.bottom >= 0 && box.top <= window.innerHeight;
}
export function clamp(n, x, y) { export function clamp(n, x, y) {
return Math.min(Math.max(n, x), y); return Math.min(Math.max(n, x), y);
} }

14
assets/js/session/index.js
View file

@ -6,6 +6,7 @@ import {
smoothlyScrollToElement, smoothlyScrollToElement,
setFavicon, setFavicon,
cancelEvent, cancelEvent,
isElementInViewport,
} from "../lib/utils"; } from "../lib/utils";
import { getAttributeOrDefault } from "../lib/attribute"; import { getAttributeOrDefault } from "../lib/attribute";
import KeyBuffer from "./key_buffer"; import KeyBuffer from "./key_buffer";
@ -1057,6 +1058,12 @@ function nearbyFocusableId(focusableId, offset) {
const idx = focusableIds.indexOf(focusableId); const idx = focusableIds.indexOf(focusableId);
if (idx === -1) { if (idx === -1) {
const focusableElInViewport = getFocusableEls().find(isElementInViewport);
if (focusableElInViewport) {
return focusableElInViewport.getAttribute("data-focusable-id");
}
return focusableIds[0]; return focusableIds[0];
} else { } else {
const siblingIdx = clamp(idx + offset, 0, focusableIds.length - 1); const siblingIdx = clamp(idx + offset, 0, focusableIds.length - 1);
@ -1083,9 +1090,12 @@ function getFocusableEl(focusableId) {
return document.querySelector(`[data-focusable-id="${focusableId}"]`); return document.querySelector(`[data-focusable-id="${focusableId}"]`);
} }
function getFocusableEls() {
return Array.from(document.querySelectorAll(`[data-focusable-id]`));
}
function getFocusableIds() { function getFocusableIds() {
const elements = Array.from(document.querySelectorAll(`[data-focusable-id]`)); return getFocusableEls().map((el) => el.getAttribute("data-focusable-id"));
return elements.map((el) => el.getAttribute("data-focusable-id"));
} }
function getSectionIdByFocusableId(focusableId) { function getSectionIdByFocusableId(focusableId) {