HTML: ControlPanel: Use HTML Class instead of ID (#56)

-The playback settings panel was using HTML id instead of class for a few things
-If there was more than one OSMD instance on a page, this would cause issues
-Now uses just classes/searching children of specific elements

Co-authored-by: Justin Litten <justinlitten77@gmail.com>

demo/annotations-ui.css

@@ -303,7 +303,7 @@ transform: translateX(-50%) scale(1);
     overflow-y: hidden;
 }
 
-#add-symbol-mode{
+.add-symbol-mode{
     overflow-y: hidden;
 }
 
@@ -349,24 +349,6 @@ transform: translateX(-50%) scale(1);
     outline-offset: 0px;
 }
 
-#text-measure-element{
-    position: absolute;
-    visibility: hidden;
-    line-height: 1;
-    z-index: -99999;
-}
-
-#dragger-measure-element{
-    font-size: 1.25rem;
-    position: absolute;
-    visibility: hidden;
-    z-index: -99999;
-}
-
-#text-measure-element.symbol{
-    font-family: Gonville;
-}
-
 .color-swatch-list {
     display: inline-block;
     overflow-x: hidden;

src/Playback/UIComponents/ControlPanel/ControlPanel.html

@@ -3,17 +3,17 @@
     <div class="mdc-card controls-container">
       <div class="title-bar toolbar playback-title-bar">
         <span class="col-10 d-inline-block v-align-middle">
-            <h4 id="playback-title">Tempo (BPM)</h4>
+            <h4 class="playback-title">Tempo (BPM)</h4>
         </span>
         <span class="col-2 d-inline-block v-align-middle">
             <div class="mdc-touch-target-wrapper">
-                <button id="close-playback"
+                <button
                         aria-label="Close Audio Controls"
-                        class="mdc-icon-button material-icons">close</button>
+                        class="mdc-icon-button material-icons close-playback">close</button>
                 </div>
         </span>
       </div>
-      <div id="metronome-toolbar" class="col-10 metronome-toolbar">
+      <div class="col-10 metronome-toolbar">
         <div class="mdc-slider mdc-slider--discrete metronome-slider" tabindex="0" role="slider" data-step="1"
               aria-valuemin="1" aria-valuemax="300" aria-valuenow="90"
               aria-label="BPM">
@@ -31,13 +31,13 @@
             </div>
         </div>
       </div>
-      <div id="volume-toolbar" class="col-10 hide volume-toolbar">
+      <div class="col-10 hide volume-toolbar">
       </div>
-      <div class="mdc-tab-bar" id="playback-tabs" role="tablist">
+      <div class="mdc-tab-bar playback-tabs" role="tablist">
         <div class="mdc-tab-scroller">
             <div class="mdc-tab-scroller__scroll-area">
             <div class="mdc-tab-scroller__scroll-content">
-                <button id="metronome-mode" class="mdc-tab" role="tab" aria-selected="true" aria-label="Metronome" tabindex="0">
+                <button class="mdc-tab" role="tab" aria-selected="true" aria-label="Metronome" tabindex="0">
                     <span class="mdc-tab__content">
                           <!--From Iconify Font. 
                           Found here: https://iconify.design/icon-sets/mdi/metronome-tick.html
@@ -49,7 +49,7 @@
                     </span>
                     <span class="mdc-tab__ripple"></span>
                 </button>
-                <button id="add-symbol-mode" class="mdc-tab" role="tab" aria-selected="false" aria-label="Add Symbol" tabindex="1">
+                <button class="mdc-tab add-symbol-mode" role="tab" aria-selected="false" aria-label="Add Symbol" tabindex="1">
                     <span class="mdc-tab__content">
                         <span class="mdc-tab__icon material-icons" aria-hidden="true">volume_up</span>
                     </span>

src/Playback/UIComponents/ControlPanel/ControlPanel.ts

@@ -127,13 +127,13 @@ export class ControlPanel extends AUIController<IPlaybackParametersListener> imp
             }
         });
 
-        this.metronomeToolbarElement = document.getElementById("metronome-toolbar") as HTMLDivElement;
-        this.volumeToolbarElement = document.getElementById("volume-toolbar") as HTMLDivElement;
-        const tabBar: MDCTabBar = new MDCTabBar(document.getElementById("playback-tabs"));
+        this.metronomeToolbarElement = this.controlPanelElement.getElementsByClassName("metronome-toolbar")[0] as HTMLDivElement;
+        this.volumeToolbarElement = this.controlPanelElement.getElementsByClassName("volume-toolbar")[0] as HTMLDivElement;
+        const tabBar: MDCTabBar = new MDCTabBar(this.controlPanelElement.getElementsByClassName("playback-tabs")[0]);
         tabBar.initialize();
 
-        this.titleContentElement = document.getElementById("playback-title") as HTMLHeadingElement;
-        this.closeButtonElement = document.getElementById("close-playback") as HTMLButtonElement;
+        this.titleContentElement = this.controlPanelElement.getElementsByClassName("playback-title")[0] as HTMLHeadingElement;
+        this.closeButtonElement = this.controlPanelElement.getElementsByClassName("close-playback")[0] as HTMLButtonElement;
         const buttonRipple: MDCRipple = new MDCRipple(this.closeButtonElement);
         buttonRipple.unbounded = true;
         buttonRipple.initialize();