diff --git a/htdocs/css/map.css b/htdocs/css/map.css index 5d478cd..de6ef3e 100644 --- a/htdocs/css/map.css +++ b/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; diff --git a/htdocs/lib/Header.js b/htdocs/lib/Header.js index aec4ab7..ebdc5b1 100644 --- a/htdocs/lib/Header.js +++ b/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, [maps]'); + this.el.find('#webrx-rx-desc').html(details['receiver_location'] + ' | Loc: ' + details['locator'] + ', ASL: ' + details['receiver_asl'] + ' m, [maps]'); 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)); diff --git a/htdocs/openwebrx.js b/htdocs/openwebrx.js index fb5586d..a6771f8 100644 --- a/htdocs/openwebrx.js +++ b/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();