65 lines
1.7 KiB
JavaScript
65 lines
1.7 KiB
JavaScript
import Component from '@glimmer/component';
|
|
import {action} from '@ember/object';
|
|
import {htmlSafe} from '@ember/template';
|
|
import {tracked} from '@glimmer/tracking';
|
|
|
|
export default class GhUnsplashPhoto extends Component {
|
|
@tracked height = 0;
|
|
@tracked width = 1200;
|
|
|
|
get style() {
|
|
return htmlSafe(this.args.zoomed ? 'width: auto; margin: 0;' : '');
|
|
}
|
|
|
|
// avoid "binding style attributes" warnings
|
|
get containerStyle() {
|
|
const styles = [];
|
|
const ratio = this.args.photo.ratio;
|
|
const zoomed = this.args.zoomed;
|
|
|
|
styles.push(`background-color: ${this.args.photo.color}`);
|
|
|
|
if (zoomed) {
|
|
styles.push(`cursor: zoom-out`);
|
|
} else {
|
|
styles.push(`padding-bottom: ${ratio * 100}%`);
|
|
}
|
|
|
|
return htmlSafe(styles.join('; '));
|
|
}
|
|
|
|
get imageUrl() {
|
|
let url = this.args.photo.urls.regular;
|
|
|
|
url = url.replace('&w=1080', '&w=1200');
|
|
|
|
return url;
|
|
}
|
|
|
|
constructor() {
|
|
super(...arguments);
|
|
this.height = this.width * this.args.photo.ratio;
|
|
}
|
|
|
|
@action
|
|
select(event) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
this.args.select(this.args.photo);
|
|
}
|
|
|
|
@action
|
|
zoom(event) {
|
|
const {target} = event;
|
|
|
|
// only zoom when it wasn't one of the child links clicked
|
|
if (!target.matches('a') && target.closest('a').classList.contains('gh-unsplash-photo')) {
|
|
event.preventDefault();
|
|
this.args.zoom(this.args.photo);
|
|
}
|
|
|
|
// don't propagate otherwise we can trigger the closeZoom action on the overlay
|
|
event.stopPropagation();
|
|
}
|
|
}
|