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

94 lines
4.2 KiB
Handlebars
Raw Normal View History

{{#koenig-card
tagName="figure"
class=(concat (kg-style "media-card") " " (kg-style "breakout" size="wide") " 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 "insertImagePreviews")
onUploadSuccess=(action "insertImageIntoPayload")
onUploadFailure=(action "uploadFailed")
as |uploader|
}}
<div class="relative{{unless images " bg-whitegrey-l2"}}">
{{#if imageRows}}
<div class="flex flex-column">
{{#each imageRows as |row|}}
<div class="flex flex-row justify-center">
{{#each row as |image|}}
<div style={{image.style}} class={{image.classes}}>
<img src={{or image.previewSrc image.src}} width={{image.width}} height={{image.height}} class="w-100 h-100 db">
<div class="bg-image-overlay-top child">
<div class="flex flex-row-reverse">
<button class="bg-white-90 pl3 pr3 br3" {{action "deleteImage" image}}>{{svg-jar "koenig/kg-trash" class="fill-darkgrey w4 h4"}}</button>
</div>
</div>
</div>
{{/each}}
</div>
{{/each}}
</div>
{{/if}}
{{#if (or uploader.isUploading (is-empty imageRows))}}
<div class="relative miw-100 flex items-center {{if (is-empty imageRows) "kg-media-placeholder ba b--whitegrey" "absolute absolute--fill bg-white-50"}}">
{{#if isDraggedOver}}
<span class="db center sans-serif fw7 f7 middarkgrey">
Drop 'em like it's hot 🔥
</span>
{{else if uploader.isUploading}}
{{uploader.progressBar}}
{{else if (is-empty imageRows)}}
<button class="flex flex-column items-center center sans-serif fw4 f7 middarkgrey pa8 pt6 pb6 kg-image-button" onclick={{action "triggerFileDialog"}}>
{{svg-jar "gallery-placeholder" class="kg-placeholder-gallery nudge-bottom--10"}}
<span class="mt2 midgrey">Click to select up to 9 images</span>
</button>
{{/if}}
</div>
{{else if isDraggedOver}}
<div class="absolute absolute--fill flex items-center bg-black-60 pe-none">
<span class="db center sans-serif fw7 f7 white">
Drop to add up to 9 images
</span>
</div>
{{/if}}
{{#if (and errorMessage (not isDraggedOver))}}
<div class="absolute absolute--fill flex items-center bg-black-60">
<span class="db center sans-serif fw7 f7 pl2 pr2 bg-red white">
{{errorMessage}}.
<button onclick={{action "clearErrorMessage"}} style="text-decoration: underline !important">
Dismiss
</button>
</span>
</div>
{{/if}}
</div>
<div style="display:none">
{{gh-file-input multiple=true action=(action "setFiles") accept=imageMimeTypes}}
</div>
{{/gh-uploader}}
{{#if (or isSelected (clean-basic-html payload.caption))}}
{{card.captionInput
caption=payload.caption
update=(action "updateCaption")
placeholder="Type caption for gallery (optional)"
}}
{{/if}}
{{/koenig-card}}