first stage - overlays

Templates and implementation for viewer overlays - error, help, share.

Viewer/assets/templates/default/defaultTemplate.html

@@ -24,7 +24,21 @@
         width: 100%;
         height: 100%;
     }
+
+    overlay {
+        position: absolute;
+        z-index: 99;
+        opacity: 0;
+        pointer-events: none;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        -webkit-transition: opacity 1s ease;
+        -moz-transition: opacity 1s ease;
+        transition: opacity 1s ease;
+    }
 </style>
 
 <viewer></viewer>
-<loading-screen></loading-screen>
+<loading-screen></loading-screen>
+<overlay></overlay>

Viewer/assets/templates/default/error.html

@@ -0,0 +1 @@
+Error loading the model

Viewer/assets/templates/default/help.html

@@ -0,0 +1 @@
+HELP

Viewer/assets/templates/default/overlay.html

@@ -0,0 +1,30 @@
+<style>
+    .overlay {
+        width: 100%;
+        height: 100%;
+        display: none;
+        align-items: center;
+        justify-content: center;
+        background-color: rgba(255, 255, 255, 0.3);
+    }
+
+    error.overlay {
+        background-color: rgba(121, 121, 121, 1);
+    }
+
+    div#close-button {
+        position: absolute;
+        top: 30px;
+        right: 30px;
+        width: 30px;
+        height: 30px;
+        cursor: pointer;
+    }
+</style>
+
+<div id="close-button">
+    <img src="{{closeImage}}" alt="{{closeText}}">
+</div>
+<help class="overlay"></help>
+<error class="overlay"></error>
+<share class="overlay"></share>

Viewer/assets/templates/default/share.html

@@ -0,0 +1 @@
+SHARE

Viewer/src/configuration/configuration.ts

@@ -4,7 +4,9 @@ export interface ViewerConfiguration {
     // configuration version
     version?: string;
 
-    defaultViewer?: boolean; // indicates no configuration (except for initial configuration) should be changed. Will load the defaultCOnfiguration variable.
+    defaultViewer?: boolean; // indicates no configuration (except for initial configuration) should be changed. Will load the defaultConfiguration variable.
+
+    pageUrl?: string; // will be used for sharing and other fun stuff. This is the page showing the model (not the model's url!)
 
     configuration?: string | {
         url: string;
@@ -199,6 +201,20 @@ export let defaultConfiguration: ViewerConfiguration = {
                         }
                     }
                 }
+            },
+            overlay: {
+                html: require("../../assets/templates/default/overlay.html"),
+                children: {
+                    help: {
+                        html: require("../../assets/templates/default/help.html")
+                    },
+                    share: {
+                        html: require("../../assets/templates/default/share.html")
+                    },
+                    error: {
+                        html: require("../../assets/templates/default/error.html")
+                    }
+                }
             }
         }
     },

Viewer/src/viewer/defaultViewer.ts

@@ -58,13 +58,24 @@ export class DefaultViewer extends AbstractViewer {
             }, 2000)
         });
 
+
+        // close overlay button
+        let closeButton = document.getElementById('close-button');
+        if (closeButton) {
+            closeButton.addEventListener('pointerdown', () => {
+                this.hideOverlayScreen();
+            })
+        }
+
         // events registration
-        this.registerFullscreenMode();
+        this.registerNavbarButtons();
 
         return super.onTemplatesLoaded();
     }
 
-    private registerFullscreenMode() {
+    private registerNavbarButtons() {
+
+
         let isFullscreen = false;
 
         let navbar = this.templateManager.getTemplate('navBar');
@@ -75,20 +86,22 @@ export class DefaultViewer extends AbstractViewer {
                 case 'pointerdown':
                     let event: PointerEvent = <PointerEvent>data.event;
                     if (event.button === 0) {
-                        if (data.selector === '#fullscreen-button') {
-                            //this.engine.switchFullscreen(false);
-                            if (!isFullscreen) {
-                                let requestFullScreen = viewerElement.requestFullscreen || /*viewerElement.parent.msRequestFullscreen || viewerElement.parent.mozRequestFullScreen ||*/ viewerElement.webkitRequestFullscreen;
-                                requestFullScreen.call(viewerElement);
-                            } else {
-                                let exitFullscreen = document.exitFullscreen || document.webkitExitFullscreen
-                                exitFullscreen.call(document);
-                            }
-
-                            isFullscreen = !isFullscreen;
-
+                        switch (data.selector) {
+                            case '#fullscreen-button':
+                                if (!isFullscreen) {
+                                    let requestFullScreen = viewerElement.requestFullscreen || viewerElement.webkitRequestFullscreen; // || viewerElement.parent.msRequestFullscreen || viewerElement.parent.mozRequestFullScreen 
+                                    requestFullScreen.call(viewerElement);
+                                } else {
+                                    let exitFullscreen = document.exitFullscreen || document.webkitExitFullscreen
+                                    exitFullscreen.call(document);
+                                }
+
+                                isFullscreen = !isFullscreen;
+                                break;
+                            case '#help-button':
+                                this.showOverlayScreen('help');
+                                break;
                         }
-
                     }
                     break;
             }
@@ -207,6 +220,49 @@ export class DefaultViewer extends AbstractViewer {
         return Promise.resolve(this.scene);
     }
 
+    public showOverlayScreen(subScreen: string) {
+        return this.templateManager.getTemplate('overlay').show((template => {
+
+            var canvasRect = this.containerElement.getBoundingClientRect();
+            var canvasPositioning = window.getComputedStyle(this.containerElement).position;
+
+            template.parent.style.display = 'flex';
+            template.parent.style.width = canvasRect.width + "px";
+            template.parent.style.height = canvasRect.height + "px";
+            template.parent.style.opacity = "1";
+
+            return this.templateManager.getTemplate(subScreen).show((template => {
+                template.parent.style.display = 'flex';
+                return Promise.resolve(template);
+            }));
+        }));
+    }
+
+    public hideOverlayScreen() {
+        return this.templateManager.getTemplate('loadingScreen').hide((template => {
+            template.parent.style.opacity = "0";
+            let onTransitionEnd = () => {
+                template.parent.removeEventListener("transitionend", onTransitionEnd);
+                template.parent.style.display = 'none';
+            }
+            template.parent.addEventListener("transitionend", onTransitionEnd);
+
+            let overlays = template.parent.querySelectorAll('.overlay');
+            if (overlays) {
+                for (let i = 0; i < overlays.length; ++i) {
+                    let htmlElement = <HTMLElement>overlays.item(i);
+                    htmlElement.style.display = 'none';
+                }
+            }
+
+            /*return this.templateManager.getTemplate(subScreen).show((template => {
+                template.parent.style.display = 'none';
+                return Promise.resolve(template);
+            }));*/
+            return Promise.resolve(template);
+        }));
+    }
+
     public showLoadingScreen() {
         return this.templateManager.getTemplate('loadingScreen').show((template => {