From 2a2a7da0147cccd3c70c8ed77a88e974c808f5bf Mon Sep 17 00:00:00 2001
From: sovanna <sovanna.hing@gmail.com>
Date: Tue, 21 Apr 2020 18:23:49 +0900
Subject: [PATCH] fix(issue#3): Loads models separately - common models
 functions are loaded in SolveSpaceControls.js - each js model file is now
 autonomous - in page-solvespace.html, add each <script> 'async' attribute

So now, each js model file will be loaded as soon as available,
avoiding blocking rendering page
---
 static/js/SolveSpaceControls.js        |  32 ++++++++
 static/js/models/chamber.js            |   4 +
 static/js/models/k526s-adapter-assy.js |   4 +
 static/js/models/k526s-adapter.js      |   4 +
 static/js/models/k526s-body.js         |   4 +
 static/js/models/k526s-fixture.js      |   4 +
 static/js/models/k526s-head.js         |   4 +
 static/js/models/kf25.js               |   4 +
 static/js/models/multiport.js          |   4 +
 static/js/models/viewport.js           |   4 +
 templates/page-solvespace.html         | 102 +++----------------------
 11 files changed, 77 insertions(+), 93 deletions(-)

diff --git a/static/js/SolveSpaceControls.js b/static/js/SolveSpaceControls.js
index 5e21e1c..76000e6 100644
--- a/static/js/SolveSpaceControls.js
+++ b/static/js/SolveSpaceControls.js
@@ -488,3 +488,35 @@ solvespace = function(obj, params) {
         return new THREE.LineSegments(geometry, material);
     }
 };
+
+
+function findBootstrapEnvironment() {
+    let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
+
+    let el = document.createElement('div');
+    document.body.appendChild(el);
+
+    let curEnv = envs.shift();
+
+    for (let env of envs.reverse()) {
+      el.classList.add(`d-${env}-none`);
+
+      if (window.getComputedStyle(el).display === 'none') {
+        curEnv = env;
+        break;
+      }
+    }
+
+    document.body.removeChild(el);
+    return curEnv;
+}
+
+function load_treejs_model(model_id, model_solvespace, model_param) {
+    let node = document.getElementById(model_id);
+    node.parentNode.replaceChild(
+        solvespace(model_solvespace, model_param),
+        node
+    );
+}
+
+var bootstrap_env = findBootstrapEnvironment();
diff --git a/static/js/models/chamber.js b/static/js/models/chamber.js
index 6ce0c32..734c7ae 100644
--- a/static/js/models/chamber.js
+++ b/static/js/models/chamber.js
@@ -158438,3 +158438,7 @@ var solvespace_model_chamber = {
     [[-32.452981, -7.763532, -143.238147], [-31.622098, -8.369955, -143.238147]],
   ]
 };
+
+
+var params_chamber = (bootstrap_env === 'xs' || bootstrap_env == 'sm') ? {width: 310, height: 200, scale: 1} : {width: 800, height: 600, scale: 3};
+load_treejs_model('chamber', solvespace_model_chamber, params_chamber);
diff --git a/static/js/models/k526s-adapter-assy.js b/static/js/models/k526s-adapter-assy.js
index a0b1b3d..9b622b3 100644
--- a/static/js/models/k526s-adapter-assy.js
+++ b/static/js/models/k526s-adapter-assy.js
@@ -24988,3 +24988,7 @@ var solvespace_model_k526s_adapter_assy = {
     [[-11.693151, -6.302981, -7.763532], [-11.693151, -5.894512, -8.078040]],
   ]
 };
+
+
+var params_k526s_assy = (bootstrap_env === 'xs' || bootstrap_env == 'sm') ? {width: 310, height: 300, scale: 8} : {width: 400, height: 300, scale: 8};
+load_treejs_model('k526s-adapter-assy', solvespace_model_k526s_adapter_assy, params_k526s_assy);
diff --git a/static/js/models/k526s-adapter.js b/static/js/models/k526s-adapter.js
index 7751fe3..10a501c 100644
--- a/static/js/models/k526s-adapter.js
+++ b/static/js/models/k526s-adapter.js
@@ -7112,3 +7112,7 @@ var solvespace_model_k526s_adapter = {
     [[1.250000, -8.882840, -4.592946], [1.250000, -8.369955, -5.472098]],
   ]
 };
+
+
+var params_k526s_adapter = (bootstrap_env === 'xs' || bootstrap_env == 'sm') ? {width: 310, height: 300, scale: 8, offset: new THREE.Vector3(-8, 0, 0)} : {width: 400, height: 300, scale: 8, offset: new THREE.Vector3(-8, 0, 0)};
+load_treejs_model('k526s-adapter', solvespace_model_k526s_adapter, params_k526s_adapter);
diff --git a/static/js/models/k526s-body.js b/static/js/models/k526s-body.js
index 9945ba3..fc07a95 100644
--- a/static/js/models/k526s-body.js
+++ b/static/js/models/k526s-body.js
@@ -36982,3 +36982,7 @@ var solvespace_model_k526s_body = {
     [[-16.978010, 13.676859, -11.100000], [-18.000000, 14.434672, -11.100000]],
   ]
 };
