x_ite 5.0.2 → 6.0.0

package/src/x_ite.css

@@ -1,14 +1,15 @@
 /* X_ITE CSS StyleSheet */
 
+/* Do not include this file directly! This is not needed anymore. */
+
 @charset "utf-8";
 
-@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic);
-@import url(spinner.css);
+@import url("https://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic");
 
+:host,
 X3DCanvas {
-  overflow: hidden;
-  position: relative;
   display: inline-block;
+  overflow: hidden;
   outline: none;
   margin: 0;
   padding: 0;
@@ -16,43 +17,47 @@ X3DCanvas {
   border-radius: 0;
   width: 300px;
   height: 150px;
+  user-select: none;
+  -webkit-user-select: none;
 }
 
-X3DCanvas.x_ite-fullscreen {
+:host([hidden]) {
+  display: none;
+}
+
+:host(.x_ite-fullscreen) {
   width: 100vw !important;
   height: 100vh !important;
 }
 
-X3DCanvas > *:not(.x_ite-fallback) {
+X3DCanvas > :not(.x_ite-private-browser, .x_ite-private-menu) {
   display: none;
 }
 
-.x_ite-console {
-  font-family: monospace;
-  white-space: pre;
-}
-
-X3DCanvas .x_ite-private-browser {
-  z-index: 0;
+.x_ite-private-browser {
+  overflow: hidden;
   display: block;
-  position: absolute;
-  inset: 0;
+  position: relative;
   margin: 0;
   padding: 0;
   border: 0;
   border-radius: 0;
+  width: 100%;
+  height: 100%;
+  user-select: none;
+  -webkit-user-select: none;
 }
 
-X3DCanvas .x_ite-private-surface {
+.x_ite-private-surface {
+  position: absolute;
   margin: 0;
   padding: 0;
   border: 0;
   border-radius: 0;
-  height: 100%;
-  margin-right: 0;
+  inset: 0;
 }
 
-X3DCanvas canvas.x_ite-private-canvas {
+.x_ite-private-canvas {
   display: block;
   outline: none;
   margin: 0;
@@ -63,12 +68,11 @@ X3DCanvas canvas.x_ite-private-canvas {
   height: 100%;
 }
 
-X3DCanvas .x_ite-private-notification {
-  display: none;
-  padding: 5px;
+.x_ite-private-notification {
   position: absolute;
   top: 20px;
   right: -4px;
+  padding: 5px;
   -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(8px);
   background: rgba(0,0,0,0.61803);
@@ -88,13 +92,12 @@ X3DCanvas .x_ite-private-notification {
   pointer-events: none;
 }
 
-X3DCanvas .x_ite-private-notification span {
+.x_ite-private-notification span {
   padding: 0 24px 0 20px;
-  background: url(assets/images/icon.bw.png) no-repeat 0 2px;
+  background: url("assets/images/icon.bw.png") no-repeat 0 2px;
 }
 
-X3DCanvas .x_ite-private-browser-timings {
-  display: none;
+.x_ite-private-browser-timings {
   position: absolute;
   bottom: -4px;
   left: -4px;
@@ -117,13 +120,13 @@ X3DCanvas .x_ite-private-browser-timings {
   pointer-events: none;
 }
 
-X3DCanvas .x_ite-private-browser-timings table,
-X3DCanvas .x_ite-private-browser-timings thead,
-X3DCanvas .x_ite-private-browser-timings tbody,
-X3DCanvas .x_ite-private-browser-timings tfoot,
-X3DCanvas .x_ite-private-browser-timings tr,
-X3DCanvas .x_ite-private-browser-timings th,
-X3DCanvas .x_ite-private-browser-timings td {
+.x_ite-private-browser-timings table,
+.x_ite-private-browser-timings thead,
+.x_ite-private-browser-timings tbody,
+.x_ite-private-browser-timings tfoot,
+.x_ite-private-browser-timings tr,
+.x_ite-private-browser-timings th,
+.x_ite-private-browser-timings td {
   box-sizing: border-box;
   outline: 0;
   margin: 0;
@@ -140,9 +143,9 @@ X3DCanvas .x_ite-private-browser-timings td {
   text-align: left;
 }
 
-X3DCanvas .x_ite-private-browser-timings table {
+.x_ite-private-browser-timings table {
   overflow: hidden;
-  background: url(assets/images/Time.png) no-repeat;
+  background: url("assets/images/Time.png") no-repeat;
   width: 100%;
   max-width: 100%;
   border-collapse: separate;
@@ -150,33 +153,33 @@ X3DCanvas .x_ite-private-browser-timings table {
   empty-cells: show;
 }
 
-X3DCanvas .x_ite-private-browser-timings thead th {
+.x_ite-private-browser-timings thead th {
   padding-left: 20px;
   padding-bottom: 5px;
   font-weight: bold;
 }
 
-X3DCanvas .x_ite-private-browser-timings td:first-child {
+.x_ite-private-browser-timings td:first-child {
   padding-right: 10px;
 }
 
-X3DCanvas .x_ite-private-browser-timings tr.x_ite-private-more td {
+.x_ite-private-browser-timings tr.x_ite-private-more td {
   padding-bottom: 5px;
 }
 
-X3DCanvas .x_ite-private-browser-timings td {
+.x_ite-private-browser-timings td {
   padding-bottom: 2px;
 }
 
-X3DCanvas .x_ite-private-browser-timings tfoot td:first-child {
+.x_ite-private-browser-timings tfoot td:first-child {
   padding-right: 0;
 }
 
-X3DCanvas .x_ite-private-browser-timings tfoot td {
+.x_ite-private-browser-timings tfoot td {
   padding-top: 4px;
 }
 
-X3DCanvas .x_ite-private-browser-timings button {
+.x_ite-private-browser-timings button {
   box-sizing: border-box;
   border: 0;
   border-radius: 10px;
@@ -194,28 +197,34 @@ X3DCanvas .x_ite-private-browser-timings button {
   cursor: pointer;
 }
 
-X3DCanvas .x_ite-private-world-info-overlay {
+.x_ite-private-world-info-overlay {
   position: absolute;
   inset: 0;
 }
 
-X3DCanvas .x_ite-private-world-info {
+.x_ite-private-world-info {
   overflow-y: auto;
   position: absolute;
   inset: 0;
   -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(8px);
   background: rgba(0,0,0,0.61803);
-  margin: 21pt;
+  background: -moz-linear-gradient(top, rgba(50,50,50,0.61803) 0%, rgba(0,0,0,0.61803) 100%); /* FF3.6-15 */
+  background: -webkit-linear-gradient(top, rgba(50,50,50,0.61803) 0%,rgba(0,0,0,0.61803) 100%); /* Chrome10-25,Safari5.1-6 */
+  background: linear-gradient(to bottom, rgba(50,50,50,0.61803) 0%,rgba(0,0,0,0.61803) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   border: 4px solid rgba(60,60,60,0.61803);
+  border-radius: 5px;
+  -webkit-background-clip: padding-box; /* for Safari */
+  background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
+  margin: 21pt;
   border-radius: 15px;
   padding: 21pt;
 }
 
-X3DCanvas .x_ite-private-world-info .x_ite-private-world-info-top,
-X3DCanvas .x_ite-private-world-info .x_ite-private-world-info-title,
-X3DCanvas .x_ite-private-world-info .x_ite-private-world-info-info,
-X3DCanvas .x_ite-private-world-info p {
+.x_ite-private-world-info .x_ite-private-world-info-top,
+.x_ite-private-world-info .x_ite-private-world-info-title,
+.x_ite-private-world-info .x_ite-private-world-info-info,
+.x_ite-private-world-info p {
   box-sizing: border-box;
   outline: 0;
   margin: 0;
@@ -233,151 +242,114 @@ X3DCanvas .x_ite-private-world-info p {
   text-align: left;
 }
 
-X3DCanvas .x_ite-private-world-info .x_ite-private-world-info-top {
+.x_ite-private-world-info .x_ite-private-world-info-top {
   font-weight: bold;
   font-style: italic;
   font-size: 9pt;
 }
 
-X3DCanvas .x_ite-private-world-info .x_ite-private-world-info-title {
+.x_ite-private-world-info .x_ite-private-world-info-title {
   margin: 0.3em 0 1em 0;
   font-weight: bold;
   font-size: 21pt;
 }
 
-X3DCanvas .x_ite-private-world-info .x_ite-private-world-info-info,
-X3DCanvas .x_ite-private-world-info .x_ite-private-world-info-info p {
+.x_ite-private-world-info .x_ite-private-world-info-info,
+.x_ite-private-world-info .x_ite-private-world-info-info p {
   margin: 1em 0 1em 0;
   font-size: 14pt;
 }
 
-X3DCanvas .x_ite-private-world-info a {
+.x_ite-private-world-info a {
   text-decoration: underline;
   color: #fd9f2e;
 }
 
-/*!
- * jQuery contextMenu - Plugin for simple contextMenu handling
- *
- * Version: v1.8.1
- *
- * Authors: Björn Brala (SWIS.nl), Rodney Rehm, Addy Osmani (patches for FF)
- * Web: http://swisnl.github.io/jQuery-contextMenu/
- *
- * Copyright (c) 2011-2015 SWIS BV and contributors
- *
- * Licensed under
- *   MIT License http://www.opensource.org/licenses/mit-license
-
- * Date: 2015-09-20T18:47:54.927Z
- */
+/* Context Menu */
 
-/* fullscreen support */
-X3DCanvas #context-menu-layer {
-  z-index: 0 !important;
+.x_ite-private-menu.context-menu-layer {
+  position: fixed;
+  z-index: 10000;
+  inset: 0;
 }
 
-/* menu title */
-.x_ite-private-menu.x_ite-private-menu-title:before {
-   content: "X_ITE Browser";
-   display: block;
-   padding: 4px 32px 4px 8px;
-   font-weight: bold;
+.x_ite-private-menu.context-menu-list {
+  isolation: isolate;
 }
 
-.x_ite-private-menu .context-menu-selected {
-  font-weight: bold;
-  font-style: italic;
+.x_ite-private-menu .context-menu-list {
+  position: absolute;
 }
 
 .x_ite-private-menu.context-menu-list,
 .x_ite-private-menu .context-menu-list {
-  position: absolute;
-  display: inline-block;
+  display: block;
+  box-sizing: border-box;
   min-width: 120px;
-  padding: 0;
   margin: 0;
   margin-left: 1px;
-  white-space: pre;
+  padding: 5px 10px 9px 9px;
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+  background: rgba(0,0,0,0.61803);
+  background: -moz-linear-gradient(top, rgba(50,50,50,0.61803) 0%, rgba(0,0,0,0.61803) 100%); /* FF3.6-15 */
+  background: -webkit-linear-gradient(top, rgba(50,50,50,0.61803) 0%,rgba(0,0,0,0.61803) 100%); /* Chrome10-25,Safari5.1-6 */
+  background: linear-gradient(to bottom, rgba(50,50,50,0.61803) 0%,rgba(0,0,0,0.61803) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+  border: 4px solid rgba(60,60,60,0.61803);
+  border-radius: 5px;
+  -webkit-background-clip: padding-box; /* for Safari */
+  background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
+  color: white;
   font-family: PT Sans, sans-serif;
   font-size: 10pt;
+  white-space: pre;
   line-height: 1.2;
   list-style-type: none;
-  background: #222;
-  color: #eee;
-  border: 0 solid #ddd;
-  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
-          box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
 }
 
 .x_ite-private-menu .context-menu-item {
+  cursor: pointer;
   position: relative;
-  background-color: #222;
+  border-radius: 5px;
   margin: 0;
-  border-top: 1px solid #222;
-  border-bottom: 1px solid #222;
-  padding: 3px 24px 3px 24px;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
+  padding: 5px 24px;
   font-size: 10pt;
   line-height: 1;
   letter-spacing: unset;
+  text-align: left;
 }
 
-.x_ite-private-menu .context-menu-item > label > input,
-.x_ite-private-menu .context-menu-item > label > textarea {
-  all: revert;
-  -webkit-user-select: text;
-     -moz-user-select: text;
-      -ms-user-select: text;
-          user-select: text;
-}
-
-.x_ite-private-menu .context-menu-input > label > input[type="checkbox"] {
-  -webkit-appearance: checkbox;
-  -moz-appearance: checkbox;
+.x_ite-private-menu .context-menu-item:hover:not(.context-menu-not-selectable) {
+  background-color: rgba(255, 69, 58, 0.8);
 }
 
-.x_ite-private-menu .context-menu-input > label > input[type="radio"] {
-  -webkit-appearance: radio;
-  -moz-appearance: radio;
+.x_ite-private-menu .context-menu-item:hover > .context-menu-list {
+  display: block;
 }
 
-.x_ite-private-menu .context-menu-item:hover {
-  cursor: pointer;
-  background-color: #444;
-  border-top: 1px solid #eee;
-  border-bottom: 1px solid #eee;
+.x_ite-private-menu .context-menu-not-selectable {
+  cursor: default;
 }
 
-.x_ite-private-menu .context-menu-item.context-menu-separator {
+.x_ite-private-menu .context-menu-separator {
+  cursor: default;
+  margin: 2px 0;
   padding-top: 0;
   padding-bottom: 0;
   border-top: 0;
-  border-bottom: 1px solid #111;
+  border-bottom: 1px solid rgb(138, 138, 138);
 }
 
 .x_ite-private-menu .context-menu-separator + .context-menu-separator {
   display: none !important;
 }
 
-.x_ite-private-menu .context-menu-disabled {
-  color: #666;
-}
-
-.x_ite-private-menu .context-menu-input.context-menu-hover,
-.x_ite-private-menu .context-menu-disabled.context-menu-hover {
-  cursor: default;
-}
-
 .x_ite-private-menu .context-menu-submenu:after {
   content: "";
   position: absolute;
   display: block;
   right: 0;
-  top: 5px;
+  top: 8px;
   margin-right: 2px;
   /* CSS triangle */
   width: 0;
@@ -394,9 +366,16 @@ X3DCanvas #context-menu-layer {
   .context-menu-item.icon:before {}
  */
 
-.x_ite-private-menu .context-menu-item.context-menu-icon {
-  background-repeat: no-repeat;
-  background-position: 3px 2px;
+.x_ite-private-menu .context-menu-input > label {
+  cursor: pointer;
+  display: block;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  font-size: 10pt;
+  letter-spacing: unset;
+  line-height: 1;
 }
 
 /* vertically align inside labels */
@@ -408,36 +387,24 @@ X3DCanvas #context-menu-layer {
   line-height: 1;
 }
 
+.x_ite-private-menu .context-menu-item > label > input {
+  all: revert;
+  cursor: pointer;
+}
+
 /* position checkboxes and radios like icons */
 .x_ite-private-menu .context-menu-input > label > input[type="checkbox"],
 .x_ite-private-menu .context-menu-input > label > input[type="radio"] {
+  accent-color: rgb(255, 69, 58);
   display: inline;
+  width: 12px;
   margin: 0;
   margin-left: -20px;
-  margin-right: 3px;
   padding: 0;
 }
 
 .x_ite-private-menu .context-menu-input > label > span {
-  margin-left: 2px;
-}
-
-.x_ite-private-menu .context-menu-input > label,
-.x_ite-private-menu .context-menu-input > label > input[type="text"],
-.x_ite-private-menu .context-menu-input > label > textarea,
-.x_ite-private-menu .context-menu-input > label > select {
-  display: block;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  font-size: 10pt;
-  letter-spacing: unset;
-  line-height: 1;
-}
-
-.x_ite-private-menu .context-menu-input > label > textarea {
-  height: 100px;
+  padding-left: 8px;
 }
 
 .x_ite-private-menu .context-menu-item > .context-menu-list {
@@ -447,21 +414,25 @@ X3DCanvas #context-menu-layer {
   display: none;
 }
 
-/* display submenus on left side if there is no space on right side */
-.x_ite-private-menu.x_ite-private-menu-submenus-left .context-menu-item > .context-menu-list {
-  left: unset !important;
-}
+/* Item styles */
 
-.x_ite-private-menu .context-menu-item:hover > .context-menu-list {
-  display: block;
+.x_ite-private-menu .context-menu-title {
+  font-weight: bold;
+  padding: 4px 32px 4px 8px;
 }
 
-.x_ite-private-menu .context-menu-accesskey {
-  text-decoration: underline;
+.x_ite-private-menu .context-menu-selected {
+  font-weight: bold;
+  font-style: italic;
 }
 
 /* Icons */
 
+.x_ite-private-menu .context-menu-icon {
+  background-repeat: no-repeat;
+  background-position: 2px 3px;
+}
+
 .x_ite-private-icon-viewpoint {
   background: url("assets/images/Viewpoint.png");
 }
@@ -506,7 +477,7 @@ X3DCanvas #context-menu-layer {
   background: url("assets/images/TextureQuality.png");
 }
 
-.x_ite-private-icon-fullscreen {
+.x_ite-private-icon-enter-fullscreen {
   background: url("assets/images/gtk-fullscreen.png");
 }
 
@@ -521,3 +492,70 @@ X3DCanvas #context-menu-layer {
 .x_ite-private-icon-help-about {
   background: url("assets/images/help-about.png");
 }
+
+/* Spinner */
+
+.x_ite-private-splash-screen {
+  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%);
+}
+
+.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); } }
+
+.x_ite-private-progress {
+  position: absolute;
+  top: calc(50% - 28pt - 11pt);
+  left: calc(50% - 100px);
+  width: 200px;
+}
+
+.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;
+}
+
+.x_ite-private-x_ite span.x_ite-private-x3d {
+  font-weight: bold;
+}
+
+.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;
+}
+
+.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;
+}
+
+.x_ite-private-progressbar div {
+  width: 0%;
+  height: 6px;
+  background: rgba(255, 255, 255, 0.5);
+}

package/src/x_ite.html

@@ -14,14 +14,13 @@
    <script type="text/javascript" src="tests.js"></script>
 
    <!-- X_ITE START -->
-   <link rel="stylesheet" type="text/css" href="x_ite.css"/>
    <script type="text/javascript" src="../node_modules/requirejs/require.js"></script>
    <script type="text/javascript" src="x_ite.config.js"></script>
    <script type="text/javascript" src="x_ite.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;
@@ -94,12 +93,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;
 }
 
@@ -245,6 +243,11 @@ main.color-management .browser {
    display: none;
 }
 
+.x_ite-console {
+  font-family: monospace;
+  white-space: pre;
+}
+
    </style>
 
    <script type="text/javascript">
@@ -295,10 +298,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);
@@ -321,6 +324,19 @@ X3D (function ()
             return
       }
    });
+
+   Browser .getContextMenu () .setUserMenu (function ()
+   {
+      return {
+         "item-1": {
+            name: "Item 1",
+            callback: function (event)
+            {
+               console .log ("Item 1");
+            },
+         },
+      };
+   });
 },
 function (error)
 {
@@ -339,7 +355,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/>
@@ -348,14 +364,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">
                <a href="../x_ite.min.html">x_ite.min.html</a><a href="http://rawgit.com/create3000/x_ite/main/x_ite.min.html">github</a>