Ghost/ghost/admin/app/components/gh-editor-feature-image.hbs

105 lines
4.4 KiB
Handlebars
Raw Normal View History

<div
2021-06-22 14:12:35 +03:00
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}}
2021-07-20 12:30:02 +03:00
<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}}
2021-06-21 13:03:35 +03:00
<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>
2021-06-22 14:12:35 +03:00
<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>
2021-06-21 13:03:35 +03:00
<div class="flex justify-between align-center">
{{#if this.isEditingAlt}}
<input
type="text"
2021-06-22 14:12:35 +03:00
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"}}
2021-06-22 14:12:35 +03:00
@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"
2021-06-21 13:03:35 +03:00
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>
<button type="button" class="gh-editor-feature-image-unsplash" {{on "click" this.toggleUnsplashSelector}}>{{svg-jar "unsplash"}}</button>
{{/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}}