Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(modal): use resizeobserver #2969

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

fix(modal): use resizeobserver #2969

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ca06749
fix(modal): use resizeobserver
lubber-de Dec 20, 2023
6c5a7ea
feat(modal): make scrollbar gutter appearance customizable
lubber-de May 1, 2024
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
104 changes: 81 additions & 23 deletions src/definitions/modules/modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,7 @@
id,
observer,
observeAttributes = false,
resizeObserver,
module
;
module = {
Expand Down Expand Up @@ -246,6 +247,9 @@
if (observer) {
observer.disconnect();
}
if (resizeObserver) {
resizeObserver.disconnect();
}
module.verbose('Destroying previous modal');
$module
.removeData(moduleNamespace)
Expand All @@ -263,6 +267,13 @@

observeChanges: function () {
if ('MutationObserver' in window) {
if ('ResizeObserver' in window && settings.observeChanges) {
lubber-de marked this conversation as resolved.
Show resolved Hide resolved
resizeObserver = new ResizeObserver(function (entries) {
module.refresh();
});
resizeObserver.observe(element);
module.debug('Setting up resize observer', resizeObserver);
}
observer = new MutationObserver(function (mutations) {
var collectNodes = function (parent) {
var nodes = [];
Expand Down Expand Up @@ -299,7 +310,7 @@
return !shouldRefreshInputs;
});

if (shouldRefresh && settings.observeChanges) {
if (!resizeObserver && shouldRefresh && settings.observeChanges) {
module.debug('DOM tree modified, refreshing');
module.refresh();
}
Expand All @@ -319,12 +330,15 @@

refresh: function () {
module.remove.scrolling();
module.cacheSizes();
if (!module.can.useFlex()) {
module.set.modalOffset();
if ($module.css('display') !== 'none') {
module.cacheSizes();
if (!module.can.useFlex()) {
module.set.modalOffset();
}
module.set.screenHeight();
module.set.dimmerHeight();
module.set.type();
}
module.set.screenHeight();
module.set.type();
},

refreshModals: function () {
Expand Down Expand Up @@ -601,7 +615,7 @@
}
hadScrollbar = module.has.scrollbar();
module.showDimmer();
module.cacheSizes();
module.cacheSizes(true);
if (hadScrollbar) {
module.set.bodyMargin();
}
Expand Down Expand Up @@ -729,7 +743,8 @@
if ($dimmable.dimmer('is animating') || !$dimmable.dimmer('is active')) {
if (hadScrollbar) {
if (!isBody) {
$dimmer.css('top', $dimmable.scrollTop());
$dimmer.css('top', settings.detachable ? $dimmable.scrollTop() : 0);
module.set.dimmerHeight();
}
module.save.bodyMargin();
}
Expand All @@ -749,6 +764,7 @@
}
module.remove.clickaway();
module.remove.screenHeight();
module.remove.dimmerHeight();
});
} else {
module.debug('Dimmer is not visible cannot hide');
Expand Down Expand Up @@ -881,13 +897,28 @@
$context.removeAttr('style');
}
},
dimmerStyle: function () {
if ($dimmer.attr('style') === '') {
module.verbose('Removing dimmer style attribute');
$dimmer.removeAttr('style');
}
},
screenHeight: function () {
module.debug('Removing page height');
$context
.css('height', '')
;
module.remove.bodyStyle();
},
dimmerHeight: function () {
module.debug('Removing dimmer height');
$dimmer.css({
top: '',
height: '',
maxHeight: '',
});
module.remove.dimmerStyle();
},
keyboardShortcuts: function () {
module.verbose('Removing keyboard shortcuts');
$document
Expand All @@ -902,12 +933,14 @@
},
},

cacheSizes: function () {
cacheSizes: function (getScrollingMargins) {
$module.addClass(className.loading);
var
scrollHeight = $module.prop('scrollHeight'),
modalWidth = $module.outerWidth(),
modalHeight = $module.outerHeight()
modalHeight = $module.outerHeight(),
scrollingTop = 0,
bottomMargin = 0
;
if (module.cache.pageHeight === undefined || modalHeight !== 0) {
$.extend(module.cache, {
Expand All @@ -921,6 +954,18 @@
});
module.cache.topOffset = -(module.cache.height / 2);
}
if (getScrollingMargins) {
if (module.can.useFlex()) {
$module.addClass(className.scrolling);
scrollingTop = parseInt($module.css('top').replace(/[^\d.]/g, ''), 10) || 0;
bottomMargin = parseInt(window.getComputedStyle($module[0], '::after').height.replace(/[^\d.]/g, ''), 10) || 0;
$module.removeClass(className.scrolling);
}
$.extend(module.cache, {
scrollingTop: scrollingTop,
bottomMargin: bottomMargin,
});
}
$module.removeClass(className.loading);
module.debug('Caching modal and container sizes', module.cache);
},
Expand Down Expand Up @@ -980,15 +1025,16 @@
contextHeight = module.cache.contextHeight,
verticalCenter = module.cache.contextHeight / 2,
topOffset = module.cache.topOffset,
scrollHeight = module.cache.scrollHeight,
scrollingTop = module.cache.scrollingTop || 0,
scrollHeight = module.cache.scrollHeight - (module.cache.bottomMargin || 0),
height = module.cache.height,
paddingHeight = settings.padding,
startPosition = verticalCenter + topOffset
;

return scrollHeight > height
? startPosition + scrollHeight + paddingHeight < contextHeight
: height + (paddingHeight * 2) < contextHeight;
: height + (paddingHeight * 2) - scrollingTop < contextHeight;
},
},
has: {
Expand Down Expand Up @@ -1140,14 +1186,15 @@
},
modalOffset: function () {
if (!settings.detachable) {
var canFit = module.can.fit();
var canFit = module.can.fit(),
scrollTop = (isBody ? $document : $context).scrollTop();
$module
.css({
top: !$module.hasClass('aligned') && canFit
? $document.scrollTop() + (module.cache.contextHeight - module.cache.height) / 2
? scrollTop + (module.cache.contextHeight - module.cache.height) / 2
: (!canFit || $module.hasClass('top')
? $document.scrollTop() + settings.padding
: $document.scrollTop() + (module.cache.contextHeight - module.cache.height - settings.padding)),
? scrollTop + settings.padding
: scrollTop + (module.cache.contextHeight - module.cache.height - settings.padding)),
marginLeft: -(module.cache.width / 2),
})
;
Expand All @@ -1164,13 +1211,24 @@
module.verbose('Setting modal offset for legacy mode');
},
screenHeight: function () {
if (module.can.fit()) {
$context.css('height', '');
} else if (!$module.hasClass('bottom')) {
module.debug('Modal is taller than page content, resizing page height');
$context
.css('height', module.cache.height + (settings.padding * 2) + 'px')
;
if (!isBody && !settings.detachable) {
if (module.can.fit() || hadScrollbar) {
$context.css('height', '');
} else if (!$module.hasClass('bottom')) {
module.debug('Modal is taller than page content, resizing page height');
$context
.css('height', module.cache.height + (settings.padding * 2) + 'px')
;
}
}
},
dimmerHeight: function () {
if (!isBody && !settings.detachable) {
var contextHeight = $context.prop('scrollHeight');
$dimmer.css({
height: contextHeight,
maxHeight: contextHeight,
});
}
},
active: function () {
Expand Down
13 changes: 11 additions & 2 deletions src/definitions/modules/modal.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,6 +227,7 @@
opacity: @closeOpacityDimmed;
}
}
.undetached.dimmable.dimmed > .ui.modal:not(.fullscreen) > .close:not(.inside),
.ui.dimmer > .ui.modal:not(.fullscreen) > .close:not(.inside) {
text-shadow: @closeShadow;
}
Expand Down Expand Up @@ -447,6 +448,9 @@
overflow: auto;
overscroll-behavior: @overscrollBehavior;
}
.modals.dimmer {
scrollbar-gutter: stable;
Copy link
Contributor

Choose a reason for hiding this comment

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

Why is this needed, will it imply scrollbars always shown? In the PR description there is mentioned something with detachable: false, is this related?

There is mentioned "The dimmers scrollbar will now also not trigger content movement anymore". I tried the demo (in Firefox) and when the textarea is resized, the content is unexpectedly always scrolled to the top when resized.

Copy link
Member Author

@lubber-de lubber-de Dec 21, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

Why is this needed, will it imply scrollbars always shown? In the PR description there is mentioned something with detachable: false, is this related?

No, the scollbars are not always shown. This will occupy a possible shown scrollbar margin, but will not show an empty scrollbar in case the element is not body and no overflow happens
See example at #679

The problem with "detachable:false" in case context is body, is that body does not support this feature (scrollbar-gutter) (firefox+safari don't care at all, because those have their own implemented "overlay scrollbar feature")
Because of this the parent element would need to get scrollbar-gutter:stable instead. This basically works, but as the html element does not have any dimmer color set, it would display a white empty scrollbar in case the modal fits the screen. It also left a second scrollbar when closing the modal...very ugly

If you want to see/try my hack:

The jsfiddle does only barely show the issue as jsfiddle has a black parent background which the html element inside the iframe inherits (so the permanent occupied right scrollbar area is black, but still not the "dimmer black"
https://jsfiddle.net/lubber/cyjnta1d/3/

I also tried messing around with the dimmer animation to also make the html element inherits that, but the transition was not in sync and the code bloated away as we would need to support every possible dimmer variation just for that.

We would also need to support non body context elements... lots of code and cases for, IMHO, little benefit

@supports (scrollbar-gutter: stable) and (selector(:has(.f))) {
    html:has(body.undetached.dimmable) {
      overflow: auto;
    }
    html:has(body.undetached.dimmable.dimmed) {
      overflow: auto;
      scrollbar-gutter: stable;
    }
    body.undetached.dimmable.dimmed.dimmed {
      overflow: hidden;
    }
}

There is mentioned "The dimmers scrollbar will now also not trigger content movement anymore".

What was meant by this is #679 (comment)

I tried the demo (in Firefox) and when the textarea is resized, the content is unexpectedly always scrolled to the top when resized.

mmh, thats the in between discussion where i was not able to reproduce this.

The modal is only put to the top when the it detects the current modals size would not fit (thus adds the scrolling class). Whenever i am able to reproduce this, i take a look again and prepare a separate PR as some browser (firefox) measurements seem to provide questionable values inside module.can.fit() in some situations

Copy link
Contributor

@mvorisek mvorisek Dec 21, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

Thank you for your detailed explanation and your work on this topic.

I tried the demo (in Firefox) and when the textarea is resized, the content is unexpectedly always scrolled to the top when resized.

mmh, thats the in between discussion where i was not able to reproduce this.

I meant the demo of/from this PR - https://jsfiddle.net/lubber/drb6fpog/1/

Steps to reproduce:

  1. open the https://jsfiddle.net/lubber/drb6fpog/1/ in Firefox
  2. resize the textarea vertically by dragging the right bottom corner to make the modal larger than the viewport
  3. scroll down the modal
  4. now try to resize the dropdown by dragging the right bottom corner
  5. the modal is unexpectedly scrolled to the top immediately - I would expect no scroll/jump
  6. also notice when you click the textarea resize corner and have F12 "Inspector" tab open, div.dimmer div.modal div in the inspector tab flashes yellow meaning something has changed, but I did not noticed/see any real css/class changes, meaning some same value is set from a mutation observer or even possibly worse, some value is set and immediatelly changed back

Copy link
Member Author

Choose a reason for hiding this comment

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

i take a look into this

}
.modals.dimmer .ui.scrolling.modal.fullscreen {
top: 0;
}
Expand All @@ -455,12 +459,17 @@
top: @scrollingTop;
}

/* Fix for Firefox, Edge, IE11 */
.modals.dimmer .ui.scrolling.modal:not([class*="overlay fullscreen"])::after {
.modals.dimmer .ui.modal:not([class*="overlay fullscreen"])::after {
content: "\00A0";
position: absolute;
height: 0;
}
.modals.dimmer .ui.scrolling.modal:not([class*="overlay fullscreen"])::after {
height: @scrollingMargin;
}
.dimmable.dimmed > .modals.dimmer {
overflow: auto;
}

/* Undetached Scrolling */
.scrolling.undetached.dimmable.dimmed {
Expand Down