mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-23 10:53:34 +03:00
194 lines
11 KiB
Handlebars
194 lines
11 KiB
Handlebars
<KoenigCard
|
|
@env={{@env}}
|
|
@class={{"koenig-breakout-full flex flex-column 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}}
|
|
<div class="kg-header-card kg-header-card-size-{{@payload.size}} kg-header-card-alignment-{{@payload.alignment}} kg-header-card-style-{{@payload.style}}" style="{{if (eq @payload.style "image") this.backgroundImageStyle}}">
|
|
<KoenigBasicHtmlInput
|
|
@html={{@payload.header}}
|
|
@placeholder="Header"
|
|
@class="w-100 fw4 bn bg-transparent kg-header-card-header"
|
|
@name="header"
|
|
@defaultTag="h2"
|
|
@onChange={{action "setHeader"}}
|
|
@didCreateEditor={{action "registerHeaderEditor"}}
|
|
/>
|
|
<KoenigBasicHtmlInput
|
|
@html={{@payload.subheader}}
|
|
@placeholder="Subheader"
|
|
@class="w-100 fw4 bg-transparent kg-header-card-subheader"
|
|
@name="subheader"
|
|
@defaultTag="h3"
|
|
@onChange={{action "setSubheader"}}
|
|
@didCreateEditor={{action "registerSubheaderEditor"}}
|
|
@allowBr={{true}}
|
|
/>
|
|
{{#if @payload.buttonEnabled}}
|
|
<a href="javascript:void(0)" class="gh-btn gh-btn-accent kg-header-card-button" disabled={{not @payload.buttonText}}>
|
|
<span>
|
|
{{or @payload.buttonText "Add button text"}}
|
|
</span>
|
|
</a>
|
|
{{/if}}
|
|
</div>
|
|
|
|
<KoenigSettingsPanel>
|
|
<div class="kg-settings-panel-control kg-settings-panel-control-horizontal">
|
|
<div class="kg-settings-panel-control-label">Size</div>
|
|
<div class="kg-settings-panel-control-input">
|
|
<div class="gh-btn-group icons">
|
|
<button type="button" title="Small" class="gh-btn gh-btn-icon {{if (eq @payload.size "small") "gh-btn-group-selected"}}" {{on "click" (fn this.setSize "small")}}><span>S</span></button>
|
|
<button type="button" title="Medium" class="gh-btn gh-btn-icon {{if (eq @payload.size "medium") "gh-btn-group-selected"}}" {{on "click" (fn this.setSize "medium")}}><span>M</span></button>
|
|
<button type="button" title="Large" class="gh-btn gh-btn-icon {{if (eq @payload.size "large") "gh-btn-group-selected"}}" {{on "click" (fn this.setSize "large")}}><span>L</span></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="kg-settings-panel-control kg-settings-panel-control-horizontal">
|
|
<div class="kg-settings-panel-control-label">Alignment</div>
|
|
<div class="kg-settings-panel-control-input">
|
|
<div class="gh-btn-group icons">
|
|
<button type="button" 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" 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>
|
|
<hr class="kg-settings-panel-divider">
|
|
<div class="kg-settings-panel-control kg-settings-panel-control-horizontal">
|
|
<div class="kg-settings-panel-control-label">Style</div>
|
|
<div class="kg-settings-panel-control-input">
|
|
<div class="gh-btn-group icons">
|
|
<button type="button" class="gh-btn gh-btn-icon {{if (eq @payload.style "invert") "gh-btn-group-selected"}}" {{on "click" (fn this.setStyle "invert")}}><span>Invert</span></button>
|
|
<button type="button" class="gh-btn gh-btn-icon {{if (eq @payload.style "clear") "gh-btn-group-selected"}}" {{on "click" (fn this.setStyle "clear")}}><span>Clear</span></button>
|
|
<button type="button" class="gh-btn gh-btn-icon {{if (eq @payload.style "accent") "gh-btn-group-selected"}}" {{on "click" (fn this.setStyle "accent")}}><span>Accent</span></button>
|
|
<button type="button" class="gh-btn gh-btn-icon {{if (eq @payload.style "image") "gh-btn-group-selected"}}" {{on "click" (fn this.setStyle "image")}}><span>Image</span></button>
|
|
</div>
|
|
|
|
<GhUploader
|
|
@uploadUrl="/images/upload/"
|
|
@accept={{this.imageMimeTypes}}
|
|
@extensions={{this.imageExtensions}}
|
|
{{!-- @onStart={{this.customThumbnailUploadStarted}} --}}
|
|
@onComplete={{this.backgroundImageUploadCompleted}}
|
|
as |uploader|
|
|
>
|
|
{{#if (eq @payload.style "image")}}
|
|
<div class="relative w-100">
|
|
{{#if uploader.isUploading}}
|
|
<div class="kg-upload-thumbnail-xl">
|
|
{{uploader.progressBar}}
|
|
</div>
|
|
{{else if @payload.backgroundImageSrc}}
|
|
<div class="kg-thumbnail-xl-container">
|
|
<img class="kg-thumbnail-xl" src={{@payload.backgroundImageSrc}} {{on "click" uploader.triggerFileDialog}}>
|
|
<div class="image-overlay">
|
|
<div class="flex flex-row-reverse">
|
|
<button class="bg-white-90 br3 pe-auto" {{on "click" this.deleteBackgroundImage}}>
|
|
{{svg-jar "koenig/kg-trash" class="kg-replace-icon fill-darkgrey"}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{else}}
|
|
<button type="button" class="gh-btn kg-upload-thumbnail-xl" {{on "click" uploader.triggerFileDialog}}>
|
|
{{svg-jar "upload-fill"}}
|
|
</button>
|
|
{{/if}}
|
|
</div>
|
|
<div style="display:none">
|
|
<GhFileInput
|
|
@multiple={{false}}
|
|
@action={{uploader.setFiles}}
|
|
@accept={{this.imageMimeTypes}}
|
|
@onInsert={{uploader.registerFileInput}}
|
|
/>
|
|
</div>
|
|
{{/if}}
|
|
</GhUploader>
|
|
</div>
|
|
</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">Button</div>
|
|
<div class="kg-settings-panel-control-input">
|
|
<div class="for-switch x-small">
|
|
<label class="switch" for="has-button">
|
|
<input
|
|
type="checkbox"
|
|
checked={{@payload.buttonEnabled}}
|
|
id="has-button"
|
|
{{on "click" this.toggleButton}}
|
|
>
|
|
<span class="input-toggle-component mt1"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{#if @payload.buttonEnabled}}
|
|
<div class="kg-settings-panel-control">
|
|
<label class="kg-settings-panel-control-label" for="header-button-input">Button text</label>
|
|
<div class="kg-settings-panel-control-input">
|
|
<input
|
|
type="text"
|
|
class="gh-input"
|
|
id="header-button-input"
|
|
name="header-button"
|
|
value={{@payload.buttonText}}
|
|
placeholder="Add button text"
|
|
{{on "input" this.setButtonText}}
|
|
{{on-key "Enter" (fn this.focusElement "#header-button-input")}}
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="kg-settings-panel-control">
|
|
<label class="kg-settings-panel-control-label" for="header-url-input">Button URL</label>
|
|
<div class="kg-settings-panel-control-input">
|
|
<input
|
|
type="text"
|
|
class="gh-input"
|
|
id="header-url-input"
|
|
name="header-url"
|
|
value={{@payload.buttonUrl}}
|
|
placeholder="Add URL"
|
|
{{on "input" this.setButtonUrl}}
|
|
{{on-key "Enter" (fn this.focusElement "#header-url-input")}}
|
|
>
|
|
</div>
|
|
</div>
|
|
{{/if}}
|
|
</KoenigSettingsPanel>
|
|
|
|
{{else}}
|
|
|
|
<div class="kg-header-card kg-header-card-size-{{@payload.size}} kg-header-card-alignment-{{@payload.alignment}} kg-header-card-style-{{@payload.style}}" style="{{if (eq @payload.style "image") this.backgroundImageStyle}}">
|
|
<h2 class="kg-header-card-header">{{{@payload.header}}}</h2>
|
|
{{#if this.hasSubheader}}
|
|
<h3 class="kg-header-card-subheader">{{{@payload.subheader}}}</h3>
|
|
{{/if}}
|
|
{{#if @payload.buttonEnabled}}
|
|
<a href="javascript:void(0)" class="gh-btn gh-btn-accent kg-header-card-button {{if this.isButtonIncomplete "o-50"}}" disabled={{not @payload.buttonText}}>
|
|
<span>
|
|
{{or @payload.buttonText "Add button text"}}
|
|
</span>
|
|
</a>
|
|
{{/if}}
|
|
</div>
|
|
{{/if}}
|
|
</KoenigCard> |