add button to enable fullscreen

Digitale-Lernwelten · Mar 9, 2022 · 6e367c2 · 6e367c2
1 parent 48bbe89
commit 6e367c2
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/plugins/h5p-drawing-board/drawing-board.css b/plugins/h5p-drawing-board/drawing-board.css
@@ -1,10 +1,15 @@
 .h5p-drawing-board {
-  /* border: 1px solid red; */
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
 }
 
+.h5p-drawing-board.h5p-fullscreen {
+  width: 100% !important;
+  height: 100% !important;
+  overflow: auto !important;
+}
+
 .h5p-drawing-board * {
   font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
 }

diff --git a/plugins/h5p-drawing-board/drawing-board.js b/plugins/h5p-drawing-board/drawing-board.js
@@ -315,6 +315,7 @@ H5P.DrawingBoard = (function (_$) {
 			<div class="bottom-controls-container">
 				<button id="clear-button-${id}" class="bottom-button">Neu</button>
 				<button id="save-button-${id}" class="bottom-button">Speichern</button>
+				<button id="fullscreen-button-${id}" class="bottom-button">Vollbild</button>
 			</div>
 		`);
 
@@ -325,6 +326,18 @@ H5P.DrawingBoard = (function (_$) {
 			clearStorage();
 		};
 
+		const fullscreenButton = document.getElementById(`fullscreen-button-${id}`);
+
+		fullscreenButton.onclick = () => {
+			if (H5P.isFullscreen) {
+				H5P.exitFullScreen();
+				fullscreenButton.innerHTML = 'Vollbildmodus';
+			} else {
+				H5P.fullScreen($container, this);
+				fullscreenButton.innerHTML = 'Vollbildmodus beenden';
+			}
+		};
+
 		const saveButton = document.getElementById(`save-button-${id}`);
 
 		saveButton.onclick = () => {

diff --git a/plugins/h5p-drawing-board/library.json b/plugins/h5p-drawing-board/library.json
@@ -4,7 +4,7 @@
     "description": "Displays a simple drawing board",
     "majorVersion": 1,
     "minorVersion": 3,
-    "patchVersion": 3,
+    "patchVersion": 4,
     "runnable": 1,
     "author": "Stefan Wintergerst",
     "license": "MIT",