+
+
+var params_k526s_body = (bootstrap_env === 'xs' || bootstrap_env == 'sm') ? {width: 310, height: 300, scale: 6, offset: new THREE.Vector3(-10, -15, 0)} : {width: 400, height: 300, scale: 6, offset: new THREE.Vector3(-10, -15, 0)};
+load_treejs_model('k526s-body', solvespace_model_k526s_body, params_k526s_body);
\ No newline at end of file
diff --git a/static/js/models/k526s-fixture.js b/static/js/models/k526s-fixture.js
index c63f66f..6fb8422 100644
--- a/static/js/models/k526s-fixture.js
+++ b/static/js/models/k526s-fixture.js
@@ -13196,3 +13196,7 @@ var solvespace_model_k526s_fixture = {
     [[-4.758563, -2.836342, -3.493589], [-4.758563, -3.493589, -2.836342]],
   ]
 };
+
+
+var params_k526s_fixture = (bootstrap_env === 'xs' || bootstrap_env == 'sm') ? {width: 310, height: 200, scale: 6} : {width: 800, height: 400, scale: 12};
+load_treejs_model('k526s-fixture', solvespace_model_k526s_fixture, params_k526s_fixture);
diff --git a/static/js/models/k526s-head.js b/static/js/models/k526s-head.js
index e13bfc1..2422e2e 100644
--- a/static/js/models/k526s-head.js
+++ b/static/js/models/k526s-head.js
@@ -9340,3 +9340,7 @@ var solvespace_model_k526s_head = {
     [[-49.225000, -1.332896, -1.332896], [-49.225000, -1.577737, -1.031490]],
   ]
 };
+
+
+var params_k526s_head = (bootstrap_env === 'xs' || bootstrap_env == 'sm') ? {width: 310, height: 300, scale: 8, offset: new THREE.Vector3(25, 0, 0)} : {width: 400, height: 300, scale: 8, offset: new THREE.Vector3(25, 0, 0)};
+load_treejs_model('k526s-head', solvespace_model_k526s_head, params_k526s_head);
diff --git a/static/js/models/kf25.js b/static/js/models/kf25.js
index 6e6b056..5f776e6 100644
--- a/static/js/models/kf25.js
+++ b/static/js/models/kf25.js
@@ -3992,3 +3992,7 @@ var solvespace_model_kf25 = {
     [[0.000000, -7.071068, -7.071068], [0.000000, -6.302981, -7.763532]],
   ]
 };
+
+
+var params_kf25 = (bootstrap_env === 'xs' || bootstrap_env == 'sm') ? {width: 310, height: 300, scale: 10, offset: new THREE.Vector3(-8, 0, 0)} : {width: 400, height: 300, scale: 10, offset: new THREE.Vector3(-8, 0, 0)};
+load_treejs_model('kf25', solvespace_model_kf25, params_kf25);
\ No newline at end of file
diff --git a/static/js/models/multiport.js b/static/js/models/multiport.js
index f450c7f..434c4b2 100644
--- a/static/js/models/multiport.js
+++ b/static/js/models/multiport.js
@@ -43672,3 +43672,7 @@ var solvespace_model_multiport = {
     [[-0.750000, -24.624439, -37.664798], [-0.750000, -20.668257, -39.972780]],
   ]
 };
+
+
+var params_multiport = (bootstrap_env === 'xs' || bootstrap_env == 'sm') ? {width: 310, height: 300, scale: 3} : {width: 400, height: 300, scale: 3};
+load_treejs_model('multiport', solvespace_model_multiport, params_multiport);
diff --git a/static/js/models/viewport.js b/static/js/models/viewport.js
index 48c4b77..f4a2521 100644
--- a/static/js/models/viewport.js
+++ b/static/js/models/viewport.js
@@ -35408,3 +35408,7 @@ var solvespace_model_viewport = {
     [[-3.000000, -34.935893, -28.363416], [-3.000000, -31.819805, -31.819805]],
   ]
 };
+
+
+var params_viewport = (bootstrap_env === 'xs' || bootstrap_env == 'sm') ? {width: 310, height: 300, scale: 3} : {width: 400, height: 300, scale: 3};
+load_treejs_model('viewport', solvespace_model_viewport, params_viewport);
\ No newline at end of file
diff --git a/templates/page-solvespace.html b/templates/page-solvespace.html
index 7f4b81e..14e3457 100644
--- a/templates/page-solvespace.html
+++ b/templates/page-solvespace.html
@@ -6,98 +6,14 @@
 
 {% block js %}
 
