From 88b373e438f78fca7e411d285b8449569d7de459 Mon Sep 17 00:00:00 2001
From: 1v9 <mkb@live.cn>
Date: Fri, 28 Jun 2019 08:51:58 +0800
Subject: [PATCH 1/3] Allow delayed loading of three.js

---
 _config.yml                    | 12 ++++++------
 layout/_layout.swig            |  1 +
 layout/_scripts/vendors.swig   | 24 ++++++++++++-----------
 layout/_third-party/three.swig | 36 ++++++++++++++++++++++++++++++++++
 4 files changed, 56 insertions(+), 17 deletions(-)
 create mode 100644 layout/_third-party/three.swig

diff --git a/_config.yml b/_config.yml
index a6dbdda653..f130d7b527 100644
--- a/_config.yml
+++ b/_config.yml
@@ -1000,12 +1000,12 @@ canvas_nest:
 
 # JavaScript 3D library.
 # Dependencies: https://github.com/theme-next/theme-next-three
-# three_waves
-three_waves: false
-# canvas_lines
-canvas_lines: false
-# canvas_sphere
-canvas_sphere: false
+three:
+  enable: false
+  delay: false # Set `dealy: true` to avoid blocking render
+  three_waves: false
+  canvas_lines: false
+  canvas_sphere: false
 
 # Canvas-ribbon
 # Dependencies: https://github.com/theme-next/theme-next-canvas-ribbon
diff --git a/layout/_layout.swig b/layout/_layout.swig
index 9c3ff3b3cd..78f3ea6fa5 100644
--- a/layout/_layout.swig
+++ b/layout/_layout.swig
@@ -122,5 +122,6 @@
   {% include '_third-party/copy-code.swig' %}
   {% include '_third-party/chatra.swig' %}
   {% include '_third-party/tidio.swig' %}
+  {% include '_third-party/three.swig' %}
 </body>
 </html>
diff --git a/layout/_scripts/vendors.swig b/layout/_scripts/vendors.swig
index 9a4dfd978c..7c5002a8f7 100644
--- a/layout/_scripts/vendors.swig
+++ b/layout/_scripts/vendors.swig
@@ -39,19 +39,21 @@
   <script color='{{ theme.canvas_nest.color }}' opacity='{{ theme.canvas_nest.opacity }}' zIndex='{{ theme.canvas_nest.zIndex }}' count='{{ theme.canvas_nest.count }}' src="{{ canvas_nest_uri }}"></script>
 {% endif %}
 
-{% if theme.three_waves %}
-  {% set js_vendors.three = 'three/three.min.js' %}
-  {% set js_vendors.three_waves = 'three/three-waves.min.js' %}
-{% endif %}
+{% if theme.three.enable and !theme.three.delay %}
+  {% if theme.three.three_waves %}
+    {% set js_vendors.three = 'three/three.min.js' %}
+    {% set js_vendors.three_waves = 'three/three-waves.min.js' %}
+  {% endif %}
 
-{% if theme.canvas_lines %}
-  {% set js_vendors.three = 'three/three.min.js' %}
-  {% set js_vendors.canvas_lines = 'three/canvas_lines.min.js' %}
-{% endif %}
+  {% if theme.three.canvas_lines %}
+    {% set js_vendors.three = 'three/three.min.js' %}
+    {% set js_vendors.canvas_lines = 'three/canvas_lines.min.js' %}
+  {% endif %}
 
-{% if theme.canvas_sphere %}
-  {% set js_vendors.three = 'three/three.min.js' %}
-  {% set js_vendors.canvas_sphere = 'three/canvas_sphere.min.js' %}
+  {% if theme.three.canvas_sphere %}
+    {% set js_vendors.three = 'three/three.min.js' %}
+    {% set js_vendors.canvas_sphere = 'three/canvas_sphere.min.js' %}
+  {% endif %}
 {% endif %}
 
 {% if theme.canvas_ribbon.enable %}
