implement toggleable buttons; menu items can now be changed; add horizontal line and vertical line labels

src/general/legend.ts

@@ -29,7 +29,7 @@ export class Legend {
         this.legendHandler = this.legendHandler.bind(this)
 
         this.handler = handler;
-        this.ohlcEnabled = true;
+        this.ohlcEnabled = false;
         this.percentEnabled = false
         this.linesEnabled = false
         this.colorBasedOnCandle = false

src/general/menu.ts

@@ -0,0 +1,59 @@
+import { GlobalParams } from "./global-params";
+
+declare const window: GlobalParams
+
+export class Menu {
+    private div: HTMLDivElement;
+    private isOpen: boolean = false;
+    private widget: any;
+
+    constructor(
+        private makeButton: Function,
+        private callbackName: string,
+        items: string[],
+        activeItem: string,
+        separator: boolean,
+        align: 'right'|'left') {
+
+        this.div = document.createElement('div')
+        this.div.classList.add('topbar-menu');
+
+        this.widget = this.makeButton(activeItem+' ↓', null, separator, true, align)
+
+        this.updateMenuItems(items)
+
+        this.widget.elem.addEventListener('click', () => {
+            this.isOpen = !this.isOpen;
+            if (!this.isOpen) {
+                this.div.style.display = 'none';
+                return;
+            }
+            let rect = this.widget.elem.getBoundingClientRect()
+            this.div.style.display = 'flex'
+            this.div.style.flexDirection = 'column'
+
+            let center = rect.x+(rect.width/2)
+            this.div.style.left = center-(this.div.clientWidth/2)+'px'
+            this.div.style.top = rect.y+rect.height+'px'
+        })
+        document.body.appendChild(this.div)
+    }
+
+    updateMenuItems(items: string[]) {
+        this.div.innerHTML = '';
+
+        items.forEach(text => {
+            let button = this.makeButton(text, null, false, false)
+            button.elem.addEventListener('click', () => {
+                this.widget.elem.innerText = button.elem.innerText+' ↓'
+                window.callbackFunction(`${this.callbackName}_~_${button.elem.innerText}`)
+                this.div.style.display = 'none'
+                this.isOpen = false
+            });
+            button.elem.style.margin = '4px 4px'
+            button.elem.style.padding = '2px 2px'
+            this.div.appendChild(button.elem)
+        })
+        this.widget.elem.innerText = items[0]+' ↓';
+    }
+}

src/general/topbar.ts

@@ -1,5 +1,6 @@
 import { GlobalParams } from "./global-params";
 import { Handler } from "./handler";
+import { Menu } from "./menu";
 
 declare const window: GlobalParams
 
@@ -85,44 +86,11 @@ export class TopBar {
         return textBox
     }
 
-    makeMenu(items: string[], activeItem: string, separator: boolean, callbackName: string, align='right') {
-        let menu = document.createElement('div')
-        menu.classList.add('topbar-menu');
-
-        let menuOpen = false;
-        items.forEach(text => {
-            let button = this.makeButton(text, null, false, false)
-            button.elem.addEventListener('click', () => {
-                widget.elem.innerText = button.elem.innerText+' ↓'
-                window.callbackFunction(`${callbackName}_~_${button.elem.innerText}`)
-                menu.style.display = 'none'
-                menuOpen = false
-            });
-            button.elem.style.margin = '4px 4px'
-            button.elem.style.padding = '2px 2px'
-            menu.appendChild(button.elem)
-        })
-        let widget =
-            this.makeButton(activeItem+' ↓', null, separator, true, align)
-
-        widget.elem.addEventListener('click', () => {
-            menuOpen = !menuOpen
-            if (!menuOpen) {
-                menu.style.display = 'none';
-                return;
-            }
-            let rect = widget.elem.getBoundingClientRect()
-            menu.style.display = 'flex'
-            menu.style.flexDirection = 'column'
-
-            let center = rect.x+(rect.width/2)
-            menu.style.left = center-(menu.clientWidth/2)+'px'
-            menu.style.top = rect.y+rect.height+'px'
-        })
-        document.body.appendChild(menu)
+    makeMenu(items: string[], activeItem: string, separator: boolean, callbackName: string, align: 'right'|'left') {
+        return new Menu(this.makeButton.bind(this), callbackName, items, activeItem, separator, align)
     }
 
-    makeButton(defaultText: string, callbackName: string | null, separator: boolean, append=true, align='left') {
+    makeButton(defaultText: string, callbackName: string | null, separator: boolean, append=true, align='left', toggle=false) {
         let button = document.createElement('button')
         button.classList.add('topbar-button');
         // button.style.color = window.pane.color
@@ -137,7 +105,19 @@ export class TopBar {
         }
 
         if (callbackName) {
-            button.addEventListener('click', () => window.callbackFunction(`${widget.callbackName}_~_${button.innerText}`));
+            let handler;
+            if (toggle) {
+                let state = false;
+                handler = () => {
+                    state = !state
+                    window.callbackFunction(`${widget.callbackName}_~_${state}`)
+                    button.style.backgroundColor = state ? 'var(--active-bg-color)' : '';
+                    button.style.color = state ? 'var(--active-color)' : '';
+                }
+            } else {
+                handler = () => window.callbackFunction(`${widget.callbackName}_~_${button.innerText}`)
+            }
+            button.addEventListener('click', handler);
         }
         if (append) this.appendWidget(button, align, separator)
         return widget