x_ite 5.0.2 → 6.0.0

package/src/x_ite.js

@@ -129,12 +129,54 @@ const getScriptURL = (function ()
    if (typeof __global_module__ === "object" && typeof __global_module__ .exports === "object")
       __global_module__ .exports = X_ITE;
 
+   // Define custom element.
+
    // IE fix.
    document .createElement ("X3DCanvas");
 
+   class X3DCanvas extends HTMLElement
+   {
+      constructor ()
+      {
+         super ();
+
+         const
+            shadow = this .attachShadow ({ mode: "open" }),
+            link   = document .createElement ("link");
+
+         shadow .loaded = new Promise (function (resolve, reject)
+         {
+            link .onload  = resolve;
+            link .onerror = reject;
+         });
+
+         link .setAttribute ("rel", "stylesheet");
+         link .setAttribute ("type", "text/css");
+         link .setAttribute ("href", new URL ("x_ite.css", getScriptURL ()) .href);
+
+         shadow .appendChild (link);
+
+         require ([ "x_ite/X3D" ], function (X3D)
+         {
+            X3D .createBrowserFromElement (this);
+         }
+         .bind (this));
+      }
+   }
+
+   customElements .define ("x3d-canvas", X3DCanvas);
+
+   X_ITE .X3DCanvas = X3DCanvas;
+
+   // Assign functions to X_ITE and init.
+
    require (["x_ite/X3D"], function (X3D)
    {
       Object .assign (X_ITE, X3D);
+
+      for (const key of X3D .hidden)
+         delete X_ITE [key];
+
       X3D ();
    });
 })();

package/x_ite.min.html

@@ -14,12 +14,11 @@
    <script type="text/javascript" src="src/tests.js"></script>
 
    <!-- X_ITE START -->
-   <link rel="stylesheet" type="text/css" href="dist/x_ite.css"/>
    <script type="text/javascript" src="dist/x_ite.min.js"></script>
    <!-- X_ITE END -->
 
    <style>
-@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic);
+@import url("https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic");
 
 html, body {
    margin: 0px;
@@ -92,12 +91,11 @@ main.color-management .browser {
 }
 
 .browser:focus {
-   outline: 2px solid black;
+   box-shadow: 0px 2px 6px 3px black;
 }
 
 .fallback {
-   display: block;
-   margin: 300px 30px 0 30px;
+   padding: 300px 30px 0 30px;
    text-align: center;
 }
 
@@ -243,6 +241,11 @@ main.color-management .browser {
    display: none;
 }
 
+.x_ite-console {
+  font-family: monospace;
+  white-space: pre;
+}
+
    </style>
 
    <script type="text/javascript">
@@ -293,10 +296,10 @@ X3D (function ()
    const bookmarks = new Bookmarks (Browser, $(".examples-box"));
 
    bookmarks .setup ([X_ITE_EXAMPLES, X_ITE_TESTS]);
-   bookmarks .restore ("https://rawgit.com/create3000/Library/main/Tests/Components/Layout/info.x3d");
+   bookmarks .restore ("https://create3000.github.io/media/x_ite/info/info.x3d");
 
    $(".version") .text (Browser .name + " v" + Browser .version);
-   $(".file") .append ($("<a/>") .attr ('href', "tests/d3/ParticlePlot.html") .text ("d3"));
+   $(".file") .append ($("<a></a>") .attr ('href', "tests/d3/ParticlePlot.html") .text ("d3"));
    $(".location-entry") .val (localStorage ["Bookmarks.history"] [index])
    $(".location-go") .click (loadURL);
    $(".print-vrml") .click (toVRMLString);
@@ -319,6 +322,19 @@ X3D (function ()
             return
       }
    });