diff --git a/layout/_third-party/three.swig b/layout/_third-party/three.swig
new file mode 100644
index 0000000000..e3a24821f7
--- /dev/null
+++ b/layout/_third-party/three.swig
@@ -0,0 +1,36 @@
+{% if theme.three.enable and theme.three.delay %}
+  {% set three_url = url_for(theme.vendors._internal + '/three/three.min.js') %}
+  {% if theme.vendors.three %}
+    {% set three_url = theme.vendors.three %}
+  {% endif %}
+  {% if theme.three.three_waves %}
+    {% set waves = theme.vendors.three_waves | default(url_for(theme.vendors._internal + '/three/three-waves.min.js')) %}
+  {% endif %}
+  {% if theme.three.canvas_lines %}
+    {% set lines = theme.vendors.canvas_lines | default(url_for(theme.vendors._internal + '/three/canvas_lines.min.js')) %}
+  {% endif %}
+  {% if theme.three.canvas_sphere %}
+    {% set sphere = theme.vendors.canvas_sphere | default(url_for(theme.vendors._internal + '/three/canvas_sphere.min.js')) %}
+  {% endif %}
+  <script>
+    ;((d, w) => {
+      loadThree = () => {
+        let s = d.createElement('script');
+        s.src = '{{ three_url }}';
+        d.body.appendChild(s);
+      }
+      let styles = ['{{ waves }}', '{{ lines }}', '{{ sphere }}'];
+      loadStyle = () => {
+        styles.forEach(x => {
+          if (x !== '') {
+            let s = d.createElement('script');
+            s.src = x;
+            d.body.appendChild(s);
+          }
+        })
+      }
+      w.addEventListener('DOMContentLoaded', loadThree);
+      w.addEventListener('load', loadStyle);
+    })(document, window);
+  </script>
+{% endif %}

From 01f4ada2e8d7e762140314c61fc7d7cc801b9e2d Mon Sep 17 00:00:00 2001
From: 1v9 <mkb@live.cn>
Date: Mon, 8 Jul 2019 19:20:10 +0800
Subject: [PATCH 2/3] update

---
 layout/_layout.swig                          |  2 +-
 layout/{_third-party => _scripts}/three.swig |  4 ++++
 layout/_scripts/vendors.swig                 | 22 ++++++++++++--------
 3 files changed, 18 insertions(+), 10 deletions(-)
 rename layout/{_third-party => _scripts}/three.swig (99%)

diff --git a/layout/_layout.swig b/layout/_layout.swig
index 78f3ea6fa5..3be35f938d 100644
--- a/layout/_layout.swig
+++ b/layout/_layout.swig
@@ -105,6 +105,7 @@
   {% include '_scripts/next-boot.swig' %}
   {% include '_scripts/scroll-cookie.swig' %}
   {% include '_scripts/exturl.swig' %}
+  {% include '_scripts/three.swig' %}
   {% include '_third-party/quicklink.swig' %}
   {% include '_third-party/comments/index.swig' %}
   {% include '_third-party/search/index.swig' %}
@@ -122,6 +123,5 @@
   {% include '_third-party/copy-code.swig' %}
   {% include '_third-party/chatra.swig' %}
   {% include '_third-party/tidio.swig' %}
-  {% include '_third-party/three.swig' %}
 </body>
 </html>
diff --git a/layout/_third-party/three.swig b/layout/_scripts/three.swig
similarity index 99%
rename from layout/_third-party/three.swig
rename to layout/_scripts/three.swig
index e3a24821f7..0ea6ee4e53 100644
--- a/layout/_third-party/three.swig
+++ b/layout/_scripts/three.swig
@@ -3,15 +3,19 @@
   {% if theme.vendors.three %}
     {% set three_url = theme.vendors.three %}
   {% endif %}
+
   {% if theme.three.three_waves %}
     {% set waves = theme.vendors.three_waves | default(url_for(theme.vendors._internal + '/three/three-waves.min.js')) %}
   {% endif %}
