mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-22 18:31:57 +03:00
5d552202f6
refs https://github.com/TryGhost/Ghost/issues/9311 - add actions for cursor movement and pass through to card components - `moveCursorToNextSection` deselects card and places cursor at beginning of next section, useful for caption inputs where <kbd>down arrow</kbd> or <kbd>right arrow</kbd> should move the cursor out of the input & card. Also creates an empty paragraph before moving the cursor if for some reason an empty paragraph doesn't exist after the last card in the doc - `moveCursorToPrevSection` deselects card and places cursor at end of previous section, useful for caption inputs where <kbd>up arrow</kbd> or <kbd>left arrow</kbd> should move the cursor out of the input & card - `addParagraphAfterCard` deselects card, creates a new paragraph after the card and moves the cursor to it. Useful for caption inputs where <kbd>enter</kbd> should have the same behaviour as if it was pressed whilst the card is selected - modify `{{gh-uploader}}` so that it passes the FileList to it's `onStart` closure action. Useful for displaying previews when uploading images - modify `{{koenig-card}}` toolbar display so that it can display text as well as icon buttons - update `{{koenig-card-image}}` so that it has a full image uploader and caption input
62 lines
2.4 KiB
Handlebars
62 lines
2.4 KiB
Handlebars
{{#koenig-card
|
|
tagName="figure"
|
|
class=(concat (kg-style "media-card-h") " flex flex-column")
|
|
isSelected=isSelected
|
|
isEditing=isEditing
|
|
selectCard=(action selectCard)
|
|
onSelect=(action "onSelect")
|
|
onDeselect=(action "onDeselect")
|
|
editCard=(action editCard)
|
|
toolbar=toolbar
|
|
hasEditMode=false
|
|
}}
|
|
{{#gh-uploader
|
|
accept=imageMimeTypes
|
|
extensions=imageExtensions
|
|
onStart=(action "setPreviewSrc")
|
|
onComplete=(action "updateSrc")
|
|
onFailed=(action "resetSrcs")
|
|
as |uploader|
|
|
}}
|
|
<div class="relative">
|
|
{{#if (or previewSrc payload.src)}}
|
|
<img src={{or previewSrc payload.src}} class={{kg-style "image-normal"}} 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="db center btn-base ba b--whitegrey br3 sans-serif fw4 f7 middarkgrey" onclick={{action "triggerFileDialog"}}>
|
|
<span>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)}}
|
|
<figcaption class="{{kg-style "figcaption"}} w-100">
|
|
<input
|
|
value={{payload.caption}}
|
|
type="text"
|
|
class="miw-100 tc bn form-text"
|
|
name="caption"
|
|
oninput={{action "updateCaption" value="target.value"}}
|
|
placeholder="Type caption for image (optional)">
|
|
</figcaption>
|
|
{{/if}}
|
|
{{/koenig-card}}
|