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

Automatically scroll output (#106)

Browse source
This commit is contained in:
Jonatan Kłosko 2021-03-22 16:23:42 +01:00 committed by GitHub
parent 9e69e8f096
commit 4061802220
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
assets/js/virtualized_lines/index.js
View file

@ -1,5 +1,9 @@
import HyperList from "hyperlist";
import { getAttributeOrThrow, parseInteger } from "../lib/attribute";
import {
getAttributeOrThrow,
parseBoolean,
parseInteger,
} from "../lib/attribute";
import { getLineHeight } from "../lib/utils";
/**
@ -10,6 +14,8 @@ import { getLineHeight } from "../lib/utils";
*
* * `data-max-height` - the maximum height of the element, exceeding this height enables scrolling
*
* * `data-follow` - whether to automatically scroll to the bottom as new lines appear
*
* The element should have two children:
*
* * one annotated with `data-template` attribute, it should be hidden
@ -60,7 +66,19 @@ const VirtualizedLines = {
this.props.maxHeight,
this.state.lineHeight
);
const scrollTop = Math.round(this.state.contentElement.scrollTop);
const maxScrollTop = Math.round(
this.state.contentElement.scrollHeight -
this.state.contentElement.clientHeight
);
const isAtTheEnd = scrollTop === maxScrollTop;
this.virtualizedList.refresh(this.state.contentElement, config);
if (this.props.follow && isAtTheEnd) {
this.state.contentElement.scrollTop = this.state.contentElement.scrollHeight;
}
},
};
@ -81,6 +99,7 @@ function hyperListConfig(templateElement, maxHeight, lineHeight) {
function getProps(hook) {
return {
maxHeight: getAttributeOrThrow(hook.el, "data-max-height", parseInteger),
follow: getAttributeOrThrow(hook.el, "data-follow", parseBoolean),
};
}

4
lib/livebook_web/live/cell_component.ex
View file

@ -204,7 +204,7 @@ defmodule LivebookWeb.CellComponent do
assigns = %{lines: lines, id: id}
~L"""
<div id="<%= @id %>" phx-hook="VirtualizedLines" data-max-height="300">
<div id="<%= @id %>" phx-hook="VirtualizedLines" data-max-height="300" data-follow="true">
<div data-template class="hidden"><%= for line <- @lines do %><div><%= raw line %></div><% end %></div>
<div data-content phx-update="ignore" class="overflow-auto whitespace-pre text-gray-500 tiny-scrollbar"></div>
</div>
@ -216,7 +216,7 @@ defmodule LivebookWeb.CellComponent do
assigns = %{lines: lines, id: id}
~L"""
<div id="<%= @id %>" phx-hook="VirtualizedLines" data-max-height="300">
<div id="<%= @id %>" phx-hook="VirtualizedLines" data-max-height="300" data-follow="false">
<div data-template class="hidden"><%= for line <- @lines do %><div><%= raw line %></div><% end %></div>
<div data-content phx-update="ignore" class="overflow-auto whitespace-pre text-gray-500 tiny-scrollbar"></div>
</div>