From 90545d82fe62442d3c3642b969c1ca7820876844 Mon Sep 17 00:00:00 2001
From: flifloo <flifloo@gmail.com>
Date: Tue, 9 Mar 2021 10:53:10 +0100
Subject: [PATCH] Request click for floating actions buttons and add fullscreen
 toggle for better mobile use

---
 public/javascripts/index.js |  9 +++++++++
 views/index.pug             | 12 +++++++++---
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/public/javascripts/index.js b/public/javascripts/index.js
index 5d37aac..cfa2126 100644
--- a/public/javascripts/index.js
+++ b/public/javascripts/index.js
@@ -45,6 +45,14 @@ socket.on("setSlot", data => {
         setSlot(data.name, data.data, ...data.position)
 });
 
+document.getElementById("fullScreen").addEventListener("click", ev => {
+    ev.stopPropagation();
+    if (!document.fullscreenElement)
+        document.documentElement.requestFullscreen();
+    else if (document.exitFullscreen)
+            document.exitFullscreen();
+});
+
 deckSelect.addEventListener("change", ev => {
     ev.stopPropagation();
     socket.emit("getDeck", deckSelect.value);
@@ -74,4 +82,5 @@ function setSlot(name, data, x, y) {
 
 document.addEventListener("DOMContentLoaded", () => {
     M.AutoInit();
+    M.FloatingActionButton.init(document.querySelector(".fixed-action-btn"), {hoverEnabled: false})
 });
diff --git a/views/index.pug b/views/index.pug
index 3407f99..1d9cc82 100644
--- a/views/index.pug
+++ b/views/index.pug
@@ -4,13 +4,19 @@ block content
   h1.center OpenDeck
   .container#deck
 
-  .fixed-action-btn
-    a(href="#modal").btn-floating.btn-large.green.modal-trigger
-      i.large.material-icons toc
+  .fixed-action-btn.no-autoinit
+    a.btn-floating.btn-large.green
+      i.large.material-icons menu
     ul
       li
         a(href="/settings").btn-floating.red
           i.material-icons settings
+      li
+        a(href="#modal").btn-floating.blue.modal-trigger
+          i.material-icons toc
+      li
+        a#fullScreen.btn-floating.yellow
+          i.material-icons fullscreen
 
   #modal.modal
     .modal-content