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

Reposition iframes when JS view visibility changes (#2536)

Browse source
This commit is contained in:
Jonatan Kłosko 2024-04-02 11:43:02 +02:00 committed by GitHub
parent 3a9412cafd
commit edb3d1d4ad
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 23 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
assets/js/hooks/js_view.js
View file

@ -216,18 +216,34 @@ const JSView = {
`[data-el-notebook-content]`,
);
// Most placeholder position changes are accompanied by changes to the
// notebook content element height (adding cells, inserting newlines
// in the editor, etc). On the other hand, toggling the sidebar or
// resizing the window changes the width, however the notebook
// content element doesn't span full width, so this change may not
// be detected, that's why we observe the full-width parent element
// Most placeholder position changes are accompanied by changes
// to the notebook content element height (adding cells, inserting
// newlines in the editor, etc). On the other hand, toggling the
// sidebar or resizing the window changes the width, however the
// notebook content element doesn't span full width, so this change
// may not be detected, that's why we observe the full-width parent
// element as well
const resizeObserver = new ResizeObserver((entries) => {
this.repositionIframe();
});
resizeObserver.observe(notebookContentEl);
resizeObserver.observe(notebookEl);
// The placeholder may be hidden, in which case we want to hide
// the iframe as well. This could be the case when viewing the
// Smart cell source or in tabs output. It is possible that the
// change does not actually change the notebook height, so we
// also watch the placeholder directly
let isPlaceholderHidden = isElementHidden(this.iframePlaceholder);
const placeholderResizeObserver = new ResizeObserver((entries) => {
let isPlaceholderHiddenNow = isElementHidden(this.iframePlaceholder);
if (isPlaceholderHidden !== isPlaceholderHiddenNow) {
isPlaceholderHidden = isPlaceholderHiddenNow;
this.repositionIframe();
}
});
placeholderResizeObserver.observe(this.iframePlaceholder);
// On certain events, like section/cell moved, a global event is
// dispatched to trigger reposition. This way we don't need to
// use deep MutationObserver, which would be expensive, especially
@ -273,6 +289,7 @@ const JSView = {
const remove = () => {
resizeObserver.disconnect();
placeholderResizeObserver.disconnect();
jsViewSubscription.destroy();
visibility.cancel();
this.iframe.remove();