Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Fixed scroll jump when media selector opens

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

- if there's not enough space at the end of the editor canvas to fit the selector the browser adds extra space and pushes the scroll up making things feel janky
- added a scroll position reset as soon as the selector renders so nothing jumps around, the canvas just extends so it's possible to scroll the full selector into view
This commit is contained in:
Kevin Ansfield 2021-11-19 19:51:45 +00:00
parent 516ad8297a
commit d510883be5
2 changed files with 12 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
ghost/admin/lib/koenig-editor/addon/components/koenig-editor.hbs
View file

@ -54,6 +54,7 @@
@editor={{this.editor}}
@editorRange={{this.selectedRange}}
@replaceWithCardSection={{action "replaceWithCardSection"}}
@scrollContainerSelector={{this.scrollContainerSelector}}
@close={{action "closeSelectorComponent"}}
as |selector|
>

11
ghost/admin/lib/koenig-editor/addon/components/koenig-media-selector.js
View file

@ -10,6 +10,10 @@ export default class KoenigMediaSelectorComponent extends Component {
// store editor range for later because it might change if focus is lost
this._editorRange = this.args.editorRange;
// store scroll position before anything else renders
const scrollContainer = document.querySelector(this.args.scrollContainerSelector);
this._scrollTop = scrollContainer.scrollTop;
}
willDestroy() {
@ -22,6 +26,7 @@ export default class KoenigMediaSelectorComponent extends Component {
this._containerElem = containerElem;
this._positionSelector(this._editorRange);
this.resetScrollPosition();
// any click outside of the selector should close it and clear any /command
// add with 1ms delay so current event loop finishes to avoid instaclose
@ -30,6 +35,12 @@ export default class KoenigMediaSelectorComponent extends Component {
});
}
@action
resetScrollPosition() {
const scrollContainer = document.querySelector(this.args.scrollContainerSelector);
scrollContainer.scrollTop = this._scrollTop;
}
@action
insertCard(cardName, payload) {
this.args.replaceWithCardSection(cardName, this._editorRange, payload);