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 behaviour for inline image selector

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

- added `scrollToCard` action to `koenig-editor` and passed it through to all card components curried to already include the card as an argument
  - action selects the card which places the cursor on it, then triggers our existing cursor scroll-into-view behaviour with an option to allow scrolling a card into view
- updated our cursor scroll-into-view behaviour so if the cursor is large (eg, when it covers a card's height) we make sure the top of the cursor is kept in view rather than the bottom
  - ensures that on small-height screens, opening the gif selector doesn't result in it's search bar being scrolled off screen
This commit is contained in:
Kevin Ansfield 2021-11-24 20:02:10 +00:00
parent 5116c86557
commit 0f517ad4e6
3 changed files with 19 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ghost/admin/lib/koenig-editor/addon/components/koenig-card-image.js
View File

@ -180,6 +180,10 @@ export default Component.extend({
fileInput.click(); fileInput.click();
} }
} }
if (this.imageSelector) {
this.scrollToCard();
}
}, },
actions: { actions: {

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

@ -100,6 +100,7 @@
saveCard=(action card.env.save) saveCard=(action card.env.save)
cancelCard=(action card.env.cancel) cancelCard=(action card.env.cancel)
removeCard=(action card.env.remove) removeCard=(action card.env.remove)
scrollToCard=(action "scrollToCard" card)
isSelected=card.isSelected isSelected=card.isSelected
isEditing=card.isEditing isEditing=card.isEditing
selectCard=(action "selectCard" card) selectCard=(action "selectCard" card)

15
ghost/admin/lib/koenig-editor/addon/components/koenig-editor.js
View File

@ -696,6 +696,11 @@ export default Component.extend({
this.deselectCard(card); this.deselectCard(card);
}, },
scrollToCard(card) {
this.selectCard(card);
this._scrollCursorIntoView({jumpToCard: true});
},
// range should be set to the full extent of the selection or the // range should be set to the full extent of the selection or the
// appropriate <a> markup. If there's a selection when the link edit // appropriate <a> markup. If there's a selection when the link edit
// component renders it will re-select when finished which should // component renders it will re-select when finished which should
@ -1475,7 +1480,15 @@ export default Component.extend({
if (atBottom) { if (atBottom) {
this._scrollContainer.scrollTop = this._scrollContainer.scrollHeight; this._scrollContainer.scrollTop = this._scrollContainer.scrollHeight;
} else { } else {
this._scrollContainer.scrollTop = scrollTop + offsetBottom + distanceFromViewportBottom + 20; let scrollAdjustment = offsetBottom + distanceFromViewportBottom + 20;
let cursorFromTop = cursorTop - scrollAdjustment;
// pull top of cursor back into view if the adjustment pushed it off top of screen
if (cursorFromTop < 20) {
scrollAdjustment = scrollAdjustment + cursorFromTop - 20;
}
this._scrollContainer.scrollTop = scrollTop + scrollAdjustment;
} }
} }
} }