From 210ba2e771b8e91af2443883ac59d24d327de020 Mon Sep 17 00:00:00 2001 From: Frank Schubert Date: Thu, 25 Jul 2024 14:25:29 +0200 Subject: [PATCH] Added fullscreen mode to maps --- Layout/default/Building/Index.php | 2 +- Layout/default/Preorder/Index.php | 2 +- Layout/default/header.php | 2 ++ public/assets/css/fullscreen.png | Bin 0 -> 299 bytes public/assets/css/fullscreen@2x.png | Bin 0 -> 420 bytes public/assets/css/leaflet.fullscreen.css | 40 +++++++++++++++++++++ public/assets/js/Leaflet.fullscreen.min.js | 1 + 7 files changed, 45 insertions(+), 2 deletions(-) create mode 100644 public/assets/css/fullscreen.png create mode 100644 public/assets/css/fullscreen@2x.png create mode 100644 public/assets/css/leaflet.fullscreen.css create mode 100644 public/assets/js/Leaflet.fullscreen.min.js diff --git a/Layout/default/Building/Index.php b/Layout/default/Building/Index.php index 7a34278b9..b53781942 100644 --- a/Layout/default/Building/Index.php +++ b/Layout/default/Building/Index.php @@ -397,7 +397,7 @@ }); } } else { - buildingMap = L.map('building-map').setView([, ], 12); + buildingMap = L.map('building-map', {fullscreenControl: true}).setView([, ], 12); } if(!(currentTileset in tileLayers)) { diff --git a/Layout/default/Preorder/Index.php b/Layout/default/Preorder/Index.php index 973776820..245bb7e86 100644 --- a/Layout/default/Preorder/Index.php +++ b/Layout/default/Preorder/Index.php @@ -437,7 +437,7 @@ }); } } else { - preorderMap = L.map('preorder-map').setView([, ], 12); + preorderMap = L.map('preorder-map', {fullscreenControl: true}).setView([, ], 12); } if(!(currentTileset in tileLayers)) { diff --git a/Layout/default/header.php b/Layout/default/header.php index f73c6b3f6..1a1f26627 100644 --- a/Layout/default/header.php +++ b/Layout/default/header.php @@ -19,6 +19,7 @@ + @@ -39,6 +40,7 @@ + diff --git a/public/assets/css/fullscreen.png b/public/assets/css/fullscreen.png new file mode 100644 index 0000000000000000000000000000000000000000..7384960aeb574240163a493a151fead20dc0611a GIT binary patch literal 299 zcmeAS@N?(olHy`uVBq!ia0vp^Qb26N!3HF!ywT_YQY^(zo*^7SP{WY|;&T>wL>2?p zUk71ECym(^Ktah8*NBqf{Irtt#G+J&^73-M%)IR4qJR0?c|VVoi#&H*nzk><=VJ7@HQU1Z_V>w`?l#_f{i*8umu)iddGww* z>3vx+!GG1OU;EWUx0X~hxG2rq^x@2zjVbjX|F1ZfDD>^!i>Z@e=`4{;y0s+g&91Al p8%^ww-;@2hQY^(zo*^7SP{WbZ0pxQQctjR6 zFi5WlVa7PAi84Sz$r9IylHmNblJdl&REF~Ma=pyF?Be9af>gcyqV(DCY@`?%7!^HT z978JRyuIbf*JL2VaIybmlC5OHCOKa72`f5-7F_i-&hI_2WYN~Lh-s=-MZdrEUP%*} z>sZ2eQPQPc-_~GhNruVq5#|tNZ+oU=grd-gUnYNV=qh zG%mj`vhJT;R_We%ZYLD1nqTlNvfit=eS6-uth>4XAS32xbAe3_xBA?>tb=y5HuU z3;cF;mu&UdD*aXc7p&&~tXS+n%cpkMnWxvJ=SIz`_Afs_0puwZOTbRIWrz!l?^k@w RJ`)(C44$rjF6*2UngH1ls0082 literal 0 HcmV?d00001 diff --git a/public/assets/css/leaflet.fullscreen.css b/public/assets/css/leaflet.fullscreen.css new file mode 100644 index 000000000..f4892578e --- /dev/null +++ b/public/assets/css/leaflet.fullscreen.css @@ -0,0 +1,40 @@ +.leaflet-control-fullscreen a { + background:#fff url(fullscreen.png) no-repeat 0 0; + background-size:26px 52px; + } + .leaflet-touch .leaflet-control-fullscreen a { + background-position: 2px 2px; + } + .leaflet-fullscreen-on .leaflet-control-fullscreen a { + background-position:0 -26px; + } + .leaflet-touch.leaflet-fullscreen-on .leaflet-control-fullscreen a { + background-position: 2px -24px; + } + +/* Do not combine these two rules; IE will break. */ +.leaflet-container:-webkit-full-screen { + width:100%!important; + height:100%!important; + } +.leaflet-container.leaflet-fullscreen-on { + width:100%!important; + height:100%!important; + } + +.leaflet-pseudo-fullscreen { + position:fixed!important; + width:100%!important; + height:100%!important; + top:0!important; + left:0!important; + z-index:99999; + } + +@media + (-webkit-min-device-pixel-ratio:2), + (min-resolution:192dpi) { + .leaflet-control-fullscreen a { + background-image:url(fullscreen@2x.png); + } + } diff --git a/public/assets/js/Leaflet.fullscreen.min.js b/public/assets/js/Leaflet.fullscreen.min.js new file mode 100644 index 000000000..fc2eb24a3 --- /dev/null +++ b/public/assets/js/Leaflet.fullscreen.min.js @@ -0,0 +1 @@ +(function(factory){var L;if(typeof define==="function"&&define.amd){define(["leaflet"],factory)}else if(typeof module!=="undefined"){L=require("leaflet");module.exports=factory(L)}else{if(typeof window.L==="undefined"){throw new Error("Leaflet must be loaded first")}factory(window.L)}})(function(L){L.Control.Fullscreen=L.Control.extend({options:{position:"topleft",title:{"false":"View Fullscreen","true":"Exit Fullscreen"}},onAdd:function(map){var container=L.DomUtil.create("div","leaflet-control-fullscreen leaflet-bar leaflet-control");this.link=L.DomUtil.create("a","leaflet-control-fullscreen-button leaflet-bar-part",container);this.link.href="#";this._map=map;this._map.on("fullscreenchange",this._toggleTitle,this);this._toggleTitle();L.DomEvent.on(this.link,"click",this._click,this);return container},_click:function(e){L.DomEvent.stopPropagation(e);L.DomEvent.preventDefault(e);this._map.toggleFullscreen(this.options)},_toggleTitle:function(){this.link.title=this.options.title[this._map.isFullscreen()]}});L.Map.include({isFullscreen:function(){return this._isFullscreen||false},toggleFullscreen:function(options){var container=this.getContainer();if(this.isFullscreen()){if(options&&options.pseudoFullscreen){this._disablePseudoFullscreen(container)}else if(document.exitFullscreen){document.exitFullscreen()}else if(document.mozCancelFullScreen){document.mozCancelFullScreen()}else if(document.webkitCancelFullScreen){document.webkitCancelFullScreen()}else if(document.msExitFullscreen){document.msExitFullscreen()}else{this._disablePseudoFullscreen(container)}}else{if(options&&options.pseudoFullscreen){this._enablePseudoFullscreen(container)}else if(container.requestFullscreen){container.requestFullscreen()}else if(container.mozRequestFullScreen){container.mozRequestFullScreen()}else if(container.webkitRequestFullscreen){container.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT)}else if(container.msRequestFullscreen){container.msRequestFullscreen()}else{this._enablePseudoFullscreen(container)}}},_enablePseudoFullscreen:function(container){L.DomUtil.addClass(container,"leaflet-pseudo-fullscreen");this._setFullscreen(true);this.fire("fullscreenchange")},_disablePseudoFullscreen:function(container){L.DomUtil.removeClass(container,"leaflet-pseudo-fullscreen");this._setFullscreen(false);this.fire("fullscreenchange")},_setFullscreen:function(fullscreen){this._isFullscreen=fullscreen;var container=this.getContainer();if(fullscreen){L.DomUtil.addClass(container,"leaflet-fullscreen-on")}else{L.DomUtil.removeClass(container,"leaflet-fullscreen-on")}this.invalidateSize()},_onFullscreenChange:function(e){var fullscreenElement=document.fullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement||document.msFullscreenElement;if(fullscreenElement===this.getContainer()&&!this._isFullscreen){this._setFullscreen(true);this.fire("fullscreenchange")}else if(fullscreenElement!==this.getContainer()&&this._isFullscreen){this._setFullscreen(false);this.fire("fullscreenchange")}}});L.Map.mergeOptions({fullscreenControl:false});L.Map.addInitHook(function(){if(this.options.fullscreenControl){this.fullscreenControl=new L.Control.Fullscreen(this.options.fullscreenControl);this.addControl(this.fullscreenControl)}var fullscreenchange;if("onfullscreenchange"in document){fullscreenchange="fullscreenchange"}else if("onmozfullscreenchange"in document){fullscreenchange="mozfullscreenchange"}else if("onwebkitfullscreenchange"in document){fullscreenchange="webkitfullscreenchange"}else if("onmsfullscreenchange"in document){fullscreenchange="MSFullscreenChange"}if(fullscreenchange){var onFullscreenChange=L.bind(this._onFullscreenChange,this);this.whenReady(function(){L.DomEvent.on(document,fullscreenchange,onFullscreenChange)});this.on("unload",function(){L.DomEvent.off(document,fullscreenchange,onFullscreenChange)})}});L.control.fullscreen=function(options){return new L.Control.Fullscreen(options)}}); \ No newline at end of file