mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-28 22:43:30 +03:00
4ca14b8eee
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
107 lines
4.5 KiB
Handlebars
107 lines
4.5 KiB
Handlebars
<div
|
|
class="gh-editor-feature-image-container"
|
|
{{on "mouseover" (fn (mut this.isHovered) true)}}
|
|
{{on "mouseleave" (fn (mut this.isHovered) false)}}
|
|
>
|
|
<GhUploader
|
|
@extensions={{this.imageExtensions}}
|
|
@onComplete={{this.setUploadedImage}}
|
|
as |uploader|
|
|
>
|
|
{{#unless @image}}
|
|
<div
|
|
class="gh-editor-feature-image-dropzone"
|
|
{{on "dragover" this.dragOver}}
|
|
{{on "dragleave" this.dragLeave}}
|
|
{{on "drop" (fn this.drop uploader.setFiles)}}
|
|
></div>
|
|
{{/unless}}
|
|
|
|
{{#if this.canDrop}}
|
|
<div class="gh-editor-feature-image-drop-indicator bg-green br-pill pe-none"></div>
|
|
{{/if}}
|
|
|
|
{{#if uploader.isUploading}}
|
|
{{!-- upload in progress --}}
|
|
{{uploader.progressBar}}
|
|
{{else if uploader.errors}}
|
|
{{!-- upload failed --}}
|
|
{{#each uploader.errors as |error|}}
|
|
<div class="gh-setting-error" data-test-error="feature-image">
|
|
{{or error.context error.message}}
|
|
<button type="button" class="ml2 b" {{on "click" uploader.cancel}}>Retry</button>
|
|
</div>
|
|
{{/each}}
|
|
{{else if @image}}
|
|
{{!-- image is present --}}
|
|
<span class="gh-editor-feature-image-indicator" data-tooltip="A feature image is publicly visible to anyone">
|
|
{{svg-jar "feature-image"}}
|
|
</span>
|
|
<div class="gh-editor-feature-image">
|
|
<img src={{@image}}>
|
|
<button type="button" class="image-delete" title="Delete image" {{on "click" @clearImage}}>
|
|
{{svg-jar "trash"}}
|
|
</button>
|
|
</div>
|
|
<div class="flex justify-between align-center">
|
|
{{#if this.isEditingAlt}}
|
|
<input
|
|
type="text"
|
|
placeholder="Add alt text to the feature image"
|
|
class="gh-editor-feature-image-alttext"
|
|
name="alt"
|
|
value={{@alt}}
|
|
{{autofocus}}
|
|
{{on "input" this.onAltInput}}
|
|
>
|
|
{{else}}
|
|
<KoenigBasicHtmlInput
|
|
@html={{@caption}}
|
|
@placeholder={{if this.captionInputFocused "" "Add a caption to the feature image"}}
|
|
@class="gh-editor-feature-image-caption"
|
|
@name="caption"
|
|
@onChange={{@updateCaption}}
|
|
@onFocus={{fn (mut this.captionInputFocused) true}}
|
|
@onBlur={{fn (mut this.captionInputFocused) false}}
|
|
/>
|
|
{{/if}}
|
|
<button
|
|
title="Toggle between editing alt text and caption"
|
|
class="h-100 pl1 pr1 ba br3 f8 sans-serif fw4 lh-title tracked-2 {{if this.isEditingAlt "bg-green b--green white" "bg-white b--midlightgrey midlightgrey"}}"
|
|
{{on "click" this.toggleAltEditing passive=true}}
|
|
>
|
|
Alt
|
|
</button>
|
|
</div>
|
|
{{else}}
|
|
{{!-- no-image state --}}
|
|
<div class="flex flex-row items-center {{if this.hideButton "invisible"}}">
|
|
{{#if this.canDrop}}
|
|
<div class="gh-editor-feature-image-add-button"><span>Drop to upload feature image</span></div>
|
|
{{else}}
|
|
<button type="button" class="gh-editor-feature-image-add-button" {{on "click" uploader.triggerFileDialog}}>{{svg-jar "plus"}}<span>Add feature image</span></button>
|
|
{{#if this.settings.unsplash}}
|
|
<button type="button" class="gh-editor-feature-image-unsplash" {{on "click" this.toggleUnsplashSelector}}>{{svg-jar "unsplash"}}</button>
|
|
{{/if}}
|
|
{{/if}}
|
|
</div>
|
|
{{/if}}
|
|
|
|
<div style="display:none">
|
|
<GhFileInput
|
|
@multiple={{false}}
|
|
@action={{uploader.setFiles}}
|
|
@accept={{uploader.imageMimeTypes}}
|
|
@onInsert={{uploader.registerFileInput}}
|
|
data-test-file-input="feature-image" />
|
|
</div>
|
|
</GhUploader>
|
|
</div>
|
|
|
|
{{#if this.showUnsplashSelector}}
|
|
<GhUnsplash
|
|
@select={{this.setUnsplashImage}}
|
|
@close={{this.toggleUnsplashSelector}}
|
|
/>
|
|
{{/if}}
|