mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-17 23:44:39 -05:00
Migrated <GhUnsplash> to glimmer component
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
This commit is contained in:
Kevin Ansfield
parent
4ad99dadc4
commit
018a4ec5e9
6 changed files with 148 additions and 134 deletions
|
|
@ -1,9 +1,13 @@
|
|||
<LiquidWormhole @class="unsplash">
|
||||
{{#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" {{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>
|
||||
<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" {{action "close"}}>
|
||||
<button type="button" class="absolute top-6 right-6" {{on "click" @close}}>
|
||||
{{svg-jar "close" class="w4 stroke-midlightgrey-l2"}}
|
||||
</button>
|
||||
|
||||
|
|
@ -16,17 +20,18 @@
|
|||
</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 free high-resolution photos"
|
||||
@tabindex="1"
|
||||
@shouldFocus={{true}}
|
||||
@autocorrect="off"
|
||||
@value={{readonly this.unsplash.searchTerm}}
|
||||
@input={{action "search" value="target.value"}}
|
||||
@focusIn={{action "setKeyScope"}}
|
||||
@focus-out={{action "resetKeyScope"}}
|
||||
<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>
|
||||
|
|
@ -40,7 +45,7 @@
|
|||
{{#each this.unsplash.columns as |photos|}}
|
||||
<div class="gh-unsplash-grid-column">
|
||||
{{#each photos as |photo|}}
|
||||
<GhUnsplashPhoto @photo={{photo}} @zoom={{action "zoomPhoto"}} @select={{action "select"}} />
|
||||
<GhUnsplashPhoto @photo={{photo}} @zoom={{this.zoomPhoto}} @select={{this.select}} />
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/each}}
|
||||
|
|
@ -59,7 +64,7 @@
|
|||
<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="#" {{action "retry"}}>retry</a>)</h4>
|
||||
<h4>{{this.unsplash.error}} (<a href="#" {{on "click" this.retry}}>retry</a>)</h4>
|
||||
</div>
|
||||
</section>
|
||||
{{/if}}
|
||||
|
|
@ -71,22 +76,21 @@
|
|||
{{/if}}
|
||||
|
||||
<GhScrollTrigger
|
||||
@enter={{action "loadNextPage"}}
|
||||
@enter={{this.loadNextPage}}
|
||||
@triggerOffset={{1000}} />
|
||||
</div>
|
||||
|
||||
{{!-- zoomed image overlay --}}
|
||||
{{#if this.zoomedPhoto}}
|
||||
<div class="absolute flex justify-center top-0 right-0 bottom-0 left-0 pr20 pb10 pl20 bg-white overflow-hidden" {{action "closeZoom"}}>
|
||||
<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={{action "closeZoom"}}
|
||||
@select={{action "select"}} />
|
||||
</div>
|
||||
@zoom={{this.closeZoom}}
|
||||
@select={{this.select}} />
|
||||
</a>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</LiquidWormhole>
|
||||
{{/in-element}}
|
||||
|
|
@ -1,120 +1,100 @@
|
|||
/* global key */
|
||||
import Component from '@ember/component';
|
||||
import ShortcutsMixin from 'ghost-admin/mixins/shortcuts';
|
||||
import {bind} from '@ember/runloop';
|
||||
import {or} from '@ember/object/computed';
|
||||
import Component from '@glimmer/component';
|
||||
import {action} from '@ember/object';
|
||||
import {inject as service} from '@ember/service';
|
||||
import {tracked} from '@glimmer/tracking';
|
||||
|
||||
const ONE_COLUMN_WIDTH = 540;
|
||||
const TWO_COLUMN_WIDTH = 940;
|
||||
|
||||
export default Component.extend(ShortcutsMixin, {
|
||||
resizeDetector: service(),
|
||||
unsplash: service(),
|
||||
ui: service(),
|
||||
export default class GhUnsplash extends Component {
|
||||
@service unsplash;
|
||||
@service ui;
|
||||
|
||||
shortcuts: null,
|
||||
tagName: '',
|
||||
zoomedPhoto: null,
|
||||
searchTerm: null,
|
||||
@tracked zoomedPhoto = null;
|
||||
@tracked searchTerm = null;
|
||||
|
||||
// closure actions
|
||||
close() {},
|
||||
select() {},
|
||||
get sideNavHidden() {
|
||||
return this.ui.isFullScreen || this.ui.showMobileMenu;
|
||||
}
|
||||
|
||||
sideNavHidden: or('ui.{isFullScreen,showMobileMenu}'),
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
key.setScope('unsplash');
|
||||
}
|
||||
|
||||
init() {
|
||||
this._super(...arguments);
|
||||
willDestroy() {
|
||||
super.willDestroy(...arguments);
|
||||
key.setScope('default');
|
||||
}
|
||||
|
||||
this.shortcuts = {
|
||||
escape: {action: 'handleEscape', scope: 'all'}
|
||||
@action
|
||||
loadNextPage() {
|
||||
this.unsplash.loadNextPage();
|
||||
}
|
||||
|
||||
@action
|
||||
search(event) {
|
||||
event.preventDefault();
|
||||
const term = event.target.value;
|
||||
this.unsplash.updateSearch(term);
|
||||
this.closeZoom();
|
||||
}
|
||||
|
||||
@action
|
||||
clearSearch(event, ekEvent) {
|
||||
if (event.target.value) {
|
||||
ekEvent.stopPropagation();
|
||||
this.unsplash.updateSearch('');
|
||||
}
|
||||
}
|
||||
|
||||
@action
|
||||
zoomPhoto(photo) {
|
||||
this.zoomedPhoto = photo;
|
||||
}
|
||||
|
||||
@action
|
||||
closeZoom(event) {
|
||||
event?.preventDefault?.();
|
||||
this.zoomedPhoto = null;
|
||||
}
|
||||
|
||||
@action
|
||||
select(photo) {
|
||||
this.unsplash.triggerDownload(photo);
|
||||
|
||||
let selectParams = {
|
||||
src: photo.urls.regular.replace(/&w=1080/, '&w=2000'),
|
||||
width: photo.width,
|
||||
height: photo.height,
|
||||
alt: photo.description || '',
|
||||
caption: `Photo by <a href="${photo.user.links.html}?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">${photo.user.name}</a> / <a href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Unsplash</a>`
|
||||
};
|
||||
},
|
||||
this.args.select(selectParams);
|
||||
|
||||
didReceiveAttrs() {
|
||||
this._super(...arguments);
|
||||
this.args.close();
|
||||
}
|
||||
|
||||
if (this.searchTerm !== this._searchTerm) {
|
||||
this.unsplash.updateSearch(this.searchTerm);
|
||||
@action
|
||||
retry(event) {
|
||||
event?.preventDefault();
|
||||
this.unsplash.retryLastRequest();
|
||||
}
|
||||
|
||||
@action
|
||||
handleEscape(event) {
|
||||
event?.preventDefault();
|
||||
|
||||
if (this.zoomedPhoto) {
|
||||
return this.closeZoom();
|
||||
}
|
||||
|
||||
this._searchTerm = this.searchTerm;
|
||||
},
|
||||
this.args.close();
|
||||
}
|
||||
|
||||
didInsertElement() {
|
||||
this._super(...arguments);
|
||||
this._resizeCallback = bind(this, this._handleResize);
|
||||
this.resizeDetector.setup('[data-unsplash]', this._resizeCallback);
|
||||
this.registerShortcuts();
|
||||
},
|
||||
|
||||
willDestroyElement() {
|
||||
this.resizeDetector.teardown('[data-unsplash]', this._resizeCallback);
|
||||
this.removeShortcuts();
|
||||
this.send('resetKeyScope');
|
||||
this._super(...arguments);
|
||||
},
|
||||
|
||||
actions: {
|
||||
loadNextPage() {
|
||||
this.unsplash.loadNextPage();
|
||||
},
|
||||
|
||||
search(term) {
|
||||
this.unsplash.updateSearch(term);
|
||||
this.send('closeZoom');
|
||||
},
|
||||
|
||||
zoomPhoto(photo) {
|
||||
this.set('zoomedPhoto', photo);
|
||||
},
|
||||
|
||||
closeZoom() {
|
||||
this.set('zoomedPhoto', null);
|
||||
},
|
||||
|
||||
select(photo) {
|
||||
this.unsplash.triggerDownload(photo);
|
||||
|
||||
let selectParams = {
|
||||
src: photo.urls.regular.replace(/&w=1080/, '&w=2000'),
|
||||
width: photo.width,
|
||||
height: photo.height,
|
||||
alt: photo.description || '',
|
||||
caption: `Photo by <a href="${photo.user.links.html}?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">${photo.user.name}</a> / <a href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Unsplash</a>`
|
||||
};
|
||||
this.select(selectParams);
|
||||
|
||||
this.close();
|
||||
},
|
||||
|
||||
close() {
|
||||
this.close();
|
||||
},
|
||||
|
||||
retry() {
|
||||
this.unsplash.retryLastRequest();
|
||||
},
|
||||
|
||||
setKeyScope() {
|
||||
key.setScope('unsplash');
|
||||
},
|
||||
|
||||
resetKeyScope() {
|
||||
key.setScope('default');
|
||||
},
|
||||
|
||||
handleEscape() {
|
||||
if (this.zoomedPhoto) {
|
||||
return this.send('closeZoom');
|
||||
}
|
||||
|
||||
this.close();
|
||||
}
|
||||
},
|
||||
|
||||
_handleResize(element) {
|
||||
@action
|
||||
handleResize(element) {
|
||||
let width = element.clientWidth;
|
||||
let columns = 3;
|
||||
|
||||
|
|
@ -126,4 +106,4 @@ export default Component.extend(ShortcutsMixin, {
|
|||
|
||||
this.unsplash.changeColumnCount(columns);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
9
ghost/admin/app/helpers/query-selector.js
Normal file
9
ghost/admin/app/helpers/query-selector.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
export default function (selector) {
|
||||
const elem = document.querySelector(selector);
|
||||
|
||||
if (!elem) {
|
||||
console.warn(`{{query-selector}} could not find an element matching "${selector}"`); //eslint-disable-line
|
||||
}
|
||||
|
||||
return elem;
|
||||
}
|
||||
14
ghost/admin/app/modifiers/on-resize.js
Normal file
14
ghost/admin/app/modifiers/on-resize.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import Modifier from 'ember-modifier';
|
||||
import {inject as service} from '@ember/service';
|
||||
|
||||
export default class MovableModifier extends Modifier {
|
||||
@service resizeDetector;
|
||||
|
||||
didInstall() {
|
||||
this.resizeDetector.setup(this.element, this.args.positional[0]);
|
||||
}
|
||||
|
||||
willDestroy() {
|
||||
this.resizeDetector.teardown(this.element, this.args.positional[0]);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,27 +1,32 @@
|
|||
import Service from '@ember/service';
|
||||
import classic from 'ember-classic-decorator';
|
||||
import erd from 'element-resize-detector';
|
||||
|
||||
@classic
|
||||
export default class ResizeDetectorService extends Service {
|
||||
init() {
|
||||
super.init(...arguments);
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.detector = erd({
|
||||
strategy: 'scroll'
|
||||
});
|
||||
}
|
||||
|
||||
setup(selector, callback) {
|
||||
let element = document.querySelector(selector);
|
||||
setup(selectorOrElement, callback) {
|
||||
const element = typeof selectorOrElement === 'string'
|
||||
? document.querySelector(selectorOrElement)
|
||||
: selectorOrElement;
|
||||
|
||||
if (!element) {
|
||||
// eslint-disable-next-line
|
||||
console.error(`service:resize-detector - could not find element matching ${selector}`);
|
||||
console.error(`service:resize-detector - could not find element matching ${selectorOrElement}`);
|
||||
}
|
||||
|
||||
this.detector.listenTo(element, callback);
|
||||
}
|
||||
|
||||
teardown(selector, callback) {
|
||||
let element = document.querySelector(selector);
|
||||
teardown(selectorOrElement, callback) {
|
||||
const element = typeof selectorOrElement === 'string'
|
||||
? document.querySelector(selectorOrElement)
|
||||
: selectorOrElement;
|
||||
|
||||
if (element) {
|
||||
this.detector.removeListener(element, callback);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,5 +53,7 @@
|
|||
{{/if}}
|
||||
</GhApp>
|
||||
|
||||
<div id="unsplash-selector-wormhole"></div>
|
||||
|
||||
<EpmModalContainer />
|
||||
<EmberLoadRemover />
|
||||
Loading…
Add table
Reference in a new issue