x_ite 8.10.1 → 8.11.1

package/docs/assets/js/example.js

@@ -3,6 +3,7 @@ $("table.examples a") .on ("click", function ()
    let
       div      = $("div.example"),
       header   = div .find (".header"),
+      toolbar  = div .find (".toolbar"),
       canvas   = div .find ("x3d-canvas"),
       zip      = div .find ("zip");
 
@@ -13,9 +14,10 @@ $("table.examples a") .on ("click", function ()
    }
    else
    {
-      div    = $("<div></div>") .addClass ("example") .appendTo ("body");
-      header = $("<p></p>") .addClass ("header") .appendTo (div);
-      canvas = $("<x3d-canvas></x3d-canvas>") .appendTo (div);
+      div     = $("<div></div>") .addClass ("example") .appendTo ("body");
+      header  = $("<p></p>") .addClass ("header") .appendTo (div);
+      toolbar = $("<p></p>") .addClass ("toolbar") .appendTo (div);
+      canvas  = $("<x3d-canvas></x3d-canvas>") .appendTo (div);
 
       $("<i></i>") .addClass (["fas", "fa-solid", "fa-circle-xmark", "fa-fw"]) .appendTo (div) .on ("click", function ()
       {
@@ -26,11 +28,101 @@ $("table.examples a") .on ("click", function ()
       zip = $("<a></a>") .addClass ("zip") .text ("Download ZIP Archive") .appendTo ($("<p></p>") .appendTo (div));
    }
 
+   canvas .prop ("browser") .getBrowserOptions () .reset ();
+
    header .text ($(this) .attr ("title"));
    canvas .attr ("src", $(this) .attr ("href"));
    zip    .attr ("href", $(this) .attr ("href") .replace (/\.x3d$/, ".zip"));
 
+   updateToolbar (toolbar, canvas)
+
    console .log (`Loading ${$(this) .attr ("title")} ...`);
 
    return false;
 });
+
+function updateToolbar (toolbar, canvas)
+{
+   const browser = canvas .prop ("browser");
+
+   toolbar .empty ();
+
+   const antialiased = $("<span></span>")
+      .text ("antialiased")
+      .attr ("title", "Toggle antialiasing.")
+      .addClass (browser .getBrowserOption ("Antialiased") ? "selected" : "")
+      .on ("click", () =>
+      {
+         const value = !browser .getBrowserOption ("Antialiased");
+
+         browser .setBrowserOption ("Antialiased", value);
+
+         antialiased .toggleClass ("selected");
+      })
+      .appendTo (toolbar);
+
+   $("<span></span>") .addClass ("dot") .appendTo (toolbar);
+
+   const contentScale = $("<span></span>")
+      .text ("contentScale 1.0")
+      .attr ("title", "Toggle contentScale between 0.1, 1.0 and 2.0.")
+      .on ("click", () =>
+      {
+         const
+            index = ((contentScale .attr ("index") ?? 1) + 1) % 3,
+            value = [0.1, 1, 2][index];
+
+         browser .setBrowserOption ("ContentScale", value);
+
+         contentScale
+            .attr ("index", index)
+            .text ("contentScale " + value .toFixed (1))
+      })
+      .appendTo (toolbar);
+
+   $("<span></span>") .addClass ("dot") .appendTo (toolbar);
+
+   const pixelated = $("<span></span>")
+      .text ("pixelated")
+      .attr ("title", "Set CSS property image-rendering to pixelated.")
+      .addClass (canvas .css ("image-rendering") === "pixelated" ? "selected" : "")
+      .on ("click", () =>
+      {
+         canvas .css ("image-rendering", pixelated .hasClass ("selected") ? "unset" : "pixelated");
+
+         pixelated .toggleClass ("selected");
+      })
+      .appendTo (toolbar);
+
+   $("<span></span>") .addClass ("separator") .appendTo (toolbar);
+
+   const oit = $("<span></span>")
+      .text ("oit")
+      .attr ("title", "Toggle order independent transparency.")
+      .addClass (browser .getBrowserOption ("OrderIndependentTransparency") ? "selected" : "")
+      .on ("click", () =>
+      {
+         const value = !browser .getBrowserOption ("OrderIndependentTransparency");
+
+         browser .setBrowserOption ("OrderIndependentTransparency", value);
+
+         oit .toggleClass ("selected");
+      })
+      .appendTo (toolbar);
+
+   $("<span></span>") .addClass ("dot") .appendTo (toolbar);
+
+   const log = $("<span></span>")
+      .text ("log")
+      .attr ("title", "Toggle logarithmic depth buffer.")
+      .addClass (browser .getBrowserOption ("LogarithmicDepthBuffer") ? "selected" : "")
+      .on ("click", () =>
+      {
+         const value = !browser .getBrowserOption ("LogarithmicDepthBuffer");
+
+         browser .setBrowserOption ("LogarithmicDepthBuffer", value);
+
+         log .toggleClass ("selected");
+      })
+      .appendTo (toolbar);
+}