TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-28 05:37:34 +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 21px 25.2px rgba(0, 0, 0, 0.031),
0px 37.5px 44.9px rgba(0, 0, 0, 0.036), 0px 37.5px 44.9px rgba(0, 0, 0, 0.036),
0px 70.2px 84px rgba(0, 0, 0, 0.043), 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; border-radius: 5px;
height: 540px; height: 540px;
/* margin-bottom: 32px; */ /* 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 @action
resetScrollPosition() { resetScrollPosition() {
const scrollContainer = document.querySelector(this.args.scrollContainerSelector); 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 @action
@ -64,13 +94,13 @@ export default class KoenigMediaSelectorComponent extends Component {
} }
_positionSelector(range) { _positionSelector(range) {
let {head: {section}} = range; const {head: {section}} = range;
if (section && section.renderNode.element) { if (section && section.renderNode.element) {
let containerRect = this._containerElem.parentNode.getBoundingClientRect(); const containerRect = this._containerElem.parentNode.getBoundingClientRect();
let selectedElement = section.renderNode.element; const selectedElement = section.renderNode.element;
let selectedElementRect = selectedElement.getBoundingClientRect(); const selectedElementRect = selectedElement.getBoundingClientRect();
let top = selectedElementRect.top - containerRect.top + Y_OFFSET; const top = selectedElementRect.top - containerRect.top + Y_OFFSET;
this._containerElem.style.top = `${top}px`; this._containerElem.style.top = `${top}px`;
} }