110 lines
2.5 KiB
JavaScript
110 lines
2.5 KiB
JavaScript
/* global key */
|
|
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 class GhUnsplash extends Component {
|
|
@service unsplash;
|
|
@service ui;
|
|
|
|
@tracked zoomedPhoto = null;
|
|
@tracked searchTerm = null;
|
|
|
|
get sideNavHidden() {
|
|
return this.ui.isFullScreen || this.ui.showMobileMenu;
|
|
}
|
|
|
|
constructor() {
|
|
super(...arguments);
|
|
key.setScope('unsplash');
|
|
}
|
|
|
|
willDestroy() {
|
|
super.willDestroy(...arguments);
|
|
key.setScope('default');
|
|
}
|
|
|
|
@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);
|
|
|
|
this.args.close();
|
|
}
|
|
|
|
@action
|
|
retry(event) {
|
|
event?.preventDefault();
|
|
this.unsplash.retryLastRequest();
|
|
}
|
|
|
|
@action
|
|
handleEscape(event) {
|
|
event?.preventDefault();
|
|
|
|
if (this.zoomedPhoto) {
|
|
return this.closeZoom();
|
|
}
|
|
|
|
this.args.close();
|
|
}
|
|
|
|
@action
|
|
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);
|
|
}
|
|
}
|