Navbar changes

being shown only with left click, and can be disabled in fullscreen mode.

Viewer/assets/templates/default/navbar.html

@@ -46,6 +46,22 @@
     }
 </style>
 
+{{#if disableOnFullscreen}}
+<style>
+    viewer:fullscreen nav-bar {
+        display: none;
+    }
+
+    viewer:-moz-full-screen nav-bar {
+        display: none;
+    }
+
+    viewer:-webkit-full-screen nav-bar {
+        display: none;
+    }
+</style>
+{{/if}}
+
 <div class="flex-container" id="model-metadata">
     <!-- holding the description -->
     <div class="thumbnail">

Viewer/src/configuration/configuration.ts

@@ -194,7 +194,9 @@ export let defaultConfiguration: ViewerConfiguration = {
                                     altText: "Fullscreen",
                                     image: require('../../assets/img/fullscreen.png')
                                 }
-                            ]
+                            ],
+                            visibilityTimeout: 2000,
+                            disableOnFullscreen: false
                         },
                         events: {
                             pointerdown: ['#fullscreen-button']

Viewer/src/templateManager.ts

@@ -122,7 +122,7 @@ export class Template {
 
     private fragment: DocumentFragment;
 
-    constructor(public name: string, private configuration: TemplateConfiguration) {
+    constructor(public name: string, private _configuration: TemplateConfiguration) {
         this.onInit = new Observable<Template>();
         this.onLoaded = new Observable<Template>();
         this.onAppended = new Observable<Template>();
@@ -137,12 +137,12 @@ export class Template {
         */
         this.onInit.notifyObservers(this);
 
-        let htmlContentPromise = getTemplateAsHtml(configuration);
+        let htmlContentPromise = getTemplateAsHtml(_configuration);
 
         htmlContentPromise.then(htmlTemplate => {
             if (htmlTemplate) {
                 let compiledTemplate = Handlebars.compile(htmlTemplate);
-                let config = this.configuration.config || {};
+                let config = this._configuration.config || {};
                 let rawHtml = compiledTemplate(config);
                 this.fragment = document.createRange().createContextualFragment(rawHtml);
                 this.isLoaded = true;
@@ -151,14 +151,18 @@ export class Template {
         });
     }
 
+    public get configuration(): TemplateConfiguration {
+        return this._configuration;
+    }
+
     public appendTo(parent: HTMLElement) {
         if (this.parent) {
             console.error('Alread appanded to ', this.parent);
         } else {
             this.parent = parent;
 
-            if (this.configuration.id) {
-                this.parent.id = this.configuration.id;
+            if (this._configuration.id) {
+                this.parent.id = this._configuration.id;
             }
             this.parent.appendChild(this.fragment);
             // appended only one frame after.
@@ -199,18 +203,18 @@ export class Template {
 
     // TODO - Should events be removed as well? when are templates disposed?
     private registerEvents() {
-        if (this.configuration.events) {
-            Object.keys(this.configuration.events).forEach(eventName => {
-                if (this.configuration.events && this.configuration.events[eventName]) {
+        if (this._configuration.events) {
+            Object.keys(this._configuration.events).forEach(eventName => {
+                if (this._configuration.events && this._configuration.events[eventName]) {
                     let functionToFire = (selector, event) => {
                         this.onEventTriggered.notifyObservers({ event: event, template: this, selector: selector });
                     }
 
                     // if boolean, set the parent as the event listener
-                    if (typeof this.configuration.events[eventName] === 'boolean') {
+                    if (typeof this._configuration.events[eventName] === 'boolean') {
                         this.parent.addEventListener(eventName, functionToFire.bind(this, '#' + this.parent.id), false);
                     } else {
-                        let selectorsArray: Array<string> = <Array<string>>this.configuration.events[eventName];
+                        let selectorsArray: Array<string> = <Array<string>>this._configuration.events[eventName];
                         selectorsArray.forEach(selector => {
                             let htmlElement = <HTMLElement>this.parent.querySelector(selector);
                             htmlElement && htmlElement.addEventListener(eventName, functionToFire.bind(this, selector), false)

Viewer/src/viewer/defaultViewer.ts

@@ -28,36 +28,35 @@ export class DefaultViewer extends AbstractViewer {
         let navbarHeight = navbar.parent.clientHeight + 'px';
 
         let navbarShown: boolean = true;
-
-        viewerElement.parent.addEventListener('pointerout', () => {
-            if (navbarShown) return;
-            navbar.parent.style.bottom = '0px';
-            navbarShown = true;
-        });
-
-        let timeoutCancel;
-
-        viewerElement.parent.addEventListener('pointerdown', () => {
-            if (!navbarShown) return;
-            navbar.parent.style.bottom = '-' + navbarHeight;
-            navbarShown = false;
-
-            if (timeoutCancel) {
-                clearTimeout(timeoutCancel);
+        let timeoutCancel /*: number*/;
+
+        let triggerNavbar = function (show: boolean = false, evt: PointerEvent) {
+            // only left-click on no-button.
+            if (evt.button > 0) return;
+            // clear timeout
+            timeoutCancel && clearTimeout(timeoutCancel);
+            // if state is the same, do nothing
+            if (show === navbarShown) return;
+            //showing? simply show it!
+            if (show) {
+                navbar.parent.style.bottom = show ? '0px' : '-' + navbarHeight;
+                navbarShown = show;
+            } else {
+                // not showing? set timeout until it is removed.
+                timeoutCancel = setTimeout(function () {
+                    navbar.parent.style.bottom = '-' + navbarHeight;
+                    navbarShown = show;
+                }, navbar.configuration.config ? navbar.configuration.config.visibilityTimeout || 2000 : 2000);
             }
-        });
+        }
 
-        viewerElement.parent.addEventListener('pointerup', () => {
-            if (timeoutCancel) {
-                clearTimeout(timeoutCancel);
-            }
 
-            timeoutCancel = setTimeout(() => {
-                navbar.parent.style.bottom = '0px';
-                navbarShown = true;
-            }, 2000)
-        });
 
+        viewerElement.parent.addEventListener('pointerout', triggerNavbar.bind(this, false));
+        viewerElement.parent.addEventListener('pointerdown', triggerNavbar.bind(this, true));
+        viewerElement.parent.addEventListener('pointerup', triggerNavbar.bind(this, false));
+        navbar.parent.addEventListener('pointerover', triggerNavbar.bind(this, true))
+        // triggerNavbar(false);
 
         // close overlay button
         let closeButton = document.getElementById('close-button');
@@ -74,8 +73,6 @@ export class DefaultViewer extends AbstractViewer {
     }
 
     private registerNavbarButtons() {
-
-
         let isFullscreen = false;
 
         let navbar = this.templateManager.getTemplate('navBar');