move rx_photo code to header

htdocs/css/map.css

@@ -1,11 +1,6 @@
 @import url("openwebrx-header.css");
 @import url("openwebrx-globals.css");
 
-/* expandable photo not implemented on map page */
-#webrx-top-photo-clip {
-    max-height: 67px;
-}
-
 body {
     display: flex;
     flex-direction: column;

htdocs/lib/Header.js

@@ -4,16 +4,69 @@ function Header(el) {
     this.el.find('#openwebrx-main-buttons').find('[data-toggle-panel]').click(function () {
         toggle_panel($(this).data('toggle-panel'));
     });
+
+    this.init_rx_photo();
 };
 
 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-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">[maps]</a>');
     this.el.find('#webrx-rx-photo-title').html(details['photo_title']);
     this.el.find('#webrx-rx-photo-desc').html(details['photo_desc']);
 };
 
+Header.prototype.init_rx_photo = function() {
+    var clip = this.el.find("#webrx-top-photo-clip")[0];
+    this.rx_photo_height = clip.clientHeight;
+    clip.style.maxHeight = this.rx_photo_height + "px";
+    this.rx_photo_state = 1;
+
+    $.extend($.easing, {
+        easeOutCubic:function(x) {
+            return 1 - Math.pow( 1 - x, 3 );
+        }
+    });
+
+    window.setTimeout(function () {
+        $('#webrx-rx-photo-title').animate({opacity: 0}, 500);
+    }, 1000);
+    window.setTimeout(function () {
+        $('#webrx-rx-photo-desc').animate({opacity: 0}, 500);
+    }, 1500);
+    window.setTimeout(this.close_rx_photo.bind(this), 2500);
+    $('#webrx-top-container').find('.openwebrx-photo-trigger').click(this.toggle_rx_photo.bind(this));
+};
+
+Header.prototype.close_rx_photo = function() {
+    this.rx_photo_state = 0;
+    this.el.find("#webrx-rx-photo-desc").animate({opacity: 0});
+    this.el.find("#webrx-rx-photo-title").animate({opacity: 0});
+    this.el.find('#webrx-top-photo-clip').animate({maxHeight: 67}, {duration: 1000, easing: 'easeOutCubic'});
+    this.el.find("#openwebrx-rx-details-arrow-down").show();
+    this.el.find("#openwebrx-rx-details-arrow-up").hide();
+}
+
+Header.prototype.open_rx_photo = function() {
+    this.rx_photo_state = 1;
+    this.el.find("#webrx-rx-photo-desc").animate({opacity: 1});
+    this.el.find("#webrx-rx-photo-title").animate({opacity: 1});
+    this.el.find('#webrx-top-photo-clip').animate({maxHeight: this.rx_photo_height}, {duration: 1000, easing: 'easeOutCubic'});
+    this.el.find("#openwebrx-rx-details-arrow-down").hide();
+    this.el.find("#openwebrx-rx-details-arrow-up").show();
+}
+
+Header.prototype.toggle_rx_photo = function(ev) {
+    if (ev && ev.target && ev.target.tagName == 'A') {
+        return;
+    }
+    if (this.rx_photo_state) {
+        this.close_rx_photo();
+    } else {
+        this.open_rx_photo();
+    }
+};
+
 $.fn.header = function() {
     if (!this.data('header')) {
         this.data('header', new Header(this));

htdocs/openwebrx.js

@@ -31,68 +31,11 @@ var fft_compression = "none";
 var fft_codec;
 var waterfall_setup_done = 0;
 var secondary_fft_size;
-var rx_photo_state = 1;
 
 function e(what) {
     return document.getElementById(what);
 }
 
-var rx_photo_height;
-
-function init_rx_photo() {
-    var clip = e("webrx-top-photo-clip");
-    rx_photo_height = clip.clientHeight;
-    clip.style.maxHeight = rx_photo_height + "px";
-
-    $.extend($.easing, {
-        easeOutCubic:function(x) {
-            return 1 - Math.pow( 1 - x, 3 );
-        }
-    });
-
-    window.setTimeout(function () {
-        $('#webrx-rx-photo-title').animate({opacity: 0}, 500);
-    }, 1000);
-    window.setTimeout(function () {
-        $('#webrx-rx-photo-desc').animate({opacity: 0}, 500);
-    }, 1500);
-    window.setTimeout(function () {
-        close_rx_photo()
-    }, 2500);
-    $('#webrx-top-container').find('.openwebrx-photo-trigger').click(toggle_rx_photo);
-}
-
-var dont_toggle_rx_photo_flag = 0;
-
-function dont_toggle_rx_photo() {
-    dont_toggle_rx_photo_flag = 1;
-}
-
-function toggle_rx_photo() {
-    if (dont_toggle_rx_photo_flag) {
-        dont_toggle_rx_photo_flag = 0;
-        return;
-    }
-    if (rx_photo_state) close_rx_photo();
-    else open_rx_photo()
-}
-
-function close_rx_photo() {
-    rx_photo_state = 0;
-    $('#webrx-top-photo-clip').animate({maxHeight: 67}, {duration: 1000, easing: 'easeOutCubic'});
-    e("openwebrx-rx-details-arrow-down").style.display = "block";
-    e("openwebrx-rx-details-arrow-up").style.display = "none";
-}
-
-function open_rx_photo() {
-    rx_photo_state = 1;
-    e("webrx-rx-photo-desc").style.opacity = 1;
-    e("webrx-rx-photo-title").style.opacity = 1;
-    $('#webrx-top-photo-clip').animate({maxHeight: rx_photo_height}, {duration: 1000, easing: 'easeOutCubic'});
-    e("openwebrx-rx-details-arrow-down").style.display = "none";
-    e("openwebrx-rx-details-arrow-up").style.display = "block";
-}
-
 function updateVolume() {
     audioEngine.setVolume(parseFloat(e("openwebrx-panel-volume").value) / 100);
 }
@@ -1378,7 +1321,6 @@ function openwebrx_init() {
     }
     fft_codec = new ImaAdpcmCodec();
     initProgressBars();
-    init_rx_photo();
     open_websocket();
     secondary_demod_init();
     digimodes_init();