From fccfcc33202240f6f16366cc00cea451edd72c3a Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Mon, 29 Nov 2021 19:33:35 +0000
Subject: [PATCH] Added scroll-into-view behavior for highlighted gifs

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

- added `scroll-into-view` modifier that will scroll an element into view putting it at the top or bottom of the viewport depending on which direction scroll is required
- used the `scroll-into-view` modifier to scroll the highlighted gif into view
---
 ghost/admin/app/modifiers/scroll-into-view.js | 21 +++++++++++++++++++
 .../koenig-card-image/selector-tenor.hbs      |  3 ++-
 .../koenig-card-image/selector-tenor/gif.hbs  |  2 +-
 3 files changed, 24 insertions(+), 2 deletions(-)
 create mode 100644 ghost/admin/app/modifiers/scroll-into-view.js

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 @@
                                 <KoenigCardImage::SelectorTenor::Gif
                                     @gif={{gif}}
                                     @select={{fn this.select gif}}
-                                    @isHighlighted={{eq gif this.highlightedGif}} />
+                                    @isHighlighted={{eq gif this.highlightedGif}}
+                                    {{scroll-into-view (eq gif this.highlightedGif) offset=20}} />
                             {{/each}}
                         </div>
                     {{/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 @@
-<a class="gh-tenor-gif {{if @isHighlighted "gh-tenor-gif-highlighted"}}" href="#" {{on "click" @select}} data-test-tenor-gif={{@gif.id}} style={{this.style}}>
+<a class="gh-tenor-gif {{if @isHighlighted "gh-tenor-gif-highlighted"}}" href="#" {{on "click" @select}} data-test-tenor-gif={{@gif.id}} style={{this.style}} ...attributes>
     <div class="gh-unsplash-photo-container" style={{this.containerStyle}} data-test-tenor-gif-container>
         <img src={{this.imageUrl}} alt={{@gif.description}} width={{this.width}} height={{this.height}} data-test-tenor-gif-image />
     </div>