Added loading.html

shd101wyy · Jul 13, 2017 · fabaf60 · fabaf60
1 parent ae4f84e
commit fabaf60
Show file tree

Hide file tree

Showing 11 changed files with 33 additions and 14 deletions.
diff --git a/assets/octocat-spinner-128.gif b/assets/octocat-spinner-128.gif
diff --git a/html/loading.html b/html/loading.html
@@ -0,0 +1,8 @@
+<html>
+    <head>
+        <link rel="stylesheet" href="../styles/loading.css">
+    </head>
+<body>
+<div class="markdown-spinner"> Loading Preview... </div>
+</body>
+</html>
diff --git a/...5164e511abdce713236952cb0b5d149f3cd94fd06ca078d552040db58685100a6ebe4d76ca0.png b/...5164e511abdce713236952cb0b5d149f3cd94fd06ca078d552040db58685100a6ebe4d76ca0.png
diff --git a/...5164e511abdce713236952cb0b5d149f3cd94fd06ca078d552040db58685100a6ebe4d76ca1.png b/...5164e511abdce713236952cb0b5d149f3cd94fd06ca078d552040db58685100a6ebe4d76ca1.png
diff --git a/...5164e511abdce713236952cb0b5d149f3cd94fd06ca078d552040db58685100a6ebe4d76ca2.png b/...5164e511abdce713236952cb0b5d149f3cd94fd06ca078d552040db58685100a6ebe4d76ca2.png
diff --git a/...5164e511abdce713236952cb0b5d149f3cd94fd06ca078d552040db58685100a6ebe4d76ca3.png b/...5164e511abdce713236952cb0b5d149f3cd94fd06ca078d552040db58685100a6ebe4d76ca3.png
diff --git a/...5164e511abdce713236952cb0b5d149f3cd94fd06ca078d552040db58685100a6ebe4d76ca4.png b/...5164e511abdce713236952cb0b5d149f3cd94fd06ca078d552040db58685100a6ebe4d76ca4.png
diff --git a/out/src/content-provider.js b/out/src/content-provider.js
@@ -12,6 +12,7 @@ const atom_1 = require("atom");
 const path = require("path");
 const mume = require("@shd101wyy/mume");
 // TODO: presentation PDF export.
+// TODO: <!-- @import [toc] -->
 /**
  * Key is editor.getPath()
  * Value is temp html file path.
@@ -45,6 +46,7 @@ class MarkdownPreviewEnhancedView {
         this.iframe.style.width = '100%';
         this.iframe.style.height = '100%';
         this.iframe.style.border = 'none';
+        this.iframe.src = path.resolve(__dirname, '../../html/loading.html');
         this.element.appendChild(this.iframe);
     }
     getURI() {

diff --git a/src/content-provider.ts b/src/content-provider.ts
@@ -5,6 +5,7 @@ import * as mume from "@shd101wyy/mume"
 import {MarkdownPreviewEnhancedConfig} from "./config"
 
 // TODO: presentation PDF export.
+// TODO: <!-- @import [toc] -->
 
 /**
  * Key is editor.getPath()
@@ -48,6 +49,8 @@ export class MarkdownPreviewEnhancedView {
     this.iframe.style.width = '100%'
     this.iframe.style.height = '100%'
     this.iframe.style.border = 'none'
+    this.iframe.src = path.resolve(__dirname, '../../html/loading.html')
+
     this.element.appendChild(this.iframe)
   }
 
@@ -144,7 +147,7 @@ export class MarkdownPreviewEnhancedView {
    * 2. Write preview html template
    * 3. this.iframe will load that *.html file.
    */
-  public async loadPreview() {
+  public async loadPreview() {    
     const editorFilePath = this.editor.getPath()
 
     // create temp html file for preview

diff --git a/styles/loading.css b/styles/loading.css
@@ -0,0 +1,19 @@
+
+html, body {
+  font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
+}
+
+body {
+  background-color: #fff;
+}
+
+body .markdown-spinner {
+  margin: 48px auto;
+  background-image: url(../assets/octocat-spinner-128.gif);
+  background-repeat: no-repeat;
+  background-size: 64px;
+  background-position: top center;
+  padding-top: 70px;
+  text-align: center;
+  font-size: 16px;
+}
diff --git a/styles/loading.less b/styles/loading.less