From 13215960c44ce8a3f272e16b4b39635f10f61f37 Mon Sep 17 00:00:00 2001
From: Jakob Ketterl <jakob.ketterl@gmx.de>
Date: Sat, 16 Jan 2021 18:06:37 +0100
Subject: [PATCH] show header buttons conditionally

---
 htdocs/css/openwebrx-header.css | 5 +++++
 htdocs/lib/Header.js            | 7 ++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/htdocs/css/openwebrx-header.css b/htdocs/css/openwebrx-header.css
index f28b52e..83061f3 100644
--- a/htdocs/css/openwebrx-header.css
+++ b/htdocs/css/openwebrx-header.css
@@ -125,6 +125,11 @@
     cursor:pointer;
 }
 
+#openwebrx-main-buttons .button[data-toggle-panel] {
+    /* will be enabled by javascript if the panel is present in the DOM */
+    display: none;
+}
+
 #openwebrx-main-buttons .button img {
     height: 38px;
 }
diff --git a/htdocs/lib/Header.js b/htdocs/lib/Header.js
index 469df1e..746c282 100644
--- a/htdocs/lib/Header.js
+++ b/htdocs/lib/Header.js
@@ -1,7 +1,12 @@
 function Header(el) {
     this.el = el;
 
-    this.el.find('#openwebrx-main-buttons').find('[data-toggle-panel]').click(function () {
+    var $buttons = this.el.find('#openwebrx-main-buttons').find('[data-toggle-panel]').filter(function(){
+        // ignore buttons when the corresponding panel is not in the DOM
+        return $('#' + $(this).data('toggle-panel'))[0];
+    });
+
+    $buttons.css({display: 'block'}).click(function () {
         toggle_panel($(this).data('toggle-panel'));
     });