Added options to hide certain elements within the URL Params (#315)

Added options to disable certain elements within the URL - Helps when using IFrame within other web applications show_sidebar=false - Hides Sidebar.js show_coordinates=false - Hides UICoordinates.js show_link_button=false - Hides UILink.js show_controls=false Hides Leaflet controls --------- Co-authored-by: Jason Penilla <[email protected]>
jpenilla · Oct 17, 2024 · 9d44f94 · 9d44f94
1 parent 6a05a27
commit 9d44f94
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 7 deletions.
diff --git a/common/src/main/resources/web/js/modules/Sidebar.js b/common/src/main/resources/web/js/modules/Sidebar.js
@@ -3,8 +3,12 @@ import { Fieldset } from "./util/Fieldset.js";
 import { P } from './Squaremap.js';
 
 class Sidebar {
-    constructor(json) {
+    constructor(json, show) {
         this.sidebar = P.createElement("div", "sidebar", this);
+        this.showSidebar = show;
+        if (!show) {
+            this.sidebar.style.display = "none";
+        }
         this.sidebar.addEventListener("click", (e) => {
             P.playerList.followPlayerMarker(null);
         });

diff --git a/common/src/main/resources/web/js/modules/Squaremap.js b/common/src/main/resources/web/js/modules/Squaremap.js
@@ -51,11 +51,17 @@ class SquaremapMap {
             this.layerControl.init();
 
             this.title = json.ui.title;
-            this.sidebar = new Sidebar(json.ui.sidebar);
+            this.sidebar = new Sidebar(json.ui.sidebar, this.getUrlParam("show_sidebar", "true") === "true");
             this.playerList = new PlayerList(json.ui.sidebar);
             this.worldList = new WorldList(json.worlds);
-            this.coordinates = new UICoordinates(json.ui.coordinates);
-            this.uiLink = new UILink(json.ui.link);
+            this.coordinates = new UICoordinates(json.ui.coordinates, this.getUrlParam("show_coordinates", "true") === "true");
+            this.uiLink = new UILink(json.ui.link, this.getUrlParam("show_link_button", "true") === "true");
+
+            this.showControls = this.getUrlParam("show_controls", "true") === "true"
+            if (!this.showControls) {
+                let controlLayers = document.getElementsByClassName('leaflet-top leaflet-left');
+                controlLayers[0].style.display = "none";
+            }
 
             this.worldList.loadInitialWorld(json, (world) => {
                 this.loop();
@@ -64,6 +70,7 @@ class SquaremapMap {
                     this.getUrlParam("z", world.spawn.z),
                     this.getUrlParam("zoom", world.zoom.def));
             });
+
         });
     }
     centerOn(x, z, zoom) {
@@ -127,7 +134,20 @@ class SquaremapMap {
         const x = Math.floor(center.x);
         const z = Math.floor(center.y);
         const following = this.playerList.following ? `&uuid=${this.playerList.following}` : '';
-        return `?world=${this.worldList.curWorld.name}&zoom=${zoom}&x=${x}&z=${z}${following}`;
+        let link = `?world=${this.worldList.curWorld.name}&zoom=${zoom}&x=${x}&z=${z}${following}`;
+        if (!this.showControls) {
+            link += "&show_controls=false"
+        }
+        if (!this.uiLink.showLinkButton) {
+            link += "&show_link_button=false"
+        }
+        if (!this.coordinates.showCoordinates) {
+            link += "&show_coordinates=false"
+        }
+        if (!this.sidebar.showSidebar) {
+            link += "&show_sidebar=false"
+        }
+        return link
     }
     updateBrowserUrl(url) {
         window.history.replaceState(null, "", url);

diff --git a/common/src/main/resources/web/js/modules/UICoordinates.js b/common/src/main/resources/web/js/modules/UICoordinates.js
@@ -1,7 +1,7 @@
 import { P } from './Squaremap.js';
 
 class UICoordinates {
-    constructor(json) {
+    constructor(json, show) {
         const Coords = L.Control.extend({
             _container: null,
             options: {
@@ -10,6 +10,9 @@ class UICoordinates {
             onAdd: function () {
                 const coords = L.DomUtil.create('div', 'leaflet-control-layers coordinates');
                 this._coords = coords;
+                if (!show) {
+                    this._coords.style.display = "none";
+                }
                 return coords;
             },
             update: function (html, point) {
@@ -22,6 +25,7 @@ class UICoordinates {
                 }
             }
         });
+        this.showCoordinates = show;
         this.html = json.html == null ? "undefined" : json.html;
         this.coords = new Coords();
         P.map.addControl(this.coords)

diff --git a/common/src/main/resources/web/js/modules/UILink.js b/common/src/main/resources/web/js/modules/UILink.js
@@ -1,7 +1,7 @@
 import { P } from './Squaremap.js';
 
 class UILink {
-    constructor(json) {
+    constructor(json, show) {
         const Link = L.Control.extend({
             _container: null,
             options: {
@@ -10,6 +10,9 @@ class UILink {
             onAdd: function () {
                 const link = L.DomUtil.create('div', 'leaflet-control-layers link');
                 this._link = link;
+                if (!show) {
+                    this._link.style.display = "none";
+                }
                 this.update();
                 return link;
             },
@@ -19,6 +22,7 @@ class UILink {
                 this._link.innerHTML = `<a href='${url}'><img src='images/clear.png'/></a>`;
             }
         });
+        this.showLinkButton = show;
         this.link = new Link();
         P.map.addControl(this.link)
             .addEventListener('move', () => this.update())