121 lines
5.4 KiB
Handlebars
121 lines
5.4 KiB
Handlebars
{{!-- template-lint-disable no-invalid-interactive --}}
|
|
<div
|
|
class="gh-editor-feature-image-container"
|
|
>
|
|
{{!-- template-lint-enable no-invalid-interactive --}}
|
|
<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 --}}
|
|
{{#if @isHidden}}
|
|
<span class="gh-editor-hidden-indicator" data-tooltip="Feature image and post title are hidden on page">
|
|
{{svg-jar "eye-closed"}}
|
|
</span>
|
|
{{/if}}
|
|
<div class="gh-editor-feature-image">
|
|
<img src={{@image}} alt={{@alt}} role={{if @alt "img" "presentation"}} class="{{if @isHidden "faded"}}">
|
|
<div class="gh-editor-feature-image-overlay"></div>
|
|
<KoenigImageEditor
|
|
@imageSrc={{@image}}
|
|
@saveImage={{fn this.saveImage uploader.setFiles}}
|
|
/>
|
|
<button type="button" class="image-action image-delete" title="Delete image" {{on "click" @clearImage}}>
|
|
{{svg-jar "koenig/kg-trash"}}
|
|
</button>
|
|
</div>
|
|
<div class="relative 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 {{if @isHidden "faded"}}"
|
|
name="alt"
|
|
value={{@alt}}
|
|
{{autofocus}}
|
|
{{on "input" this.onAltInput}}
|
|
aria-label="Alt text for feature image"
|
|
>
|
|
{{else}}
|
|
<KoenigLexicalEditorInput
|
|
class="gh-editor-feature-image-caption {{if (and @isHidden (not this.captionInputFocused)) "faded"}}"
|
|
@html={{this.caption}}
|
|
@onChangeHtml={{this.setCaption}}
|
|
@placeholderText={{if this.captionInputFocused "" "Add a caption to the feature image"}}
|
|
@onFocus={{fn (mut this.captionInputFocused) true}}
|
|
@onBlur={{this.handleCaptionBlur}}
|
|
@onTKCountChange={{this.onTKCountChange}}
|
|
@registerAPI={{this.registerEditorAPI}}
|
|
/>
|
|
{{/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"}}" type="button" {{on "click" this.toggleAltEditing passive=true}}
|
|
>
|
|
Alt
|
|
</button>
|
|
|
|
{{#if (and this.tkCount (not this.isEditingAlt))}}
|
|
<div class="tk-indicator" data-testid="feature-image-tk-indicator" role="button" {{on "click" this.focusCaptionEditor}}>
|
|
TK
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
{{else}}
|
|
{{!-- no-image state --}}
|
|
<div class="gh-editor-feature-image-add">
|
|
{{#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}}
|