2019-11-05 08:21:29 +03:00
|
|
|
import ModalComponent from 'ghost-admin/components/modal-base';
|
|
|
|
import {action} from '@ember/object';
|
|
|
|
import {alias} from '@ember/object/computed';
|
|
|
|
import {inject as service} from '@ember/service';
|
2020-12-10 14:38:38 +03:00
|
|
|
import {timeout} from 'ember-concurrency';
|
2019-11-05 08:21:29 +03:00
|
|
|
|
2019-11-13 19:38:32 +03:00
|
|
|
const INJECTED_CSS = `
|
|
|
|
html::-webkit-scrollbar {
|
|
|
|
display: none;
|
|
|
|
width: 0;
|
|
|
|
background: transparent
|
|
|
|
}
|
|
|
|
html {
|
|
|
|
scrollbar-width: none;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
2019-11-05 08:21:29 +03:00
|
|
|
export default ModalComponent.extend({
|
|
|
|
ghostPaths: service(),
|
|
|
|
ajax: service(),
|
2020-11-16 14:16:51 +03:00
|
|
|
settings: service(),
|
|
|
|
config: service(),
|
2019-11-07 13:11:53 +03:00
|
|
|
|
2019-11-05 08:21:29 +03:00
|
|
|
type: 'desktop',
|
2019-11-13 19:38:32 +03:00
|
|
|
html: '',
|
|
|
|
subject: '',
|
2019-11-07 13:11:53 +03:00
|
|
|
|
2019-11-05 08:21:29 +03:00
|
|
|
post: alias('model'),
|
2019-11-07 13:11:53 +03:00
|
|
|
|
2019-11-05 08:21:29 +03:00
|
|
|
actions: {
|
|
|
|
changeType(type) {
|
|
|
|
this.set('type', type);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2020-12-10 14:38:38 +03:00
|
|
|
renderEmailPreview: action(async function renderEmailPreview(iframe) {
|
2019-11-13 19:38:32 +03:00
|
|
|
await this._fetchEmailData();
|
2020-12-10 14:38:38 +03:00
|
|
|
// avoid timing issues when _fetchEmailData didn't perform any async ops
|
|
|
|
await timeout(100);
|
2019-11-05 08:21:29 +03:00
|
|
|
|
2019-11-13 19:38:32 +03:00
|
|
|
if (iframe) {
|
|
|
|
iframe.contentWindow.document.open();
|
|
|
|
iframe.contentWindow.document.write(this.html);
|
|
|
|
iframe.contentWindow.document.close();
|
|
|
|
}
|
|
|
|
}),
|
2019-11-07 13:11:53 +03:00
|
|
|
|
2019-11-13 19:38:32 +03:00
|
|
|
async _fetchEmailData() {
|
|
|
|
let {html, subject} = this;
|
2019-11-07 13:11:53 +03:00
|
|
|
|
2019-11-13 19:38:32 +03:00
|
|
|
if (html && subject) {
|
|
|
|
return {html, subject};
|
|
|
|
}
|
2019-11-07 13:11:53 +03:00
|
|
|
|
2020-12-10 14:38:38 +03:00
|
|
|
// model is an email
|
|
|
|
if (this.model.html && this.model.subject) {
|
|
|
|
html = this.model.html;
|
|
|
|
subject = this.model.subject;
|
|
|
|
// model is a post with an existing email
|
|
|
|
} else if (this.post.email) {
|
2019-11-13 19:38:32 +03:00
|
|
|
html = this.post.email.html;
|
|
|
|
subject = this.post.email.subject;
|
2020-12-10 14:38:38 +03:00
|
|
|
// model is a post, fetch email preview
|
2019-11-13 19:38:32 +03:00
|
|
|
} else {
|
|
|
|
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;
|
2019-11-05 08:21:29 +03:00
|
|
|
}
|
2019-11-13 19:38:32 +03:00
|
|
|
|
|
|
|
// 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});
|
|
|
|
}
|
2019-11-05 08:21:29 +03:00
|
|
|
});
|