Snapshot HTML produces invalid html file with Jupyter Notebook versio…

…n 7 #450
K3D-tools · Jul 3, 2024 · b837d05 · b837d05
1 parent 0f8e697
commit b837d05
Show file tree

Hide file tree

Showing 3 changed files with 189 additions and 0 deletions.
diff --git a/js/src/core/lib/snapshot_inline.txt b/js/src/core/lib/snapshot_inline.txt
@@ -0,0 +1,67 @@
+<div id="canvasTarget_[ID]" class="k3d_plot" style="position: relative;"></div>
+
+<script>
+  var K3DInstance;
+  var data_[ID] = '[DATA]';
+
+  function loadScript(path, cb) {
+    var script = document.createElement('script');
+    script.src = path;
+    script.onload = cb;
+    script.onerror = cb;
+    document.head.appendChild(script);
+  }
+
+  function loadK3D() {
+    function load(lib) {
+      function _base64ToArrayBuffer(base64) {
+        var binary_string = window.atob(base64);
+        var len = binary_string.length;
+        var bytes = new Uint8Array(len);
+        for (var i = 0; i < len; i++) {
+          bytes[i] = binary_string.charCodeAt(i);
+        }
+        return bytes;
+      }
+
+      try {
+        document.getElementById('canvasTarget_[ID]').style.cssText = [
+          'height:[HEIGHT]px',
+          'position: relative',
+        ].join(';');
+
+        K3DInstance = new lib.CreateK3DAndLoadBinarySnapshot(
+          _base64ToArrayBuffer(data_[ID]),
+          document.getElementById('canvasTarget_[ID]'),
+        );
+
+        K3DInstance.then(function (K3DInstance) {
+          [ADDITIONAL]
+        });
+      } catch (e) {
+        console.log(e);
+        return;
+      }
+    }
+
+    require(['k3d'],
+            load,
+            function () {
+              loadScript('https://unpkg.com/k3d@[VERSION]/dist/standalone.js', function () {
+                try {
+                  delete require.s.contexts._.registry.k3d;
+                } catch(err) {
+                  console.log(err);
+                }
+
+                require(['k3d'], load);
+              });
+            });
+  }
+
+  if (typeof (require) === 'undefined') {
+    loadScript('https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js', loadK3D);
+  } else {
+    loadK3D();
+  }
+</script>
diff --git a/js/src/core/lib/snapshot_online.txt b/js/src/core/lib/snapshot_online.txt
@@ -0,0 +1,57 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>K3D snapshot viewer - [TIMESTAMP]</title>
+    <style>
+        body, html {
+            background-color: #F5F5F5;
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+        }
+
+        #canvasTarget {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+        }
+    </style>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
+    <script src="https://unpkg.com/k3d@[VERSION]/dist/standalone.js"></script>
+</head>
+<body>
+<div id="canvasTarget"></div>
+
+<script>
+    var K3DInstance;
+    var data = '[DATA]';
+
+    function _base64ToArrayBuffer(base64) {
+        var binary_string = window.atob(base64);
+        var len = binary_string.length;
+        var bytes = new Uint8Array(len);
+        for (var i = 0; i < len; i++) {
+            bytes[i] = binary_string.charCodeAt(i);
+        }
+        return bytes;
+    }
+
+    require(['k3d'], function (lib) {
+        try {
+            K3DInstance = new lib.CreateK3DAndLoadBinarySnapshot(
+                _base64ToArrayBuffer(data),
+                document.getElementById('canvasTarget'),
+            );
+
+            K3DInstance.then(function(K3DInstance) {
+                [ADDITIONAL]
+            });
+        } catch (e) {
+            console.log(e);
+            return;
+        }
+    });
+</script>
+</body>
+</html>
diff --git a/js/src/core/lib/snapshot_standalone.txt b/js/src/core/lib/snapshot_standalone.txt
@@ -0,0 +1,65 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>K3D snapshot viewer - [TIMESTAMP]</title>
+    <style>
+        body, html {
+            background-color: #F5F5F5;
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+        }
+
+        #canvasTarget {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+        }
+    </style>
+    <script id='fflatejs'>[FFLATE_JS]</script>
+    <script>
+        window.k3dCompressed = '[K3D_SOURCE]';
+
+        function _base64ToArrayBuffer(base64) {
+            var binary_string = window.atob(base64);
+            var len = binary_string.length;
+            var bytes = new Uint8Array(len);
+            for (var i = 0; i < len; i++) {
+                bytes[i] = binary_string.charCodeAt(i);
+            }
+            return bytes;
+        }
+
+        var k3dSource = fflate.strFromU8(
+            fflate.unzlibSync(_base64ToArrayBuffer(window.k3dCompressed))
+        );
+    </script>
+    <script id='requirejs'>[REQUIRE_JS]</script>
+</head>
+<body>
+<div id="canvasTarget"></div>
+<script>
+    var K3DInstance;
+    var data = '[DATA]';
+
+    eval(k3dSource);
+
+    require(['k3d'], function (lib) {
+        try {
+            K3DInstance = new lib.CreateK3DAndLoadBinarySnapshot(
+                _base64ToArrayBuffer(data),
+                document.getElementById('canvasTarget'),
+            );
+
+            K3DInstance.then(function(K3DInstance) {
+                [ADDITIONAL]
+            });
+        } catch (e) {
+            console.log(e);
+            return;
+        }
+    });
+</script>
+</body>
+</html>