mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-21 09:52:06 +03:00
ea9c8c03fe
refs https://github.com/TryGhost/Ghost/pull/15550 Pulled out of the rolled up node+ember-js+ember-template rollup linter update PR as it required fairly extensive changes. - bumped package - renamed `no-down-event-binding` to `no-pointer-down-event-binding` - disabled `no-pointer-down-event-binding` rule - disabled `no-triple-curlies` rule - ran `yarn lint:hbs --fix` - updated integration tests to match Octane syntax - fixed various one-off errors - updated .lint-todo
181 lines
8.4 KiB
Handlebars
181 lines
8.4 KiB
Handlebars
<KoenigCard
|
|
@env={{@env}}
|
|
@class={{"ba b--transparent relative kg-card-hover kg-card kg-upload-card kg-audio-card mih10 miw-100 relative" (kg-style "breakout" size=@payload.cardWidth)}}
|
|
@headerOffset={{@headerOffset}}
|
|
@toolbar={{this.toolbar}}
|
|
@payload={{@payload}}
|
|
@isSelected={{@isSelected}}
|
|
@isEditing={{@isEditing}}
|
|
@selectCard={{@selectCard}}
|
|
@deselectCard={{@deselectCard}}
|
|
@editCard={{@editCard}}
|
|
@hasEditMode={{not this.isEmpty}}
|
|
@saveCard={{@saveCard}}
|
|
@saveAsSnippet={{@saveAsSnippet}}
|
|
@addParagraphAfterCard={{@addParagraphAfterCard}}
|
|
@moveCursorToPrevSection={{@moveCursorToPrevSection}}
|
|
@moveCursorToNextSection={{@moveCursorToNextSection}}
|
|
@editor={{@editor}}
|
|
{{did-insert this.didInsert}}
|
|
{{on "dragover" this.dragOver}}
|
|
{{on "dragleave" this.dragLeave}}
|
|
{{on "drop" this.drop}}
|
|
>
|
|
{{#if @payload.src}}
|
|
<div class="kg-upload-container">
|
|
<div class="kg-media-container">
|
|
<GhUploader
|
|
@uploadUrl="/media/thumbnail/upload/"
|
|
@resourceName="media"
|
|
@files={{this.thumbnailFiles}}
|
|
@requestMethod="put"
|
|
@accept={{this.imageMimeTypes}}
|
|
@extensions={{this.imageExtensions}}
|
|
@onComplete={{this.audioThumbnailUploadCompleted}}
|
|
@onFailed={{this.audioThumbnailUploadFailed}}
|
|
@paramsHash={{hash url=@payload.src}}
|
|
as |uploader|
|
|
>
|
|
|
|
{{#if (or uploader.errors uploader.isUploading)}}
|
|
{{#if uploader.errors}}
|
|
<span class="db flex items-center h8 pl2 pr2 red sans-serif f6 fw6">
|
|
{{get uploader.errors "0.message"}}
|
|
</span>
|
|
{{/if}}
|
|
|
|
{{#if this.isDraggedOver}}
|
|
<span class="fw6 f7 white lh-1">
|
|
Drop it 🔥
|
|
</span>
|
|
{{else if uploader.isUploading}}
|
|
{{uploader.progressBar}}
|
|
{{else if (not @payload.thumbnailSrc)}}
|
|
<button class="kg-upload-button" type="button" {{on "click" this.triggerThumbnailFileDialog}}>
|
|
{{svg-jar "audio-upload"}}
|
|
</button>
|
|
{{else}}
|
|
<button class="kg-upload-button" type="button" {{on "click" this.triggerThumbnailFileDialog}}>
|
|
<img src={{@payload.thumbnailSrc}} class="{{kg-style this.kgImgStyle}}">
|
|
</button>
|
|
{{/if}}
|
|
{{else}}
|
|
{{#if this.isDraggedOver}}
|
|
<span class="fw6 f7 white lh-1">
|
|
Drop it 🔥
|
|
</span>
|
|
{{else if uploader.isUploading}}
|
|
{{uploader.progressBar}}
|
|
{{else if @payload.thumbnailSrc}}
|
|
<div class="kg-upload-button">
|
|
<img src={{@payload.thumbnailSrc}} />
|
|
<div class="image-overlay">
|
|
<div class="flex flex-row-reverse">
|
|
<button class="bg-white-90 br3 pe-auto" type="button" {{on "click" this.deleteThumbnail}}>
|
|
{{svg-jar "koenig/kg-trash" class="kg-replace-icon fill-darkgrey"}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{else}}
|
|
{{#if @isEditing}}
|
|
<button class="kg-upload-button pointer" type="button" {{on "click" this.triggerThumbnailFileDialog}}>
|
|
{{svg-jar "upload" class="kg-audio-upload-icon"}}
|
|
</button>
|
|
{{else}}
|
|
<button class="kg-upload-button" type="button">
|
|
{{svg-jar "audio-file" class="kg-audio-icon"}}
|
|
</button>
|
|
{{/if}}
|
|
{{/if}}
|
|
{{/if}}
|
|
<div style="display:none">
|
|
<GhFileInput
|
|
@multiple={{false}}
|
|
@action={{uploader.setFiles}}
|
|
@accept={{this.imageMimeTypes}}
|
|
@onInsert={{uploader.registerFileInput}}
|
|
/>
|
|
</div>
|
|
</GhUploader>
|
|
</div>
|
|
|
|
<div class="kg-player-container">
|
|
<GhTextInput
|
|
@value={{@payload.title}}
|
|
@input={{action "setAudioTitle" value="target.value"}}
|
|
@class="kg-audio-title"
|
|
/>
|
|
<div class="kg-player">
|
|
<button class="kg-player-play-icon" type="button">{{svg-jar "play"}}</button>
|
|
<span class="kg-player-current-time">0:00</span>
|
|
<div class="kg-player-time">
|
|
/<span class="kg-player-duration">{{this.totalDuration}}</span>
|
|
</div>
|
|
<input type="range" class="kg-player-seek-slider" max="100" value="0">
|
|
<button class="kg-player-playback-rate" type="button">1×</button>
|
|
<button class="kg-player-unmute-icon" type="button">{{svg-jar "unmute"}}</button>
|
|
<input type="range" class="kg-player-volume-slider" max="100" value="70">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{#unless @isEditing}}
|
|
<div class="koenig-card-click-overlay"></div>
|
|
{{/unless}}
|
|
{{else}}
|
|
<div class="kg-upload-container kg-upload-container-empty">
|
|
<GhUploader
|
|
@uploadUrl="/media/upload/"
|
|
@resourceName="media"
|
|
@files={{this.files}}
|
|
@accept={{this.audioMimeTypes}}
|
|
@extensions={{this.audioExtensions}}
|
|
@onStart={{this.audioUploadStarted}}
|
|
@onComplete={{this.audioUploadCompleted}}
|
|
@onFailed={{this.audioUploadFailed}}
|
|
as |uploader|
|
|
>
|
|
{{#if (or uploader.errors uploader.isUploading)}}
|
|
{{#if uploader.errors}}
|
|
<span class="flex items-center h8 pl2 pr2 red sans-serif f6 fw5">
|
|
{{get uploader.errors "0.message"}}
|
|
</span>
|
|
{{/if}}
|
|
|
|
{{#if this.isDraggedOver}}
|
|
<span class="db center sans-serif fw7 f7 middarkgrey">
|
|
Drop it like it's hot 🔥
|
|
</span>
|
|
{{else if uploader.isUploading}}
|
|
{{uploader.progressBar}}
|
|
{{/if}}
|
|
{{else}}
|
|
{{#if this.isDraggedOver}}
|
|
<span class="db center sans-serif fw7 f7 middarkgrey">
|
|
Drop it like it's hot 🔥
|
|
</span>
|
|
{{else if uploader.isUploading}}
|
|
{{uploader.progressBar}}
|
|
{{else}}
|
|
<div {{on "click" this.triggerAudioFileDialog}} class="flex pa4 pointer">
|
|
{{svg-jar "audio-upload"}}
|
|
<span class="kg-upload-placeholder-text">
|
|
Click to upload an audio file
|
|
</span>
|
|
</div>
|
|
{{/if}}
|
|
{{/if}}
|
|
|
|
<div style="display:none">
|
|
<GhFileInput
|
|
@multiple={{false}}
|
|
@action={{uploader.setFiles}}
|
|
@accept={{this.audioMimeTypes}}
|
|
@onInsert={{uploader.registerFileInput}}
|
|
/>
|
|
</div>
|
|
</GhUploader>
|
|
</div>
|
|
{{/if}}
|
|
</KoenigCard>
|