mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-24 23:48:13 -05:00
Removed unused tenor components from earlier iterations
refs https://github.com/TryGhost/Team/issues/1225
- iterations of earlier approaches (modal-image-selector, and kg-media-selector) for the gif selector were kept around whilst we narrowed down the interaction patterns, we've settled on the inline-image-selector pattern introduced in 3f3b66b668 meaning the others are no longer needed
This commit is contained in:
Kevin Ansfield
parent
92165f56d2
commit
aa9a9c9598
8 changed files with 2 additions and 286 deletions
|
|
@ -1,83 +0,0 @@
|
||||||
{{!-- TODO: switch to {{css-transition}}? --}}
|
|
||||||
<LiquidWormhole @class="unsplash">
|
|
||||||
{{!-- TODO: why does this modal background not cover the PSM without style override? --}}
|
|
||||||
<div class="fullscreen-modal-background" style="z-index: 999" {{on "click" @close}}></div>
|
|
||||||
<div class="absolute top-8 right-8 bottom-8 left-8 br4 overflow-hidden bg-white z-9999" {{on-key "Escape" this.handleEscape}} {{did-insert this.postInsertSetup}} data-tenor>
|
|
||||||
{{!-- close button --}}
|
|
||||||
<button type="button" class="absolute top-6 right-6" {{on "click" @close}}>
|
|
||||||
{{svg-jar "close" class="w4 stroke-midlightgrey-l2"}}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="flex flex-column h-100">
|
|
||||||
{{!-- static header --}}
|
|
||||||
<header class="flex-shrink-0 flex flex-row-l flex-column justify-between pt6 pr8 pb6 pl8 pt10-l pr20-l pb10-l pl20-l items-center">
|
|
||||||
<h1 class="flex items-center darkgrey-d2 w-100 nudge-top--4">
|
|
||||||
<a class="gh-tenor-logo" href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit" target="_blank">
|
|
||||||
{{svg-jar "tenor"}}
|
|
||||||
</a>
|
|
||||||
</h1>
|
|
||||||
<span class="gh-input-icon mw88-l flex-auto w-100 mt3 mt0-l">
|
|
||||||
{{svg-jar "search"}}
|
|
||||||
<GhTextInput
|
|
||||||
@class="gh-unsplash-search"
|
|
||||||
@name="searchKeyword"
|
|
||||||
@placeholder="Search Tenor"
|
|
||||||
@tabindex="1"
|
|
||||||
@shouldFocus={{true}}
|
|
||||||
@autocorrect="off"
|
|
||||||
@value={{readonly this.tenor.searchTerm}}
|
|
||||||
@input={{this.search}}
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
{{!-- content container --}}
|
|
||||||
<div class="relative h-100 overflow-hidden">
|
|
||||||
{{!-- scrollable image container --}}
|
|
||||||
<div class="overflow-auto h-100 w-100 pr8 pl8 pr20-l pl20-l">
|
|
||||||
{{#if this.tenor.gifs}}
|
|
||||||
<section class="gh-unsplash-grid">
|
|
||||||
{{#each this.tenor.columns as |gifs|}}
|
|
||||||
<div class="gh-unsplash-grid-column">
|
|
||||||
{{#each gifs as |gif|}}
|
|
||||||
<GhTenor::Gif
|
|
||||||
@gif={{gif}}
|
|
||||||
@select={{fn this.select gif}} />
|
|
||||||
{{/each}}
|
|
||||||
</div>
|
|
||||||
{{/each}}
|
|
||||||
</section>
|
|
||||||
{{else if (and this.tenor.searchTerm (not this.tenor.error this.tenor.isLoading))}}
|
|
||||||
<section class="gh-unsplash-error h-100 flex items-center justify-center pb30">
|
|
||||||
<div>
|
|
||||||
<img class="gh-unsplash-error-404" src="assets/img/unsplash-404.png" alt="No photos found" />
|
|
||||||
<h4>No gifs found for '{{this.tenor.searchTerm}}'</h4>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
{{/if}}
|
|
||||||
|
|
||||||
{{#if this.tenor.error}}
|
|
||||||
<section class="gh-unsplash-error h-100 flex items-center justify-center pb30">
|
|
||||||
<div>
|
|
||||||
<img class="gh-unsplash-error-404" src="assets/img/unsplash-404.png" alt="Network error" />
|
|
||||||
<h4>{{this.tenor.error}} (<a href="#" {{on "click" this.tenor.retry}}>retry</a>)</h4>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
{{/if}}
|
|
||||||
|
|
||||||
{{#if this.tenor.isLoading}}
|
|
||||||
<div class="gh-unsplash-loading h-100 flex items-center justify-center pb30">
|
|
||||||
<div class="gh-loading-spinner"></div>
|
|
||||||
</div>
|
|
||||||
{{/if}}
|
|
||||||
|
|
||||||
{{#unless this.tenor.isLoading}}
|
|
||||||
<GhScrollTrigger
|
|
||||||
@enter={{this.tenor.loadNextPage}}
|
|
||||||
@triggerOffset={{1000}} />
|
|
||||||
{{/unless}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</LiquidWormhole>
|
|
||||||
|
|
@ -1,70 +0,0 @@
|
||||||
import Component from '@glimmer/component';
|
|
||||||
import {action} from '@ember/object';
|
|
||||||
import {inject as service} from '@ember/service';
|
|
||||||
|
|
||||||
const TWO_COLUMN_WIDTH = 540;
|
|
||||||
const THREE_COLUMN_WIDTH = 940;
|
|
||||||
|
|
||||||
export default class GhTenorComponent extends Component {
|
|
||||||
@service tenor;
|
|
||||||
|
|
||||||
willDestroy() {
|
|
||||||
super.willDestroy(...arguments);
|
|
||||||
this._resizeObserver?.disconnect();
|
|
||||||
}
|
|
||||||
|
|
||||||
@action
|
|
||||||
search(event) {
|
|
||||||
const term = event.target.value;
|
|
||||||
this.tenor.updateSearch(term);
|
|
||||||
}
|
|
||||||
|
|
||||||
@action
|
|
||||||
postInsertSetup(containerElem) {
|
|
||||||
if (this.args.searchTerm !== this.tenor.searchTerm) {
|
|
||||||
this.tenor.updateSearch(this.args.searchTerm);
|
|
||||||
}
|
|
||||||
|
|
||||||
this._resizeObserver = new ResizeObserver((entries) => {
|
|
||||||
const [containerEntry] = entries;
|
|
||||||
const contentBoxSize = Array.isArray(containerEntry.contentBoxSize) ? containerEntry.contentBoxSize[0] : containerEntry.contentBoxSize;
|
|
||||||
|
|
||||||
const width = contentBoxSize.inlineSize;
|
|
||||||
|
|
||||||
let columns = 4;
|
|
||||||
|
|
||||||
if (width <= TWO_COLUMN_WIDTH) {
|
|
||||||
columns = 2;
|
|
||||||
} else if (width <= THREE_COLUMN_WIDTH) {
|
|
||||||
columns = 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.tenor.changeColumnCount(columns);
|
|
||||||
});
|
|
||||||
this._resizeObserver.observe(containerElem);
|
|
||||||
}
|
|
||||||
|
|
||||||
@action
|
|
||||||
select(gif, event) {
|
|
||||||
event?.preventDefault();
|
|
||||||
event?.stopPropagation();
|
|
||||||
|
|
||||||
const media = gif.media[0].gif;
|
|
||||||
|
|
||||||
const selectParams = {
|
|
||||||
src: media.url,
|
|
||||||
width: media.dims[0],
|
|
||||||
height: media.dims[1],
|
|
||||||
caption: '',
|
|
||||||
type: 'gif'
|
|
||||||
};
|
|
||||||
|
|
||||||
this.args.select(selectParams);
|
|
||||||
this.args.close();
|
|
||||||
}
|
|
||||||
|
|
||||||
@action
|
|
||||||
handleEscape() {
|
|
||||||
this.args.close();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -25,7 +25,7 @@
|
||||||
{{#each this.tenor.columns as |gifs|}}
|
{{#each this.tenor.columns as |gifs|}}
|
||||||
<div class="gh-unsplash-grid-column">
|
<div class="gh-unsplash-grid-column">
|
||||||
{{#each gifs as |gif|}}
|
{{#each gifs as |gif|}}
|
||||||
<GhTenor::Gif
|
<KoenigCardImage::SelectorTenor::Gif
|
||||||
@gif={{gif}}
|
@gif={{gif}}
|
||||||
@select={{fn this.select gif}} />
|
@select={{fn this.select gif}} />
|
||||||
{{/each}}
|
{{/each}}
|
||||||
|
|
|
||||||
|
|
@ -1,66 +0,0 @@
|
||||||
<div class="kg-media-selector-browser" {{did-insert this.didInsertContainer}}>
|
|
||||||
{{!-- static header --}}
|
|
||||||
<header class="kg-media-selector-heading">
|
|
||||||
<span class="gh-input-icon">
|
|
||||||
{{svg-jar "search"}}
|
|
||||||
<GhTextInput
|
|
||||||
@class="kg-media-selector-searchbox"
|
|
||||||
@name="searchKeyword"
|
|
||||||
@placeholder="Search Tenor for GIFs"
|
|
||||||
@tabindex="1"
|
|
||||||
@shouldFocus={{true}}
|
|
||||||
@autocorrect="off"
|
|
||||||
@value={{readonly this.tenor.searchTerm}}
|
|
||||||
@input={{this.search}}
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
{{!-- content container --}}
|
|
||||||
<div class="kg-media-selector-content">
|
|
||||||
{{!-- scrollable image container --}}
|
|
||||||
<div class="kg-media-selector-mediagrid">
|
|
||||||
{{#if this.tenor.gifs}}
|
|
||||||
<section class="gh-unsplash-grid">
|
|
||||||
{{#each this.tenor.columns as |gifs|}}
|
|
||||||
<div class="gh-unsplash-grid-column">
|
|
||||||
{{#each gifs as |gif|}}
|
|
||||||
<GhTenor::Gif
|
|
||||||
@gif={{gif}}
|
|
||||||
@select={{fn this.select gif}} />
|
|
||||||
{{/each}}
|
|
||||||
</div>
|
|
||||||
{{/each}}
|
|
||||||
</section>
|
|
||||||
{{else if (and this.tenor.searchTerm (not this.tenor.error this.tenor.isLoading))}}
|
|
||||||
<section class="gh-unsplash-error h-100 flex items-center justify-center pb30">
|
|
||||||
<div>
|
|
||||||
<img class="gh-unsplash-error-404" src="assets/img/unsplash-404.png" alt="No photos found" />
|
|
||||||
<h4>No gifs found for '{{this.tenor.searchTerm}}'</h4>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
{{/if}}
|
|
||||||
|
|
||||||
{{#if this.tenor.error}}
|
|
||||||
<section class="gh-unsplash-error h-100 flex items-center justify-center pb30">
|
|
||||||
<div>
|
|
||||||
<img class="gh-unsplash-error-404" src="assets/img/unsplash-404.png" alt="Network error" />
|
|
||||||
<h4>{{this.tenor.error}} (<a href="#" {{on "click" this.tenor.retry}}>retry</a>)</h4>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
{{/if}}
|
|
||||||
|
|
||||||
{{#if this.tenor.isLoading}}
|
|
||||||
<div class="gh-unsplash-loading h-100 flex items-center justify-center pb30">
|
|
||||||
<div class="gh-loading-spinner"></div>
|
|
||||||
</div>
|
|
||||||
{{/if}}
|
|
||||||
|
|
||||||
{{#unless this.tenor.isLoading}}
|
|
||||||
<GhScrollTrigger
|
|
||||||
@enter={{this.tenor.loadNextPage}}
|
|
||||||
@triggerOffset={{1000}} />
|
|
||||||
{{/unless}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,66 +0,0 @@
|
||||||
import Component from '@glimmer/component';
|
|
||||||
import {action} from '@ember/object';
|
|
||||||
import {inject as service} from '@ember/service';
|
|
||||||
|
|
||||||
// number of columns based on selector container width
|
|
||||||
const TWO_COLUMN_WIDTH = 540;
|
|
||||||
const THREE_COLUMN_WIDTH = 940;
|
|
||||||
|
|
||||||
export default class KoenigMediaSelectorTenorComponent extends Component {
|
|
||||||
@service tenor;
|
|
||||||
|
|
||||||
willDestroy() {
|
|
||||||
super.willDestroy(...arguments);
|
|
||||||
this._resizeObserver?.disconnect();
|
|
||||||
}
|
|
||||||
|
|
||||||
@action
|
|
||||||
search(event) {
|
|
||||||
const term = event.target.value;
|
|
||||||
this.tenor.updateSearch(term);
|
|
||||||
}
|
|
||||||
|
|
||||||
@action
|
|
||||||
didInsertContainer(containerElem) {
|
|
||||||
if (this.args.searchTerm !== this.tenor.searchTerm) {
|
|
||||||
this.tenor.updateSearch(this.args.searchTerm);
|
|
||||||
}
|
|
||||||
|
|
||||||
this._resizeObserver = new ResizeObserver((entries) => {
|
|
||||||
const [containerEntry] = entries;
|
|
||||||
const contentBoxSize = Array.isArray(containerEntry.contentBoxSize) ? containerEntry.contentBoxSize[0] : containerEntry.contentBoxSize;
|
|
||||||
|
|
||||||
const width = contentBoxSize.inlineSize;
|
|
||||||
|
|
||||||
let columns = 4;
|
|
||||||
|
|
||||||
if (width <= TWO_COLUMN_WIDTH) {
|
|
||||||
columns = 2;
|
|
||||||
} else if (width <= THREE_COLUMN_WIDTH) {
|
|
||||||
columns = 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.tenor.changeColumnCount(columns);
|
|
||||||
});
|
|
||||||
this._resizeObserver.observe(containerElem);
|
|
||||||
}
|
|
||||||
|
|
||||||
@action
|
|
||||||
select(gif, event) {
|
|
||||||
event?.preventDefault();
|
|
||||||
event?.stopPropagation();
|
|
||||||
|
|
||||||
const media = gif.media[0].gif;
|
|
||||||
|
|
||||||
const payload = {
|
|
||||||
src: media.url,
|
|
||||||
width: media.dims[0],
|
|
||||||
height: media.dims[1],
|
|
||||||
caption: '',
|
|
||||||
type: 'gif'
|
|
||||||
};
|
|
||||||
|
|
||||||
this.args.selector.insertCard('image', payload);
|
|
||||||
this.args.selector.close();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
export {default} from 'koenig-editor/components/koenig-card-image/selector-tenor/gif';
|
||||||
Loading…
Add table
Reference in a new issue