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|}}
|
||||
<div class="gh-unsplash-grid-column">
|
||||
{{#each gifs as |gif|}}
|
||||
<GhTenor::Gif
|
||||
<KoenigCardImage::SelectorTenor::Gif
|
||||
@gif={{gif}}
|
||||
@select={{fn this.select gif}} />
|
||||
{{/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