V1.5.1 Seperate js and css, improve loading speed

hwc0919 · hwc0919 · commit c49a2b97baf8 · 2020-03-12T11:57:33.000+08:00
diff --git a/autopackup.py b/autopackup.py
@@ -1,43 +1,58 @@
-# Watch file changes and auto packup html and bundle.js
+# Watch file changes in './Docs' and auto packup html with js
 
 import hashlib
 import os
 import re
 import time
 
-html_sha = ''
-js_sha = ''
+# Detect difference by comparing MD5
+html_md5 = ''
+js_md5 = ''
+css_md5 = ''
 
 # Loop forever
 while True:
-    files = os.listdir('dist')
+    files = os.listdir('docs')
 
-    # Read html and bundle.js, calculate SHA256
+    # Read html, bundle.js and style.js
     for filename in files:
-        filename = os.path.join('dist', filename)
+        filename = os.path.join('docs', filename)
         if filename.endswith('.html'):
             with open(filename, 'rb') as f:
                 html_txt = f.read()
-        if filename.endswith('.js'):
+        if filename.endswith('bundle.js'):
             with open(filename, 'rb') as f:
                 js_txt = f.read()
-                js_txt = js_txt.replace(b'\\', b'/@placeholder@/')
-    new_html_sha = hashlib.sha256(html_txt).hexdigest()
-    new_js_sha = hashlib.sha256(js_txt).hexdigest()
+        if filename.endswith('style.js'):
+            with open(filename, 'rb') as f:
+                css_txt = f.read()
+
+    # '\' will cause error, replace them
+    js_txt = js_txt.replace(b'\\', b'/@placeholder@/')
+    css_txt = css_txt.replace(b'\\', b'/@placeholder@/')
+
+    # Calculate MD5
+    new_html_md5 = hashlib.md5(html_txt).hexdigest()
+    new_js_md5 = hashlib.md5(js_txt).hexdigest()
+    new_css_md5 = hashlib.md5(css_txt).hexdigest()
 
     # Check for difference and packup
-    if (new_html_sha != html_sha or new_js_sha != js_sha):
+    if (new_html_md5 != html_md5 or new_js_md5 != js_md5 or new_css_md5 != css_md5):
         print('Detect change. Packing...')
-        new_html_txt = re.sub(rb'<script.*?></script>',
-                              b'<script>\n' + js_txt + b'\n</script>',
-                              html_txt)
-        new_html_txt = new_html_txt.replace(b'/@placeholder@/', b'\\')
+        html_txt = re.sub(rb'<script .*?bundle.*?"></script>',
+                          b'<script>\n' + js_txt + b'\n</script>',
+                          html_txt)
+        html_txt = re.sub(rb'<script .*?style.*?"></script>',
+                          b'<script>\n' + css_txt + b'\n</script>',
+                          html_txt)
+        html_txt = html_txt.replace(b'/@placeholder@/', b'\\')
         with open('TreePlaygroundPackup.html', 'wb') as f:
-            f.write(new_html_txt)
+            f.write(html_txt)
         print('Packed...')
 
-    # Update SHA256 value
-    html_sha = new_html_sha
-    js_sha = new_js_sha
+    # Update MD5 value
+    html_md5 = new_html_md5
+    js_md5 = new_js_md5
+    css_md5 = new_css_md5
 
     time.sleep(1)
diff --git a/docs/bundle.js b/docs/bundle.js
diff --git a/docs/index.html b/docs/index.html
@@ -9,6 +9,7 @@
     <meta name="git" content="https://github.com/hwc0919/TreePlayground">
     <link rel="Shortcut Icon" href="/favicon.ico">
     <title>TreePlayground - NitroMelon</title>
+    <script src="./style.js"></script>
 </head>
 
 <body>
diff --git a/docs/style.js b/docs/style.js
diff --git a/src/app.js b/src/app.js
@@ -1,4 +1,5 @@
-import Vue from "../node_modules/vue/dist/vue"
+import "./js/cycle.js";
+import Vue from "../node_modules/vue/dist/vue.min"
 import IntrBinnode from "./components/binnode.vue"
 import ExtrBinnode from "./components/extr-binnode.vue"
 import TopBinnode from "./components/top-binnode.vue"
