Ghost/ghost/admin/app/components/gh-editor-feature-image.js
Kevin Ansfield 4ca14b8eee 🐛 Fixed Unsplash image selector being available in editor when disabled
closes https://github.com/TryGhost/Team/issues/1223

It's possible to disable the Unsplash integration from the integration settings but when disabled the image selector was still available for post feature images and as an editor embed option.

- adds `isAvailable` property to card definitions, if it's set it should be a string that matches a config/setting that determines the card's availability
  - unsplash card updated to use `'settings.unsplash'` as it's `isAvailable` property
- adds conditional to `<GhEditorFeatureImage>` so the Unsplash selector is only shown when enabled to bring it inline with the `<GhImageUploader>` component that was used previously for post feature images
2021-11-15 16:38:57 +00:00

90 lines
2.1 KiB
JavaScript

import Component from '@glimmer/component';
import {action} from '@ember/object';
import {inject as service} from '@ember/service';
import {tracked} from '@glimmer/tracking';
export default class GhEditorFeatureImageComponent extends Component {
@service settings;
@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);
}
}