change all attributes on <mr-app> to data-attributes (#660)

Signed-off-by: hanbollar <[email protected]>
Volumetrics-io · May 16, 2024 · bc1d687 · bc1d687
1 parent f7386b1
commit bc1d687
Show file tree

Hide file tree

Showing 10 changed files with 18 additions and 18 deletions.
diff --git a/dist/mr.js b/dist/mr.js
diff --git a/samples/examples/audio.html b/samples/examples/audio.html
@@ -11,7 +11,7 @@
   <body >
 
 
-<mr-app >
+<mr-app>
     <mr-panel class="layout" data-comp-anchor="type: fixed;">
 
         <mr-div id="navbar">

diff --git a/samples/examples/camera.html b/samples/examples/camera.html
@@ -9,7 +9,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
   <body >
-   <mr-app orbital="mode:true; targetPos:0.5 0.25 0;" camera="mode: perspective; startPos:1 1 1;">
+   <mr-app data-orbital="mode:true; targetPos:0.5 0.25 0;" data-camera="mode: perspective; startPos:1 1 1;">
     <mr-panel id="panel" class="layout" data-comp-anchor="type: fixed;">
         <mr-div id="navbar">
         <mr-a href="https://mrjs.io" class="mrjs">

diff --git a/samples/examples/debug.html b/samples/examples/debug.html
@@ -9,7 +9,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
   <body >
-   <mr-app debug="true" stats="true" preserve-drawing-buffer="true">
+   <mr-app data-debug="true" data-stats="true" data-preserve-drawing-buffer="true">
       <mr-panel class="layout">
         <mr-div id="navbar">
          <mr-a href="https://mrjs.io" class="mrjs">

diff --git a/samples/examples/models.html b/samples/examples/models.html
@@ -9,7 +9,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
   <body >
-   <mr-app> <!-- debug="true"> !--stats="true">-->
+   <mr-app>
     <mr-panel id="panel" class="layout" data-comp-anchor="type: fixed;">
         <mr-div id="navbar">
         <mr-a href="https://mrjs.io" class="mrjs">

diff --git a/samples/examples/physics.html b/samples/examples/physics.html
@@ -13,7 +13,7 @@
     </style>
   </head>
   <body >
-   <mr-app orbital="true" debug="true">
+   <mr-app data-orbital="mode:true" data-debug="true">
     <mr-model id="baseline" src="../examples-assets/models/tiledesert001.glb" 
                 style="scale: 0.1;"
               data-comp-animation="clip: 1; action: play;" 

diff --git a/samples/examples/skybox.html b/samples/examples/skybox.html
@@ -10,7 +10,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
   <body >
-   <mr-app occlusion="spotlight">
+   <mr-app data-occlusion="spotlight" data-orbital="mode:true">
     <mr-panel id="panel" class="layout" data-comp-anchor="type: fixed;">
         <mr-div id="navbar">
         <mr-a href="https://mrjs.io" class="mrjs">

diff --git a/samples/examples/text.html b/samples/examples/text.html
@@ -9,7 +9,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
   <body >
-   <mr-app> <!--debug="true" -->
+   <mr-app>
     <mr-panel id="panel" class="layout" data-comp-anchor="type: fixed;">
         <mr-div id="navbar">
         <mr-a href="https://mrjs.io" class="mrjs">

diff --git a/src/core/MRApp.js b/src/core/MRApp.js
@@ -130,7 +130,7 @@ export class MRApp extends MRElement {
         document.addEventListener('engine-started', (event) => {
             this.user = new MRUser(this.camera, this.scene);
 
-            if (this.getAttribute('occlusion') == 'spotlight') {
+            if (this.dataset.occlusion == 'spotlight') {
                 this.scene.add(this.user.initSpotlight());
             }
 
@@ -234,7 +234,7 @@ export class MRApp extends MRElement {
     init() {
         window.addEventListener('resize', this.onWindowResize);
 
-        this.debug = this.getAttribute('debug') ?? false;
+        this.debug = this.dataset.debug ?? false;
 
         /* --- Renderer Setup --- */
 
@@ -248,7 +248,7 @@ export class MRApp extends MRElement {
             // References:
             // https://stackoverflow.com/questions/15558418/how-do-you-save-an-image-from-a-three-js-canvas
             // https://stackoverflow.com/questions/30628064/how-to-toggle-preservedrawingbuffer-in-three-js
-            preserveDrawingBuffer: this.getAttribute('preserve-drawing-buffer') ?? false,
+            preserveDrawingBuffer: this.dataset.preserveDrawingBuffer ?? false,
         });
         this.renderer.setPixelRatio(window.devicePixelRatio);
         this.renderer.setSize(this.appWidth, this.appHeight);
@@ -268,7 +268,7 @@ export class MRApp extends MRElement {
 
         this.initCamera();
 
-        const layersString = this.getAttribute('layers');
+        const layersString = this.dataset.layers;
         if (layersString) {
             this.layers = mrjsUtils.string.stringToVector(layersString);
 
@@ -277,7 +277,7 @@ export class MRApp extends MRElement {
             }
         }
 
-        const orbitalOptionsString = this.getAttribute('orbital');
+        const orbitalOptionsString = this.dataset.orbital;
         let orbitalOptions = {};
         if (orbitalOptionsString) {
             orbitalOptions = mrjsUtils.string.stringToJson(orbitalOptionsString);
@@ -320,14 +320,14 @@ export class MRApp extends MRElement {
 
         /* --- Lighting Setup --- */
 
-        if (this.getAttribute('lighting') ?? false) {
-            this.lighting = mrjsUtils.string.stringToJson(this.lighting);
+        if (this.dataset.lighting ?? false) {
+            this.lighting = mrjsUtils.string.stringToJson(this.dataset.lighting);
         }
         this.initLights(this.lighting);
 
         /* --- Stats Setup --- */
 
-        if (this.getAttribute('stats') ?? false) {
+        if (this.dataset.stats ?? false) {
             // Old version of stats using the Stats.js visual
             // setup. Leaving to allow for top left quick visual of stats.
             // Is /not/ performant in headset. Documentation notes this.
@@ -388,7 +388,7 @@ export class MRApp extends MRElement {
      * @description Initializes the user information for the MRApp including appropriate HMD direction and camera information and the default scene anchor location.
      */
     initCamera = () => {
-        const cameraOptionsString = this.getAttribute('camera') ?? '';
+        const cameraOptionsString = this.dataset.camera ?? '';
         if (cameraOptionsString) {
             Object.assign(this.cameraOptions, mrjsUtils.string.stringToJson(this.cameraOptionString) ?? {});
         }

diff --git a/src/core/componentSystems/AnchorSystem.js b/src/core/componentSystems/AnchorSystem.js
@@ -23,7 +23,7 @@ export class AnchorSystem extends MRSystem {
         this.currentEntity = null;
         this.tempMatrix = new THREE.Matrix4();
 
-        this.planeManager = new MRPlaneManager(this.app.scene, this.app.getAttribute('occlusion'));
+        this.planeManager = new MRPlaneManager(this.app.scene, this.app.dataset.occlusion);
         this.anchoringQueue = new Set();
 
         this.hitResults;