From e44dfbc169ea8743f5dc71d42a6ab8864dd0fc09 Mon Sep 17 00:00:00 2001 From: Fabio Manganiello Date: Wed, 20 May 2020 15:29:49 +0200 Subject: [PATCH] Added fullscreen support in webpanel and dashboard --- .../static/css/source/dashboard/index.scss | 1 + .../static/css/source/webpanel/index.scss | 1 + .../backend/http/static/js/application.js | 33 ++++++++++++- platypush/backend/http/static/js/dashboard.js | 47 +------------------ platypush/backend/http/static/js/utils.js | 9 ++++ .../backend/http/templates/js-common.html | 1 + 6 files changed, 45 insertions(+), 47 deletions(-) create mode 100644 platypush/backend/http/static/js/utils.js diff --git a/platypush/backend/http/static/css/source/dashboard/index.scss b/platypush/backend/http/static/css/source/dashboard/index.scss index 0784bcca32..fc0e28b23e 100644 --- a/platypush/backend/http/static/css/source/dashboard/index.scss +++ b/platypush/backend/http/static/css/source/dashboard/index.scss @@ -27,6 +27,7 @@ body { } main { + background: $default-bg; display: flex; flex-flow: column; width: 100%; diff --git a/platypush/backend/http/static/css/source/webpanel/index.scss b/platypush/backend/http/static/css/source/webpanel/index.scss index f4784bc297..a1a3e48390 100644 --- a/platypush/backend/http/static/css/source/webpanel/index.scss +++ b/platypush/backend/http/static/css/source/webpanel/index.scss @@ -24,6 +24,7 @@ body { height: 100%; main { + background: $default-bg; margin: 0; flex: 1 1 auto; overflow: hidden; diff --git a/platypush/backend/http/static/js/application.js b/platypush/backend/http/static/js/application.js index cff27088c9..be96f0272a 100644 --- a/platypush/backend/http/static/js/application.js +++ b/platypush/backend/http/static/js/application.js @@ -20,15 +20,46 @@ window.vm = new Vue({ config: window.config, selectedPlugin: undefined, now: new Date(), + fullscreen: false, }; }, + methods: { + enterFullScreen: function() { + const self = this; + enterFullScreen().then(() => { + self.fullscreen = true; + }); + }, + + exitFullScreen: function() { + const self = this; + exitFullscreen().finally(() => { + self.fullscreen = false; + }); + }, + + toggleFullScreen: function() { + if (this.fullscreen) { + this.exitFullScreen(); + } else { + this.enterFullScreen(); + } + }, + }, + created: function() { - m = window.location.href.match('#([a-zA-Z0-9._]+)$'); + let m = window.location.href.match('#([a-zA-Z0-9._]+)$'); if (m) { this.selectedPlugin = m[1]; } + m = window.location.href.match('[?&]fs=([01])'); + if (m) { + this.fullscreen = !parseInt(m[1]); + this.toggleFullScreen(); + } + const self = this; setInterval(() => { self.now = new Date(); diff --git a/platypush/backend/http/static/js/dashboard.js b/platypush/backend/http/static/js/dashboard.js index 1bba3fe07b..2bb8857aa0 100644 --- a/platypush/backend/http/static/js/dashboard.js +++ b/platypush/backend/http/static/js/dashboard.js @@ -24,52 +24,7 @@ window.vm = new Vue({ created: function() { initEvents(); + enterFullScreen(); }, }); -// $(document).ready(function() { -// var onEvent = function(event) { -// if (event.args.type == 'platypush.message.event.web.widget.WidgetUpdateEvent') { -// var $widget = $('#' + event.args.widget); -// delete event.args.widget; - -// for (var key of Object.keys(event.args)) { -// $widget.find('[data-bind=' + key + ']').text(event.args[key]); -// } -// } else if (event.args.type == 'platypush.message.event.web.DashboardIframeUpdateEvent') { -// var url = event.args.url; -// var $modal = $('#iframe-modal'); -// var $iframe = $modal.find('iframe'); -// $iframe.attr('src', url); -// $iframe.prop('width', event.args.width || '100%'); -// $iframe.prop('height', event.args.height || '600'); - -// if ('timeout' in event.args) { -// setTimeout(function() { -// $iframe.removeAttr('src'); -// $modal.fadeOut(); -// }, parseFloat(event.args.timeout) * 1000); -// } - -// $modal.fadeIn(); -// } -// }; - -// var initDashboard = function() { -// if (window.config.dashboard.background_image) { -// $('body').css('background-image', 'url(' + window.config.dashboard.background_image + ')'); -// } -// }; - -// var initEvents = function() { -// registerEventListener(onEvent); -// }; - -// var init = function() { -// initDashboard(); -// initEvents(); -// }; - -// init(); -// }); - diff --git a/platypush/backend/http/static/js/utils.js b/platypush/backend/http/static/js/utils.js new file mode 100644 index 0000000000..be42f6a2ab --- /dev/null +++ b/platypush/backend/http/static/js/utils.js @@ -0,0 +1,9 @@ +function enterFullScreen() { + return document.getElementsByTagName('body')[0].requestFullscreen(); +} + +function exitFullScreen() { + const self = this; + return document.exitFullscreen(); +} + diff --git a/platypush/backend/http/templates/js-common.html b/platypush/backend/http/templates/js-common.html index 1182782f9b..b99394d1d3 100644 --- a/platypush/backend/http/templates/js-common.html +++ b/platypush/backend/http/templates/js-common.html @@ -6,6 +6,7 @@ +