simplify creating buttons

More default values, including a default html template that can be extended.

Viewer/src/templating/plugins/hdButtonPlugin.ts

@@ -4,10 +4,8 @@ import { EventCallback, Template } from "../templateManager";
 
 export class HDButtonPlugin extends AbstractViewerNavbarButton {
 
-    protected _buttonClass = "hd-button";
-
     constructor(private _viewer: DefaultViewer) {
-        super();
+        super("hd", "hd-button", HDButtonPlugin.HtmlTemplate);
     }
 
     onEvent(event: EventCallback): void {
@@ -18,7 +16,7 @@ export class HDButtonPlugin extends AbstractViewerNavbarButton {
         this._viewer.toggleHD();
     }
 
-    protected _htmlTemplate: string = `
+    protected static HtmlTemplate: string = `
 {{#unless hideHd}}
 <style>
 .hd-icon:after {

Viewer/src/templating/viewerTemplatePlugin.ts

@@ -16,8 +16,26 @@ export abstract class AbstractViewerNavbarButton implements IViewerTemplatePlugi
     public readonly templateName: string = "navBar";
     public readonly eventsToAttach: Array<string> = ['pointerdown'];
     protected _prepend: boolean = true;
-    protected abstract _buttonClass: string;
-    protected abstract _htmlTemplate: string;
+    protected _buttonName: string;
+    protected _buttonClass: string;
+    protected _htmlTemplate: string;
+
+    constructor(buttonName: string, buttonClass?: string, htmlTemplate?: string) {
+        this._buttonName = buttonName;
+        if (buttonClass) {
+            this._buttonClass = buttonClass;
+        } else {
+            this._buttonClass = buttonName + '-button';
+        }
+        if (htmlTemplate) { this._htmlTemplate = htmlTemplate }
+        else {
+            this._htmlTemplate = `
+<button class="${this._buttonClass}">
+    <span class="icon ${this._buttonName}-icon"></span>
+</button>
+`;
+        }
+    }
 
     interactionPredicate(event: EventCallback): boolean {
         let pointerDown = <PointerEvent>event.event;