hd button as a viewer button plugin

Viewer/assets/templates/default/navbar.html

@@ -152,16 +152,6 @@
         content: "\EF4E";
     }
 
-    .hd-icon:after {
-        font-size: 16px;
-        content: "\F765";
-    }
-
-    .sd-icon:after {
-        font-size: 16px;
-        content: "\F766";
-    }
-
     viewer.in-vr .vr-icon:after {
         font-size: 16px;
         content: "\E7F4";
@@ -503,15 +493,7 @@
     </div>
     {{/unless}}
     <div class="default-control">
-        {{#unless hideHd}}
-        <button class="hd-button hd-button" title="{{text.hdButton}}">
-            {{#if hdEnabled}}
-            <span class="icon sd-icon"></span>
-            {{else}}
-            <span class="icon hd-icon"></span>
-            {{/if}}
-        </button>
-        {{/unless}} {{#unless hideVr}}
+        {{#unless hideVr}}
         <button class="vr vr-button" title="{{text.vrButton}}">
             <span class="icon vr-icon"></span>
         </button>

Viewer/src/templating/plugins/hdButtonPlugin.ts

@@ -0,0 +1,38 @@
+import { AbstractViewerNavbarButton } from "../viewerTemplatePlugin";
+import { DefaultViewer } from "../../viewer/defaultViewer";
+import { EventCallback, Template } from "../templateManager";
+
+export class HDButtonPlugin extends AbstractViewerNavbarButton {
+
+    protected _buttonClass = "hd-button";
+
+    constructor(private _viewer: DefaultViewer) {
+        super();
+    }
+
+    onEvent(event: EventCallback): void {
+        let button = event.template.parent.querySelector(".hd-button");
+        if (button) {
+            button.classList.contains("hd-toggled") ? button.classList.remove("hd-toggled") : button.classList.add("hd-toggled");
+        }
+        this._viewer.toggleHD();
+    }
+
+    protected _htmlTemplate: string = `
+{{#unless hideHd}}
+<style>
+.hd-icon:after {
+    font-size: 16px;
+    content: "\\F765";
+}
+
+.hd-toggled span.hd-icon:after {
+    content: "\\F766";
+}
+</style>
+<button class="hd-button" title="{{text.hdButton}}">
+     <span class="icon hd-icon"></span>
+ </button>
+ {{/unless}}
+`;
+}

Viewer/src/templating/viewerTemplatePlugin.ts

@@ -1,4 +1,5 @@
 import { EventCallback, Template } from "./templateManager";
+import * as Handlebars from 'handlebars/dist/handlebars';
 
 export interface IViewerTemplatePlugin {
 
@@ -12,13 +13,32 @@ export interface IViewerTemplatePlugin {
 
 export abstract class AbstractViewerNavbarButton implements IViewerTemplatePlugin {
 
-
-
     public readonly templateName: string = "navBar";
     public readonly eventsToAttach: Array<string> = ['pointerdown'];
     protected _prepend: boolean = true;
+    protected abstract _buttonClass: string;
+    protected abstract _htmlTemplate: string;
+
+    interactionPredicate(event: EventCallback): boolean {
+        let pointerDown = <PointerEvent>event.event;
+        if (pointerDown.button !== 0) return false;
+        var element = (<HTMLElement>event.event.target);
+
+        if (!element) {
+            return false;
+        }
+
+        let elementClasses = element.classList;
 
-    abstract interactionPredicate(event: EventCallback): boolean;
+        for (let i = 0; i < elementClasses.length; ++i) {
+            let className = elementClasses[i];
+            if (className.indexOf(this._buttonClass) !== -1) {
+                return true;
+            }
+        }
+
+        return false;
+    }
     abstract onEvent(event: EventCallback): void;
 
     public addHTMLTemplate(template: Template): void {
@@ -33,5 +53,18 @@ export abstract class AbstractViewerNavbarButton implements IViewerTemplatePlugi
         }
     }
 
-    protected abstract _generateHTMLElement(template: Template): HTMLElement;
+    protected _generateHTMLElement(template: Template): Element | DocumentFragment {
+        let compiledTemplate = Handlebars.compile(this._htmlTemplate, { noEscape: (template.configuration.params && !!template.configuration.params.noEscape) });
+        let config = template.configuration.params || {};
+        let rawHtml = compiledTemplate(config);
+        let fragment: Element | DocumentFragment;
+        try {
+            fragment = document.createRange().createContextualFragment(rawHtml);
+        } catch (e) {
+            let test = document.createElement(this._buttonClass);
+            test.innerHTML = rawHtml;
+            fragment = test;
+        }
+        return fragment;
+    }
 }

Viewer/src/viewer/defaultViewer.ts

@@ -9,6 +9,7 @@ import { ViewerModel } from '../model/viewerModel';
 import { extendClassWithConfig } from '../helper';
 import { IModelAnimation, AnimationState } from '../model/modelAnimation';
 import { IViewerTemplatePlugin } from 'templating/viewerTemplatePlugin';
+import { HDButtonPlugin } from '../templating/plugins/hdButtonPlugin';
 
 /**
  * The Default viewer is the default implementation of the AbstractViewer.
@@ -58,7 +59,11 @@ export class DefaultViewer extends AbstractViewer {
 
         if (plugin.eventsToAttach) {
             plugin.eventsToAttach.forEach(eventName => {
-                plugin.onEvent && this.templateManager.eventManager.registerCallback(plugin.templateName, plugin.onEvent, eventName);
+                plugin.onEvent && this.templateManager.eventManager.registerCallback(plugin.templateName, (event) => {
+                    if (plugin.onEvent && plugin.interactionPredicate(event)) {
+                        plugin.onEvent(event);
+                    }
+                }, eventName);
             });
         }
     }
@@ -134,6 +139,8 @@ export class DefaultViewer extends AbstractViewer {
                     hideHdButton: true
                 });
             }
+
+            this.registerTemplatePlugin(new HDButtonPlugin(this));
         }
     }
 
@@ -202,9 +209,6 @@ export class DefaultViewer extends AbstractViewer {
             case "fullscreen-button":
                 this.toggleFullscreen();
                 break;
-            case "hd-button":
-                this.toggleHD();
-                break;
             case "vr-button":
                 this.toggleVR();
                 break;
@@ -315,24 +319,6 @@ export class DefaultViewer extends AbstractViewer {
         this._updateAnimationSpeed("1.0", paramsObject);
     }
 
-    public toggleHD() {
-        super.toggleHD();
-
-        // update UI element
-        let navbar = this.templateManager.getTemplate('navBar');
-        if (!navbar) return;
-
-        if (navbar.configuration.params) {
-            navbar.configuration.params.hdEnabled = this._hdToggled;
-        }
-
-        let span = navbar.parent.querySelector("button.hd-button span");
-        if (span) {
-            span.classList.remove(this._hdToggled ? "hd-icon" : "sd-icon");
-            span.classList.add(!this._hdToggled ? "hd-icon" : "sd-icon")
-        }
-    }
-
     public toggleVR() {
         super.toggleVR();