mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-24 19:33:02 +03:00
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
This commit is contained in:
parent
66e6502cd2
commit
fccfcc3320
21
ghost/admin/app/modifiers/scroll-into-view.js
Normal file
21
ghost/admin/app/modifiers/scroll-into-view.js
Normal file
@ -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'});
|
||||
}
|
||||
}
|
||||
});
|
@ -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}}
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user