@babylonjs/viewer 5.0.0-rc.4 → 5.0.2

package/templating/templateManager.js

@@ -1,544 +1,554 @@
-import { Observable } from '@babylonjs/core/Misc/observable.js';
-import { Tools } from '@babylonjs/core/Misc/tools.js';
-import { isUrl, camelToKebab, kebabToCamel, deepmerge } from '../helper/index.js';
-import * as Handlebars from 'handlebars/dist/handlebars';
-import { EventManager } from './eventManager.js';
-/**
- * The template manager, a member of the viewer class, will manage the viewer's templates and generate the HTML.
- * The template manager managers a single viewer and can be seen as the collection of all sub-templates of the viewer.
- */
-var TemplateManager = /** @class */ (function () {
-    function TemplateManager(containerElement) {
-        this.containerElement = containerElement;
-        this.templates = {};
-        this.onTemplateInit = new Observable();
-        this.onTemplateLoaded = new Observable();
-        this.onTemplateStateChange = new Observable();
-        this.onAllLoaded = new Observable();
-        this.onEventTriggered = new Observable();
-        this.eventManager = new EventManager(this);
-    }
-    /**
-     * Initialize the template(s) for the viewer. Called bay the Viewer class
-     * @param templates the templates to be used to initialize the main template
-     */
-    TemplateManager.prototype.initTemplate = function (templates) {
-        var _this = this;
-        var internalInit = function (dependencyMap, name, parentTemplate) {
-            //init template
-            var template = _this.templates[name];
-            var childrenTemplates = Object.keys(dependencyMap).map(function (childName) {
-                return internalInit(dependencyMap[childName], childName, template);
-            });
-            // register the observers
-            //template.onLoaded.add(() => {
-            var addToParent = function () {
-                var lastElements = parentTemplate && parentTemplate.parent.querySelectorAll(camelToKebab(name));
-                var containingElement = (lastElements && lastElements.length && lastElements.item(lastElements.length - 1)) || _this.containerElement;
-                template.appendTo(containingElement);
-                _this._checkLoadedState();
-            };
-            if (parentTemplate && !parentTemplate.parent) {
-                parentTemplate.onAppended.add(function () {
-                    addToParent();
-                });
-            }
-            else {
-                addToParent();
-            }
-            //});
-            return template;
-        };
-        //build the html tree
-        return this._buildHTMLTree(templates).then(function (htmlTree) {
-            if (_this.templates['main']) {
-                internalInit(htmlTree, 'main');
-            }
-            else {
-                _this._checkLoadedState();
-            }
-            return;
-        });
-    };
-    /**
-     *
-     * This function will create a simple map with child-dependencies of the template html tree.
-     * It will compile each template, check if its children exist in the configuration and will add them if they do.
-     * It is expected that the main template will be called main!
-     *
-     * @param templates
-     */
-    TemplateManager.prototype._buildHTMLTree = function (templates) {
-        var _this = this;
-        var promises = Object.keys(templates).map(function (name) {
-            // if the template was overridden
-            if (!templates[name]) {
-                return Promise.resolve(false);
-            }
-            // else - we have a template, let's do our job!
-            var template = new Template(name, templates[name]);
-            template.onLoaded.add(function () {
-                _this.onTemplateLoaded.notifyObservers(template);
-            });
-            template.onStateChange.add(function () {
-                _this.onTemplateStateChange.notifyObservers(template);
-            });
-            _this.onTemplateInit.notifyObservers(template);
-            // make sure the global onEventTriggered is called as well
-            template.onEventTriggered.add(function (eventData) { return _this.onEventTriggered.notifyObservers(eventData); });
-            _this.templates[name] = template;
-            return template.initPromise;
-        });
-        return Promise.all(promises).then(function () {
-            var templateStructure = {};
-            // now iterate through all templates and check for children:
-            var buildTree = function (parentObject, name) {
-                _this.templates[name].isInHtmlTree = true;
-                var childNodes = _this.templates[name].getChildElements().filter(function (n) { return !!_this.templates[n]; });
-                childNodes.forEach(function (element) {
-                    parentObject[element] = {};
-                    buildTree(parentObject[element], element);
-                });
-            };
-            if (_this.templates['main']) {
-                buildTree(templateStructure, "main");
-            }
-            return templateStructure;
-        });
-    };
-    /**
-     * Get the canvas in the template tree.
-     * There must be one and only one canvas inthe template.
-     */
-    TemplateManager.prototype.getCanvas = function () {
-        return this.containerElement.querySelector('canvas');
-    };
-    /**
-     * Get a specific template from the template tree
-     * @param name the name of the template to load
-     */
-    TemplateManager.prototype.getTemplate = function (name) {
-        return this.templates[name];
-    };
-    TemplateManager.prototype._checkLoadedState = function () {
-        var _this = this;
-        var done = Object.keys(this.templates).length === 0 || Object.keys(this.templates).every(function (key) {
-            return (_this.templates[key].isLoaded && !!_this.templates[key].parent) || !_this.templates[key].isInHtmlTree;
-        });
-        if (done) {
-            this.onAllLoaded.notifyObservers(this);
-        }
-    };
-    /**
-     * Dispose the template manager
-     */
-    TemplateManager.prototype.dispose = function () {
-        var _this = this;
-        // dispose all templates
-        Object.keys(this.templates).forEach(function (template) {
-            _this.templates[template].dispose();
-        });
-        this.templates = {};
-        this.eventManager.dispose();
-        this.onTemplateInit.clear();
-        this.onAllLoaded.clear();
-        this.onEventTriggered.clear();
-        this.onTemplateLoaded.clear();
-        this.onTemplateStateChange.clear();
-    };
-    return TemplateManager;
-}());
-export { TemplateManager };
-// register a new helper. modified https://stackoverflow.com/questions/9838925/is-there-any-method-to-iterate-a-map-with-handlebars-js
-Handlebars.registerHelper('eachInMap', function (map, block) {
-    var out = '';
-    Object.keys(map).map(function (prop) {
-        var data = map[prop];
-        if (typeof data === 'object') {
-            data.id = data.id || prop;
-            out += block.fn(data);
-        }
-        else {
-            out += block.fn({ id: prop, value: data });
-        }
-    });
-    return out;
-});
-Handlebars.registerHelper('add', function (a, b) {
-    var out = a + b;
-    return out;
-});
-Handlebars.registerHelper('eq', function (a, b) {
-    var out = (a == b);
-    return out;
-});
-Handlebars.registerHelper('or', function (a, b) {
-    var out = a || b;
-    return out;
-});
-Handlebars.registerHelper('not', function (a) {
-    var out = !a;
-    return out;
-});
-Handlebars.registerHelper('count', function (map) {
-    return map.length;
-});
-Handlebars.registerHelper('gt', function (a, b) {
-    var out = a > b;
-    return out;
-});
-/**
- * This class represents a single template in the viewer's template tree.
- * An example for a template is a single canvas, an overlay (containing sub-templates) or the navigation bar.
- * A template is injected using the template manager in the correct position.
- * The template is rendered using Handlebars and can use Handlebars' features (such as parameter injection)
- *
- * For further information please refer to the documentation page, https://doc.babylonjs.com
- */
-var Template = /** @class */ (function () {
-    function Template(name, _configuration) {
-        var _this = this;
-        this.name = name;
-        this._configuration = _configuration;
-        this.onLoaded = new Observable();
-        this.onAppended = new Observable();
-        this.onStateChange = new Observable();
-        this.onEventTriggered = new Observable();
-        this.onParamsUpdated = new Observable();
-        this.onHTMLRendered = new Observable();
-        this.loadRequests = [];
-        this.isLoaded = false;
-        this.isShown = false;
-        this.isInHtmlTree = false;
-        var htmlContentPromise = this._getTemplateAsHtml(_configuration);
-        this.initPromise = htmlContentPromise.then(function (htmlTemplate) {
-            if (htmlTemplate) {
-                _this._htmlTemplate = htmlTemplate;
-                var compiledTemplate = Handlebars.compile(htmlTemplate, { noEscape: (_this._configuration.params && !!_this._configuration.params.noEscape) });
-                var config = _this._configuration.params || {};
-                _this._rawHtml = compiledTemplate(config);
-                try {
-                    _this._fragment = document.createRange().createContextualFragment(_this._rawHtml);
-                }
-                catch (e) {
-                    var test_1 = document.createElement(_this.name);
-                    test_1.innerHTML = _this._rawHtml;
-                    _this._fragment = test_1;
-                }
-                _this.isLoaded = true;
-                _this.isShown = true;
-                _this.onLoaded.notifyObservers(_this);
-            }
-            return _this;
-        });
-    }
-    /**
-     * Some templates have parameters (like background color for example).
-     * The parameters are provided to Handlebars which in turn generates the template.
-     * This function will update the template with the new parameters
-     *
-     * Note that when updating parameters the events will be registered again (after being cleared).
-     *
-     * @param params the new template parameters
-     */
-    Template.prototype.updateParams = function (params, append) {
-        if (append === void 0) { append = true; }
-        if (append) {
-            this._configuration.params = deepmerge(this._configuration.params, params);
-        }
-        else {
-            this._configuration.params = params;
-        }
-        // update the template
-        if (this.isLoaded) {
-            // this.dispose();
-        }
-        var compiledTemplate = Handlebars.compile(this._htmlTemplate);
-        var config = this._configuration.params || {};
-        this._rawHtml = compiledTemplate(config);
-        try {
-            this._fragment = document.createRange().createContextualFragment(this._rawHtml);
-        }
-        catch (e) {
-            var test_2 = document.createElement(this.name);
-            test_2.innerHTML = this._rawHtml;
-            this._fragment = test_2;
-        }
-        if (this.parent) {
-            this.appendTo(this.parent, true);
-        }
-    };
-    Template.prototype.redraw = function () {
-        this.updateParams({});
-    };
-    Object.defineProperty(Template.prototype, "configuration", {
-        /**
-         * Get the template'S configuration
-         */
-        get: function () {
-            return this._configuration;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /**
-     * A template can be a parent element for other templates or HTML elements.
-     * This function will deliver all child HTML elements of this template.
-     */
-    Template.prototype.getChildElements = function () {
-        var childrenArray = [];
-        //Edge and IE don't support frage,ent.children
-        var children = this._fragment && this._fragment.children;
-        if (!this._fragment) {
-            var fragment = this.parent.querySelector(this.name);
-            if (fragment) {
-                children = fragment.querySelectorAll('*');
-            }
-        }
-        if (!children) {
-            // casting to HTMLCollection, as both NodeListOf and HTMLCollection have 'item()' and 'length'.
-            children = this._fragment.querySelectorAll('*');
-        }
-        for (var i = 0; i < children.length; ++i) {
-            var child = children.item(i);
-            if (child) {
-                childrenArray.push(kebabToCamel(child.nodeName.toLowerCase()));
-            }
-        }
-        return childrenArray;
-    };
-    /**
-     * Appending the template to a parent HTML element.
-     * If a parent is already set and you wish to replace the old HTML with new one, forceRemove should be true.
-     * @param parent the parent to which the template is added
-     * @param forceRemove if the parent already exists, shoud the template be removed from it?
-     */
-    Template.prototype.appendTo = function (parent, forceRemove) {
-        var _this = this;
-        if (this.parent) {
-            if (forceRemove && this._addedFragment) {
-                /*let fragement = this.parent.querySelector(this.name)
-                if (fragement)
-                    this.parent.removeChild(fragement);*/
-                this.parent.innerHTML = '';
-            }
-            else {
-                return;
-            }
-        }
-        this.parent = parent;
-        if (this._configuration.id) {
-            this.parent.id = this._configuration.id;
-        }
-        if (this._fragment) {
-            this.parent.appendChild(this._fragment);
-            this._addedFragment = this._fragment;
-        }
-        else {
-            this.parent.insertAdjacentHTML("beforeend", this._rawHtml);
-        }
-        this.onHTMLRendered.notifyObservers(this);
-        // appended only one frame after.
-        setTimeout(function () {
-            _this._registerEvents();
-            _this.onAppended.notifyObservers(_this);
-        });
-    };
-    /**
-     * Show the template using the provided visibilityFunction, or natively using display: flex.
-     * The provided function returns a promise that should be fullfilled when the element is shown.
-     * Since it is a promise async operations are more than possible.
-     * See the default viewer for an opacity example.
-     * @param visibilityFunction The function to execute to show the template.
-     */
-    Template.prototype.show = function (visibilityFunction) {
-        var _this = this;
-        if (this._isHiding) {
-            return Promise.resolve(this);
-        }
-        return Promise.resolve().then(function () {
-            _this._isShowing = true;
-            if (visibilityFunction) {
-                return visibilityFunction(_this);
-            }
-            else {
-                // flex? box? should this be configurable easier than the visibilityFunction?
-                _this.parent.style.display = 'flex';
-                // support old browsers with no flex:
-                if (_this.parent.style.display !== 'flex') {
-                    _this.parent.style.display = '';
-                }
-                return _this;
-            }
-        }).then(function () {
-            _this.isShown = true;
-            _this._isShowing = false;
-            _this.onStateChange.notifyObservers(_this);
-            return _this;
-        });
-    };
-    /**
-     * Hide the template using the provided visibilityFunction, or natively using display: none.
-     * The provided function returns a promise that should be fullfilled when the element is hidden.
-     * Since it is a promise async operations are more than possible.
-     * See the default viewer for an opacity example.
-     * @param visibilityFunction The function to execute to show the template.
-     */
-    Template.prototype.hide = function (visibilityFunction) {
-        var _this = this;
-        if (this._isShowing) {
-            return Promise.resolve(this);
-        }
-        return Promise.resolve().then(function () {
-            _this._isHiding = true;
-            if (visibilityFunction) {
-                return visibilityFunction(_this);
-            }
-            else {
-                // flex? box? should this be configurable easier than the visibilityFunction?
-                _this.parent.style.display = 'none';
-                return _this;
-            }
-        }).then(function () {
-            _this.isShown = false;
-            _this._isHiding = false;
-            _this.onStateChange.notifyObservers(_this);
-            return _this;
-        });
-    };
-    /**
-     * Dispose this template
-     */
-    Template.prototype.dispose = function () {
-        this.onAppended.clear();
-        this.onEventTriggered.clear();
-        this.onLoaded.clear();
-        this.onStateChange.clear();
-        this.isLoaded = false;
-        // remove from parent
-        try {
-            this.parent.removeChild(this._fragment);
-        }
-        catch (e) {
-            //noop
-        }
-        this.loadRequests.forEach(function (request) {
-            request.abort();
-        });
-        if (this._registeredEvents) {
-            this._registeredEvents.forEach(function (evt) {
-                evt.htmlElement.removeEventListener(evt.eventName, evt.function);
-            });
-        }
-    };
-    Template.prototype._getTemplateAsHtml = function (templateConfig) {
-        var _this = this;
-        if (!templateConfig) {
-            return Promise.reject('No templateConfig provided');
-        }
-        else if (templateConfig.html && !templateConfig.location) {
-            return Promise.resolve(templateConfig.html);
-        }
-        else {
-            var location_1 = this._getTemplateLocation(templateConfig);
-            if (isUrl(location_1)) {
-                return new Promise(function (resolve, reject) {
-                    var fileRequest = Tools.LoadFile(location_1, function (data) {
-                        resolve(data);
-                    }, undefined, undefined, false, function (request, error) {
-                        reject(error);
-                    });
-                    _this.loadRequests.push(fileRequest);
-                });
-            }
-            else {
-                location_1 = location_1.replace('#', '');
-                var element = document.getElementById(location_1);
-                if (element) {
-                    return Promise.resolve(element.innerHTML);
-                }
-                else {
-                    return Promise.reject('Template ID not found');
-                }
-            }
-        }
-    };
-    Template.prototype._registerEvents = function () {
-        var _this = this;
-        this._registeredEvents = this._registeredEvents || [];
-        if (this._registeredEvents.length) {
-            // first remove the registered events
-            this._registeredEvents.forEach(function (evt) {
-                evt.htmlElement.removeEventListener(evt.eventName, evt.function);
-            });
-        }
-        if (this._configuration.events) {
-            var _loop_1 = function (eventName) {
-                if (this_1._configuration.events && this_1._configuration.events[eventName]) {
-                    var functionToFire_1 = function (selector, event) {
-                        _this.onEventTriggered.notifyObservers({ event: event, template: _this, selector: selector });
-                    };
-                    // if boolean, set the parent as the event listener
-                    if (typeof this_1._configuration.events[eventName] === 'boolean') {
-                        var selector = this_1.parent.id;
-                        if (selector) {
-                            selector = '#' + selector;
-                        }
-                        else {
-                            selector = this_1.parent.tagName;
-                        }
-                        var binding = functionToFire_1.bind(this_1, selector);
-                        this_1.parent.addEventListener(eventName, binding, false);
-                        this_1._registeredEvents.push({
-                            htmlElement: this_1.parent,
-                            eventName: eventName,
-                            function: binding
-                        });
-                    }
-                    else if (typeof this_1._configuration.events[eventName] === 'object') {
-                        var selectorsArray = Object.keys(this_1._configuration.events[eventName] || {});
-                        // strict null checl is working incorrectly, must override:
-                        var event_1 = this_1._configuration.events[eventName] || {};
-                        selectorsArray.filter(function (selector) { return event_1[selector]; }).forEach(function (selector) {
-                            var htmlElement = _this.parent.querySelector(selector);
-                            if (!htmlElement) {
-                                // backcompat, fallback to id
-                                if (selector && selector.indexOf('#') !== 0) {
-                                    selector = '#' + selector;
-                                }
-                                try {
-                                    htmlElement = _this.parent.querySelector(selector);
-                                }
-                                catch (e) { }
-                            }
-                            if (htmlElement) {
-                                var binding = functionToFire_1.bind(_this, selector);
-                                htmlElement.addEventListener(eventName, binding, false);
-                                _this._registeredEvents.push({
-                                    htmlElement: htmlElement,
-                                    eventName: eventName,
-                                    function: binding
-                                });
-                            }
-                        });
-                    }
-                }
-            };
-            var this_1 = this;
-            for (var eventName in this._configuration.events) {
-                _loop_1(eventName);
-            }
-        }
-    };
-    Template.prototype._getTemplateLocation = function (templateConfig) {
-        if (!templateConfig || typeof templateConfig === 'string') {
-            return templateConfig;
-        }
-        else {
-            return templateConfig.location;
-        }
-    };
-    return Template;
-}());
-export { Template };
+import { Observable } from "@babylonjs/core/Misc/observable.js";
+import { Tools } from "@babylonjs/core/Misc/tools.js";
+// eslint-disable-next-line import/no-internal-modules
+import { isUrl, camelToKebab, kebabToCamel, deepmerge } from "../helper/index.js";
+import * as Handlebars from "handlebars";
+import { EventManager } from "./eventManager.js";
+/**
+ * The template manager, a member of the viewer class, will manage the viewer's templates and generate the HTML.
+ * The template manager managers a single viewer and can be seen as the collection of all sub-templates of the viewer.
+ */
+var TemplateManager = /** @class */ (function () {
+    function TemplateManager(containerElement) {
+        this.containerElement = containerElement;
+        this._templates = {};
+        this.onTemplateInit = new Observable();
+        this.onTemplateLoaded = new Observable();
+        this.onTemplateStateChange = new Observable();
+        this.onAllLoaded = new Observable();
+        this.onEventTriggered = new Observable();
+        this.eventManager = new EventManager(this);
+    }
+    /**
+     * Initialize the template(s) for the viewer. Called bay the Viewer class
+     * @param templates the templates to be used to initialize the main template
+     */
+    TemplateManager.prototype.initTemplate = function (templates) {
+        var _this = this;
+        var internalInit = function (dependencyMap, name, parentTemplate) {
+            //init template
+            var template = _this._templates[name];
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            Object.keys(dependencyMap).map(function (childName) {
+                return internalInit(dependencyMap[childName], childName, template);
+            });
+            // register the observers
+            //template.onLoaded.add(() => {
+            var addToParent = function () {
+                var lastElements = parentTemplate && parentTemplate.parent.querySelectorAll(camelToKebab(name));
+                var containingElement = (lastElements && lastElements.length && lastElements.item(lastElements.length - 1)) || _this.containerElement;
+                template.appendTo(containingElement);
+                _this._checkLoadedState();
+            };
+            if (parentTemplate && !parentTemplate.parent) {
+                parentTemplate.onAppended.add(function () {
+                    addToParent();
+                });
+            }
+            else {
+                addToParent();
+            }
+            //});
+            return template;
+        };
+        //build the html tree
+        return this._buildHTMLTree(templates).then(function (htmlTree) {
+            if (_this._templates["main"]) {
+                internalInit(htmlTree, "main");
+            }
+            else {
+                _this._checkLoadedState();
+            }
+            return;
+        });
+    };
+    /**
+     *
+     * This function will create a simple map with child-dependencies of the template html tree.
+     * It will compile each template, check if its children exist in the configuration and will add them if they do.
+     * It is expected that the main template will be called main!
+     *
+     * @param templates
+     */
+    TemplateManager.prototype._buildHTMLTree = function (templates) {
+        var _this = this;
+        var promises = Object.keys(templates).map(function (name) {
+            // if the template was overridden
+            if (!templates[name]) {
+                return Promise.resolve(false);
+            }
+            // else - we have a template, let's do our job!
+            var template = new Template(name, templates[name]);
+            template.onLoaded.add(function () {
+                _this.onTemplateLoaded.notifyObservers(template);
+            });
+            template.onStateChange.add(function () {
+                _this.onTemplateStateChange.notifyObservers(template);
+            });
+            _this.onTemplateInit.notifyObservers(template);
+            // make sure the global onEventTriggered is called as well
+            template.onEventTriggered.add(function (eventData) { return _this.onEventTriggered.notifyObservers(eventData); });
+            _this._templates[name] = template;
+            return template.initPromise;
+        });
+        return Promise.all(promises).then(function () {
+            var templateStructure = {};
+            // now iterate through all templates and check for children:
+            var buildTree = function (parentObject, name) {
+                _this._templates[name].isInHtmlTree = true;
+                var childNodes = _this._templates[name].getChildElements().filter(function (n) { return !!_this._templates[n]; });
+                childNodes.forEach(function (element) {
+                    parentObject[element] = {};
+                    buildTree(parentObject[element], element);
+                });
+            };
+            if (_this._templates["main"]) {
+                buildTree(templateStructure, "main");
+            }
+            return templateStructure;
+        });
+    };
+    /**
+     * Get the canvas in the template tree.
+     * There must be one and only one canvas inthe template.
+     */
+    TemplateManager.prototype.getCanvas = function () {
+        return this.containerElement.querySelector("canvas");
+    };
+    /**
+     * Get a specific template from the template tree
+     * @param name the name of the template to load
+     */
+    TemplateManager.prototype.getTemplate = function (name) {
+        return this._templates[name];
+    };
+    TemplateManager.prototype._checkLoadedState = function () {
+        var _this = this;
+        var done = Object.keys(this._templates).length === 0 ||
+            Object.keys(this._templates).every(function (key) {
+                return (_this._templates[key].isLoaded && !!_this._templates[key].parent) || !_this._templates[key].isInHtmlTree;
+            });
+        if (done) {
+            this.onAllLoaded.notifyObservers(this);
+        }
+    };
+    /**
+     * Dispose the template manager
+     */
+    TemplateManager.prototype.dispose = function () {
+        var _this = this;
+        // dispose all templates
+        Object.keys(this._templates).forEach(function (template) {
+            _this._templates[template].dispose();
+        });
+        this._templates = {};
+        this.eventManager.dispose();
+        this.onTemplateInit.clear();
+        this.onAllLoaded.clear();
+        this.onEventTriggered.clear();
+        this.onTemplateLoaded.clear();
+        this.onTemplateStateChange.clear();
+    };
+    return TemplateManager;
+}());
+export { TemplateManager };
+// register a new helper. modified https://stackoverflow.com/questions/9838925/is-there-any-method-to-iterate-a-map-with-handlebars-js
+Handlebars.registerHelper("eachInMap", function (map, block) {
+    var out = "";
+    Object.keys(map).map(function (prop) {
+        var data = map[prop];
+        if (typeof data === "object") {
+            data.id = data.id || prop;
+            out += block.fn(data);
+        }
+        else {
+            out += block.fn({ id: prop, value: data });
+        }
+    });
+    return out;
+});
+Handlebars.registerHelper("add", function (a, b) {
+    var out = a + b;
+    return out;
+});
+Handlebars.registerHelper("eq", function (a, b) {
+    var out = a == b;
+    return out;
+});
+Handlebars.registerHelper("or", function (a, b) {
+    var out = a || b;
+    return out;
+});
+Handlebars.registerHelper("not", function (a) {
+    var out = !a;
+    return out;
+});
+Handlebars.registerHelper("count", function (map) {
+    return map.length;
+});
+Handlebars.registerHelper("gt", function (a, b) {
+    var out = a > b;
+    return out;
+});
+/**
+ * This class represents a single template in the viewer's template tree.
+ * An example for a template is a single canvas, an overlay (containing sub-templates) or the navigation bar.
+ * A template is injected using the template manager in the correct position.
+ * The template is rendered using Handlebars and can use Handlebars' features (such as parameter injection)
+ *
+ * For further information please refer to the documentation page, https://doc.babylonjs.com
+ */
+var Template = /** @class */ (function () {
+    function Template(name, _configuration) {
+        var _this = this;
+        this.name = name;
+        this._configuration = _configuration;
+        this.onLoaded = new Observable();
+        this.onAppended = new Observable();
+        this.onStateChange = new Observable();
+        this.onEventTriggered = new Observable();
+        this.onParamsUpdated = new Observable();
+        this.onHTMLRendered = new Observable();
+        this._loadRequests = [];
+        this.isLoaded = false;
+        this.isShown = false;
+        this.isInHtmlTree = false;
+        var htmlContentPromise = this._getTemplateAsHtml(_configuration);
+        this.initPromise = htmlContentPromise.then(function (htmlTemplate) {
+            if (htmlTemplate) {
+                _this._htmlTemplate = htmlTemplate;
+                var compiledTemplate = Handlebars.compile(htmlTemplate, { noEscape: _this._configuration.params && !!_this._configuration.params.noEscape });
+                var config = _this._configuration.params || {};
+                _this._rawHtml = compiledTemplate(config);
+                try {
+                    _this._fragment = document.createRange().createContextualFragment(_this._rawHtml);
+                }
+                catch (e) {
+                    var test_1 = document.createElement(_this.name);
+                    test_1.innerHTML = _this._rawHtml;
+                    _this._fragment = test_1;
+                }
+                _this.isLoaded = true;
+                _this.isShown = true;
+                _this.onLoaded.notifyObservers(_this);
+            }
+            return _this;
+        });
+    }
+    /**
+     * Some templates have parameters (like background color for example).
+     * The parameters are provided to Handlebars which in turn generates the template.
+     * This function will update the template with the new parameters
+     *
+     * Note that when updating parameters the events will be registered again (after being cleared).
+     *
+     * @param params the new template parameters
+     * @param append
+     */
+    Template.prototype.updateParams = function (params, append) {
+        if (append === void 0) { append = true; }
+        if (append) {
+            this._configuration.params = deepmerge(this._configuration.params, params);
+        }
+        else {
+            this._configuration.params = params;
+        }
+        // update the template
+        if (this.isLoaded) {
+            // this.dispose();
+        }
+        var compiledTemplate = Handlebars.compile(this._htmlTemplate);
+        var config = this._configuration.params || {};
+        this._rawHtml = compiledTemplate(config);
+        try {
+            this._fragment = document.createRange().createContextualFragment(this._rawHtml);
+        }
+        catch (e) {
+            var test_2 = document.createElement(this.name);
+            test_2.innerHTML = this._rawHtml;
+            this._fragment = test_2;
+        }
+        if (this.parent) {
+            this.appendTo(this.parent, true);
+        }
+    };
+    Template.prototype.redraw = function () {
+        this.updateParams({});
+    };
+    Object.defineProperty(Template.prototype, "configuration", {
+        /**
+         * Get the template'S configuration
+         */
+        get: function () {
+            return this._configuration;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * A template can be a parent element for other templates or HTML elements.
+     * This function will deliver all child HTML elements of this template.
+     */
+    Template.prototype.getChildElements = function () {
+        var childrenArray = [];
+        //Edge and IE don't support frage,ent.children
+        var children = this._fragment && this._fragment.children;
+        if (!this._fragment) {
+            var fragment = this.parent.querySelector(this.name);
+            if (fragment) {
+                children = fragment.querySelectorAll("*");
+            }
+        }
+        if (!children) {
+            // casting to HTMLCollection, as both NodeListOf and HTMLCollection have 'item()' and 'length'.
+            children = this._fragment.querySelectorAll("*");
+        }
+        for (var i = 0; i < children.length; ++i) {
+            var child = children.item(i);
+            if (child) {
+                childrenArray.push(kebabToCamel(child.nodeName.toLowerCase()));
+            }
+        }
+        return childrenArray;
+    };
+    /**
+     * Appending the template to a parent HTML element.
+     * If a parent is already set and you wish to replace the old HTML with new one, forceRemove should be true.
+     * @param parent the parent to which the template is added
+     * @param forceRemove if the parent already exists, shoud the template be removed from it?
+     */
+    Template.prototype.appendTo = function (parent, forceRemove) {
+        var _this = this;
+        if (this.parent) {
+            if (forceRemove && this._addedFragment) {
+                /*let fragement = this.parent.querySelector(this.name)
+                if (fragement)
+                    this.parent.removeChild(fragement);*/
+                this.parent.innerHTML = "";
+            }
+            else {
+                return;
+            }
+        }
+        this.parent = parent;
+        if (this._configuration.id) {
+            this.parent.id = this._configuration.id;
+        }
+        if (this._fragment) {
+            this.parent.appendChild(this._fragment);
+            this._addedFragment = this._fragment;
+        }
+        else {
+            this.parent.insertAdjacentHTML("beforeend", this._rawHtml);
+        }
+        this.onHTMLRendered.notifyObservers(this);
+        // appended only one frame after.
+        setTimeout(function () {
+            _this._registerEvents();
+            _this.onAppended.notifyObservers(_this);
+        });
+    };
+    /**
+     * Show the template using the provided visibilityFunction, or natively using display: flex.
+     * The provided function returns a promise that should be fulfilled when the element is shown.
+     * Since it is a promise async operations are more than possible.
+     * See the default viewer for an opacity example.
+     * @param visibilityFunction The function to execute to show the template.
+     */
+    Template.prototype.show = function (visibilityFunction) {
+        var _this = this;
+        if (this._isHiding) {
+            return Promise.resolve(this);
+        }
+        return Promise.resolve()
+            .then(function () {
+            _this._isShowing = true;
+            if (visibilityFunction) {
+                return visibilityFunction(_this);
+            }
+            else {
+                // flex? box? should this be configurable easier than the visibilityFunction?
+                _this.parent.style.display = "flex";
+                // support old browsers with no flex:
+                if (_this.parent.style.display !== "flex") {
+                    _this.parent.style.display = "";
+                }
+                return _this;
+            }
+        })
+            .then(function () {
+            _this.isShown = true;
+            _this._isShowing = false;
+            _this.onStateChange.notifyObservers(_this);
+            return _this;
+        });
+    };
+    /**
+     * Hide the template using the provided visibilityFunction, or natively using display: none.
+     * The provided function returns a promise that should be fulfilled when the element is hidden.
+     * Since it is a promise async operations are more than possible.
+     * See the default viewer for an opacity example.
+     * @param visibilityFunction The function to execute to show the template.
+     */
+    Template.prototype.hide = function (visibilityFunction) {
+        var _this = this;
+        if (this._isShowing) {
+            return Promise.resolve(this);
+        }
+        return Promise.resolve()
+            .then(function () {
+            _this._isHiding = true;
+            if (visibilityFunction) {
+                return visibilityFunction(_this);
+            }
+            else {
+                // flex? box? should this be configurable easier than the visibilityFunction?
+                _this.parent.style.display = "none";
+                return _this;
+            }
+        })
+            .then(function () {
+            _this.isShown = false;
+            _this._isHiding = false;
+            _this.onStateChange.notifyObservers(_this);
+            return _this;
+        });
+    };
+    /**
+     * Dispose this template
+     */
+    Template.prototype.dispose = function () {
+        this.onAppended.clear();
+        this.onEventTriggered.clear();
+        this.onLoaded.clear();
+        this.onStateChange.clear();
+        this.isLoaded = false;
+        // remove from parent
+        try {
+            this.parent.removeChild(this._fragment);
+        }
+        catch (e) {
+            //noop
+        }
+        this._loadRequests.forEach(function (request) {
+            request.abort();
+        });
+        if (this._registeredEvents) {
+            this._registeredEvents.forEach(function (evt) {
+                evt.htmlElement.removeEventListener(evt.eventName, evt.function);
+            });
+        }
+    };
+    Template.prototype._getTemplateAsHtml = function (templateConfig) {
+        var _this = this;
+        if (!templateConfig) {
+            return Promise.reject("No templateConfig provided");
+        }
+        else if (templateConfig.html && !templateConfig.location) {
+            return Promise.resolve(templateConfig.html);
+        }
+        else {
+            var location_1 = this._getTemplateLocation(templateConfig);
+            if (isUrl(location_1)) {
+                return new Promise(function (resolve, reject) {
+                    var fileRequest = Tools.LoadFile(location_1, function (data) {
+                        resolve(data);
+                    }, undefined, undefined, false, function (request, error) {
+                        reject(error);
+                    });
+                    _this._loadRequests.push(fileRequest);
+                });
+            }
+            else {
+                location_1 = location_1.replace("#", "");
+                var element = document.getElementById(location_1);
+                if (element) {
+                    return Promise.resolve(element.innerHTML);
+                }
+                else {
+                    return Promise.reject("Template ID not found");
+                }
+            }
+        }
+    };
+    Template.prototype._registerEvents = function () {
+        var _this = this;
+        this._registeredEvents = this._registeredEvents || [];
+        if (this._registeredEvents.length) {
+            // first remove the registered events
+            this._registeredEvents.forEach(function (evt) {
+                evt.htmlElement.removeEventListener(evt.eventName, evt.function);
+            });
+        }
+        if (this._configuration.events) {
+            var _loop_1 = function (eventName) {
+                if (this_1._configuration.events && this_1._configuration.events[eventName]) {
+                    var functionToFire_1 = function (selector, event) {
+                        _this.onEventTriggered.notifyObservers({ event: event, template: _this, selector: selector });
+                    };
+                    // if boolean, set the parent as the event listener
+                    if (typeof this_1._configuration.events[eventName] === "boolean") {
+                        var selector = this_1.parent.id;
+                        if (selector) {
+                            selector = "#" + selector;
+                        }
+                        else {
+                            selector = this_1.parent.tagName;
+                        }
+                        var binding = functionToFire_1.bind(this_1, selector);
+                        this_1.parent.addEventListener(eventName, binding, false);
+                        this_1._registeredEvents.push({
+                            htmlElement: this_1.parent,
+                            eventName: eventName,
+                            function: binding,
+                        });
+                    }
+                    else if (typeof this_1._configuration.events[eventName] === "object") {
+                        var selectorsArray = Object.keys(this_1._configuration.events[eventName] || {});
+                        // strict null check is working incorrectly, must override:
+                        var event_1 = this_1._configuration.events[eventName] || {};
+                        selectorsArray
+                            .filter(function (selector) { return typeof event_1 !== "boolean" && event_1[selector]; })
+                            .forEach(function (selector) {
+                            var htmlElement = _this.parent.querySelector(selector);
+                            if (!htmlElement) {
+                                // backcompat, fallback to id
+                                if (selector && selector.indexOf("#") !== 0) {
+                                    selector = "#" + selector;
+                                }
+                                try {
+                                    htmlElement = _this.parent.querySelector(selector);
+                                }
+                                catch (e) { }
+                            }
+                            if (htmlElement) {
+                                var binding = functionToFire_1.bind(_this, selector);
+                                htmlElement.addEventListener(eventName, binding, false);
+                                _this._registeredEvents.push({
+                                    htmlElement: htmlElement,
+                                    eventName: eventName,
+                                    function: binding,
+                                });
+                            }
+                        });
+                    }
+                }
+            };
+            var this_1 = this;
+            for (var eventName in this._configuration.events) {
+                _loop_1(eventName);
+            }
+        }
+    };
+    Template.prototype._getTemplateLocation = function (templateConfig) {
+        if (!templateConfig || typeof templateConfig === "string") {
+            return templateConfig;
+        }
+        else {
+            return templateConfig.location;
+        }
+    };
+    return Template;
+}());
+export { Template };
 //# sourceMappingURL=templateManager.js.map