Merge pull request #4503 from RaananW/eliminate-ids

Removing IDs from the viewer's templates

Viewer/assets/templates/default/navbar.html

@@ -432,7 +432,7 @@
 </style>
 {{/if}}
 
-<div class="nav-container" id="navbar-control">
+<div class="nav-container navbar-control">
     {{#unless hideLogo}}
     <div class="logo-button" title="{{logoText}}">
         {{#if logoLink}}
@@ -445,7 +445,7 @@
     {{/unless}}{{#unless (or (not animations) hideAnimations)}}
     <div class="animation-control">
         <div class="types">
-            <button class="flex-container animation-buttons" id="types-button">
+            <button class="flex-container types-button animation-buttons">
                 <!-- <div> -->
                 <span class="icon types-icon"></span>
                 <span class="control-text animation-label">{{selectedAnimationName}}</span>
@@ -457,7 +457,7 @@
             </button>
             <div class="menu-options">
                 {{#each animations}} {{#unless (eq ../selectedAnimation (add @index 1))}}
-                <button class="flex-container animation-buttons" id="label-option-button" data-value="{{this}}">
+                <button class="flex-container label-option-button animation-buttons" data-value="{{this}}">
                     <!-- <div> -->
                     <span class="icon types-icon"></span>
                     <span class="control-text animation-label">{{this}}</span>
@@ -467,24 +467,24 @@
                 {{/unless}} {{/each}}
             </div>
         </div>
-        <div class="progress-control" id="progress-control">
-            <button class="play-pause" id="play-pause-button">
+        <div class="progress-control">
+            <button class="play-pause play-pause-button">
                 {{#if paused}}
                 <span class="icon play-icon"></span>
                 {{else}}
                 <span class="icon pause-icon"></span>
                 {{/if}}
             </button>
-            <input class="progress-wrapper" id="progress-wrapper" type="range" min="0" max="100" step="0.01">
+            <input class="progress-wrapper" type="range" min="0" max="100" step="0.01">
         </div>
         <div class="speed">
-            <button class="flex-container" id="speed-button">
+            <button class="flex-container speed-button">
                 <span class="control-text speed-text">{{selectedSpeed}}</span>
                 <span class="icon up-icon"></span>
             </button>
             <div class="menu-options">
                 {{#eachInMap speedList}} {{#unless (eq ../selectedSpeed id)}}
-                <button class="flex-container" id="speed-option-button" data-value="{{value}}">
+                <button class="flex-container speed-option-button" data-value="{{value}}">
                     <span class="control-text speed-text">{{id}}</span>
                 </button>
                 {{/unless}} {{/eachInMap}}
@@ -494,7 +494,7 @@
     {{/unless}}
     <div class="default-control">
         {{#unless hideHdButton}}
-        <button class="hd-button" id="hd-button" title="{{text.hdButton}}">
+        <button class="hd-button hd-button" title="{{text.hdButton}}">
             {{#if hdEnabled}}
             <span class="icon sd-icon"></span>
             {{else}}
@@ -502,11 +502,11 @@
             {{/if}}
         </button>
         {{/unless}} {{#unless hideHelp}}
-        <button class="help" id="help-button" title="{{text.helpButton}}">
+        <button class="help help-button" title="{{text.helpButton}}">
             <span class="icon help-icon"></span>
         </button>
         {{/unless}} {{#unless hideFullScreen}}
-        <button class="fullscreen" id="fullscreen-button" title="{{text.fullscreenButton}}">
+        <button class="fullscreen fullscreen-button" title="{{text.fullscreenButton}}">
             <span class="icon fullscreen-icon"></span>
         </button>
         {{/unless}}

Viewer/src/configuration/types/default.ts

@@ -59,14 +59,14 @@ export let defaultConfiguration: ViewerConfiguration = {
             },
             events: {
                 pointerdown: {
-                    'navbar-control': true,
-                    'help-button': true
+                    '.navbar-control': true,
+                    '.help-button': true
                 },
                 input: {
-                    'progress-wrapper': true
+                    '.progress-wrapper': true
                 },
                 pointerup: {
-                    'progress-wrapper': true
+                    '.progress-wrapper': true
                 }
             }
         },

Viewer/src/templating/templateManager.ts

@@ -592,10 +592,16 @@ export class Template {
                         // strict null checl is working incorrectly, must override:
                         let event = this._configuration.events[eventName] || {};
                         selectorsArray.filter(selector => event[selector]).forEach(selector => {
-                            if (selector && selector.indexOf('#') !== 0) {
-                                selector = '#' + selector;
-                            }
                             let htmlElement = <HTMLElement>this.parent.querySelector(selector);
+                            if (!htmlElement) {
+                                // backcompat, fallback to id
+                                if (selector && selector.indexOf('#') !== 0) {
+                                    selector = '#' + selector;
+                                }
+                                try {
+                                    htmlElement = <HTMLElement>this.parent.querySelector(selector);
+                                } catch (e) { }
+                            }
                             if (htmlElement) {
                                 let binding = functionToFire.bind(this, selector);
                                 htmlElement.addEventListener(eventName, binding, false);

Viewer/src/viewer/defaultViewer.ts

@@ -47,11 +47,15 @@ export class DefaultViewer extends AbstractViewer {
         this._initNavbar();
 
         // close overlay button
-        let closeButton = document.getElementById('close-button');
-        if (closeButton) {
-            closeButton.addEventListener('pointerdown', () => {
-                this.hideOverlayScreen();
-            });
+        let template = this.templateManager.getTemplate('overlay');
+        if (template) {
+
+            let closeButton = template.parent.querySelector('.close-button');
+            if (closeButton) {
+                closeButton.addEventListener('pointerdown', () => {
+                    this.hideOverlayScreen();
+                });
+            }
         }
 
         if (this.configuration.templates && this.configuration.templates.viewer) {
@@ -85,7 +89,7 @@ export class DefaultViewer extends AbstractViewer {
             // an example how to trigger the help button. publiclly available
             this.templateManager.eventManager.registerCallback("navBar", () => {
                 // do your thing
-            }, "pointerdown", "#help-button");
+            }, "pointerdown", ".help-button");
 
             this.templateManager.eventManager.registerCallback("navBar", (event: EventCallback) => {
                 const evt = event.event;
@@ -101,7 +105,7 @@ export class DefaultViewer extends AbstractViewer {
                     this._togglePlayPause(true);
                 }
                 this._resumePlay = false;
-            }, "pointerup", "#progress-wrapper");
+            }, "pointerup", ".progress-wrapper");
         }
     }
 
@@ -122,7 +126,19 @@ export class DefaultViewer extends AbstractViewer {
 
         let parentClasses = element.parentElement!.classList;
 
-        switch (element.id) {
+        let elementClasses = element.classList;
+
+        let elementName = ""; 0
+
+        for (let i = 0; i < elementClasses.length; ++i) {
+            let className = elementClasses[i];
+            if (className.indexOf("-button") !== -1 || className.indexOf("-wrapper") !== -1) {
+                elementName = className;
+                break;
+            }
+        }
+
+        switch (elementName) {
             case "speed-button":
             case "types-button":
                 if (parentClasses.contains("open")) {
@@ -198,7 +214,7 @@ export class DefaultViewer extends AbstractViewer {
     private _updateProgressBar = () => {
         let navbar = this.templateManager.getTemplate('navBar');
         if (!navbar) return;
-        var progressSlider = <HTMLInputElement>navbar.parent.querySelector("input#progress-wrapper");
+        var progressSlider = <HTMLInputElement>navbar.parent.querySelector("input.progress-wrapper");
         if (progressSlider && this._currentAnimation) {
             const progress = this._currentAnimation.currentFrame / this._currentAnimation.frames * 100;
             var currentValue = progressSlider.valueAsNumber;

dist/preview release/what's new.md

@@ -88,6 +88,7 @@
 - Animation navbar now updates correctly when a new model is loaded [#4441](https://github.com/BabylonJS/Babylon.js/issues/4441) ([RaananW](https://github.com/RaananW))
 - Non-normalized meshes didn't center and focus correctly ([RaananW](https://github.com/RaananW))
 - Meshes with skeletons could have incorrect animations ([RaananW](https://github.com/RaananW))
+- Removed element IDs from viewer's templates to allow more than one viewqer in a single page [#4500](https://github.com/BabylonJS/Babylon.js/issues/4500) ([RaananW](https://github.com/RaananW))
 
 ### Loaders