-  <script src="/js/models/kf25.js"></script>
-  <script src="/js/models/viewport.js"></script>
-  <script src="/js/models/multiport.js"></script>
-  <script src="/js/models/chamber.js"></script>
-  <script src="/js/models/k526s-body.js"></script>
-  <script src="/js/models/k526s-head.js"></script>
-  <script src="/js/models/k526s-fixture.js"></script>
-  <script src="/js/models/k526s-adapter.js"></script>
-  <script src="/js/models/k526s-adapter-assy.js"></script>
-
-  <script>
-    (function () {
-
-      function findBootstrapEnvironment() {
-        let envs = ['xs', 'sm', 'md', 'lg', 'xl'];
-
-        let el = document.createElement('div');
-        document.body.appendChild(el);
-
-        let curEnv = envs.shift();
-
-        for (let env of envs.reverse()) {
-          el.classList.add(`d-${env}-none`);
-
-          if (window.getComputedStyle(el).display === 'none') {
-            curEnv = env;
-            break;
-          }
-        }
-
-        document.body.removeChild(el);
-        return curEnv;
-      }
-
-      var bootstrap_env = findBootstrapEnvironment();
-      var params_chamber = (bootstrap_env === 'xs' || bootstrap_env == 'sm') ? {width: 310, height: 200, scale: 1} : {width: 800, height: 600, scale: 3};
-      var params_kf25 = (bootstrap_env === 'xs' || bootstrap_env == 'sm') ? {width: 310, height: 300, scale: 10, offset: new THREE.Vector3(-8, 0, 0)} : {width: 400, height: 300, scale: 10, offset: new THREE.Vector3(-8, 0, 0)};
-      var params_viewport = (bootstrap_env === 'xs' || bootstrap_env == 'sm') ? {width: 310, height: 300, scale: 3} : {width: 400, height: 300, scale: 3};
-      var params_multiport = (bootstrap_env === 'xs' || bootstrap_env == 'sm') ? {width: 310, height: 300, scale: 3} : {width: 400, height: 300, scale: 3};
-      var params_k526s_body = (bootstrap_env === 'xs' || bootstrap_env == 'sm') ? {width: 310, height: 300, scale: 6, offset: new THREE.Vector3(-10, -15, 0)} : {width: 400, height: 300, scale: 6, offset: new THREE.Vector3(-10, -15, 0)};
-      var params_k526s_head = (bootstrap_env === 'xs' || bootstrap_env == 'sm') ? {width: 310, height: 300, scale: 8, offset: new THREE.Vector3(25, 0, 0)} : {width: 400, height: 300, scale: 8, offset: new THREE.Vector3(25, 0, 0)};
-      var params_k526s_fixture = (bootstrap_env === 'xs' || bootstrap_env == 'sm') ? {width: 310, height: 200, scale: 6} : {width: 800, height: 400, scale: 12};
-      var params_k526s_adapter = (bootstrap_env === 'xs' || bootstrap_env == 'sm') ? {width: 310, height: 300, scale: 8, offset: new THREE.Vector3(-8, 0, 0)} : {width: 400, height: 300, scale: 8, offset: new THREE.Vector3(-8, 0, 0)};
-      var params_k526s_assy = (bootstrap_env === 'xs' || bootstrap_env == 'sm') ? {width: 310, height: 300, scale: 8} : {width: 400, height: 300, scale: 8};
-
-      var nodes = [{
-        id: 'kf25',
-        model: solvespace_model_kf25,
-        params: params_kf25,
-      }, {
-        id: 'viewport',
-        model: solvespace_model_viewport,
-        params: params_viewport,
-      }, {
-        id: 'multiport',
-        model: solvespace_model_multiport,
-        params: params_multiport,
-      }, {
-        id: 'chamber',
-        model: solvespace_model_chamber,
-        params: params_chamber,
-      }, {
-        id: 'k526s-body',
-        model: solvespace_model_k526s_body,
-        params: params_k526s_body,
-      }, {
-        id: 'k526s-head',
-        model: solvespace_model_k526s_head,
-        params: params_k526s_head,
-      }, {
-        id: 'k526s-fixture',
-        model: solvespace_model_k526s_fixture,
-        params: params_k526s_fixture,
-      }, {
-        id: 'k526s-adapter',
-        model: solvespace_model_k526s_adapter,
-        params: params_k526s_adapter,
-      }, {
-        id: 'k526s-adapter-assy',
-        model: solvespace_model_k526s_adapter_assy,
-        params: params_k526s_assy,
-      }];
-
-      for (var i = nodes.length - 1; i >= 0; i--) {
-        let n = nodes[i];
-        if (n.id) {
-          let node = document.getElementById(n.id);
-          node.parentNode.replaceChild(solvespace(n.model, n.params), node);
-        }
-      }
-
-    })();
-  </script>
+  <script async src="/js/models/kf25.js"></script>
+  <script async src="/js/models/viewport.js"></script>
+  <script async src="/js/models/multiport.js"></script>
+  <script async src="/js/models/chamber.js"></script>
+  <script async src="/js/models/k526s-body.js"></script>
+  <script async src="/js/models/k526s-head.js"></script>
+  <script async src="/js/models/k526s-fixture.js"></script>
+  <script async src="/js/models/k526s-adapter.js"></script>
+  <script async src="/js/models/k526s-adapter-assy.js"></script>
 
 {% endblock %}
\ No newline at end of file