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

Disable autoscroll when focusing in insert mode (#355)

Browse source
This commit is contained in:
Jonatan Kłosko 2021-06-16 16:16:26 +02:00 • committed by GitHub
parent c5a3575589
commit 3df6508b56
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -124,7 +124,11 @@ const Cell = {
input.addEventListener("blur", (event) => { input.addEventListener("blur", (event) => {
if (this.state.isFocused && this.state.insertMode) { if (this.state.isFocused && this.state.insertMode) {
input.focus(); // We are still in the insert mode, so focus the input
// back once other handlers complete
setTimeout(() => {
input.focus();
}, 0);
} }
}); });
} }
@ -171,7 +175,7 @@ function getInput(hook) {
*/ */
function handleCellsEvent(hook, event) { function handleCellsEvent(hook, event) {
if (event.type === "cell_focused") { if (event.type === "cell_focused") {
handleCellFocused(hook, event.cellId); handleCellFocused(hook, event.cellId, event.scroll);
} else if (event.type === "insert_mode_changed") { } else if (event.type === "insert_mode_changed") {
handleInsertModeChanged(hook, event.enabled); handleInsertModeChanged(hook, event.enabled);
} else if (event.type === "cell_moved") { } else if (event.type === "cell_moved") {
@ -183,11 +187,13 @@ function handleCellsEvent(hook, event) {
} }
} }
function handleCellFocused(hook, cellId) { function handleCellFocused(hook, cellId, scroll) {
if (hook.props.cellId === cellId) { if (hook.props.cellId === cellId) {
hook.state.isFocused = true; hook.state.isFocused = true;
hook.el.setAttribute("data-js-focused", "true"); hook.el.setAttribute("data-js-focused", "true");
smoothlyScrollToElement(hook.el); if (scroll) {
smoothlyScrollToElement(hook.el);
}
} else if (hook.state.isFocused) { } else if (hook.state.isFocused) {
hook.state.isFocused = false; hook.state.isFocused = false;
hook.el.removeAttribute("data-js-focused"); hook.el.removeAttribute("data-js-focused");

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

@ -342,11 +342,19 @@ function handleDocumentMouseDown(hook, event) {
// Find the cell element, if one was clicked // Find the cell element, if one was clicked
const cell = event.target.closest(`[data-element="cell"]`); const cell = event.target.closest(`[data-element="cell"]`);
const cellId = cell ? cell.dataset.cellId : null; const cellId = cell ? cell.dataset.cellId : null;
const insertMode = editableElementClicked(event, cell);
if (cellId !== hook.state.focusedCellId) { if (cellId !== hook.state.focusedCellId) {
setFocusedCell(hook, cellId); setFocusedCell(hook, cellId, !insertMode);
} }
// Depending on whether the click targets editor disable/enable insert mode // Depending on whether the click targets editor disable/enable insert mode
if (hook.state.insertMode !== insertMode) {
setInsertMode(hook, insertMode);
}
}
function editableElementClicked(event, cell) {
if (cell) { if (cell) {
const editorContainer = cell.querySelector( const editorContainer = cell.querySelector(
`[data-element="editor-container"]` `[data-element="editor-container"]`
@ -354,12 +362,10 @@ function handleDocumentMouseDown(hook, event) {
const input = cell.querySelector(`[data-element="input"]`); const input = cell.querySelector(`[data-element="input"]`);
const editableElement = editorContainer || input; const editableElement = editorContainer || input;
const editorClicked = editableElement.contains(event.target); return editableElement.contains(event.target);
const insertMode = editorClicked;
if (hook.state.insertMode !== insertMode) {
setInsertMode(hook, insertMode);
}
} }
return false;
} }
/** /**
@ -644,7 +650,7 @@ function insertFirstCell(hook, type) {
} }
} }
function setFocusedCell(hook, cellId) { function setFocusedCell(hook, cellId, scroll = true) {
hook.state.focusedCellId = cellId; hook.state.focusedCellId = cellId;
if (hook.state.focusedCellId) { if (hook.state.focusedCellId) {
@ -658,7 +664,7 @@ function setFocusedCell(hook, cellId) {
hook.state.focusedSectionId = null; hook.state.focusedSectionId = null;
} }
globalPubSub.broadcast("cells", { type: "cell_focused", cellId }); globalPubSub.broadcast("cells", { type: "cell_focused", cellId, scroll });
setInsertMode(hook, false); setInsertMode(hook, false);
} }