diff --git a/ghost/admin/app/modifiers/scroll-into-view.js b/ghost/admin/app/modifiers/scroll-into-view.js new file mode 100644 index 0000000000..840e5608de --- /dev/null +++ b/ghost/admin/app/modifiers/scroll-into-view.js @@ -0,0 +1,21 @@ +import getScrollParent from 'ghost-admin/utils/get-scroll-parent'; +import {modifier} from 'ember-modifier'; + +export default modifier((element, [shouldScroll = true], {offset = 0}) => { + if (shouldScroll) { + const scrollParent = getScrollParent(element); + + 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'}); + } + } +}); diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-image/selector-tenor.hbs b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-image/selector-tenor.hbs index e4fcd86841..02f2fb80fb 100644 --- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-image/selector-tenor.hbs +++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-image/selector-tenor.hbs @@ -32,7 +32,8 @@ + @isHighlighted={{eq gif this.highlightedGif}} + {{scroll-into-view (eq gif this.highlightedGif) offset=20}} /> {{/each}} {{/each}} diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-image/selector-tenor/gif.hbs b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-image/selector-tenor/gif.hbs index 1136b1cb40..44de07a43f 100644 --- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-image/selector-tenor/gif.hbs +++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-image/selector-tenor/gif.hbs @@ -1,4 +1,4 @@ - +
{{@gif.description}}