352c4af1d7
no issue - ran [es5-getter-ember-codemod](https://github.com/rondale-sc/es5-getter-ember-codemod) - [es5 getters RFC](https://github.com/emberjs/rfcs/blob/master/text/0281-es5-getters.md) - updates the majority of `object.get('property')` with `object.property` with exceptions: - `.get('nested.property')` - it's not possible to determine if this is relying on "safe" path chaining for when `nested` doesn't exist - `.get('config.x')` and `.get('settings.x')` - both our `config` and `settings` services are proxy objects which do not support es5 getters - this PR is not exhaustive, there are still a number of places where `.get('service.foo')` and similar could be replaced but it gets us a long way there in a quick and automated fashion
128 lines
3.1 KiB
JavaScript
128 lines
3.1 KiB
JavaScript
/* 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 {inject as service} from '@ember/service';
|
|
|
|
const ONE_COLUMN_WIDTH = 540;
|
|
const TWO_COLUMN_WIDTH = 940;
|
|
|
|
export default Component.extend(ShortcutsMixin, {
|
|
resizeDetector: service(),
|
|
unsplash: service(),
|
|
ui: service(),
|
|
|
|
shortcuts: null,
|
|
tagName: '',
|
|
zoomedPhoto: null,
|
|
searchTerm: null,
|
|
|
|
// closure actions
|
|
close() {},
|
|
select() {},
|
|
|
|
sideNavHidden: or('ui.{isFullScreen,showMobileMenu}'),
|
|
|
|
init() {
|
|
this._super(...arguments);
|
|
|
|
this.shortcuts = {
|
|
escape: {action: 'handleEscape', scope: 'all'}
|
|
};
|
|
},
|
|
|
|
didReceiveAttrs() {
|
|
this._super(...arguments);
|
|
|
|
if (this.searchTerm !== this._searchTerm) {
|
|
this.unsplash.updateSearch(this.searchTerm);
|
|
}
|
|
|
|
this._searchTerm = this.searchTerm;
|
|
},
|
|
|
|
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,
|
|
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) {
|
|
let width = element.clientWidth;
|
|
let columns = 3;
|
|
|
|
if (width <= ONE_COLUMN_WIDTH) {
|
|
columns = 1;
|
|
} else if (width <= TWO_COLUMN_WIDTH) {
|
|
columns = 2;
|
|
}
|
|
|
|
this.unsplash.changeColumnCount(columns);
|
|
}
|
|
});
|