mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-25 20:03:12 +03:00
Removed "zoom" in gif selector in favor of instant-insert
refs https://github.com/TryGhost/Team/issues/1220 - there's no options for individual gifs like there are with Unsplash images and there's no real need to zoom for gifs that are already fairly small so the extra zoom step is unnecessary
This commit is contained in:
Kevin Ansfield
parent
a9ae15b1a5
commit
601727e50c
@ -42,7 +42,6 @@
|
||||
{{#each gifs as |gif|}}
|
||||
<GhTenor::Gif
|
||||
@gif={{gif}}
|
||||
@zoom={{fn this.zoom gif}}
|
||||
@select={{fn this.select gif}} />
|
||||
{{/each}}
|
||||
</div>
|
||||
@ -78,17 +77,6 @@
|
||||
@triggerOffset={{1000}} />
|
||||
{{/unless}}
|
||||
</div>
|
||||
|
||||
{{!-- zoomed image overlay --}}
|
||||
{{#if this.zoomedGif}}
|
||||
<div class="absolute flex justify-center top-0 right-0 bottom-0 left-0 pr20 pb10 pl20 bg-white overflow-hidden" {{on "click" this.closeZoom}}>
|
||||
<GhTenor::Gif
|
||||
@gif={{this.zoomedGif}}
|
||||
@zoomed={{true}}
|
||||
@zoom={{this.closeZoom}}
|
||||
@select={{fn this.select this.zoomedGif}} />
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -9,8 +9,6 @@ const THREE_COLUMN_WIDTH = 940;
|
||||
export default class GhTenorComponent extends Component {
|
||||
@service tenor;
|
||||
|
||||
@tracked zoomedGif;
|
||||
|
||||
willDestroy() {
|
||||
super.willDestroy(...arguments);
|
||||
this._resizeObserver?.disconnect();
|
||||
@ -48,18 +46,6 @@ export default class GhTenorComponent extends Component {
|
||||
this._resizeObserver.observe(containerElem);
|
||||
}
|
||||
|
||||
@action
|
||||
zoom(gif, event) {
|
||||
event?.preventDefault();
|
||||
this.zoomedGif = gif;
|
||||
}
|
||||
|
||||
@action
|
||||
closeZoom(event) {
|
||||
event?.preventDefault();
|
||||
this.zoomedGif = null;
|
||||
}
|
||||
|
||||
@action
|
||||
select(gif, event) {
|
||||
event?.preventDefault();
|
||||
@ -80,10 +66,6 @@ export default class GhTenorComponent extends Component {
|
||||
|
||||
@action
|
||||
handleEscape() {
|
||||
if (this.zoomedGif) {
|
||||
this.zoomedGif = null;
|
||||
} else {
|
||||
this.args.close();
|
||||
}
|
||||
this.args.close();
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,23 +1,5 @@
|
||||
<a class="gh-unsplash-photo" href="#" {{on "click" @zoom}} data-tenor-zoomed-gif={{if @zoomed @gif.id}} data-test-tenor-gif={{@gif.id}} style={{this.style}} {{did-insert this.didInsert}}>
|
||||
<a class="gh-tenor-gif" href="#" {{on "click" @select}} data-test-tenor-gif={{@gif.id}} style={{this.style}}>
|
||||
<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 class="gh-unsplash-photo-overlay">
|
||||
<div class="gh-unsplash-photo-header">
|
||||
{{!-- <a class="gh-unsplash-button-likes gh-unsplash-button" href="{{@gif.links.html}}?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit" target="_blank">{{svg-jar "unsplash-heart"}}{{@gif.likes}}</a>
|
||||
<a class="gh-unsplash-button-download gh-unsplash-button" href="{{@gif.links.download}}/?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit&force=true">{{svg-jar "download"}}</a> --}}
|
||||
</div>
|
||||
<div class="gh-unsplash-photo-footer">
|
||||
<div class="gh-unsplash-photo-author">
|
||||
{{!-- <a class="gh-unsplash-photo-author-img" href="{{@gif.user.links.html}}?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit" target="_blank">
|
||||
<img src="{{@gif.user.profile_image.medium}}" />
|
||||
</a>
|
||||
<a class="gh-unsplash-photo-author-name" href="{{@gif.user.links.html}}?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit" target="_blank">
|
||||
{{@gif.user.name}}
|
||||
</a> --}}
|
||||
</div>
|
||||
<button class="gh-unsplash-button" {{on "click" @select}}>Insert gif</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@ -1,15 +1,9 @@
|
||||
import Component from '@glimmer/component';
|
||||
import {action} from '@ember/object';
|
||||
import {htmlSafe} from '@ember/template';
|
||||
import {run} from '@ember/runloop';
|
||||
|
||||
export default class GhTenorGifComponent extends Component {
|
||||
get media() {
|
||||
if (this.args.zoomed) {
|
||||
return this.args.gif.media[0].gif;
|
||||
} else {
|
||||
return this.args.gif.media[0].tinygif;
|
||||
}
|
||||
return this.args.gif.media[0].tinygif;
|
||||
}
|
||||
|
||||
get imageUrl() {
|
||||
@ -35,82 +29,9 @@ export default class GhTenorGifComponent extends Component {
|
||||
|
||||
const styles = [];
|
||||
const ratio = this.args.gif.ratio;
|
||||
const zoomed = this.args.zoomed;
|
||||
|
||||
if (zoomed) {
|
||||
styles.push(`cursor: zoom-out`);
|
||||
} else {
|
||||
styles.push(`padding-bottom: ${ratio * 100}%`);
|
||||
}
|
||||
styles.push(`padding-bottom: ${ratio * 100}%`);
|
||||
|
||||
return htmlSafe(styles.join('; '));
|
||||
}
|
||||
|
||||
willDestroy() {
|
||||
super.willDestroy(...arguments);
|
||||
this._teardownResizeHandler();
|
||||
}
|
||||
|
||||
@action
|
||||
didInsert() {
|
||||
this._hasRendered = true;
|
||||
|
||||
if (this.args.zoomed) {
|
||||
this._setZoomedSize();
|
||||
this._setupResizeHandler();
|
||||
}
|
||||
}
|
||||
|
||||
// adjust dimensions so that the full gif is visible on-screen no matter it's ratio
|
||||
_setZoomedSize() {
|
||||
if (!this._hasRendered) {
|
||||
return;
|
||||
}
|
||||
|
||||
const a = document.querySelector(`[data-tenor-zoomed-gif="${this.args.gif.id}"]`);
|
||||
|
||||
a.style.width = '100%';
|
||||
a.style.height = '100%';
|
||||
|
||||
const offsets = a.getBoundingClientRect();
|
||||
const ratio = this.args.gif.ratio;
|
||||
|
||||
const maxHeight = {
|
||||
width: offsets.height / ratio,
|
||||
height: offsets.height
|
||||
};
|
||||
|
||||
const maxWidth = {
|
||||
width: offsets.width,
|
||||
height: offsets.width * ratio
|
||||
};
|
||||
|
||||
let usableSize;
|
||||
|
||||
if (ratio <= 1) {
|
||||
usableSize = maxWidth.height > offsets.height ? maxHeight : maxWidth;
|
||||
} else {
|
||||
usableSize = maxHeight.width > offsets.width ? maxWidth : maxHeight;
|
||||
}
|
||||
|
||||
a.style.width = `${usableSize.width}px`;
|
||||
a.style.height = `${usableSize.height}px`;
|
||||
}
|
||||
|
||||
_setupResizeHandler() {
|
||||
if (this._resizeHandler) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._resizeHandler = run.bind(this, this._handleResize);
|
||||
window.addEventListener('resize', this._resizeHandler);
|
||||
}
|
||||
|
||||
_teardownResizeHandler() {
|
||||
window.removeEventListener('resize', this._resizeHandler);
|
||||
}
|
||||
|
||||
_handleResize() {
|
||||
this._throttleResize = run.throttle(this, this._setZoomedSize, 100);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
/* Unsplash Integration
|
||||
/* Unsplash+Tenor Integration
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
|
||||
@ -281,3 +281,15 @@
|
||||
.gh-unsplash-zoom .gh-unsplash-photo-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Tenor Integration
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.gh-tenor-gif {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 0 0 24px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user