mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-03 15:53:16 +03:00
350e3d1481
closes https://github.com/TryGhost/Ghost/issues/8859, requires https://github.com/TryGhost/Ghost/pull/8895 - adds Unsplash app to app settings - enable/disable toggle - validation and testing of Unsplash App ID - Unsplash App ID field hidden if provided via Ghost config - adds `fetchPrivate` method to `config` service to pull config that requires authentication and updates authentication routines to fetch private config - adds Unsplash buttons to editor toolbar and `{{gh-image-uploader}}` - only present when Unsplash app is enabled - opens Unsplash image selector when clicked - `{{gh-image-uploader}}` has a new `allowUnsplash` attribute to control display of the unsplash button on a per-uploader basis - adds Unsplash image selector (`{{gh-unsplash}}`) - uses new `unsplash` service to handle API requests and maintain state - search - infinite scroll - zoom image - insert image - download image - adds `{{gh-scroll-trigger}}` that will fire an event when the component is rendered into or enters the visible screen area via scrolling - updates `ui` service - adds `isFullscreen` property and updates `gh-editor` so that it gets set/unset when toggling editor fullscreen mode - adds `hasSideNav` and `isSideNavHidden` properties - updates `media-queries` service so that it fires an event each time a breakpoint is entered/exited - removes the need for observers in certain circumstances
74 lines
3.4 KiB
Handlebars
74 lines
3.4 KiB
Handlebars
{{#liquid-wormhole class="unsplash"}}
|
||
<div class="gh-unsplash {{if ui.hasSideNav "gh-unsplash--with-sidenav"}}">
|
||
<div class="gh-unsplash-window">
|
||
<div class="gh-unsplash-container">
|
||
<a class="gh-unsplash-logo" href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit" target="_blank">{{inline-svg "unsplash"}}</a>
|
||
<div class="gh-unsplash-close" aria-role="button" {{action "close"}}>{{inline-svg "close"}}</div>
|
||
<header class="gh-unsplash-header">
|
||
<h1 class="gh-unsplash-header-title">Unsplash</h1>
|
||
<p class="gh-unsplash-header-desc">Beautiful, free photos.<br>
|
||
Gifted by the world’s most generous community of photographers. 🎁</p>
|
||
<span class="gh-input-icon">
|
||
{{inline-svg "search"}}
|
||
{{gh-input unsplash.searchTerm
|
||
class="gh-unsplash-search"
|
||
type="text"
|
||
name="searchKeyword"
|
||
placeholder="Search free high-resolution photos"
|
||
tabindex="1"
|
||
autocorrect="off"
|
||
update=(action "updateSearch" target=unsplash)
|
||
}}
|
||
</span>
|
||
</header>
|
||
|
||
{{#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") insert=(action "insert")}}
|
||
{{/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
|
||
onEnterViewport=(action "loadNextPage")
|
||
triggerOffset=1000}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{#if zoomedPhoto}}
|
||
<div class="gh-unsplash-zoom" {{action "closeZoom"}}>
|
||
{{gh-unsplash-photo
|
||
photo=zoomedPhoto
|
||
zoomed=true
|
||
zoom=(action "closeZoom")
|
||
insert=(action "insert")}}
|
||
</div>
|
||
{{/if}}
|
||
|
||
{{/liquid-wormhole}}
|