2021-06-16 19:56:25 +03:00
|
|
|
import Component from '@glimmer/component';
|
|
|
|
import {action} from '@ember/object';
|
2021-11-15 19:38:57 +03:00
|
|
|
import {inject as service} from '@ember/service';
|
2021-06-16 19:56:25 +03:00
|
|
|
import {tracked} from '@glimmer/tracking';
|
|
|
|
|
|
|
|
export default class GhEditorFeatureImageComponent extends Component {
|
2021-11-15 19:38:57 +03:00
|
|
|
@service settings;
|
|
|
|
|
2021-06-16 19:56:25 +03:00
|
|
|
@tracked isEditingAlt = false;
|
|
|
|
@tracked isHovered = false;
|
|
|
|
@tracked captionInputFocused = false;
|
|
|
|
@tracked showUnsplashSelector = false;
|
2021-07-16 17:00:48 +03:00
|
|
|
@tracked canDrop = false;
|
2021-06-16 19:56:25 +03:00
|
|
|
|
|
|
|
get hideButton() {
|
2021-07-16 17:00:48 +03:00
|
|
|
return !this.canDrop && !this.isHovered && !this.args.forceButtonDisplay;
|
2021-06-16 19:56:25 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
@action
|
|
|
|
setUploadedImage(results) {
|
|
|
|
if (results[0]) {
|
|
|
|
this.args.updateImage(results[0].url);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@action
|
|
|
|
setUnsplashImage({src, caption}) {
|
|
|
|
this.args.updateImage(src);
|
|
|
|
this.args.updateCaption(caption);
|
|
|
|
}
|
|
|
|
|
|
|
|
@action
|
|
|
|
toggleUnsplashSelector() {
|
|
|
|
this.showUnsplashSelector = !this.showUnsplashSelector;
|
|
|
|
}
|
|
|
|
|
|
|
|
@action
|
|
|
|
toggleAltEditing() {
|
|
|
|
this.isEditingAlt = !this.isEditingAlt;
|
|
|
|
}
|
|
|
|
|
|
|
|
@action
|
|
|
|
onAltInput(event) {
|
|
|
|
this.args.updateAlt(event.target.value);
|
|
|
|
}
|
2021-07-16 17:00:48 +03:00
|
|
|
|
|
|
|
@action
|
|
|
|
dragOver(event) {
|
|
|
|
if (!event.dataTransfer.files) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
// this is needed to work around inconsistencies with dropping files
|
|
|
|
// from Chrome's downloads bar
|
|
|
|
if (navigator.userAgent.indexOf('Chrome') > -1) {
|
|
|
|
let eA = event.dataTransfer.effectAllowed;
|
|
|
|
event.dataTransfer.dropEffect = (eA === 'move' || eA === 'linkMove') ? 'move' : 'copy';
|
|
|
|
}
|
|
|
|
|
|
|
|
// event.stopPropagation();
|
|
|
|
event.preventDefault();
|
|
|
|
|
|
|
|
this.canDrop = true;
|
|
|
|
}
|
|
|
|
|
|
|
|
@action
|
|
|
|
dragLeave(event) {
|
|
|
|
if (!event.dataTransfer.files) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
event.preventDefault();
|
|
|
|
this.canDrop = false;
|
|
|
|
}
|
|
|
|
|
|
|
|
@action
|
|
|
|
drop(setFiles, event) {
|
|
|
|
if (!event.dataTransfer.files) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
event.stopPropagation();
|
|
|
|
event.preventDefault();
|
|
|
|
|
|
|
|
this.canDrop = false;
|
|
|
|
|
|
|
|
setFiles(event.dataTransfer.files);
|
|
|
|
}
|
2021-06-16 19:56:25 +03:00
|
|
|
}
|