+
   {% if theme.three.canvas_lines %}
     {% set lines = theme.vendors.canvas_lines | default(url_for(theme.vendors._internal + '/three/canvas_lines.min.js')) %}
   {% endif %}
+
   {% if theme.three.canvas_sphere %}
     {% set sphere = theme.vendors.canvas_sphere | default(url_for(theme.vendors._internal + '/three/canvas_sphere.min.js')) %}
   {% endif %}
+
   <script>
     ;((d, w) => {
       loadThree = () => {
diff --git a/layout/_scripts/vendors.swig b/layout/_scripts/vendors.swig
index 7c5002a8f7..9e53c86a87 100644
--- a/layout/_scripts/vendors.swig
+++ b/layout/_scripts/vendors.swig
@@ -7,6 +7,7 @@
 </script>
 
 {% set js_vendors = {} %}
+{% set js_defer_vendors = {} %}
 {% set js_vendors.jquery = 'jquery/index.js?v=3.4.1' %}
 
 {% if theme.fastclick %}
@@ -39,20 +40,18 @@
   <script color='{{ theme.canvas_nest.color }}' opacity='{{ theme.canvas_nest.opacity }}' zIndex='{{ theme.canvas_nest.zIndex }}' count='{{ theme.canvas_nest.count }}' src="{{ canvas_nest_uri }}"></script>
 {% endif %}
 
-{% if theme.three.enable and !theme.three.delay %}
+{% if theme.three.enable and not theme.three.delay %}
   {% if theme.three.three_waves %}
-    {% set js_vendors.three = 'three/three.min.js' %}
-    {% set js_vendors.three_waves = 'three/three-waves.min.js' %}
+    {% set js_defer_vendors.three = 'three/three.min.js' %}
+    {% set js_defer_vendors.three_waves = 'three/three-waves.min.js' %}
   {% endif %}
-
   {% if theme.three.canvas_lines %}
-    {% set js_vendors.three = 'three/three.min.js' %}
-    {% set js_vendors.canvas_lines = 'three/canvas_lines.min.js' %}
+    {% set js_defer_vendors.three = 'three/three.min.js' %}
+    {% set js_defer_vendors.canvas_lines = 'three/canvas_lines.min.js' %}
   {% endif %}
-
   {% if theme.three.canvas_sphere %}
-    {% set js_vendors.three = 'three/three.min.js' %}
-    {% set js_vendors.canvas_sphere = 'three/canvas_sphere.min.js' %}
+    {% set js_defer_vendors.three = 'three/three.min.js' %}
+    {% set js_defer_vendors.canvas_sphere = 'three/canvas_sphere.min.js' %}
   {% endif %}
 {% endif %}
 
@@ -72,3 +71,8 @@
   {% set internal_script = url_for(theme.vendors._internal + '/' + internal) %}
   <script src="{{ theme.vendors[name] | default(internal_script) }}"></script>
 {% endfor %}
+
+{% for name, internal in js_defer_vendors %}
+  {% set internal_script = url_for(theme.vendors._internal + '/' + internal) %}
+  <script defer src="{{ theme.vendors[name] | default(internal_script) }}"></script>
+{% endfor %}

From 05a09eb4c3ae334729a4e33e9efc11709a4fd4ad Mon Sep 17 00:00:00 2001
From: 1v9 <mkb@live.cn>
Date: Mon, 8 Jul 2019 19:24:31 +0800
Subject: [PATCH 3/3] comment

---
 _config.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_config.yml b/_config.yml
index f130d7b527..24504c4a9a 100644
--- a/_config.yml
+++ b/_config.yml
@@ -1002,7 +1002,7 @@ canvas_nest:
 # Dependencies: https://github.com/theme-next/theme-next-three
 three:
   enable: false
-  delay: false # Set `dealy: true` to avoid blocking render
+  delay: false # Set true to further delay loading
   three_waves: false
   canvas_lines: false
   canvas_sphere: false