Merge pull request #18 from mjmlio/fix-panes-opening

fix multi panes opening by associating each pane with source file pane
mjmlio · Apr 11, 2018 · 6742526 · 6742526
2 parents 6524156 + a7c3c5b
commit 6742526
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 15 deletions.
diff --git a/lib/mjml-preview.js b/lib/mjml-preview.js
@@ -48,17 +48,20 @@ export default {
     }
 
     if (currentEditor.id === atom.workspace.getActiveTextEditor().id) {
-      const uri = 'mjml-preview://file'
+      const uri = `mjml-preview://editor/${currentEditor.id}`
       const fileGrammar = currentEditor.getGrammar()
-
       if (fileGrammar.scopeName !== 'text.mjml.basic') {
         return;
       }
 
       const previousActivePane = atom.workspace.getActivePane()
 
       atom.workspace.open(uri, { split: 'right', searchAllPanes: true })
-        .then(() => MJMLPaneView.render(currentEditor))
+        .then((view) => {
+          if (view instanceof MJMLView) {
+            return view.render(currentEditor)
+          }
+        })
         .done(() => previousActivePane.activate())
     }
   },
@@ -72,7 +75,7 @@ export default {
 
       const filePath = decodeURI(pathname)
 
-      MJMLPaneView = new MJMLView(filePath)
+      MJMLPaneView = new MJMLView({editorId: filePath.substring(1), filePath})
 
       return MJMLPaneView
     } catch (e) {

diff --git a/lib/mjml-view.js b/lib/mjml-view.js
@@ -7,26 +7,46 @@ import { $, ScrollView } from 'atom-space-pen-views'
 import { mjml2html } from 'mjml'
 
 class MJMLView extends ScrollView {
-  static serialiaze() {
+  static serialize() {
     return {
-      deserializer: 'AtomHtmlPreviewView',
+      deserializer: 'MJMLView',
       filePath: this.filePath,
+      editorId: this.editorId
     }
   }
 
-  static deserialize ({ filePath }) {
-    return new MJMLView(filePath)
+  static deserialize (state) {
+    return new MJMLView(state)
   }
 
   static content () {
     return MJMLView.div({ 'class': 'atom-html-preview native-key-bindings', 'tabindex': -1 })
   }
 
-  constructor(filePath) {
+  constructor({editorId, filePath}) {
     super()
+    this.webViewLoaded = false
+    this.reloadLater = false
     this.filePath = filePath
+    this.editorId = editorId
     atom.deserializers.add(this)
+
+    if (this.editorId) {
+      this.editor = this.editorForId(this.editorId)
+    }
+
     this.createWebView()
+    this.addReadyListener()
+  }
+
+  addReadyListener() {
+    this.webview.addEventListener('dom-ready', () => {
+      this.webViewLoaded = true
+      if (this.reloadLater) {
+        this.reloadLater = false
+        this.webview.reload()
+      }
+    })
   }
 
   createWebView() {
@@ -36,6 +56,14 @@ class MJMLView extends ScrollView {
     this.append($(this.webview))
   }
 
+  editorForId(editorId) {
+    const editors = atom.workspace.getTextEditors()
+    for (let i = 0 ; i < editors.length ; i++) {
+      const editor = editors[i]
+      if (editor && editor.id === parseInt(editorId)) return editor
+    }
+  }
+
   renderMJML(TextEditor, done) {
     const mjmlTempPath = path.resolve(path.join(os.tmpdir(), `${TextEditor.getTitle()}.html`))
     const outputHTML = mjml2html(TextEditor.getText(), { level: 'skip', disableMinify: true, filePath: TextEditor.getPath() }).html
@@ -52,20 +80,25 @@ class MJMLView extends ScrollView {
   render(TextEditor) {
     this.renderMJML(TextEditor, (file) => {
       this.webview.src = file
-      try {
-        this.webview.reload()
-      } catch (error) {
-        return null
+
+      if (this.webViewLoaded) {
+        try {
+          this.webview.reload()
+        } catch (error) {
+          return null
+        }
+      } else {
+        this.reloadLater = true
       }
     })
   }
 
   getTitle() {
-    return 'MJML Preview'
+    return `PREVIEW - ${this.editor.getTitle()}`
   }
 
   getURI() {
-    return `mjml-preview://file`
+    return `mjml-preview://editor/${this.editorId}`
   }
 }