TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-01 13:54:35 +03:00
Code Issues Projects Releases Wiki Activity
b6d0ce0789
Ghost/ghost/admin/app/templates/components/gh-unsplash.hbs

76 lines
3.6 KiB
Handlebars
Raw Normal View History

✨ Unsplash integration 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
2017-08-02 10:05:59 +03:00
{{#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">
Swap out ember-inline-svg for ember-svg-jar (#970) closes TryGhost/Ghost#9506
2018-03-19 12:57:31 +03:00
<a class="gh-unsplash-logo" href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit" target="_blank">{{svg-jar "unsplash"}}</a>
<div class="gh-unsplash-close" aria-role="button" {{action "close"}}>{{svg-jar "close"}}</div>
✨ Unsplash integration 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
2017-08-02 10:05:59 +03:00
<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">
Swap out ember-inline-svg for ember-svg-jar (#970) closes TryGhost/Ghost#9506
2018-03-19 12:57:31 +03:00
{{svg-jar "search"}}
Remove ember-one-way-controls (#959) closes https://github.com/TryGhost/Ghost/issues/9386 - remove usage of `{{one-way-checkbox}}` in favour of direct HTML+handlebars - add `{{gh-text-input}}` that inherits from Ember's built-in `TextInput` component along with our custom `TextInput` mixin - swap all uses of `{{gh-input}}` for `{{gh-text-input}} - remove `{{gh-input}}` component - update `{{gh-textarea}}` to inherit from Ember's `TextArea` component instead of `OneWayTextarea` and update all component uses accordingly - update `{{gh-trim-focus-input}}` to inherit from `{{gh-text-input}}` and update all component uses accordingly - standardize on using the `focus-out` action naming rather than `focusOut` for all text inputs, this is because the text input components (especially `{{gh-trim-focus-input}}`) have their own `focusOut` handler which gets overridden if consumers supply their own `focusOut` attr - drop `ember-one-way-controls` package - add `ember-one-way-select` package
2018-02-28 14:44:03 +03:00
{{gh-text-input
✨ Unsplash integration 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
2017-08-02 10:05:59 +03:00
class="gh-unsplash-search"
name="searchKeyword"
placeholder="Search free high-resolution photos"
tabindex="1"
Fixed autofocus not working on modal inputs refs https://github.com/TryGhost/Ghost/issues/7132 - apply generic `autofocus` support to anything rendered through `liquid-wormhole` - overrides `liquid-wormhole`'s default `wormhole` transition, adding a check for a `<input autofocus>` element and calling focus on it once the default transition and liquid-wormhole element swap has completed - autofocus search input in Unsplash modal
2018-06-04 19:46:24 +03:00
autofocus="autofocus"
✨ Unsplash integration 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
2017-08-02 10:05:59 +03:00
autocorrect="off"
Remove ember-one-way-controls (#959) closes https://github.com/TryGhost/Ghost/issues/9386 - remove usage of `{{one-way-checkbox}}` in favour of direct HTML+handlebars - add `{{gh-text-input}}` that inherits from Ember's built-in `TextInput` component along with our custom `TextInput` mixin - swap all uses of `{{gh-input}}` for `{{gh-text-input}} - remove `{{gh-input}}` component - update `{{gh-textarea}}` to inherit from Ember's `TextArea` component instead of `OneWayTextarea` and update all component uses accordingly - update `{{gh-trim-focus-input}}` to inherit from `{{gh-text-input}}` and update all component uses accordingly - standardize on using the `focus-out` action naming rather than `focusOut` for all text inputs, this is because the text input components (especially `{{gh-trim-focus-input}}`) have their own `focusOut` handler which gets overridden if consumers supply their own `focusOut` attr - drop `ember-one-way-controls` package - add `ember-one-way-select` package
2018-02-28 14:44:03 +03:00
value=(readonly unsplash.searchTerm)
input=(action "updateSearch" target=unsplash value="target.value")
🐛 Fixed 'c' and 'k' chars not working in Unsplash search when adding tag cover closes https://github.com/TryGhost/Ghost/issues/9147 - change the keymaster scope when the unsplash search input has focus so the route's registered shortcuts aren't accidentally triggered
2018-01-12 21:09:10 +03:00
focusIn=(action "setKeyScope")
Remove ember-one-way-controls (#959) closes https://github.com/TryGhost/Ghost/issues/9386 - remove usage of `{{one-way-checkbox}}` in favour of direct HTML+handlebars - add `{{gh-text-input}}` that inherits from Ember's built-in `TextInput` component along with our custom `TextInput` mixin - swap all uses of `{{gh-input}}` for `{{gh-text-input}} - remove `{{gh-input}}` component - update `{{gh-textarea}}` to inherit from Ember's `TextArea` component instead of `OneWayTextarea` and update all component uses accordingly - update `{{gh-trim-focus-input}}` to inherit from `{{gh-text-input}}` and update all component uses accordingly - standardize on using the `focus-out` action naming rather than `focusOut` for all text inputs, this is because the text input components (especially `{{gh-trim-focus-input}}`) have their own `focusOut` handler which gets overridden if consumers supply their own `focusOut` attr - drop `ember-one-way-controls` package - add `ember-one-way-select` package
2018-02-28 14:44:03 +03:00
focus-out=(action "resetKeyScope")
✨ Unsplash integration 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
2017-08-02 10:05:59 +03:00
}}
</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
Koenig - Keep MD card formatting toolbar visible when possible refs https://github.com/TryGhost/Ghost/issues/9505 - use `{{gh-scroll-trigger}}` components at top and bottom of the markdown card when in edit mode so that styles can be applied to the `.editor-toolbar` element to keep the toolbar fixed at the bottom of the screen whilst scrolling
2018-04-24 15:10:20 +03:00
enter=(action "loadNextPage")
✨ Unsplash integration 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
2017-08-02 10:05:59 +03:00
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}}
Fixed autofocus not working on modal inputs refs https://github.com/TryGhost/Ghost/issues/7132 - apply generic `autofocus` support to anything rendered through `liquid-wormhole` - overrides `liquid-wormhole`'s default `wormhole` transition, adding a check for a `<input autofocus>` element and calling focus on it once the default transition and liquid-wormhole element swap has completed - autofocus search input in Unsplash modal
2018-06-04 19:46:24 +03:00
{{/liquid-wormhole}}
Reference in New Issue Copy Permalink