From 9d44f946d04cb60100e9c617b295fee66951f484 Mon Sep 17 00:00:00 2001 From: Chucky3920 <75135662+Chucky3920@users.noreply.github.com> Date: Thu, 17 Oct 2024 21:26:49 +0200 Subject: [PATCH] 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 <11360596+jpenilla@users.noreply.github.com> --- .../main/resources/web/js/modules/Sidebar.js | 6 +++- .../resources/web/js/modules/Squaremap.js | 28 ++++++++++++++++--- .../resources/web/js/modules/UICoordinates.js | 6 +++- .../main/resources/web/js/modules/UILink.js | 6 +++- 4 files changed, 39 insertions(+), 7 deletions(-) diff --git a/common/src/main/resources/web/js/modules/Sidebar.js b/common/src/main/resources/web/js/modules/Sidebar.js index 0be6eacc..6eea37b9 100644 --- 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 index 9ea519f5..3e48cc79 100644 --- 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 index c839ce34..fe88d4ae 100644 --- 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 index eba2fd84..ef13d121 100644 --- 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 = ``; } }); + this.showLinkButton = show; this.link = new Link(); P.map.addControl(this.link) .addEventListener('move', () => this.update())