From 2fd85c84de752df0e2b898cfaec5eade036e71c3 Mon Sep 17 00:00:00 2001 From: Kevin Ansfield Date: Wed, 13 Nov 2019 16:38:32 +0000 Subject: [PATCH] Added "View email" button to view already-sent email no issue - refactored `renderEmailPreview` into separate fetch and render functions - grab email info from an existing email resource if it exists on the post rather than fetching a preview - added "View email" button the the email-sent state of the newsletter settings PSM section --- app/components/gh-post-settings-menu/email.js | 9 +- app/components/modal-post-email-preview.js | 109 +++++++++--------- .../gh-post-settings-menu/email.hbs | 4 +- 3 files changed, 64 insertions(+), 58 deletions(-) diff --git a/app/components/gh-post-settings-menu/email.js b/app/components/gh-post-settings-menu/email.js index 20462ddf6..fae489e3c 100644 --- a/app/components/gh-post-settings-menu/email.js +++ b/app/components/gh-post-settings-menu/email.js @@ -1,5 +1,6 @@ import Component from '@ember/component'; import validator from 'validator'; +import {action} from '@ember/object'; import {alias, oneWay, or} from '@ember/object/computed'; import {computed} from '@ember/object'; import {inject as service} from '@ember/service'; @@ -52,15 +53,15 @@ export default Component.extend({ }); }, - toggleEmailPreview() { - this.toggleEmailPreviewModal(); - }, - discardEnter() { return false; } }, + toggleEmailPreview: action(function () { + this.toggleEmailPreviewModal(); + }), + sendTestEmail: task(function* () { try { const resourceId = this.post.id; diff --git a/app/components/modal-post-email-preview.js b/app/components/modal-post-email-preview.js index c636588a3..2873e5cf5 100644 --- a/app/components/modal-post-email-preview.js +++ b/app/components/modal-post-email-preview.js @@ -3,42 +3,7 @@ import {action} from '@ember/object'; import {alias} from '@ember/object/computed'; import {inject as service} from '@ember/service'; -export default ModalComponent.extend({ - ghostPaths: service(), - ajax: service(), - - type: 'desktop', - previewHtml: '', - previewEmailSubject: null, - - post: alias('model'), - - actions: { - changeType(type) { - this.set('type', type); - } - }, - - renderEmailPreview: action(async function renderEmailPreview() { - try { - const resourceId = this.post.id; - const url = this.get('ghostPaths.url').api('/email_preview/posts', resourceId); - let htmlData = this.get('previewHtml'); - let emailSubject = this.get('previewEmailSubject'); - - if (!htmlData) { - const response = await this.ajax.request(url); - let [emailPreview] = response.email_previews; - htmlData = emailPreview.html; - emailSubject = emailPreview.subject; - } - - let domParser = new DOMParser(); - let htmlDoc = domParser.parseFromString(htmlData, 'text/html'); - - let stylesheet = htmlDoc.querySelector('style'); - let originalCss = stylesheet.innerHTML; - let extraCss = ` +const INJECTED_CSS = ` html::-webkit-scrollbar { display: none; width: 0; @@ -50,23 +15,63 @@ html { body { pointer-events: none !important; } - `; - stylesheet.innerHTML = `${originalCss}\n\n${extraCss}`; +`; - let iframe = this.element.querySelector('iframe'); - if (iframe) { - iframe.contentWindow.document.open(); - iframe.contentWindow.document.write(htmlDoc.documentElement.innerHTML); - iframe.contentWindow.document.close(); - } +export default ModalComponent.extend({ + ghostPaths: service(), + ajax: service(), - this.set('previewHtml', htmlData); - this.set('previewEmailSubject', emailSubject); - } catch (error) { - // re-throw if we don't have a validation error - if (error) { - throw error; - } + type: 'desktop', + html: '', + subject: '', + + post: alias('model'), + + actions: { + changeType(type) { + this.set('type', type); } - }) + }, + + renderEmailPreview: action(async function renderEmailPreview() { + await this._fetchEmailData(); + + let iframe = this.element.querySelector('iframe'); + if (iframe) { + iframe.contentWindow.document.open(); + iframe.contentWindow.document.write(this.html); + iframe.contentWindow.document.close(); + } + }), + + async _fetchEmailData() { + let {html, subject} = this; + + if (html && subject) { + return {html, subject}; + } + + if (this.post.email) { + // use sent email + html = this.post.email.html; + subject = this.post.email.subject; + } else { + // fetch email preview + let url = this.get('ghostPaths.url').api('/email_preview/posts', this.post.id); + let response = await this.ajax.request(url); + 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}`; + html = htmlDoc.documentElement.innerHTML; + + this.setProperties({html, subject}); + } }); diff --git a/app/templates/components/gh-post-settings-menu/email.hbs b/app/templates/components/gh-post-settings-menu/email.hbs index 93534a0bc..3e7e3bac0 100644 --- a/app/templates/components/gh-post-settings-menu/email.hbs +++ b/app/templates/components/gh-post-settings-menu/email.hbs @@ -11,6 +11,7 @@

Status: {{this.post.email.status}}

Sent on: {{gh-format-post-time this.post.email.createdAtUTC}}

Sent to {{pluralize this.post.email.emailCount "member"}}

+

{{else}} {{!-- Mail not sent yet --}} {{#if mailgunError}} @@ -40,8 +41,7 @@
-