Added fullscreen support in webpanel and dashboard

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%;

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;

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();

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();
-// });
-

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();
+}
+

platypush/backend/http/templates/js-common.html

@@ -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>