Ghost/ghost/admin/app/components/gh-editor-feature-image.js
Kevin Ansfield 876c2b6cdd Added first pass at feature image drag+drop uploading
refs https://github.com/TryGhost/Team/issues/884

- add `[data-user-is-dragging]` to `body` element when any drag is occurring so that we can make drop zones active
- added dropzone and drop handling to feature image component
2021-07-16 15:01:00 +01:00

87 lines
2.0 KiB
JavaScript

import Component from '@glimmer/component';
import {action} from '@ember/object';
import {tracked} from '@glimmer/tracking';
export default class GhEditorFeatureImageComponent extends Component {
@tracked isEditingAlt = false;
@tracked isHovered = false;
@tracked captionInputFocused = false;
@tracked showUnsplashSelector = false;
@tracked canDrop = false;
get hideButton() {
return !this.canDrop && !this.isHovered && !this.args.forceButtonDisplay;
}
@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);
}
@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);
}
}