Ghost/ghost/admin/lib/koenig-editor/addon/components/koenig-card-bookmark.hbs
Kevin Ansfield 5ae27247f7 Prevented card toolbar showing for embed/bookmark cards in input state
no issue

- it doesn't make sense to create snippets of bookmark/embed cards before they contain any content so we avoid passing the save snippet function through until content exists and the card has left it's input state
2020-10-21 18:27:26 +01:00

83 lines
4.3 KiB
Handlebars

<KoenigCard
@class="flex flex-column"
@isSelected={{this.isSelected}}
@isEditing={{this.isEditing}}
@selectCard={{action this.selectCard}}
@deselectCard={{action this.deselectCard}}
@onDeselect={{action "onDeselect"}}
@editCard={{action this.editCard}}
@saveAsSnippet={{if this.payload.metadata this.saveAsSnippet}}
@toolbar={{this.toolbar}}
@hasEditMode={{false}}
@showSelectedOutline={{this.payload.metadata}}
@addParagraphAfterCard={{this.addParagraphAfterCard}}
@moveCursorToPrevSection={{this.moveCursorToPrevSection}}
@moveCursorToNextSection={{this.moveCursorToNextSection}}
@editor={{this.editor}}
as |card|
>
{{#if this.payload.metadata}}
<div class="kg-card-hover">
<div class="koenig-embed-{{this.payload.type}} flex justify-center relative" data-kg-embed>
{{!-- <iframe class="bn miw-100" scrolling="no"></iframe> --}}
<figure class="kg-card kg-bookmark-card also-new-tag">
<a href={{this.payload.url}} class="kg-bookmark-container">
<div class="kg-bookmark-content">
<div class="kg-bookmark-title">{{this.payload.metadata.title}}</div>
<div class="kg-bookmark-description">{{this.payload.metadata.description}}</div>
<div class="kg-bookmark-metadata">
{{#if this.payload.metadata.icon}}
<img src={{this.payload.metadata.icon}} class="kg-bookmark-icon">
{{/if}}
{{#if this.payload.metadata.publisher}}
<span class="kg-bookmark-publisher">{{this.payload.metadata.publisher}}</span>
{{/if}}
{{#if this.payload.metadata.author}}
<span class="kg-bookmark-author">{{this.payload.metadata.author}}</span>
{{/if}}
</div>
</div>
{{#if this.payload.metadata.thumbnail}}
<div class="kg-bookmark-thumbnail">
<img src={{this.payload.metadata.thumbnail}} >
</div>
{{/if}}
</a>
</figure>
<div class="koenig-card-click-overlay ba b--transparent" data-kg-overlay></div>
</div>
{{#if (or this.isSelected (clean-basic-html this.payload.caption))}}
<card.CaptionInput
@caption={{this.payload.caption}}
@update={{action "updateCaption"}}
@placeholder="Type caption for bookmark (optional)" />
{{/if}}
</div>
{{else}}
{{#if this.convertUrl.isRunning}}
<div class="miw-100 pa2 ba br2 b--lightgrey-d1 flex items-center justify-center bg-whitegrey-l2 f6 lh-title h10">
&nbsp;<div class="ghost-spinner spinner-blue"></div>&nbsp;
</div>
{{else if this.hasError}}
<div class="miw-100 flex flex-row pa2 pl3 ba br2 b--red-l3 red bg-error-red f7 fw4 lh-title h10 items-center">
<span class="mr3">{{or this.errorMessage "There was an error when parsing the URL."}}</span>
<button type="button" class="red-d2 mr3 fw6 hover-red" {{action "retry"}}><span class="underline">Retry</span></button>
<button type="button" class="red-d2 mr-auto fw6 underline hover-red" {{action "insertAsLink"}}><span class="underline">Paste URL as link</span></button>
<button type="button" {{action this.deleteCard}} class="nudge-right--2">
{{svg-jar "close" class="w3 stroke-red-l3"}}
</button>
</div>
{{else}}
<input
type="text"
value={{this.payload.url}}
name="url"
placeholder="Paste URL to add bookmark content..."
class="miw-100 pa2 ba br2 b--lightgrey-d2 f7 form-text lh-title tracked-2 h10 nl2 nr2"
oninput={{action "updateUrl"}}
onkeydown={{action "urlKeydown"}}>
{{/if}}
{{/if}}
</KoenigCard>