Skip to content
This repository has been archived by the owner on Jul 12, 2020. It is now read-only.

Fix cropped nested expandable content in panels #137

Merged
merged 1 commit into from
Mar 30, 2020
Merged

Fix cropped nested expandable content in panels #137

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/panels/MinimalPanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,8 @@
</div>
<transition @before-enter="beforeExpandMinimal"
@enter="duringExpand"
@after-enter="afterExpand"
@before-leave="beforeCollapse"
@leave="duringCollapse"
@after-leave="afterCollapseMinimal"
v-if="preloadBool || wasRetrieverLoaded"
Expand Down
2 changes: 2 additions & 0 deletions src/panels/NestedPanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,8 @@
</div>
<transition @before-enter="beforeExpand"
@enter="duringExpand"
@after-enter="afterExpand"
@before-leave="beforeCollapse"
@leave="duringCollapse"
v-if="preloadBool || wasRetrieverLoaded"
>
Expand Down
27 changes: 22 additions & 5 deletions src/panels/PanelBase.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,22 @@ export default {
window.open(this.popupUrl);
},
setMaxHeight() {
// Don't play the transition for this case as the loading should feel 'instant'
if (this.expandedBool) {
this.$refs.panel.style.maxHeight = 'max-content';
return;
}

/*
Otherwise, since the vue transition is dependent on localExpanded, we have to manually
set our own transition end handlers here for the initial loading of the content.
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Context:
vue uses v-show/v-if to detect transition changes, and there is no way to explicitly trigger the vue animation process.
Hence, the additions here manually trigger the new afterExpand hook, the only difference being that the event listener is removed once done.

For the above however ( this.expandedBool ), we want to loading to feel 'instant' ( even though it isn't ), hence there's no animation there

*/
const onExpandDone = () => {
this.$refs.panel.style.maxHeight = 'max-content';
this.$refs.panel.removeEventListener('transitionend', onExpandDone);
};

this.$refs.panel.addEventListener('transitionend', onExpandDone);
this.$refs.panel.style.maxHeight = `${this.$refs.panel.scrollHeight}px`;
},
beforeExpand(el) {
Expand All @@ -130,6 +146,12 @@ export default {
jQuery("html").stop();
el.style.maxHeight = `${el.scrollHeight}px`;
},
afterExpand(el) {
el.style.maxHeight = 'max-content';
},
beforeCollapse(el) {
el.style.maxHeight = `${el.scrollHeight}px`;
},
duringCollapse(el) {
if (this.$el.getBoundingClientRect().top < 0) {
jQuery("html").animate({
Expand All @@ -154,9 +176,4 @@ export default {
this.wasRetrieverLoaded = this.localExpanded; // If it is expanded, load the retriever immediately.
this.localMinimized = this.minimizedBool;
},
mounted() {
// For this case, we want to set and calculate the maximum height only after the
// panel has been mounted.
if (this.expandedBool && !this.hasSrc) this.setMaxHeight();
}
};