577a749e12
no issue - followed the migration guide to switch to from lifecycle hooks to single `modify()` method - https://togithub.com/ember-modifier/ember-modifier/blob/master/MIGRATIONS.md - forced resolution of `ember-in-viewport@4.0.2` to avoid older version of `ember-modifier` being pulled in through `ember-infinity`
55 lines
2.1 KiB
JavaScript
55 lines
2.1 KiB
JavaScript
import getScrollParent from 'ghost-admin/utils/get-scroll-parent';
|
|
import {modifier} from 'ember-modifier';
|
|
|
|
export default modifier((element, [shouldScroll = true], {offset = 0, useViewport = true}) => {
|
|
if (shouldScroll) {
|
|
const scrollParent = getScrollParent(element);
|
|
|
|
// scrolls so the element is visible on-screen
|
|
if (useViewport) {
|
|
const elementRect = element.getBoundingClientRect();
|
|
const scrollParentRect = scrollParent.getBoundingClientRect();
|
|
|
|
// TODO: ensure scroll parent is visible?
|
|
|
|
const isOffTop = elementRect.top < 0;
|
|
const isOffBottom = elementRect.bottom > scrollParentRect.bottom;
|
|
|
|
if (isOffTop) {
|
|
// TODO: implement me
|
|
}
|
|
|
|
if (isOffBottom) {
|
|
let adjustment = Math.abs(scrollParentRect.bottom - elementRect.bottom);
|
|
|
|
// keep top on screen
|
|
if (elementRect.top - adjustment < offset) {
|
|
const readjustment = Math.abs(elementRect.top - adjustment - (offset * 2));
|
|
adjustment -= readjustment;
|
|
}
|
|
|
|
const top = scrollParent.scrollTop + adjustment + offset;
|
|
|
|
scrollParent.scrollTo({top, behavior: 'smooth'});
|
|
}
|
|
}
|
|
|
|
// scrolls so the element is visible inside of the scroll parent's viewport,
|
|
// may not result in element being visible on-screen if scroll parent is cut off
|
|
if (!useViewport) {
|
|
const isOffTop = element.offsetTop < scrollParent.scrollTop;
|
|
const isOffBottom = scrollParent.scrollTop + scrollParent.offsetHeight < element.offsetTop + element.offsetHeight;
|
|
|
|
if (isOffTop) {
|
|
const top = element.offsetTop - offset;
|
|
scrollParent.scrollTo({top, behavior: 'smooth'});
|
|
}
|
|
|
|
if (isOffBottom) {
|
|
const top = element.offsetTop - scrollParent.offsetHeight + element.offsetHeight + offset;
|
|
scrollParent.scrollTo({top, behavior: 'smooth'});
|
|
}
|
|
}
|
|
}
|
|
}, {eager: false});
|