TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-24 06:35:49 +03:00
Code Issues Projects Releases Wiki Activity

Added scroll-into-view when opening media selector

Browse Source 
refs https://github.com/TryGhost/Team/issues/1225

- when opening the media selector and the bottom is cut off, scroll the whole selector into view so it's bottom is 20px away from the viewport bottom
- if the adjusted scroll would hide the top of the selector, make sure the top is 20px from the viewport top leaving the bottom cut off
This commit is contained in:
Kevin Ansfield 2021-11-23 16:35:44 +00:00
parent 591d5442e5
commit 67a10184dc
2 changed files with 37 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ghost/admin/app/styles/components/koenig.css
View File

@ -945,7 +945,7 @@
0px 21px 25.2px rgba(0, 0, 0, 0.031),
0px 37.5px 44.9px rgba(0, 0, 0, 0.036),
0px 70.2px 84px rgba(0, 0, 0, 0.043),
0px 168px 201px rgba(0, 0, 0, 0.06);
0px 168px 201px rgba(0, 0, 0, 0.06);
border-radius: 5px;
height: 540px;
/* margin-bottom: 32px; */

42
ghost/admin/lib/koenig-editor/addon/components/koenig-media-selector.js
View File

@ -38,7 +38,37 @@ export default class KoenigMediaSelectorComponent extends Component {
@action
resetScrollPosition() {
const scrollContainer = document.querySelector(this.args.scrollContainerSelector);
scrollContainer.scrollTop = this._scrollTop;
const scrollContainerRect = scrollContainer.getBoundingClientRect();
const containerRect = this._containerElem.getBoundingClientRect();
let scrollTop = this._scrollTop;
const scrollBottom = scrollTop + scrollContainerRect.height;
const containerBottom = scrollTop + containerRect.bottom;
if (containerBottom > scrollBottom) {
// bottom of selector is cut-off, scroll it into view
const amountCutOffBottom = containerBottom - scrollBottom;
// container 600px - inner container 540px = 60px of shadow
// cut 40px off to give a 20px spacing from bottom of screen
const bottomBuffer = 40;
let scrollAdjustment = amountCutOffBottom - bottomBuffer;
// don't scroll so much the top of the container gets hidden
const newContainerTop = containerRect.top - scrollAdjustment;
const minDistanceFromTop = 20;
if (newContainerTop < minDistanceFromTop) {
const amountCutOffTop = Math.abs(newContainerTop - minDistanceFromTop);
scrollAdjustment = scrollAdjustment - amountCutOffTop;
}
scrollTop = scrollTop + scrollAdjustment;
}
scrollContainer.scrollTop = scrollTop;
}
@action
@ -64,13 +94,13 @@ export default class KoenigMediaSelectorComponent extends Component {
}
_positionSelector(range) {
let {head: {section}} = range;
const {head: {section}} = range;
if (section && section.renderNode.element) {
let containerRect = this._containerElem.parentNode.getBoundingClientRect();
let selectedElement = section.renderNode.element;
let selectedElementRect = selectedElement.getBoundingClientRect();
let top = selectedElementRect.top - containerRect.top + Y_OFFSET;
const containerRect = this._containerElem.parentNode.getBoundingClientRect();
const selectedElement = section.renderNode.element;
const selectedElementRect = selectedElement.getBoundingClientRect();
const top = selectedElementRect.top - containerRect.top + Y_OFFSET;
this._containerElem.style.top = `${top}px`;
}