mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-22 10:21:36 +03:00
d1e1c8b11c
no issue - we had some code in `<KoenigEditor>` that was automatically saving a card when exiting edit mode based on some flawed logic, this meant we were making multiple editor updates simultaneously resulting in usage+change of the upstream `post` model within the same render loop (add paragraph code deselected the card, starts adding new paragraph, the deselection triggered the exit-edit mode which then caused a simultaneous post update) - passed card env through to `<KoenigEditor>` so that it can compare current payload state against the "saved" payload state to determine if it should save when leaving edit mode - renamed `_textReplacementEditor` to `_calloutTextEditor` to better match it's usage - removed unnecessary `onNewline` handling, it wasn't being called because we overrode `ENTER` key
254 lines
13 KiB
Handlebars
254 lines
13 KiB
Handlebars
<KoenigCard
|
|
@env={{@env}}
|
|
@icon={{"koenig/card-indicator-email"}}
|
|
@class={{concat (kg-style "container-card") " kg-email-card kg-email-cta-card mih10 miw-100 relative"}}
|
|
@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}}
|
|
{{#if this.feature.cardSettingsPanel}}
|
|
<div class="gh-email-cta-segment-indicator">
|
|
<p>{{capitalize this.selectedSegment.name}}</p>
|
|
</div>
|
|
{{else}}
|
|
<div class="kg-card-help">
|
|
<p>
|
|
<span>
|
|
Only visible to
|
|
<PowerSelect
|
|
@options={{this.segments}}
|
|
@selected={{this.selectedSegment}}
|
|
@onChange={{this.setSegment}}
|
|
@searchEnabled={{false}}
|
|
@triggerComponent="gh-power-select/trigger"
|
|
@triggerClass="ember-power-select-inline"
|
|
@dropdownClass="gh-member-segment-select-dropdown"
|
|
as |segment|
|
|
>
|
|
{{segment.name}}
|
|
</PowerSelect>
|
|
when delivered by email.
|
|
This card will not be published on your site.
|
|
</span>
|
|
</p>
|
|
</div>
|
|
{{/if}}
|
|
|
|
{{#if @payload.showDividers}}<hr class="border-top {{unless this.feature.cardSettingsPanel "edit-mode"}}">{{/if}}
|
|
|
|
<div class="{{if (eq @payload.alignment "center") "tc"}}">
|
|
<KoenigTextReplacementHtmlInput
|
|
@html={{@payload.html}}
|
|
@placeholder="Email only text... (optional)"
|
|
@autofocus={{true}}
|
|
@class="miw-100 bn bg-transparent"
|
|
@onChange={{this.updateHtml}}
|
|
@onFocus={{fn (mut this.contentFocused) true}}
|
|
@onBlur={{fn (mut this.contentFocused) false}}
|
|
@didCreateEditor={{this.registerEditor}}
|
|
/>
|
|
|
|
{{#if @payload.showButton}}
|
|
<button type="button" class="gh-btn gh-btn-accent" disabled={{not @payload.buttonText}}>
|
|
{{#if @payload.buttonText}}
|
|
<span>{{@payload.buttonText}}</span>
|
|
{{else}}
|
|
<span>Add button text</span>
|
|
{{/if}}
|
|
</button>
|
|
{{/if}}
|
|
</div>
|
|
|
|
{{#if @payload.showDividers}}<hr class="border-bottom">{{/if}}
|
|
|
|
{{#if this.feature.cardSettingsPanel}}
|
|
<KoenigSettingsPanel>
|
|
<div class="kg-settings-panel-control">
|
|
<div class="kg-settings-panel-control-label">Visibility</div>
|
|
<div class="kg-settings-panel-control-input">
|
|
<PowerSelect
|
|
@options={{this.segments}}
|
|
@selected={{this.selectedSegment}}
|
|
@onChange={{this.setSegment}}
|
|
@searchEnabled={{false}}
|
|
@triggerComponent="gh-power-select/trigger"
|
|
@dropdownClass="gh-member-segment-select-dropdown"
|
|
as |segment|
|
|
>
|
|
<span class="ttc">{{segment.name}}</span>
|
|
</PowerSelect>
|
|
</div>
|
|
<p class="kg-settings-panel-control-info">
|
|
Visible for this audience when delivered by email. This card is not published on your site.
|
|
</p>
|
|
</div>
|
|
|
|
<hr class="kg-settings-panel-divider">
|
|
|
|
<div class="kg-settings-panel-control kg-settings-panel-control-horizontal">
|
|
<div class="kg-settings-panel-control-label">Content alignment</div>
|
|
<div class="kg-settings-panel-control-input">
|
|
<div class="gh-btn-group icons">
|
|
<button type="button" title="Left-align content" class="gh-btn gh-btn-icon {{if (eq @payload.alignment "left") "gh-btn-group-selected"}}" {{on "click" (fn this.setAlignment "left")}}><span>{{svg-jar "align-left"}}</span></button>
|
|
<button type="button" title="Center-align content" class="gh-btn gh-btn-icon {{if (eq @payload.alignment "center") "gh-btn-group-selected"}}" {{on "click" (fn this.setAlignment "center")}}><span>{{svg-jar "align-center"}}</span></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="kg-settings-panel-control kg-settings-panel-control-horizontal">
|
|
<label class="kg-settings-panel-control-label" for="divider-toggle">Separators</label>
|
|
<div class="kg-settings-panel-control-input">
|
|
<div class="for-switch x-small">
|
|
<label class="switch">
|
|
<input type="checkbox" class="gh-input" id="divider-toggle" checked={{@payload.showDividers}} {{on "input" this.toggleDividers}}>
|
|
<span class="input-toggle-component mt1"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="kg-settings-panel-divider">
|
|
|
|
<div class="kg-settings-panel-control kg-settings-panel-control-horizontal">
|
|
<label class="kg-settings-panel-control-label" for="button-toggle">Button</label>
|
|
<div class="kg-settings-panel-control-input">
|
|
<div class="for-switch x-small">
|
|
<label class="switch">
|
|
<input type="checkbox" class="gh-input" id="button-toggle" checked={{@payload.showButton}} {{on "input" this.toggleButton}}>
|
|
<span class="input-toggle-component mt1"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{#if @payload.showButton}}
|
|
<div class="kg-settings-panel-control">
|
|
<label class="kg-settings-panel-control-label" for="button-text-input">Button title</label>
|
|
<div class="kg-settings-panel-control-input">
|
|
<input
|
|
type="text"
|
|
class="gh-input"
|
|
id="button-text-input"
|
|
name="button-text"
|
|
value={{@payload.buttonText}}
|
|
placeholder="Add button text"
|
|
{{on "input" this.setButtonText}}
|
|
{{on-key "Enter" (fn this.focusElement "#button-url-input")}}
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="kg-settings-panel-control">
|
|
<label class="kg-settings-panel-control-label" for="button-url-input">Button URL</label>
|
|
<div class="kg-settings-panel-control-input">
|
|
<GhInputWithSelect
|
|
@value={{@payload.buttonUrl}}
|
|
@options={{this.suggestedUrls}}
|
|
@valueField="url"
|
|
@searchField="url"
|
|
@placeholder="https://yoursite.com/#/portal/signup/"
|
|
@searchMessage={{null}}
|
|
@onInput={{this.setButtonUrl}}
|
|
@openOnFocus={{true}}
|
|
@closeWhenEmpty={{true}}
|
|
@triggerClass="email-cta-button-url-input"
|
|
@triggerId="button-url-input"
|
|
@renderInPlace={{false}} {{!-- avoid dropdown inheriting editor styles --}}
|
|
as |suggestion|
|
|
>
|
|
<span class="kg-settings-link-title" title="{{suggestion.name}}">{{suggestion.name}}</span>
|
|
<span class="kg-settings-link-url" title="{{suggestion.url}}">{{suggestion.url}}</span>
|
|
</GhInputWithSelect>
|
|
</div>
|
|
</div>
|
|
{{/if}}
|
|
</KoenigSettingsPanel>
|
|
{{else}}
|
|
<form class="email-cta-toolbar">
|
|
<div class="borders">
|
|
<button type="button" title="Add dividers" class="gh-btn gh-btn-white gh-btn-icon email-cta-toolbar-item {{if @payload.showDividers "fill-green-d1"}}" {{on "click" this.toggleDividers}}><span>{{svg-jar "dividers"}}</span></button>
|
|
</div>
|
|
|
|
<div class="gh-btn-group icons email-cta-align">
|
|
<button type="button" title="Left-align content" class="gh-btn gh-btn-icon {{if (eq @payload.alignment "left") "gh-btn-group-selected"}}" {{on "click" (fn this.setAlignment "left")}}><span>{{svg-jar "align-left"}}</span></button>
|
|
<button type="button" title="Center-align content" class="gh-btn gh-btn-icon {{if (eq @payload.alignment "center") "gh-btn-group-selected"}}" {{on "click" (fn this.setAlignment "center")}}><span>{{svg-jar "align-center"}}</span></button>
|
|
</div>
|
|
|
|
<button type="button" title="Add button" class="gh-btn gh-btn-white gh-btn-icon email-cta-toolbar-item {{if @payload.showButton "fill-green-d1"}}" {{on "click" this.toggleButton}}><span>{{svg-jar "button"}}</span></button>
|
|
|
|
{{#if @payload.showButton}}
|
|
<label for={{this.buttonTextInputId}} class="sr-only">CTA button text</label>
|
|
<input
|
|
type="text"
|
|
class="gh-input email-cta-button-text-input"
|
|
id={{this.buttonTextInputId}}
|
|
name="button-text"
|
|
value={{@payload.buttonText}}
|
|
placeholder="Add button text"
|
|
{{on "input" this.setButtonText}}
|
|
{{on-key "Enter" (fn this.focusElement "#button-url-input")}}
|
|
>
|
|
|
|
<label for={{this.urlInputId}} class="sr-only">CTA URL</label>
|
|
<GhInputWithSelect
|
|
@value={{@payload.buttonUrl}}
|
|
@options={{this.suggestedUrls}}
|
|
@valueField="url"
|
|
@searchField="url"
|
|
@placeholder="https://yoursite.com/#/portal/signup/"
|
|
@searchMessage={{null}}
|
|
@onInput={{this.setButtonUrl}}
|
|
@openOnFocus={{true}}
|
|
@closeWhenEmpty={{true}}
|
|
@triggerClass="email-cta-button-url-input"
|
|
@triggerId={{this.urlInputId}}
|
|
@renderInPlace={{false}} {{!-- avoid dropdown inheriting editor styles --}}
|
|
as |suggestion|
|
|
>
|
|
<span class="kg-settings-link-title" title="{{suggestion.name}}">{{suggestion.name}}</span>
|
|
<span class="kg-settings-link-url" title="{{suggestion.url}}">{{suggestion.url}}</span>
|
|
</GhInputWithSelect>
|
|
{{/if}}
|
|
</form>
|
|
{{/if}}
|
|
{{else}}
|
|
<div class="gh-email-cta-segment-indicator">
|
|
<p>{{capitalize this.selectedSegment.name}}</p>
|
|
</div>
|
|
|
|
{{#if @payload.showDividers}}<hr class="border-top">{{/if}}
|
|
|
|
<div class="{{if (not @payload.showDividers) "pb2"}} {{if (eq @payload.alignment "center") "tc"}}">
|
|
{{#if @payload.html}}
|
|
<div class="relative">
|
|
<p>{{{this.formattedHtml}}}</p>
|
|
<div class="koenig-card-click-overlay"></div>
|
|
</div>
|
|
{{/if}}
|
|
|
|
{{#if (and @payload.showButton @payload.buttonText @payload.buttonUrl)}}
|
|
<a class="gh-btn gh-btn-accent" href="javascript:void(0)" data-tooltip={{@payload.buttonUrl}}><span>{{@payload.buttonText}}</span></a>
|
|
{{/if}}
|
|
</div>
|
|
|
|
{{#if @payload.showDividers}}<hr class="border-bottom">{{/if}}
|
|
|
|
{{/if}}
|
|
</KoenigCard>
|