@@ -223,7 +224,7 @@ var tp = new Vue({
             if (this.isAnyLocked()) return false;
             this.tree.removeBelow(node);
             this.update();
-            this.alertAsync(`Remove Below ${node.data}`);
+            this.showMessage(`Remove Below ${node.data}`);
         },
         // Remove one node
         onRemoveOne(node) {
diff --git a/src/css/index.css b/src/css/index.css
@@ -1,6 +1,3 @@
-@import "./toolbars.css";
-@import "./binnodes.css";
-@import "./edges.css";
 * {
     padding: 0;
     margin: 0;
diff --git a/src/css/toolbars.css b/src/css/toolbars.css
@@ -4,13 +4,12 @@
     justify-content: center;
     align-items: center;
     margin-top: 25px;
-    height: 70px;
+    height: 50px;
     width: 100vw;
-    background-color: rgba(255, 255, 255, 0.8);
 }
 
 .top-toolbar-item {
-    margin: 5px 10px;
+    margin: 2px 10px;
 }
 
 .top-toolbar button {
@@ -33,7 +32,6 @@
 }
 
 .left-toolbar {
-    background-color: rgba(255, 255, 255, 0.8);
     position: fixed;
     display: flex;
     flex-direction: column;
@@ -42,7 +40,6 @@
     top: 150px;
     left: 50px;
     width: 100px;
-    z-index: 10;
 }
 
 .left-toolbar #tree-type-selector {
@@ -88,10 +85,10 @@
         flex-wrap: wrap;
         justify-content: left;
         width: 350px;
-        /* height: 130px; */
+        height: 80px;
         left: 50%;
-        transform: translateX(-50%);
-        transform-origin: center;
+        transform: translateX(-50%) scale(0.9);
+        transform-origin: top;
     }
     #interval-ranger {
         width: 110px;
@@ -100,9 +97,10 @@
         width: 350px;
         padding: 0;
         left: 50%;
-        top: 130px;
-        transform: translateX(-50%);
-        height: 60px;
+        top: 105px;
+        transform: translateX(-50%) scale(0.9);
+        transform-origin: top;
+        height: 50px;
         flex-direction: row;
         justify-content: left;
         align-items: center;
@@ -134,19 +132,19 @@
 /* Phone */
 @media screen and (max-width: 376px) {
     .top-toolbar {
-        width: 300px !important;
+        width: 300px;
         transform: translateX(-50%) scale(0.8);
     }
     .top-toolbar-item {
-        margin: 5px 5px;
+        margin: 0px 5px;
     }
     #interval-ranger {
         width: 100px;
     }
     .left-toolbar {
         width: 300px;
         transform: translateX(-50%) scale(0.8);
-        top: 110px;
+        top: 90px;
     }
     .left-toolbar-item {
         margin: 5px 5px;
@@ -159,6 +157,7 @@
 /* Horizontally */
 @media screen and (max-height: 500px) {
     .left-toolbar {
+        left: 20px;
         top: 100px;
     }
     .left-toolbar #tree-scale-ranger input {
diff --git a/src/main.js b/src/main.js
diff --git a/src/style.js b/src/style.js
@@ -0,0 +1,5 @@
+import "./css/index.css";
+import "./css/button.css";
+import "./css/toolbars.css";
+import "./css/binnodes.css";
+import "./css/edges.css";
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,10 +1,13 @@
 const VueLoaderPlugin = require('vue-loader/lib/plugin');
 
 module.exports = {
-    entry: [__dirname + "/src/main.js"],
+    entry: {
+        "bundle": __dirname + "/src/app.js",
+        "style": __dirname + "/src/style.js"
+    },
     output: {
         path: __dirname + "/docs",  // for github-page
-        filename: "bundle.js"
+        filename: "[name].js"
     },
     watch: true,
     // mode: "development",
