From e0b821fcec0d2ab6d2b821e421d2891bf0983cbc Mon Sep 17 00:00:00 2001 From: Elliott Rose Date: Fri, 10 Feb 2023 10:02:27 +0100 Subject: [PATCH 1/4] Add fullscreen functionality for iframe --- assets/custom-functions.js | 46 +++++++++++++++++--------------------- assets/style.css | 21 ++++++++++++++++- dash_server.py | 2 +- router.py | 4 ++-- tabs/fullscreen.py | 20 +++++------------ 5 files changed, 49 insertions(+), 44 deletions(-) diff --git a/assets/custom-functions.js b/assets/custom-functions.js index 88b2589..69a6909 100644 --- a/assets/custom-functions.js +++ b/assets/custom-functions.js @@ -75,32 +75,6 @@ $(document).ready(function () { }); }); -// Functions to fullscreen iframe -function requestFullScreen(element) { - var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen; - requestMethod.call(element); -} - -function exitFullScreen() { - const element = window.parent.document - const cancelFullScreen = element.exitFullscreen || element.mozCancelFullScreen || element.webkitExitFullscreen || element.msExitFullscreen; - cancelFullScreen.call(element); -}; - -// Wait for click to go fullscreen -$(document).ready(function () { - $(document).on('click', "#fullscreen-tab", function () { - var element = window.parent.document.getElementById('product-iframe'); - if(window.parent.document.fullscreenElement!=null){ - console.log('Triggering exit'); - exitFullScreen(); - }else { - console.log('Triggering fullscreen'); - requestFullScreen(element); - } - }); -}); - // Remove yellow from rc-slider-mark-text when moved $(document).ready(function () { $(document).on('click','.rc-slider' , function () { @@ -139,3 +113,23 @@ $(document).ready(function () { } }); }); + +// SEND FULLSCREEN REQUEST TO PARENT WINDOW +$(document).ready(function () { + $(document).on('click', "#fullscreen-tab", function () { + parent.postMessage('fullscreen', '*'); + }) +}); + +// DETECT IFRAME AND REMOVE FULLSCREEN BUTTON +$(window).on('load', function removeFullscreen () { + const tab = document.getElementById('fullscreen-tab'); + if (tab != null) { + if (window.self === window.top){ + tab.style.visibility = "hidden"; + } + } else { + setTimeout(removeFullscreen, 5); + } +}) + diff --git a/assets/style.css b/assets/style.css index c6e5212..9098cc5 100644 --- a/assets/style.css +++ b/assets/style.css @@ -38,6 +38,25 @@ a.modebar-btn { padding-bottom: 0.8rem !important; } +#fullscreen-tab:hover:after { + color: #F1B545; +} + +#fullscreen-tab::after { + position: absolute; + top: 65%; + right: 9%; + font-variant: normal; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + font-family: "Font Awesome 5 Brands","Font Awesome 5 Free"; + font-size: 25px; + font-weight: 900; + font-style: normal; + content: "\f065"; + color: white; +} + .horizontal-menu { background-color: #2B383E !important; font-family: "Roboto", sans-serif; @@ -193,7 +212,7 @@ input.DateInput_input { } .DateInput_input:after { - display: inline-block; + display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; content: ""; diff --git a/dash_server.py b/dash_server.py index 2f95870..a760979 100755 --- a/dash_server.py +++ b/dash_server.py @@ -133,4 +133,4 @@ from tabs.observations_callbacks import * if __name__ == '__main__': app.run_server(debug=True, # use_reloader=False, # processes=4, threaded=False, - host='0.0.0.0', port=7777) + host='0.0.0.0', port=7778) diff --git a/router.py b/router.py index 2cce658..e757b06 100644 --- a/router.py +++ b/router.py @@ -71,7 +71,7 @@ def render_sidebar(tab='forecast-tab', route_selections=ROUTE_DEFAULTS): 'observations-tab' : sidebar_observations(route_selections['obs_option'][0]), #'fullscreen-tab' : 'Full' } - if tabs[tab][0] is 'Full': + if tabs[tab] is 'Full': return return tabs[tab] @@ -124,7 +124,7 @@ def router(url): tab_forecast(window=route_selections['for_option'][0], end_date=route_selections['date'][0]),#'models', 'prob', 'was' tab_evaluation(route_selections['eval_option'][0]), #nrt or scores tab_observations(route_selections['obs_option'][0]),#rgb or visibility - # go_fullscreen(pathname), + go_fullscreen(pathname), ]), ] except: #This handles when user inputs incorrect URL params diff --git a/tabs/fullscreen.py b/tabs/fullscreen.py index 2f87a8d..2bd957b 100644 --- a/tabs/fullscreen.py +++ b/tabs/fullscreen.py @@ -1,20 +1,12 @@ #!/usr/bin/env python3 # -*- coding: utf-8 -*- -import dash_bootstrap_components as dbc from dash import dcc -from dash import html def go_fullscreen(pathname): - if 'daily_dashboard' not in pathname: - return dcc.Tab(label='', - id='fullscreen-tab', - value='fullscreen-tab', - className='horizontal-menu', - ) - else: - return dcc.Tab(label='Fullscreen', - id='fullscreen-tab', - value='fullscreen-tab', - className='horizontal-menu', - ) + return dcc.Tab( + id='fullscreen-tab', + value='fullscreen-tab', + disabled=True, + className='horizontal-menu', + ) -- GitLab From 04de72fc44ca45c7647cf21dd300c0b4d6977c85 Mon Sep 17 00:00:00 2001 From: Elliott Rose Date: Fri, 10 Feb 2023 10:33:58 +0100 Subject: [PATCH 2/4] Add tests and remove variable that is no longer needed. --- router.py | 2 +- tabs/fullscreen.py | 2 +- tests/test_fullscreen.py | 6 ++++++ 3 files changed, 8 insertions(+), 2 deletions(-) create mode 100644 tests/test_fullscreen.py diff --git a/router.py b/router.py index e757b06..efdfcc8 100644 --- a/router.py +++ b/router.py @@ -124,7 +124,7 @@ def router(url): tab_forecast(window=route_selections['for_option'][0], end_date=route_selections['date'][0]),#'models', 'prob', 'was' tab_evaluation(route_selections['eval_option'][0]), #nrt or scores tab_observations(route_selections['obs_option'][0]),#rgb or visibility - go_fullscreen(pathname), + go_fullscreen(), ]), ] except: #This handles when user inputs incorrect URL params diff --git a/tabs/fullscreen.py b/tabs/fullscreen.py index 2bd957b..50a3b56 100644 --- a/tabs/fullscreen.py +++ b/tabs/fullscreen.py @@ -3,7 +3,7 @@ from dash import dcc -def go_fullscreen(pathname): +def go_fullscreen(): return dcc.Tab( id='fullscreen-tab', value='fullscreen-tab', diff --git a/tests/test_fullscreen.py b/tests/test_fullscreen.py new file mode 100644 index 0000000..328f1ec --- /dev/null +++ b/tests/test_fullscreen.py @@ -0,0 +1,6 @@ +import pytest +import importlib +code = importlib.import_module('tabs.fullscreen') + +def test_fullscreen(): + assert "(id='fullscreen-tab', className='horizontal-menu', disabled=True, value='fullscreen-tab')" in str(code.go_fullscreen()) -- GitLab From 29a51c35458a6d1b4d8b77cc69f60a052df253e8 Mon Sep 17 00:00:00 2001 From: Francesco Benincasa Date: Tue, 14 Feb 2023 10:41:28 +0100 Subject: [PATCH 3/4] Added SingleDatePicker javascript --- assets/custom-functions.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/assets/custom-functions.js b/assets/custom-functions.js index 69a6909..2d7dbc5 100644 --- a/assets/custom-functions.js +++ b/assets/custom-functions.js @@ -133,3 +133,11 @@ $(window).on('load', function removeFullscreen () { } }) +// Move datepicker above the time series area +$(document).ready(function () { + $(document).on('click', ".SingleDatePicker", function () { + const element = document.getElementsByClassName('DayPicker')[0]; + element.style.position = 'absolute'; + element.style.bottom = '78px'; + }); +}); -- GitLab From 80605da76069636e3fdc4e7807b7f68b919c3d28 Mon Sep 17 00:00:00 2001 From: Francesco Benincasa Date: Tue, 14 Feb 2023 10:43:36 +0100 Subject: [PATCH 4/4] Added ";" to javascript --- assets/custom-functions.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/custom-functions.js b/assets/custom-functions.js index 2d7dbc5..49b296d 100644 --- a/assets/custom-functions.js +++ b/assets/custom-functions.js @@ -131,7 +131,7 @@ $(window).on('load', function removeFullscreen () { } else { setTimeout(removeFullscreen, 5); } -}) +}); // Move datepicker above the time series area $(document).ready(function () { -- GitLab