2018-08-29 20:17:49 +03:00
|
|
|
{{#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
|
2018-12-11 13:05:59 +03:00
|
|
|
onSelect=(action "didSelect")
|
|
|
|
onDeselect=(action "didDeselect")
|
2018-08-29 20:17:49 +03:00
|
|
|
as |card|
|
|
|
|
}}
|
|
|
|
{{#gh-uploader
|
|
|
|
files=files
|
|
|
|
accept=imageMimeTypes
|
|
|
|
extensions=imageExtensions
|
2018-08-31 14:01:08 +03:00
|
|
|
onUploadStart=(action "addImage")
|
2018-08-31 12:36:19 +03:00
|
|
|
onUploadSuccess=(action "setImageSrc")
|
2018-08-29 20:17:49 +03:00
|
|
|
onUploadFailure=(action "uploadFailed")
|
2018-11-26 13:31:02 +03:00
|
|
|
onFailed=(action "handleErrors")
|
2018-08-29 20:17:49 +03:00
|
|
|
as |uploader|
|
|
|
|
}}
|
|
|
|
<div class="relative{{unless images " bg-whitegrey-l2"}}">
|
|
|
|
{{#if imageRows}}
|
2018-12-11 13:05:59 +03:00
|
|
|
<div class="flex flex-column" data-gallery>
|
|
|
|
{{#each imageRows as |row index|}}
|
|
|
|
<div class="flex flex-row justify-center" data-row="{{index}}">
|
2018-08-29 20:17:49 +03:00
|
|
|
{{#each row as |image|}}
|
2018-12-11 13:05:59 +03:00
|
|
|
<div
|
|
|
|
style={{image.style}}
|
|
|
|
class={{image.classes}}
|
|
|
|
data-image
|
|
|
|
>
|
|
|
|
<img
|
|
|
|
src={{or image.previewSrc image.src}}
|
|
|
|
width={{image.width}}
|
|
|
|
height={{image.height}}
|
|
|
|
class="w-100 h-100 db pe-none"
|
|
|
|
>
|
|
|
|
{{#unless koenigDragDropHandler.isDragging}}
|
|
|
|
<div class="bg-image-overlay-top child pe-none">
|
|
|
|
<div class="flex flex-row-reverse">
|
|
|
|
<button class="bg-white-90 pl3 pr3 br3 pe-auto" {{action "deleteImage" image}}>
|
|
|
|
{{svg-jar "koenig/kg-trash" class="fill-darkgrey w4 h4"}}
|
|
|
|
</button>
|
|
|
|
</div>
|
2018-08-29 20:17:49 +03:00
|
|
|
</div>
|
2018-12-11 13:05:59 +03:00
|
|
|
{{/unless}}
|
2018-08-29 20:17:49 +03:00
|
|
|
</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}}
|