start collecting header routines

htdocs/lib/Header.js

@@ -0,0 +1,22 @@
+function Header(el) {
+    this.el = el;
+
+    this.el.find('#openwebrx-main-buttons').find('[data-toggle-panel]').click(function () {
+        toggle_panel($(this).data('toggle-panel'));
+    });
+};
+
+Header.prototype.setDetails = function(details) {
+    this.el.find('#webrx-rx-title').html(details['receiver_name']);
+    var query = encodeURIComponent(details['receiver_gps']['lat'] + ',' + details['receiver_gps']['lon']);
+    this.el.find('#webrx-rx-desc').html(details['receiver_location'] + ' | Loc: ' + details['locator'] + ', ASL: ' + details['receiver_asl'] + ' m, <a href="https://www.google.com/maps/search/?api=1&query=' + query + '" target="_blank" onclick="dont_toggle_rx_photo();">[maps]</a>');
+    this.el.find('#webrx-rx-photo-title').html(details['photo_title']);
+    this.el.find('#webrx-rx-photo-desc').html(details['photo_desc']);
+};
+
+$.fn.header = function() {
+    if (!this.data('header')) {
+        this.data('header', new Header(this));
+    }
+    return this.data('header');
+};

htdocs/openwebrx.js

@@ -761,12 +761,7 @@ function on_ws_recv(evt) {
                         secondary_demod_init_canvases();
                         break;
                     case "receiver_details":
-                        var r = json['value'];
+                        $('#webrx-top-container').header().setDetails(json['value']);
-                        e('webrx-rx-title').innerHTML = r['receiver_name'];
-                        var query = encodeURIComponent(r['receiver_gps']['lat'] + ',' + r['receiver_gps']['lon']);
-                        e('webrx-rx-desc').innerHTML = r['receiver_location'] + ' | Loc: ' + r['locator'] + ', ASL: ' + r['receiver_asl'] + ' m, <a href="https://www.google.com/maps/search/?api=1&query=' + query + '" target="_blank" onclick="dont_toggle_rx_photo();">[maps]</a>';
-                        e('webrx-rx-photo-title').innerHTML = r['photo_title'];
-                        e('webrx-rx-photo-desc').innerHTML = r['photo_desc'];
                         break;
                     case "smeter":
                         smeter_level = json['value'];
@@ -1346,12 +1341,6 @@ function openwebrx_resize() {
     resize_scale();
 }
 
-function init_header() {
-    $('#openwebrx-main-buttons').find('[data-toggle-panel]').click(function () {
-        toggle_panel($(this).data('toggle-panel'));
-    });
-}
-
 function initProgressBars() {
     $(".openwebrx-progressbar").each(function(){
         var bar = $(this).progressbar();
@@ -1397,7 +1386,7 @@ function openwebrx_init() {
     $('.webrx-mouse-freq').frequencyDisplay();
     $('#openwebrx-panel-receiver').demodulatorPanel();
     window.addEventListener("resize", openwebrx_resize);
-    init_header();
+    $('#webrx-top-container').header();
     bookmarks = new BookmarkBar();
     initSliders();
 }

owrx/controllers/assets.py

@@ -69,6 +69,7 @@ class CompiledAssetsController(Controller):
             "openwebrx.js",
             "lib/jquery-3.2.1.min.js",
             "lib/jquery.nanoscroller.js",
+            "lib/Header.js",
             "lib/Demodulator.js",
             "lib/DemodulatorPanel.js",
             "lib/BookmarkBar.js",