Ghost/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-image.hbs

64 lines
2.5 KiB
Handlebars
Raw Normal View History

{{#koenig-card
tagName="figure"
class=(concat (kg-style "media-card") " flex flex-column")
isSelected=isSelected
isEditing=isEditing
selectCard=(action selectCard)
deselectCard=(action deselectCard)
editCard=(action editCard)
toolbar=toolbar
hasEditMode=false
addParagraphAfterCard=addParagraphAfterCard
moveCursorToPrevSection=moveCursorToPrevSection
moveCursorToNextSection=moveCursorToNextSection
editor=editor
as |card|
}}
{{#gh-uploader
files=files
accept=imageMimeTypes
extensions=imageExtensions
onStart=(action "setPreviewSrc")
onComplete=(action "updateSrc")
onFailed=(action "resetSrcs")
as |uploader|
}}
<div class="relative bg-whitegrey-l2">
{{#if (or previewSrc payload.src)}}
<img src={{or previewSrc payload.src}} class="{{kg-style kgImgStyle sidebar=ui.hasSideNav}}" alt={{payload.alt}}>
{{/if}}
{{#if (or uploader.errors uploader.isUploading (not payload.src))}}
<div class="relative miw-100 flex items-center {{if (not previewSrc payload.src) "kg-media-placeholder ba b--whitegrey" "absolute absolute--fill bg-white-50"}}">
{{#if uploader.errors}}
<span class="db absolute top-0 right-0 left-0 pl2 pr2 bg-red white sans-serif f7">
{{uploader.errors.firstObject.message}}
</span>
{{/if}}
{{#if uploader.isUploading}}
{{uploader.progressBar}}
{{else if (not previewSrc payload.src)}}
<button class="flex flex-column items-center center btn-base sans-serif fw4 f7 middarkgrey" onclick={{action "triggerFileDialog"}}>
{{svg-jar "summer" class="nudge-right--10"}}
<span class="mt2 midgrey">Click to select an image</span>
</button>
{{/if}}
</div>
{{/if}}
</div>
<div style="display:none">
{{gh-file-input multiple=false action=uploader.setFiles accept=imageMimeTypes}}
</div>
{{/gh-uploader}}
{{#if (or isSelected payload.caption)}}
{{card.captionInput
caption=payload.caption
update=(action "updateCaption")
placeholder="Type caption for image (optional)"
}}
{{/if}}
{{/koenig-card}}