mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-29 15:12:58 +03:00
018a4ec5e9
refs https://github.com/TryGhost/Ghost/issues/14101 - swapped use of `<LiquidWormhole>` to `{{#in-element}}` because we weren't animating anything - we can now use `{{css-transition}}` instead if we want to animate in the future - swapped use of `ShortcutsMixin` for ember-keyboard's `{{on-key}}` modifier - added `{{query-selector}}` helper so we can grab an element from inside the template rather than requiring a backing component function (used to pass the wormhole element to `{{#in-element}}`) - added `{{on-resize}}` modifier so the `resizeDetector` service can be used directly from the template rather than requiring a backing component to wait for render and use query selectors to grab an element
96 lines
4.9 KiB
Handlebars
96 lines
4.9 KiB
Handlebars
{{#in-element (query-selector "#unsplash-selector-wormhole")}}
|
|
{{!-- TODO: why does this modal background not cover the PSM without style override? --}}
|
|
<div class="fullscreen-modal-background" role="button" {{on "click" @close}} style="z-index: 999"></div>
|
|
<div
|
|
class="absolute top-8 right-8 bottom-8 left-8 br4 overflow-hidden bg-white z-9999"
|
|
{{on-resize this.handleResize}}
|
|
{{on-key "Escape" this.handleEscape}}
|
|
>
|
|
{{!-- 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="dib w8 mr2" href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit" target="_blank" rel="noopener noreferrer">{{svg-jar "unsplash" class="fill-darkgrey-d2"}}</a>
|
|
Unsplash
|
|
</h1>
|
|
<span class="gh-input-icon mw88-l flex-auto w-100 mt3 mt0-l">
|
|
{{svg-jar "search"}}
|
|
<input
|
|
type="text"
|
|
class="gh-unsplash-search"
|
|
name="searchKeyword"
|
|
placeholder="Search free high-resolution photos"
|
|
tabindex="0"
|
|
autocorrect="off"
|
|
value={{readonly this.unsplash.searchTerm}}
|
|
aria-label="Search Unsplash photos"
|
|
{{on "input" this.search}}
|
|
{{on-key "Escape" this.clearSearch}}
|
|
{{autofocus}}
|
|
/>
|
|
</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.unsplash.photos}}
|
|
<section class="gh-unsplash-grid">
|
|
{{#each this.unsplash.columns as |photos|}}
|
|
<div class="gh-unsplash-grid-column">
|
|
{{#each photos as |photo|}}
|
|
<GhUnsplashPhoto @photo={{photo}} @zoom={{this.zoomPhoto}} @select={{this.select}} />
|
|
{{/each}}
|
|
</div>
|
|
{{/each}}
|
|
</section>
|
|
{{else if (and this.unsplash.searchTerm (not this.unsplash.error this.unsplash.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 photos found for '{{this.unsplash.searchTerm}}'</h4>
|
|
</div>
|
|
</section>
|
|
{{/if}}
|
|
|
|
{{#if this.unsplash.error}}
|
|
{{!-- TODO: add better error styles? --}}
|
|
<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.unsplash.error}} (<a href="#" {{on "click" this.retry}}>retry</a>)</h4>
|
|
</div>
|
|
</section>
|
|
{{/if}}
|
|
|
|
{{#if this.unsplash.isLoading}}
|
|
<div class="gh-unsplash-loading h-100 flex items-center justify-center pb30">
|
|
<div class="gh-loading-spinner"></div>
|
|
</div>
|
|
{{/if}}
|
|
|
|
<GhScrollTrigger
|
|
@enter={{this.loadNextPage}}
|
|
@triggerOffset={{1000}} />
|
|
</div>
|
|
|
|
{{!-- zoomed image overlay --}}
|
|
{{#if this.zoomedPhoto}}
|
|
<a href="#" class="absolute flex justify-center top-0 right-0 bottom-0 left-0 pr20 pb10 pl20 bg-white overflow-hidden" {{on "click" this.closeZoom}}>
|
|
<GhUnsplashPhoto
|
|
@photo={{this.zoomedPhoto}}
|
|
@zoomed={{true}}
|
|
@zoom={{this.closeZoom}}
|
|
@select={{this.select}} />
|
|
</a>
|
|
{{/if}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{/in-element}} |