Ghost/ghost/admin/lib/koenig-editor/addon/components/koenig-card-before-after.hbs
2021-12-14 16:40:51 +02:00

119 lines
4.8 KiB
Handlebars

<KoenigCard
@env={{@env}}
@tagName="figure"
@class={{concat (kg-style "breakout" size=@payload.cardWidth) " flex flex-column"}}
@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|
>
<GhUploader
@files={{this.files}}
@accept={{this.imageMimeTypes}}
@extensions={{this.imageExtensions}}
@onUploadStart={{this.uploadStart}}
@onUploadSuccess={{this.uploadSuccess}}
@onUploadFailure={{this.uploadFailed}}
@onFailed={{this.handleErrors}}
as |uploader|
>
<div class="kg-before-after-card relative margin-auto" style="width: {{this.imageWidth}}px">
{{#if this.isPopulated}}
<div
class="overflow-hidden absolute top-0 left-0"
style="{{this.overlayStyle}}"
>
<img
class="kg-before-after-card-before-image"
src={{@payload.beforeImage.src}}
width={{this.imageWidth}}
/>
</div>
<div>
<img
class="kg-before-after-card-after-image"
src={{@payload.afterImage.src}}
width={{this.imageWidth}}
/>
</div>
<input
type="range"
title="Starting position"
min="0"
max="100"
value="{{@payload.startingPosition}}"
{{on "input" this.setStartingPosition}}
{{on "scroll" this.preventDefault}}
{{on "mousedown" this.stopPropagation}}
{{on "change" this.removeFocus}}
/>
{{else}}
<div class="overflow-hidden" style="width:49%; display: inline-block;">
{{#if @payload.beforeImage}}
<img
class="kg-before-after-card-before-image"
src={{@payload.beforeImage.src}}
width={{this.imageWidth}}
/>
{{else}}
<button class="flex flex-column items-center center sans-serif fw4 f7 middarkgrey pa16 pt14 pb14 kg-image-button" {{on "click" this.selectBeforeImage}}>
{{svg-jar this.placeholder class="kg-placeholder-image"}}
<h2> Before </h2>
<span class="mt2 midgrey">Click to select an image</span>
</button>
{{/if}}
</div>
<div class="overflow-hidden" style="width:49%; display: inline-block;">
{{#if @payload.afterImage}}
<img
class="kg-before-after-card-after-image"
src={{@payload.afterImage.src}}
width={{this.imageWidth}}
/>
{{else}}
<button class="flex flex-column items-center center sans-serif fw4 f7 middarkgrey pa16 pt14 pb14 kg-image-button" {{on "click" this.selectAfterImage}}>
{{svg-jar this.placeholder class="kg-placeholder-image"}}
<h2> After </h2>
<span class="mt2 midgrey">Click to select an image</span>
</button>
{{/if}}
</div>
<input
type="range"
title="Starting position"
min="0"
max="100"
disabled="disabled"
value="{{@payload.startingPosition}}"
/>
{{/if}}
</div>
<div style="display:none">
<GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.imageMimeTypes}} />
</div>
</GhUploader>
{{#if (or @isSelected (clean-basic-html @payload.caption))}}
<card.CaptionInput
@caption={{@payload.caption}}
@update={{this.setCaption}}
@placeholder="Type caption for before/after (optional)"
/>
{{/if}}
</KoenigCard>