livebook-dev/livebook
1
1
Fork 0
mirror of https://github.com/livebook-dev/livebook.git synced 2025-10-11 14:06:20 +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]"); this.state.contentElement = this.el.querySelector("[data-content]");
if (!this.state.contentElement) { 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( const config = hyperListConfig(
this.state.contentElement,
this.state.templateElement, this.state.templateElement,
this.props.maxHeight, this.props.maxHeight,
this.state.lineHeight this.state.lineHeight
); );
this.virtualizedList = new HyperList(this.state.contentElement, config); this.state.virtualizedList = new HyperList(
this.state.contentElement,
config
);
}, },
updated() { updated() {
this.props = getProps(this); this.props = getProps(this);
const config = hyperListConfig( const config = hyperListConfig(
this.state.contentElement,
this.state.templateElement, this.state.templateElement,
this.props.maxHeight, this.props.maxHeight,
this.state.lineHeight this.state.lineHeight
@ -74,7 +81,7 @@ const VirtualizedLines = {
); );
const isAtTheEnd = scrollTop === maxScrollTop; const isAtTheEnd = scrollTop === maxScrollTop;
this.virtualizedList.refresh(this.state.contentElement, config); this.state.virtualizedList.refresh(this.state.contentElement, config);
if (this.props.follow && isAtTheEnd) { if (this.props.follow && isAtTheEnd) {
this.state.contentElement.scrollTop = this.state.contentElement.scrollHeight; 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 numberOfLines = templateElement.childElementCount;
const height = Math.min(maxHeight, lineHeight * numberOfLines);
return { return {
height: Math.min(maxHeight, lineHeight * numberOfLines), height,
total: numberOfLines, total: numberOfLines,
itemHeight: lineHeight, itemHeight: lineHeight,
generate: (index) => { generate: (index) => {
// Clone n-th child of the template container. // Clone n-th child of the template container.
return templateElement.children.item(index).cloneNode(true); 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`;
}
},
}; };
} }