mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-30 01:42:29 +03:00
4463f975e3
refs https://github.com/TryGhost/Ghost/issues/9724 - standardised `{{gh-unsplash}}` actions and action arguments to better represent a generic "image source" - added `{{gh-unsplash searchTerm="ghosts"}}` parameter - added `payload` param to `card` definitions used for plus/slash menus so that default payload params can be passed to cards - added a concept of "image selectors" to image card - if a `payload.imageSelector` param is received by the card it will look it up in it's list of known selectors and display the appropriate image selection component - if the card was created with an image selector param and the image selector is closed without selecting an image then the card will be removed - delete image cards during cleanup if they were created via selector but have no src
89 lines
4.4 KiB
Handlebars
89 lines
4.4 KiB
Handlebars
{{#liquid-wormhole class="unsplash"}}
|
|
{{!-- TODO: why does this modal background not cover the PSM without style override? --}}
|
|
<div class="fullscreen-modal-background" {{action "close"}} style="z-index: 999"></div>
|
|
<div class="absolute top-8 right-8 bottom-8 left-8 br4 overflow-hidden bg-white z-9999" data-unsplash>
|
|
{{!-- close button --}}
|
|
<button type="button" class="absolute top-6 right-6" {{action "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">{{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"}}
|
|
{{gh-text-input
|
|
class="gh-unsplash-search"
|
|
name="searchKeyword"
|
|
placeholder="Search free high-resolution photos"
|
|
tabindex="1"
|
|
autofocus="autofocus"
|
|
autocorrect="off"
|
|
value=(readonly unsplash.searchTerm)
|
|
input=(action "search" value="target.value")
|
|
focusIn=(action "setKeyScope")
|
|
focus-out=(action "resetKeyScope")
|
|
}}
|
|
</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 unsplash.photos}}
|
|
<section class="gh-unsplash-grid">
|
|
{{#each unsplash.columns as |photos|}}
|
|
<div class="gh-unsplash-grid-column">
|
|
{{#each photos as |photo|}}
|
|
{{gh-unsplash-photo photo=photo zoom=(action "zoomPhoto") select=(action "select")}}
|
|
{{/each}}
|
|
</div>
|
|
{{/each}}
|
|
</section>
|
|
{{else if (and unsplash.searchTerm (not unsplash.error unsplash.isLoading))}}
|
|
<section class="gh-unsplash-error">
|
|
<img class="gh-unsplash-error-404" src="assets/img/unsplash-404.png" alt="No photos found" />
|
|
<h4>No photos found for '{{unsplash.searchTerm}}'</h4>
|
|
</section>
|
|
{{/if}}
|
|
|
|
{{#if unsplash.error}}
|
|
{{!-- TODO: add better error styles? --}}
|
|
<section class="gh-unsplash-error">
|
|
<img class="gh-unsplash-error-404" src="assets/img/unsplash-404.png" alt="Network error" />
|
|
<h4>{{unsplash.error}} (<a href="#" {{action "retry"}}>retry</a>)</h4>
|
|
</section>
|
|
{{/if}}
|
|
|
|
{{#if unsplash.isLoading}}
|
|
<div class="gh-unsplash-loading">
|
|
<div class="gh-loading-spinner"></div>
|
|
</div>
|
|
{{/if}}
|
|
|
|
{{gh-scroll-trigger
|
|
enter=(action "loadNextPage")
|
|
triggerOffset=1000}}
|
|
</div>
|
|
|
|
{{!-- zoomed image overlay --}}
|
|
{{#if zoomedPhoto}}
|
|
<div class="absolute flex justify-center top-0 right-0 bottom-0 left-0 pr20 pb10 pl20 bg-white overflow-hidden" {{action "closeZoom"}}>
|
|
{{gh-unsplash-photo
|
|
photo=zoomedPhoto
|
|
zoomed=true
|
|
zoom=(action "closeZoom")
|
|
select=(action "select")}}
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{/liquid-wormhole}}
|