Fixed scrolling and hid scrollbars in email preview

TryGhost · Nov 7, 2019 · d75f826 · d75f826
1 parent 9e30d40
commit d75f826
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 10 deletions.
diff --git a/app/components/modal-post-email-preview.js b/app/components/modal-post-email-preview.js
@@ -6,10 +6,13 @@ 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);
@@ -22,22 +25,45 @@ export default ModalComponent.extend({
             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 = `
+html::-webkit-scrollbar {
+    display: none;
+    width: 0;
+    background: transparent
+}
+html {
+    scrollbar-width: none;
+}
+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(htmlData);
+                iframe.contentWindow.document.write(htmlDoc.documentElement.innerHTML);
                 iframe.contentWindow.document.close();
             }
+
             this.set('previewHtml', htmlData);
             this.set('previewEmailSubject', emailSubject);
         } catch (error) {
+            console.log({error});
             // re-throw if we don't have a validation error
             if (error) {
                 throw error;

diff --git a/app/styles/layouts/preview-email.css b/app/styles/layouts/preview-email.css
@@ -104,12 +104,8 @@
     overflow: hidden;
 }
 
-.gh-pe-iframe {
-    pointer-events: none !important;
-}
-
 .gh-pe-mobile-container .gh-pe-iframe {
-    height: 100%; 
+    height: 100%;
     width: calc(43vh - 40px);
     overflow-x: hidden;
     padding: 0;
@@ -119,8 +115,8 @@
     .gh-pe-header {
         flex-direction: column;
     }
-    
+
     .gh-pe-header h2 {
         display: none
     }
-}
+}
diff --git a/app/templates/components/modal-post-email-preview.hbs b/app/templates/components/modal-post-email-preview.hbs
@@ -10,15 +10,17 @@
         </button>
     </div>
 </header>
+
 {{#if (eq type "mobile")}}
     <div class="modal-body modal-preview-email-content gh-pe-mobile-container" style="display: flex;justify-content: center;padding-top: 12px;">
-        <div class="gh-pe-mobile-bezel"> 
-            <div class="gh-pe-mobile-screen"> 
+        <div class="gh-pe-mobile-bezel">
+            <div class="gh-pe-mobile-screen">
                 <iframe class="bn gh-pe-iframe" {{did-insert this.renderEmailPreview}}></iframe>
             </div>
         </div>
     </div>
 {{/if}}
+
 {{#if (eq type "desktop")}}
     <div class="modal-body modal-preview-email-content gh-pe-desktop-container">
         <iframe class="bn miw-100 gh-pe-iframe" style="height:100%;" {{did-insert this.renderEmailPreview}}></iframe>