mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-01 13:54:35 +03:00
c3bf756285
refs https://github.com/TryGhost/Ghost/issues/9724 - removed reading time from word count display, it will be added back later as part of a more comprehensive stats interface - added background to the bottom right word count so it's still visible when above a full-width image
231 lines
9.8 KiB
Handlebars
231 lines
9.8 KiB
Handlebars
{{#if post}}
|
|
{{#gh-editor
|
|
tagName="section"
|
|
class="gh-editor gh-view"
|
|
navIsClosed=navIsClosed
|
|
as |editor|
|
|
}}
|
|
<header class="gh-editor-header br2 pe-none {{editor.headerClass}} {{if infoMessage "bg-white-90"}}">
|
|
<div class="flex items-center br2 h9 pa2 pl4 pr4 pe-auto {{unless infoMessage "bg-white-90"}}">
|
|
<div class="flex items-baseline">
|
|
<span class="fw4 darkgrey-l2 pl4">
|
|
{{gh-editor-post-status
|
|
post=post
|
|
isSaving=(or autosave.isRunning saveTasks.isRunning)
|
|
}}
|
|
</span>
|
|
{{!-- editor.headerClass is only set on small screens with opaque tpo bar --}}
|
|
{{#if (and editor.headerClass wordCount)}}
|
|
<span class="pl3 f-small midgrey">
|
|
{{pluralize wordCount.wordCount "word"}}
|
|
</span>
|
|
{{/if}}
|
|
</div>
|
|
{{#gh-scheduled-post-countdown post=post as |post countdown|}}
|
|
<time datetime="{{post.publishedAtUTC}}" class="green f8 nudge-bottom--1 ml3" data-test-schedule-countdown>
|
|
Post will go live {{countdown}}.
|
|
</time>
|
|
{{/gh-scheduled-post-countdown}}
|
|
</div>
|
|
|
|
{{#if infoMessage}}
|
|
<div class="gh-koenig-info miw88 flex flex-auto justify-center" style="pointer-events: auto">
|
|
<div class="midgrey inline-flex tracked-1 center pa1 pl4 pr4 br3 justify-center items-start {{if (eq editor.headerClass "gh-editor-header-small") "bg-white-90"}}">
|
|
{{svg-jar "idea" class="w7 h7 fill-blue"}}
|
|
<p class="ma0 pa0 ml1 nudge-top--2">
|
|
{{infoMessage}}
|
|
<button type="button" class="blue fw5" {{action (mut infoMessage "")}}>Got it</button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{{/if}}
|
|
|
|
<section class="view-actions br2 {{unless infoMessage "bg-white-90"}}" style="pointer-events: auto">
|
|
{{#unless post.isNew}}
|
|
{{#if session.user.isContributor}}
|
|
{{gh-task-button "Save"
|
|
task=save
|
|
runningText="Saving"
|
|
class="gh-btn gh-btn-blue gh-btn-icon contributor-save-button"
|
|
data-test-contributor-save=true}}
|
|
{{else}}
|
|
{{gh-publishmenu
|
|
post=post
|
|
postStatus=post.status
|
|
saveTask=save
|
|
setSaveType=(action "setSaveType")
|
|
onOpen=(action "cancelAutosave")}}
|
|
{{/if}}
|
|
{{/unless}}
|
|
|
|
<button type="button" class="post-settings" title="Settings" {{action "openSettingsMenu" target=ui}} data-test-psm-trigger>
|
|
{{svg-jar "settings"}}
|
|
</button>
|
|
</section>
|
|
</header>
|
|
|
|
{{#if useKoenig}}
|
|
{{!--
|
|
gh-koenig-editor acts as a wrapper around the title input and
|
|
koenig editor canvas to support Ghost-specific editor behaviour
|
|
--}}
|
|
{{gh-koenig-editor
|
|
title=(readonly post.titleScratch)
|
|
titlePlaceholder="Story Title"
|
|
onTitleChange=(action "updateTitleScratch")
|
|
onTitleBlur=(action (perform saveTitle))
|
|
body=(readonly post.scratch)
|
|
bodyPlaceholder="Begin writing your story..."
|
|
bodyAutofocus=shouldFocusEditor
|
|
onBodyChange=(action "updateScratch")
|
|
headerOffset=editor.headerHeight
|
|
scrollContainerSelector=".gh-koenig-editor"
|
|
scrollOffsetTopSelector=".gh-editor-header-small"
|
|
scrollOffsetBottomSelector=".gh-mobile-nav-bar"
|
|
onEditorCreated=(action "setKoenigEditor")
|
|
onWordCountChange=(action "updateWordCount")
|
|
}}
|
|
|
|
{{else}}
|
|
|
|
{{!--
|
|
NOTE: title is part of the markdown editor container so that it has
|
|
access to the markdown editor's "focus" action
|
|
--}}
|
|
{{#gh-markdown-editor
|
|
tabindex="2"
|
|
placeholder="Begin writing your story..."
|
|
autofocus=shouldFocusEditor
|
|
uploadedImageUrls=editor.uploadedImageUrls
|
|
markdown=(readonly markdown)
|
|
isFullScreen=editor.isFullScreen
|
|
onChange=(action "updateMarkdown")
|
|
onFullScreenToggle=(action editor.toggleFullScreen)
|
|
onPreviewToggle=(action editor.togglePreview)
|
|
onSplitScreenToggle=(action editor.toggleSplitScreen)
|
|
onImageFilesSelected=(action editor.uploadImages)
|
|
imageMimeTypes=editor.imageMimeTypes
|
|
as |markdown|
|
|
}}
|
|
<div class="gh-markdown-editor-pane">
|
|
{{gh-textarea
|
|
class="gh-editor-title"
|
|
placeholder="Post Title"
|
|
tabindex="1"
|
|
autoExpand=".gh-markdown-editor-pane"
|
|
value=(readonly post.titleScratch)
|
|
input=(action "updateTitleScratch" value="target.value")
|
|
focus-out=(action (perform saveTitle))
|
|
keyEvents=(hash
|
|
Tab=(action markdown.focus 'bottom')
|
|
Enter=(action markdown.focus 'top')
|
|
)
|
|
data-test-editor-title-input=true
|
|
}}
|
|
{{markdown.editor}}
|
|
</div>
|
|
|
|
{{#if markdown.isSplitScreen}}
|
|
<div class="gh-markdown-editor-preview">
|
|
<h1 class="gh-markdown-editor-preview-title">{{post.titleScratch}}</h1>
|
|
<div class="gh-markdown-editor-preview-content"></div>
|
|
</div>
|
|
{{/if}}
|
|
|
|
{{gh-tour-item "using-the-editor"
|
|
target=".gh-editor-footer"
|
|
throbberAttachment="top left"
|
|
throbberOffset="0 20%"
|
|
popoverTriangleClass="bottom"
|
|
}}
|
|
{{/gh-markdown-editor}}
|
|
|
|
{{!-- TODO: put tool/status bar in here so that scroll area can be fixed --}}
|
|
<footer class="gh-editor-footer"></footer>
|
|
|
|
{{!-- files are dragged over editor pane --}}
|
|
{{#if editor.isDraggedOver}}
|
|
<div class="drop-target gh-editor-drop-target">
|
|
<div class="drop-target-message">
|
|
<h3>Drop image(s) here to upload</h3>
|
|
</div>
|
|
</div>
|
|
{{/if}}
|
|
|
|
{{!-- files have been dropped ready to be uploaded --}}
|
|
{{#if editor.droppedFiles}}
|
|
{{#gh-uploader
|
|
files=editor.droppedFiles
|
|
accept=editor.imageMimeTypes
|
|
extensions=editor.imageExtensions
|
|
onComplete=(action editor.uploadComplete)
|
|
onCancel=(action editor.uploadCancelled)
|
|
as |upload|
|
|
}}
|
|
<div class="gh-editor-image-upload {{if upload.errors "-error"}}">
|
|
<div class="gh-editor-image-upload-content">
|
|
{{#if upload.errors}}
|
|
<h3>Upload failed</h3>
|
|
|
|
{{#each upload.errors as |error|}}
|
|
<div class="failed">{{error.fileName}} - {{error.message}}</div>
|
|
{{/each}}
|
|
|
|
<button class="gh-btn gh-btn-grey gh-btn-icon" {{action upload.cancel}}>
|
|
<span>{{svg-jar "close"}} Close</span>
|
|
</button>
|
|
{{else}}
|
|
|
|
<h3>Uploading {{pluralize upload.files.length "image"}}...</h3>
|
|
{{upload.progressBar}}
|
|
{{/if}}
|
|
</div>
|
|
</div>
|
|
{{/gh-uploader}}
|
|
{{/if}}
|
|
|
|
{{/if}} {{!-- end Koenig conditional --}}
|
|
|
|
{{#unless editor.headerClass}}
|
|
{{#if wordCount}}
|
|
<div class="absolute right-6 bottom-4 pa1 pl4 pr4 br3 bg-white-90">
|
|
<span class="f-small midgrey">
|
|
{{pluralize wordCount.wordCount "word"}}
|
|
</span>
|
|
</div>
|
|
{{/if}}
|
|
{{/unless}}
|
|
{{/gh-editor}}
|
|
|
|
{{#if showDeletePostModal}}
|
|
{{gh-fullscreen-modal "delete-post"
|
|
model=(hash post=post onSuccess=(route-action 'redirectToContentScreen'))
|
|
close=(action "toggleDeletePostModal")
|
|
modifier="action wide"}}
|
|
{{/if}}
|
|
|
|
{{#if showLeaveEditorModal}}
|
|
{{gh-fullscreen-modal "leave-editor"
|
|
confirm=(action "leaveEditor")
|
|
close=(action "toggleLeaveEditorModal")
|
|
modifier="action wide"}}
|
|
{{/if}}
|
|
|
|
{{#if showReAuthenticateModal}}
|
|
{{gh-fullscreen-modal "re-authenticate"
|
|
close=(action "toggleReAuthenticateModal")
|
|
modifier="action wide"}}
|
|
{{/if}}
|
|
|
|
{{#liquid-wormhole}}
|
|
{{gh-post-settings-menu
|
|
post=post
|
|
showSettingsMenu=ui.showSettingsMenu
|
|
deletePost=(action "toggleDeletePostModal")
|
|
updateSlug=updateSlug
|
|
savePost=savePost
|
|
}}
|
|
{{/liquid-wormhole}}
|
|
{{/if}}
|
|
|
|
{{outlet}} |