+
+   Browser .getContextMenu () .setUserMenu (function ()
+   {
+      return {
+         "item-1": {
+            name: "Item 1",
+            callback: function (event)
+            {
+               console .log ("Item 1");
+            },
+         },
+      };
+   });
 },
 function (error)
 {
@@ -337,7 +353,7 @@ function (error)
       <main>
          <div>
             <form action="javascript:alert('form submited')">
-               <X3DCanvas id="browser" class="browser" splashScreen="true" contextMenu="true" cache="false" debug="true" preserveDrawingBuffer="false">
+               <x3d-canvas id="browser" class="browser" splashScreen="true" contextMenu="true" cache="false" debug="true" preserveDrawingBuffer="false">
                   <p class="fallback">
                      Sorry,<br/>
                      it wasn't me!<br/>
@@ -346,14 +362,14 @@ function (error)
                      or Microsoft Edge, because this is currently the choice of the choice. We will continuously
                      keep you informed on technical developments and as soon as X_ITE is running in other browser too.
                   </p>
-               </X3DCanvas>
+               </x3d-canvas>
             </form>
             <div class="location-bar">
                <input class="location-entry" value="http://www.web3d.org/x3d/content/examples/Basic/ChemicalMarkupLanguage/ButanedioicAcid.x3d"/>
                <button class="location-go" type="button">Load URL</button>
             </div>
             <div class="buttons">
-               <a class="print-xml" href="#">XML</a><a class="print-vrml" href="#">VRML</a><a class="print-json" href="#">JSON</a>
+               <a class="print-xml" href="#">XML</a><a class="print-vrml" href="#">VRML</a><a class="print-json" href="#">JSON</a><a href="dist/example.html">Example Page</a>
             </div>
             <div class="links min-links">
                <a href="src/x_ite.html">src/x_ite.html</a><a href="http://rawgit.com/create3000/x_ite/main/x_ite.min.html">github</a>

package/src/spinner.css

@@ -1,67 +0,0 @@
-
-X3DCanvas .x_ite-private-splash-screen {
-  display: none;
-  z-index: 100;
-  position: absolute;
-  inset: 0;
-  background: #1b1d21;
-  background: -moz-radial-gradient(center, ellipse cover, #2f3135 0%, #1b1d21 100%);
-  background: -webkit-radial-gradient(center, ellipse cover, #2f3135 0%,#1b1d21 100%);
-  background: radial-gradient(ellipse at center, #2f3135 0%,#1b1d21 100%);
-}
-
-X3DCanvas .x_ite-private-spinner {
-  position: absolute;
-  top: calc(50% - (138px / 2));
-  left: calc(50% - (134px / 2));
-  width: 138px;
-  height: 134px;
-  background: url(assets/images/logo.128.png) no-repeat;
-  -webkit-animation: spinner-animation-spin 32s linear infinite;
-  -moz-animation: spinner-animation-spin 32s linear infinite;
-  animation: spinner-animation-spin 32s linear infinite;
-}
-@-moz-keyframes spinner-animation-spin { 100% { -moz-transform: rotate(360deg); } }
-@-webkit-keyframes spinner-animation-spin { 100% { -webkit-transform: rotate(360deg); } }
-@keyframes spinner-animation-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
-
-X3DCanvas .x_ite-private-progress {
-  position: absolute;
-  top: calc(50% - 28pt - 11pt);
-  left: calc(50% - 100px);
-  width: 200px;
-}
-
-X3DCanvas .x_ite-private-x_ite {
-  color: white;
-  font-size: 28pt;
-  text-align: center;
-  text-shadow: 1px 1px 0 black;
-  font-family: PT Sans, sans-serif;
-}
-
-X3DCanvas .x_ite-private-x_ite span.x_ite-private-x3d {
-  font-weight: bold;
-}
-
-X3DCanvas .x_ite-private-spinner-text {
-  color: white;
-  font-size: 11pt;
-  text-align: center;
-  text-shadow: 1px 1px 0 black;
-  font-family: PT Sans, sans-serif;
-}
-
-X3DCanvas .x_ite-private-progressbar {
-  margin: 8px;
-  border-left:  2px solid rgba(255, 255, 255, 0.5);
-  border-right: 2px solid rgba(255, 255, 255, 0.5);
-  padding: 0 2px;
-  text-align: left;
-}
-
-X3DCanvas .x_ite-private-progressbar div {
-  width: 0%;
-  height: 6px;
-  background: rgba(255, 255, 255, 0.5);
-}