From cf8b372fedba4a216b29420805568d54adf45e06 Mon Sep 17 00:00:00 2001 From: Kevin Ansfield Date: Wed, 11 May 2022 23:46:01 +0100 Subject: [PATCH] Added fullscreen preview with toggle to publish flow refs https://github.com/TryGhost/Team/issues/1621 - copied existing preview modal over to `editor-labs/modals` directory - old modal will be deleted in cleanup - moved "Preview" button from editor template to the `` component - allows for preview modal to be controlled alongside the publish flow modal - added `togglePreviewPublish()` action to `` - opens whichever of preview/publish is not currently open, this opens the new modal on top of the old modal - waits for the modal animation duration to pass then closes the modal that's now underneath, this prevents the flashing that occurs when modals are both opening and closing at the same time because that results in a 50% opacity of both modals during the middle of the animation - updated preview modal and publish-flow modals to have "Publish" and "Preview" buttons respectively that call the `togglePreviewPublish` action - updated preview modal to be fullscreen to better match the publish modal --- .../components/editor-labs/modals/preview.hbs | 50 ++++ .../components/editor-labs/modals/preview.js | 41 +++ .../editor-labs/modals/preview/browser.hbs | 23 ++ .../editor-labs/modals/preview/browser.js | 11 + .../editor-labs/modals/preview/email.hbs | 39 +++ .../editor-labs/modals/preview/email.js | 161 +++++++++++ .../editor-labs/modals/preview/mobile.hbs | 27 ++ .../editor-labs/modals/preview/mobile.js | 11 + .../editor-labs/modals/preview/social.hbs | 258 ++++++++++++++++++ .../editor-labs/modals/preview/social.js | 209 ++++++++++++++ .../editor-labs/modals/publish-flow.hbs | 10 + .../modals/publish-flow/confirm.js | 2 +- .../editor-labs/publish-management.hbs | 6 + .../editor-labs/publish-management.js | 36 ++- ghost/admin/app/controllers/editor.js | 2 +- .../app/styles/components/publishmenu.css | 4 +- ghost/admin/app/templates/editor.hbs | 2 +- 17 files changed, 887 insertions(+), 5 deletions(-) create mode 100644 ghost/admin/app/components/editor-labs/modals/preview.hbs create mode 100644 ghost/admin/app/components/editor-labs/modals/preview.js create mode 100644 ghost/admin/app/components/editor-labs/modals/preview/browser.hbs create mode 100644 ghost/admin/app/components/editor-labs/modals/preview/browser.js create mode 100644 ghost/admin/app/components/editor-labs/modals/preview/email.hbs create mode 100644 ghost/admin/app/components/editor-labs/modals/preview/email.js create mode 100644 ghost/admin/app/components/editor-labs/modals/preview/mobile.hbs create mode 100644 ghost/admin/app/components/editor-labs/modals/preview/mobile.js create mode 100644 ghost/admin/app/components/editor-labs/modals/preview/social.hbs create mode 100644 ghost/admin/app/components/editor-labs/modals/preview/social.js diff --git a/ghost/admin/app/components/editor-labs/modals/preview.hbs b/ghost/admin/app/components/editor-labs/modals/preview.hbs new file mode 100644 index 0000000000..4114e0feb2 --- /dev/null +++ b/ghost/admin/app/components/editor-labs/modals/preview.hbs @@ -0,0 +1,50 @@ +
+
+
+ +
+
+
+ + + {{#if (and (not-eq this.settings.membersSignupAccess "none") (not-eq this.settings.editorDefaultEmailRecipients "disabled"))}} + {{#if @data.post.isPost}} + + {{/if}} + {{/if}} + +
+
+
+ +
+
+ + {{#if this.saveFirstTask.isRunning}} + + {{else}} + {{#if (eq this.tab "browser")}} + + {{/if}} + + {{#if (and (eq this.tab "mobile"))}} + + {{/if}} + + {{#if (and (eq this.tab "email") @data.post.isPost)}} + + {{/if}} + + {{#if (eq this.tab "social")}} + + {{/if}} + {{/if}} +
\ No newline at end of file diff --git a/ghost/admin/app/components/editor-labs/modals/preview.js b/ghost/admin/app/components/editor-labs/modals/preview.js new file mode 100644 index 0000000000..4e2ae25f4a --- /dev/null +++ b/ghost/admin/app/components/editor-labs/modals/preview.js @@ -0,0 +1,41 @@ +import Component from '@glimmer/component'; +import {action} from '@ember/object'; +import {inject as service} from '@ember/service'; +import {task} from 'ember-concurrency'; +import {tracked} from '@glimmer/tracking'; + +export default class EditorPostPreviewModal extends Component { + @service settings; + @service session; + + static modalOptions = { + className: 'fullscreen-modal-total-overlay', + omitBackdrop: true, + ignoreBackdropClick: true + }; + + @tracked tab = 'browser'; + + constructor() { + super(...arguments); + this.saveFirstTask.perform(); + } + + @action + changeTab(tab) { + this.tab = tab; + } + + @task + *saveFirstTask() { + const {saveTask, post, hasDirtyAttributes} = this.args.data; + + if (saveTask.isRunning) { + return yield saveTask.last; + } + + if (post.isDraft && hasDirtyAttributes) { + yield saveTask.perform(); + } + } +} diff --git a/ghost/admin/app/components/editor-labs/modals/preview/browser.hbs b/ghost/admin/app/components/editor-labs/modals/preview/browser.hbs new file mode 100644 index 0000000000..7aee445faa --- /dev/null +++ b/ghost/admin/app/components/editor-labs/modals/preview/browser.hbs @@ -0,0 +1,23 @@ +
+ +
+
+ Share preview privately +
+ {{@post.previewUrl}} +
+ +
+ + Open in new tab {{svg-jar "external"}} + +
+
\ No newline at end of file diff --git a/ghost/admin/app/components/editor-labs/modals/preview/browser.js b/ghost/admin/app/components/editor-labs/modals/preview/browser.js new file mode 100644 index 0000000000..7aeb506727 --- /dev/null +++ b/ghost/admin/app/components/editor-labs/modals/preview/browser.js @@ -0,0 +1,11 @@ +import Component from '@glimmer/component'; +import copyTextToClipboard from 'ghost-admin/utils/copy-text-to-clipboard'; +import {task, timeout} from 'ember-concurrency'; + +export default class ModalPostPreviewBrowserComponent extends Component { + @task + *copyPreviewUrl() { + copyTextToClipboard(this.args.post.previewUrl); + yield timeout(this.isTesting ? 50 : 3000); + } +} diff --git a/ghost/admin/app/components/editor-labs/modals/preview/email.hbs b/ghost/admin/app/components/editor-labs/modals/preview/email.hbs new file mode 100644 index 0000000000..7df5d59f7b --- /dev/null +++ b/ghost/admin/app/components/editor-labs/modals/preview/email.hbs @@ -0,0 +1,39 @@ +
+
+
+

+ {{or this.newsletter.senderName this.settings.title}} <{{full-email-address (or this.newsletter.senderEmail "noreply")}}> +

+

To: Jamie Larson <jamie@example.com>

+
+ +
+
+
+
+ + +
+ +
+ + {{#if this.sendPreviewEmailError}} +
{{this.sendPreviewEmailError}}
+ {{/if}} +
+ + +
diff --git a/ghost/admin/app/components/editor-labs/modals/preview/email.js b/ghost/admin/app/components/editor-labs/modals/preview/email.js new file mode 100644 index 0000000000..809cdb637a --- /dev/null +++ b/ghost/admin/app/components/editor-labs/modals/preview/email.js @@ -0,0 +1,161 @@ +import Component from '@glimmer/component'; +import validator from 'validator'; +import {action} from '@ember/object'; +import {htmlSafe} from '@ember/template'; +import {inject as service} from '@ember/service'; +import {task, timeout} from 'ember-concurrency'; +import {tracked} from '@glimmer/tracking'; + +const INJECTED_CSS = ` +html::-webkit-scrollbar { + display: none; + width: 0; + background: transparent +} +html { + scrollbar-width: none; +} +`; + +// TODO: remove duplication with +export default class ModalPostPreviewEmailComponent extends Component { + @service ajax; + @service config; + @service feature; + @service ghostPaths; + @service session; + @service settings; + @service store; + + @tracked html = ''; + @tracked subject = ''; + @tracked memberSegment = 'status:free'; + @tracked previewEmailAddress = this.session.user.email; + @tracked sendPreviewEmailError = ''; + @tracked newsletter = null; + + get mailgunIsEnabled() { + return this.config.get('mailgunIsConfigured') || + !!(this.settings.get('mailgunApiKey') && this.settings.get('mailgunDomain') && this.settings.get('mailgunBaseUrl')); + } + + @action + async renderEmailPreview(iframe) { + this._previewIframe = iframe; + + await this._fetchEmailData(); + // avoid timing issues when _fetchEmailData didn't perform any async ops + await timeout(100); + + if (iframe) { + iframe.contentWindow.document.open(); + iframe.contentWindow.document.write(this.html); + iframe.contentWindow.document.close(); + } + } + + @action + changeMemberSegment(segment) { + this.memberSegment = segment; + + if (this._previewIframe) { + this.renderEmailPreview(this._previewIframe); + } + } + + @task({drop: true}) + *sendPreviewEmailTask() { + try { + const resourceId = this.args.post.id; + const testEmail = this.previewEmailAddress.trim(); + + if (!validator.isEmail(testEmail)) { + this.sendPreviewEmailError = 'Please enter a valid email'; + return false; + } + if (!this.mailgunIsEnabled) { + this.sendPreviewEmailError = 'Please verify your email settings'; + return false; + } + this.sendPreviewEmailError = ''; + + const url = this.ghostPaths.url.api('/email_previews/posts', resourceId); + const data = {emails: [testEmail], memberSegment: this.memberSegment}; + const options = { + data, + dataType: 'json' + }; + + yield this.ajax.post(url, options); + return true; + } catch (error) { + if (error) { + let message = 'Email could not be sent, verify mail settings'; + + // grab custom error message if present + if ( + error.payload && error.payload.errors + && error.payload.errors[0] && error.payload.errors[0].message) { + message = htmlSafe(error.payload.errors[0].message); + } + + this.sendPreviewEmailError = message; + throw error; + } + } + } + + async _fetchEmailData() { + let {html, subject, memberSegment} = this; + let {post} = this.args; + + // Fetch newsletter + if (!this.newsletter && post.newsletter) { + this.newsletter = post.newsletter; + } + + if (!this.newsletter) { + const newsletters = (await this.store.query('newsletter', {filter: 'status:active', limit: 1})).toArray(); + const defaultNewsletter = newsletters[0]; + this.newsletter = defaultNewsletter; + } + + if (html && subject && memberSegment === this._lastMemberSegment) { + return {html, subject}; + } + + this._lastMemberSegment = memberSegment; + + // model is an email + if (post.html && post.subject) { + html = post.html; + subject = post.subject; + // model is a post with an existing email + } else if (post.email) { + html = post.email.html; + subject = post.email.subject; + // model is a post, fetch email preview + } else { + let url = new URL(this.ghostPaths.url.api('/email_previews/posts', post.id), window.location.href); + url.searchParams.set('memberSegment', this.memberSegment); + + let response = await this.ajax.request(url.href); + let [emailPreview] = response.email_previews; + html = emailPreview.html; + subject = emailPreview.subject; + } + + // inject extra CSS into the html for disabling links and scrollbars etc + let domParser = new DOMParser(); + let htmlDoc = domParser.parseFromString(html, 'text/html'); + let stylesheet = htmlDoc.querySelector('style'); + let originalCss = stylesheet.innerHTML; + stylesheet.innerHTML = `${originalCss}\n\n${INJECTED_CSS}`; + + const doctype = new XMLSerializer().serializeToString(htmlDoc.doctype); + html = doctype + htmlDoc.documentElement.outerHTML; + + this.html = html; + this.subject = subject; + } +} diff --git a/ghost/admin/app/components/editor-labs/modals/preview/mobile.hbs b/ghost/admin/app/components/editor-labs/modals/preview/mobile.hbs new file mode 100644 index 0000000000..bea3134074 --- /dev/null +++ b/ghost/admin/app/components/editor-labs/modals/preview/mobile.hbs @@ -0,0 +1,27 @@ +
+
+
+ +
+
+
+
+ Share preview privately +
+ {{@post.previewUrl}} +
+ + +
\ No newline at end of file diff --git a/ghost/admin/app/components/editor-labs/modals/preview/mobile.js b/ghost/admin/app/components/editor-labs/modals/preview/mobile.js new file mode 100644 index 0000000000..7aeb506727 --- /dev/null +++ b/ghost/admin/app/components/editor-labs/modals/preview/mobile.js @@ -0,0 +1,11 @@ +import Component from '@glimmer/component'; +import copyTextToClipboard from 'ghost-admin/utils/copy-text-to-clipboard'; +import {task, timeout} from 'ember-concurrency'; + +export default class ModalPostPreviewBrowserComponent extends Component { + @task + *copyPreviewUrl() { + copyTextToClipboard(this.args.post.previewUrl); + yield timeout(this.isTesting ? 50 : 3000); + } +} diff --git a/ghost/admin/app/components/editor-labs/modals/preview/social.hbs b/ghost/admin/app/components/editor-labs/modals/preview/social.hbs new file mode 100644 index 0000000000..407242ac36 --- /dev/null +++ b/ghost/admin/app/components/editor-labs/modals/preview/social.hbs @@ -0,0 +1,258 @@ + +
+

This is how your content will look when shared, you can click on any elements you’d like to edit.

+
+
+
+
+ {{svg-jar "social-facebook" class="social-icon"}} +
+
{{or this.settings.metaTitle this.settings.title}}
+
12 hrs
+
+
+
+ + + +
+
+ {{#if (and this.facebookHovered (not this.facebookImage))}} + {{!-- only shown on hover when there's no image or fallback --}} + + {{/if}} + + + {{#each uploader.errors as |error|}} +
{{or error.context error.message}}
+ {{/each}} + + {{#if (or this.facebookImage uploader.isUploading)}} +
+
+ {{#if (or this.facebookHovered uploader.isUploading)}} + {{#if uploader.isUploading}} + {{uploader.progressBar}} + {{else}} + + {{/if}} + {{/if}} + + {{#if (and this.facebookHovered @post.ogImage)}} + + {{/if}} +
+
+ {{/if}} + +
+ +
+ + +
+ {{!-- Ensures description is hidden if title exceeds one line --}} +
+
+ {{this.config.blogDomain}} +
+ {{#if this.editingFacebookTitle}} + + {{else}} +
+ {{truncate this.facebookTitle}} +
+ {{/if}} + {{#if this.editingFacebookDescription}} + + {{else}} +
+ {{truncate this.facebookDescription}} +
+ {{/if}} +
+
+
+
+ {{svg-jar "facebook-like" class="z-999"}}{{svg-jar "facebook-heart" class="nl1"}}182 + 7 comments + 2 shares +
+
+ + +
+ +
+ {{svg-jar "google"}} +
+
{{svg-jar "google-search"}}
+
{{this.serpURL}}
+ {{#if this.editingMetaTitle}} + + {{else}} +
+ {{this.serpTitle}} +
+ {{/if}} + {{#if this.editingMetaDescription}} + + {{else}} +
+ {{moment-format (now) "DD MMM YYYY"}} — {{truncate this.serpDescription 149}} +
+ {{/if}} +
+
+
+
\ No newline at end of file diff --git a/ghost/admin/app/components/editor-labs/modals/preview/social.js b/ghost/admin/app/components/editor-labs/modals/preview/social.js new file mode 100644 index 0000000000..aec87454de --- /dev/null +++ b/ghost/admin/app/components/editor-labs/modals/preview/social.js @@ -0,0 +1,209 @@ +import Component from '@glimmer/component'; +import { + IMAGE_EXTENSIONS, + IMAGE_MIME_TYPES +} from 'ghost-admin/components/gh-image-uploader'; +import {action} from '@ember/object'; +import {inject as service} from '@ember/service'; +import {tracked} from '@glimmer/tracking'; +export default class ModalPostPreviewSocialComponent extends Component { + @service config; + @service settings; + @service ghostPaths; + + @tracked editingFacebookTitle = false; + @tracked editingFacebookDescription = false; + @tracked editingTwitterTitle = false; + @tracked editingTwitterDescription = false; + @tracked editingMetaTitle = false; + @tracked editingMetaDescription = false; + + imageExtensions = IMAGE_EXTENSIONS; + imageMimeTypes = IMAGE_MIME_TYPES; + + get _fallbackDescription() { + return this.args.post.customExcerpt || + this.serpDescription || + this.settings.get('description'); + } + + @action + blurElement(event) { + if (!event.shiftKey) { + event.preventDefault(); + event.target.blur(); + } + } + + @action + triggerFileDialog(name) { + const input = document.querySelector(`#${name}FileInput input`); + if (input) { + input.click(); + } + } + + // SERP + + get serpTitle() { + return this.args.post.metaTitle || this.args.post.title || '(Untitled)'; + } + + get serpURL() { + const urlParts = []; + + if (this.args.post.canonicalUrl) { + const canonicalUrl = new URL(this.args.post.canonicalUrl); + urlParts.push(canonicalUrl.host); + urlParts.push(...canonicalUrl.pathname.split('/').reject(p => !p)); + } else { + const blogUrl = new URL(this.config.get('blogUrl')); + urlParts.push(blogUrl.host); + urlParts.push(...blogUrl.pathname.split('/').reject(p => !p)); + urlParts.push(this.args.post.slug); + } + + return urlParts.join(' > '); + } + + get serpDescription() { + return this.args.post.metaDescription || this.args.post.excerpt; + } + + @action + editMetaTitle() { + this.editingMetaTitle = true; + } + + @action + setMetaTitle(event) { + const title = event.target.value; + this.args.post.metaTitle = title.trim(); + this.args.post.save(); + this.editingMetaTitle = false; + } + + @action + editMetaDescription() { + this.editingMetaDescription = true; + } + + @action + setMetaDescription(event) { + const description = event.target.value; + this.args.post.metaDescription = description.trim(); + this.args.post.save(); + this.editingMetaDescription = false; + } + + // Facebook + + get facebookTitle() { + return this.args.post.ogTitle || this.serpTitle; + } + + get facebookDescription() { + return this.args.post.ogDescription || this._fallbackDescription; + } + + get facebookImage() { + return this.args.post.ogImage || this.args.post.featureImage || this.settings.get('ogImage') || this.settings.get('coverImage'); + } + + @action + editFacebookTitle() { + this.editingFacebookTitle = true; + } + + @action + cancelEdit(property, event) { + event.preventDefault(); + event.target.value = this.args.post[property]; + event.target.blur(); + } + + @action + setFacebookTitle(event) { + const title = event.target.value; + this.args.post.ogTitle = title.trim(); + this.args.post.save(); + this.editingFacebookTitle = false; + } + + @action + editFacebookDescription() { + this.editingFacebookDescription = true; + } + + @action + setFacebookDescription() { + const description = event.target.value; + this.args.post.ogDescription = description.trim(); + this.args.post.save(); + this.editingFacebookDescription = false; + } + + @action + setFacebookImage([image]) { + this.args.post.ogImage = image.url; + this.args.post.save(); + } + + @action + clearFacebookImage() { + this.args.post.ogImage = null; + this.args.post.save(); + } + + // Twitter + + get twitterTitle() { + return this.args.post.twitterTitle || this.serpTitle; + } + + get twitterDescription() { + return this.args.post.twitterDescription || this._fallbackDescription; + } + + get twitterImage() { + return this.args.post.twitterImage || this.args.post.featureImage || this.settings.get('twitterImage') || this.settings.get('coverImage'); + } + + @action + editTwitterTitle() { + this.editingTwitterTitle = true; + } + + @action + setTwitterTitle(event) { + const title = event.target.value; + this.args.post.twitterTitle = title.trim(); + this.args.post.save(); + this.editingTwitterTitle = false; + } + + @action + editTwitterDescription() { + this.editingTwitterDescription = true; + } + + @action + setTwitterDescription() { + const description = event.target.value; + this.args.post.twitterDescription = description.trim(); + this.args.post.save(); + this.editingTwitterDescription = false; + } + + @action + setTwitterImage([image]) { + this.args.post.twitterImage = image.url; + this.args.post.save(); + } + + @action + clearTwitterImage() { + this.args.post.twitterImage = null; + this.args.post.save(); + } +} diff --git a/ghost/admin/app/components/editor-labs/modals/publish-flow.hbs b/ghost/admin/app/components/editor-labs/modals/publish-flow.hbs index 0e412d6218..9ca8920151 100644 --- a/ghost/admin/app/components/editor-labs/modals/publish-flow.hbs +++ b/ghost/admin/app/components/editor-labs/modals/publish-flow.hbs @@ -3,6 +3,16 @@ + + {{#unless this.isComplete}} + + {{/unless}}
diff --git a/ghost/admin/app/components/editor-labs/modals/publish-flow/confirm.js b/ghost/admin/app/components/editor-labs/modals/publish-flow/confirm.js index 7a1692cbea..a97e99ad68 100644 --- a/ghost/admin/app/components/editor-labs/modals/publish-flow/confirm.js +++ b/ghost/admin/app/components/editor-labs/modals/publish-flow/confirm.js @@ -68,7 +68,7 @@ export default class PublishFlowOptions extends Component { let errorMessage = ''; if (isServerUnreachableError(e)) { - errorMessage = 'Unable to connect, please check your connection and try again'; + errorMessage = 'Unable to connect, please check your internet connection and try again'; } else if (e && isString(e)) { errorMessage = e; } else if (e && isArray(e)) { diff --git a/ghost/admin/app/components/editor-labs/publish-management.hbs b/ghost/admin/app/components/editor-labs/publish-management.hbs index daf7333db1..281c6ad7b6 100644 --- a/ghost/admin/app/components/editor-labs/publish-management.hbs +++ b/ghost/admin/app/components/editor-labs/publish-management.hbs @@ -1,4 +1,10 @@ {{#if @post.isDraft}} +
+ +
+