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

79 lines
2.8 KiB
Handlebars
Raw Normal View History

<KoenigCard
@env={{@env}}
@class={{concat (kg-style "container-card") " kg-toggle-card-container"}}
@headerOffset={{@headerOffset}}
@toolbar={{this.toolbar}}
@payload={{@payload}}
@isSelected={{@isSelected}}
@isEditing={{@isEditing}}
@selectCard={{@selectCard}}
@deselectCard={{@deselectCard}}
@editCard={{@editCard}}
@hasEditMode={{true}}
@saveCard={{@saveCard}}
@saveAsSnippet={{@saveAsSnippet}}
@onLeaveEdit={{this.leaveEditMode}}
@addParagraphAfterCard={{@addParagraphAfterCard}}
@moveCursorToPrevSection={{@moveCursorToPrevSection}}
@moveCursorToNextSection={{@moveCursorToNextSection}}
@editor={{@editor}}
{{did-insert this.registerElement}}
as |card|
>
{{#if @isEditing}}
{{!-- edit mode view --}}
<div class="kg-toggle-card">
<div class="kg-toggle-card-header">
<KoenigBasicHtmlInput
@html={{@payload.heading}}
@placeholder="Toggle header"
@class="kg-toggle-card-heading"
@name="toggle-heading"
@defaultTag="h4"
@onChange={{action "setHeadingText"}}
@onFocus={{action (mut this.isFocused) true}}
@onBlur={{action (mut this.isFocused) false}}
@didCreateEditor={{this.registerHeadingEditor}}
/>
<div class="kg-toggle-card-arrow-container">
<div class="kg-toggle-card-arrow">
{{svg-jar "koenig/kg-toggle-card-open-arrow"}}
</div>
</div>
</div>
<KoenigBasicHtmlTextarea
@html={{@payload.content}}
@placeholder="Collapsible content"
@class="w-100 bn bg-transparent kg-toggle-card-content"
@onChange={{action "setContentText"}}
@onFocus={{action (mut this.isFocused) true}}
@onBlur={{action (mut this.isFocused) false}}
@didCreateEditor={{action "registerContentEditor"}}
/>
</div>
{{else}}
{{!-- rendered (non-edit) mode view --}}
<div class="kg-toggle-card">
<div class="kg-toggle-card-header">
<div class="kg-toggle-card-heading">
<h4>{{{this.formattedHeading}}}</h4>
</div>
<div class="kg-toggle-card-arrow-container">
<div class="kg-toggle-card-arrow">
2021-11-16 23:14:06 +03:00
{{svg-jar "koenig/kg-toggle-card-open-arrow"}}
</div>
</div>
</div>
<div class="kg-toggle-card-content">
{{{this.formattedContent}}}
</div>
</div>
{{/if}}
</KoenigCard>