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

Improve output container behaviour with horizontal overflow (#295)

Browse source
This commit is contained in:
Jonatan Kłosko 2021-05-25 18:55:57 +02:00 • committed by GitHub
parent a917663255
commit f4a479b14e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 29 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -47,21 +47,28 @@ const VirtualizedLines = {
this.state.contentElement = this.el.querySelector("[data-content]");
if (!this.state.contentElement) {
throw new Error("VirtualizedLines must have a child with data-content");
throw new Error(
"VirtualizedLines must have a child with data-content attribute"
);
}
const config = hyperListConfig(
this.state.contentElement,
this.state.templateElement,
this.props.maxHeight,
this.state.lineHeight
);
this.virtualizedList = new HyperList(this.state.contentElement, config);
this.state.virtualizedList = new HyperList(
this.state.contentElement,
config
);
},
updated() {
this.props = getProps(this);
const config = hyperListConfig(
this.state.contentElement,
this.state.templateElement,
this.props.maxHeight,
this.state.lineHeight
@ -74,7 +81,7 @@ const VirtualizedLines = {
);
const isAtTheEnd = scrollTop === maxScrollTop;
this.virtualizedList.refresh(this.state.contentElement, config);
this.state.virtualizedList.refresh(this.state.contentElement, config);
if (this.props.follow && isAtTheEnd) {
this.state.contentElement.scrollTop = this.state.contentElement.scrollHeight;
@ -82,17 +89,34 @@ const VirtualizedLines = {
},
};
function hyperListConfig(templateElement, maxHeight, lineHeight) {
function hyperListConfig(
contentElement,
templateElement,
maxHeight,
lineHeight
) {
const numberOfLines = templateElement.childElementCount;
const height = Math.min(maxHeight, lineHeight * numberOfLines);
return {
height: Math.min(maxHeight, lineHeight * numberOfLines),
height,
total: numberOfLines,
itemHeight: lineHeight,
generate: (index) => {
// Clone n-th child of the template container.
return templateElement.children.item(index).cloneNode(true);
},
afterRender: () => {
// The content element has a fixed height and when the horizontal
// scrollbar appears, it's treated as part of the element's content.
// To accommodate for the scrollbar we dynamically add more height
// to the element.
if (contentElement.scrollWidth > contentElement.clientWidth) {
contentElement.style.height = `${height + 12}px`;
} else {
contentElement.style.height = `${height}px`;
}
},
};
}