Added fullscreen support in webpanel and dashboard

This commit is contained in:
Fabio Manganiello 2020-05-20 15:29:49 +02:00
parent d595688d55
commit e44dfbc169
6 changed files with 45 additions and 47 deletions

View file

@ -27,6 +27,7 @@ body {
} }
main { main {
background: $default-bg;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
width: 100%; width: 100%;

View file

@ -24,6 +24,7 @@ body {
height: 100%; height: 100%;
main { main {
background: $default-bg;
margin: 0; margin: 0;
flex: 1 1 auto; flex: 1 1 auto;
overflow: hidden; overflow: hidden;

View file

@ -20,15 +20,46 @@ window.vm = new Vue({
config: window.config, config: window.config,
selectedPlugin: undefined, selectedPlugin: undefined,
now: new Date(), 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() { created: function() {
m = window.location.href.match('#([a-zA-Z0-9._]+)$'); let m = window.location.href.match('#([a-zA-Z0-9._]+)$');
if (m) { if (m) {
this.selectedPlugin = m[1]; this.selectedPlugin = m[1];
} }
m = window.location.href.match('[?&]fs=([01])');
if (m) {
this.fullscreen = !parseInt(m[1]);
this.toggleFullScreen();
}
const self = this; const self = this;
setInterval(() => { setInterval(() => {
self.now = new Date(); self.now = new Date();

View file

@ -24,52 +24,7 @@ window.vm = new Vue({
created: function() { created: function() {
initEvents(); 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();
// });

View file

@ -0,0 +1,9 @@
function enterFullScreen() {
return document.getElementsByTagName('body')[0].requestFullscreen();
}
function exitFullScreen() {
const self = this;
return document.exitFullscreen();
}

View file

@ -6,6 +6,7 @@
<script type="text/javascript" src="{{ url_for('static', filename='js/lib/axios.min.js') }}"></script> <script type="text/javascript" src="{{ url_for('static', filename='js/lib/axios.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/api.js') }}"></script> <script type="text/javascript" src="{{ url_for('static', filename='js/api.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/utils.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/events.js') }}"></script> <script type="text/javascript" src="{{ url_for('static', filename='js/events.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/notifications.js') }}"></script> <script type="text/javascript" src="{{ url_for('static', filename='js/notifications.js') }}"></script>