Added fullscreen support in webpanel and dashboard
This commit is contained in:
parent
d595688d55
commit
e44dfbc169
6 changed files with 45 additions and 47 deletions
|
@ -27,6 +27,7 @@ body {
|
|||
}
|
||||
|
||||
main {
|
||||
background: $default-bg;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
width: 100%;
|
||||
|
|
|
@ -24,6 +24,7 @@ body {
|
|||
height: 100%;
|
||||
|
||||
main {
|
||||
background: $default-bg;
|
||||
margin: 0;
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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();
|
||||
// });
|
||||
|
||||
|
|
9
platypush/backend/http/static/js/utils.js
Normal file
9
platypush/backend/http/static/js/utils.js
Normal file
|
@ -0,0 +1,9 @@
|
|||
function enterFullScreen() {
|
||||
return document.getElementsByTagName('body')[0].requestFullscreen();
|
||||
}
|
||||
|
||||
function exitFullScreen() {
|
||||
const self = this;
|
||||
return document.exitFullscreen();
|
||||
}
|
||||
|
|
@ -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/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/notifications.js') }}"></script>
|
||||
|
||||
|
|
Loading…
Reference in a new issue