From c77a9af92ffe7274b1ee92e07aba449cbd5243b8 Mon Sep 17 00:00:00 2001
From: Matthias Konitzny <konitzny@ibr.cs.tu-bs.de>
Date: Tue, 3 Aug 2021 14:13:29 +0200
Subject: [PATCH] Added better fullscreen button with toggle ability.
---
display/graph.js | 19 +++++++++----------
kg-style.css | 10 ++++++++++
2 files changed, 19 insertions(+), 10 deletions(-)
diff --git a/display/graph.js b/display/graph.js
index c0ab46e..da72f0b 100644
--- a/display/graph.js
+++ b/display/graph.js
@@ -291,22 +291,21 @@ function loadComponents() {
function createFullScreenButton() {
- const sceneNode = document.getElementById('3d-graph');
- const overlayNode = document.createElement('button');
- overlayNode.className = 'fullscreen_button';
- overlayNode.innerText = 'fullscreen';
+ const sceneNode = getCanvasDivNode();
+ const overlayNode = document.createElement('div');
+ overlayNode.className = 'fullscreen-button';
+ overlayNode.innerHTML = '<p>⤢</p>';
overlayNode.addEventListener("click", function () {
- if(getCanvasDivNode().requestFullscreen) {
- getCanvasDivNode().requestFullscreen().then(
- () => G.resize()
- );
-
+ if (!document.fullscreenElement) {
+ getCanvasDivNode().requestFullscreen();
+ } else {
+ document.exitFullscreen();
}
+ G.resize();
});
sceneNode.appendChild(overlayNode);
}
-
const dataUrl = plugin_path + 'datasets/aud1.json'
G = new Graph(dataUrl);
linkoverlay = new LinkOverlay(G);
diff --git a/kg-style.css b/kg-style.css
index 1eaab2c..9cae946 100644
--- a/kg-style.css
+++ b/kg-style.css
@@ -53,6 +53,16 @@
font-size: 20px;
}
+.fullscreen-button {
+ pointer-events: all;
+ z-index: 99;
+ cursor: pointer;
+ left: 15px;
+ top: 5px;
+ position: absolute;
+ font-size: 30px;
+}
+
.detail-view {
position: absolute;
top: 0;
--
GitLab