@geogirafe/lib-geoportal 1.2.0-dev.2646908874 → 1.2.0-dev.2657510436

package/LICENSE

@@ -245,6 +245,7 @@ From:
 - https://www.svgrepo.com/svg/310167/thumb-like
 - https://www.svgrepo.com/svg/310166/thumb-dislike
 - https://www.svgrepo.com/svg/309871/photo-filter
+- https://www.svgrepo.com/svg/309651/full-screen-zoom
 
 
 The MIT License (MIT)

package/assets/i18n/de.json

@@ -220,6 +220,8 @@
     "Freehand line": "Freihandlinie",
     "Freehand polygon": "Freihandpolygon",
     "freeze-column": "Spalte fixieren",
+    "fullscreen-off": "Vollbildmodus verlassen",
+    "fullscreen-on": "Vollbildmodus aktivieren",
     "Generate and copy code": "Code generieren und kopieren",
     "Generate and copy link": "Link generieren und kopieren",
     "Generate CSV": "CSV generieren",
@@ -351,6 +353,7 @@
     "onboarding-treeview-filter-selection-title": "Layer filtern",
     "Only WMTS layers are saved": "Nur WMTS-Layer werden gespeichert",
     "Open advanced filter tool": "Erweiterte Filter öffnen",
+    "open-buttonbar-menu": "Menü öffnen",
     "OpenStreetMap": "OpenStreetMap",
     "Operator": "Operator",
     "or": "oder",

package/assets/i18n/en.json

@@ -222,6 +222,8 @@
     "Freehand line": "Freehand line",
     "Freehand polygon": "Freehand polygon",
     "freeze-column": "Freeze column",
+    "fullscreen-off": "Exit full screen",
+    "fullscreen-on": "Enter full screen",
     "Generate and copy code": "Generate and copy code",
     "Generate and copy link": "Generate and copy link",
     "Generate CSV": "Generate CSV",
@@ -353,6 +355,7 @@
     "onboarding-treeview-filter-selection-title": "Filter layer",
     "Only WMTS layers are saved": "Only WMTS layers are saved",
     "Open advanced filter tool": "Open advanced filter tool",
+    "open-buttonbar-menu": "Open Menu",
     "OpenStreetMap": "OpenStreetMap",
     "Operator": "Operator",
     "or": "or",

package/assets/i18n/fr.json

@@ -220,6 +220,8 @@
     "Freehand line": "Ligne à main levée",
     "Freehand polygon": "Polygone à main levée",
     "freeze-column": "Figer la colonne",
+    "fullscreen-off": "Quitter le plein écran",
+    "fullscreen-on": "Passer en plein écran",
     "Generate and copy code": "Générer et copier le code",
     "Generate and copy link": "Générer et copier le lien",
     "Generate CSV": "Générer CSV",
@@ -351,6 +353,7 @@
     "onboarding-treeview-filter-selection-title": "Filtrer les couches",
     "Only WMTS layers are saved": "Seules les couches WMTS sont sauvegardées",
     "Open advanced filter tool": "Ouvrir l'outil de filtre avancé",
+    "open-buttonbar-menu": "Ouvrir le menu",
     "OpenStreetMap": "OpenStreetMap",
     "Operator": "Opérateur",
     "or": "ou",

package/assets/i18n/it.json

@@ -220,6 +220,8 @@
     "Freehand line": "Linea a mano libera",
     "Freehand polygon": "Poligono a mano libera",
     "freeze-column": "Blocca colonna",
+    "fullscreen-off": "Esci dalla modalità schermo intero",
+    "fullscreen-on": "Attiva la modalità schermo intero",
     "Generate and copy code": "Genera e copia il codice",
     "Generate and copy link": "Genera e copia il link",
     "Generate CSV": "Genera CSV",
@@ -351,6 +353,7 @@
     "onboarding-treeview-filter-selection-title": "Filtra i livelli",
     "Only WMTS layers are saved": "Solo i layer WMTS vengono salvati",
     "Open advanced filter tool": "Apri lo strumento di filtro avanzato",
+    "open-buttonbar-menu": "Apri menu",
     "OpenStreetMap": "OpenStreetMap",
     "Operator": "Operatore",
     "or": "oppure",

package/assets/icons/fullscreen-exit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" viewBox="0 0 24 24"><title>ic_fluent_full_screen_zoom_24_regular</title><path fill="#212121" fill-rule="nonzero" d="M16.25 15.5h4a.75.75 0 0 1 .102 1.493L20.25 17H17v3.25a.75.75 0 0 1-1.493.102l-.007-.102v-4a.75.75 0 0 1 .648-.743zh4zm-12.5 0h4a.75.75 0 0 1 .743.648l.007.102v4a.75.75 0 0 1-1.493.102L7 20.25V17H3.75a.75.75 0 0 1-.102-1.493zh4zm4-12.5a.75.75 0 0 1 .743.648l.007.102v4a.75.75 0 0 1-.648.743L7.75 8.5h-4a.75.75 0 0 1-.102-1.493L3.75 7H7V3.75A.75.75 0 0 1 7.75 3m8.5 0a.75.75 0 0 1 .743.648L17 3.75V7h3.25a.75.75 0 0 1 .102 1.493l-.102.007h-4a.75.75 0 0 1-.743-.648L15.5 7.75v-4a.75.75 0 0 1 .75-.75"/></svg>

package/assets/icons/fullscreen.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" viewBox="0 0 24 24"><title>ic_fluent_full_screen_zoom_24_regular</title><path fill="none" fill-rule="evenodd" d="M3 20.25v-4a.75.75 0 0 1 1.493-.102l.007.102v3.25h3.25a.75.75 0 0 1 .102 1.493L7.75 21h-4a.75.75 0 0 1-.743-.648zv-4zm0-12.5v-4a.75.75 0 0 1 .648-.743L3.75 3h4a.75.75 0 0 1 .102 1.493L7.75 4.5H4.5v3.25a.75.75 0 0 1-1.493.102zv-4zm12.5-4a.75.75 0 0 1 .648-.743L16.25 3h4a.75.75 0 0 1 .743.648L21 3.75v4a.75.75 0 0 1-1.493.102L19.5 7.75V4.5h-3.25a.75.75 0 0 1-.75-.75m0 16.5a.75.75 0 0 1 .648-.743l.102-.007h3.25v-3.25a.75.75 0 0 1 1.493-.102l.007.102v4a.75.75 0 0 1-.648.743L20.25 21h-4a.75.75 0 0 1-.75-.75" style="fill:#212121;fill-rule:nonzero"/></svg>

package/base/GirafeHTMLElement.d.ts

@@ -12,6 +12,8 @@ declare abstract class GirafeHTMLElement extends HTMLElement {
     private timeoutId?;
     protected rendered: boolean;
     protected feedbackTemplateHtml?: string;
+    private fullscreenModeActive;
+    private displayBeforeFullscreen;
     private readonly callbacks;
     private readonly unsafeCache;
     private _context?;
@@ -90,6 +92,25 @@ declare abstract class GirafeHTMLElement extends HTMLElement {
      * Show the component (display: block).
      */
     protected show(): void;
+    /**
+     * Whether this Component must stay visible when the App is in Fullscreen Mode.
+     * Controlled by the "fullscreen" attribute (default: false).
+     */
+    protected get isFullscreenComponent(): boolean;
+    /**
+     * Apply a display value to the Host Element, taking the Fullscreen Mode into account.
+     * In Fullscreen Mode, components that are not flagged with fullscreen="true" are forced
+     * hidden, but their intended display value is remembered so it can be restored when
+     * leaving Fullscreen Mode.
+     */
+    private setHostDisplay;
+    /**
+     * Handler for Changes of <code>interface.fullscreenMode</code>.
+     * Components flagged with fullscreen="true" are always visible and left untouched.
+     * Other Components are hidden when entering Fullscreen Mode and restored to their
+     * previous visibility when leaving it.
+     */
+    private onFullscreenModeChanged;
     /**
      * Subscribes with <callback> to the state changes made on <path>
      */

package/base/GirafeHTMLElement.js

@@ -9,6 +9,8 @@ class GirafeHTMLElement extends HTMLElement {
     timeoutId;
     rendered = false;
     feedbackTemplateHtml;
+    fullscreenModeActive = false;
+    displayBeforeFullscreen = null;
     callbacks = [];
     unsafeCache = new Map();
     _context;
@@ -198,7 +200,7 @@ class GirafeHTMLElement extends HTMLElement {
      * Hide the component (display: none).
      */
     hide() {
-        this.style.display = 'none';
+        this.setHostDisplay('none');
         this.unregisterInteractionListeners();
     }
     /**
@@ -206,7 +208,54 @@ class GirafeHTMLElement extends HTMLElement {
      */
     show() {
         if (this.displayStyle) {
-            this.style.display = this.displayStyle;
+            this.setHostDisplay(this.displayStyle);
+        }
+    }
+    /**
+     * Whether this Component must stay visible when the App is in Fullscreen Mode.
+     * Controlled by the "fullscreen" attribute (default: false).
+     */
+    get isFullscreenComponent() {
+        return this.getAttribute('fullscreen') === 'true';
+    }
+    /**
+     * Apply a display value to the Host Element, taking the Fullscreen Mode into account.
+     * In Fullscreen Mode, components that are not flagged with fullscreen="true" are forced
+     * hidden, but their intended display value is remembered so it can be restored when
+     * leaving Fullscreen Mode.
+     */
+    setHostDisplay(display) {
+        if (this.fullscreenModeActive && !this.isFullscreenComponent) {
+            this.displayBeforeFullscreen = display;
+            this.style.display = 'none';
+        }
+        else {
+            this.style.display = display;
+        }
+    }
+    /**
+     * Handler for Changes of <code>interface.fullscreenMode</code>.
+     * Components flagged with fullscreen="true" are always visible and left untouched.
+     * Other Components are hidden when entering Fullscreen Mode and restored to their
+     * previous visibility when leaving it.
+     */
+    onFullscreenModeChanged(fullscreenMode) {
+        if (fullscreenMode === this.fullscreenModeActive) {
+            return;
+        }
+        this.fullscreenModeActive = fullscreenMode;
+        if (this.isFullscreenComponent) {
+            return;
+        }
+        if (fullscreenMode) {
+            // Entering Fullscreen Mode: remember the current visibility and hide the component.
+            this.displayBeforeFullscreen = this.style.display;
+            this.style.display = 'none';
+        }
+        else if (this.displayBeforeFullscreen !== null) {
+            // Leaving Fullscreen Mode: restore the visibility the component had before.
+            this.style.display = this.displayBeforeFullscreen;
+            this.displayBeforeFullscreen = null;
         }
     }
     subscribe(path, callback) {
@@ -230,6 +279,7 @@ class GirafeHTMLElement extends HTMLElement {
         this.context.componentManager.registerComponent(this);
         this.subscribe('language', () => this.girafeTranslate());
         this.subscribe('oauth.userInfo', () => this.userInfoChanged());
+        this.subscribe('interface.fullscreenMode', (_oldValue, newValue) => this.onFullscreenModeChanged(newValue));
     }
     /**
      * When the component is disconnected from the DOM

package/components/map/component.d.ts

@@ -79,11 +79,24 @@ export default class MapComponent extends GirafeHTMLElement {
     focusFeature: FocusFeature;
     mapTargetResizeObserver: ResizeObserver;
     constructor();
+    /**
+     * The Map needs to be displayed in Fullscreen Mode.
+     */
+    protected get isFullscreenComponent(): boolean;
     resetAllSwipedLayers(layers: BaseLayer[]): void;
     registerEvents(): void;
     locateUser(): void;
     getCurrentLocation(): void;
     disableLocateUser: () => void;
+    /**
+     * Toggles the application fullscreen mode.
+     * The button is displayed over the map, like the geolocation button.
+     */
+    toggleFullscreen(): void;
+    /**
+     * Shows the matching fullscreen button (enter or exit) depending on the current mode.
+     */
+    private updateFullscreenButton;
     readonly updateGeolocation: (position: GeolocationPosition) => void;
     render(): void;
     listenOpenLayersEvents(): void;

package/components/map/component.js

@@ -53,10 +53,10 @@ export default class MapComponent extends GirafeHTMLElement {
 </style><style>
 .hidden{display:none!important}.gg-rotate90{transform:rotate(90deg)}.gg-rotate180{transform:rotate(180deg)}.gg-rotate270{transform:rotate(270deg)}img{filter:var(--svg-filter)}img.legend-image{filter:var(--svg-map-filter);background:var(--svg-legend-bkg)}div{scrollbar-width:thin}a,a:visited{color:var(--link-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin-wait{0%{transform:rotate(0)}7%{transform:rotate(360deg)}to{transform:rotate(360deg)}}.gg-spin{animation-name:spin;animation-duration:2s;animation-timing-function:linear;animation-iteration-count:infinite}.gg-spin-wait{animation-name:spin-wait;animation-duration:10s;animation-timing-function:linear;animation-iteration-count:infinite}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#999}button,input,select,textarea{font:inherit}.gg-button,.gg-select,.gg-input,.gg-textarea{background-color:var(--bkg-color);color:var(--text-color);border:var(--app-standard-border);box-sizing:border-box;cursor:pointer;border-radius:3px;outline:0;margin:0;padding:0 0 0 .5rem;display:inline-block}.gg-label{background-color:var(--bkg-color);color:var(--text-color);border:none;align-items:center;margin:0;padding:0;display:flex}.gg-button,.gg-select,.gg-input,.gg-label{min-height:calc(var(--app-standard-height) / 1.5)}.gg-textarea{max-height:initial;resize:vertical;height:6rem;padding:.5rem;line-height:1.3rem}.gg-input{cursor:text}.gg-checkbox{accent-color:var(--text-color);width:1.2rem}.gg-range{accent-color:var(--text-color)}.gg-button{padding:0 .5rem}.gg-button.active{border:solid 1px var(--text-color-grad1);background-color:var(--bkg-color-grad2)}.gg-button:disabled{background-color:var(--bkg-color-grad1);color:var(--text-color-grad2);cursor:not-allowed;border:none}.gg-button:disabled img{filter:opacity(.6)}.gg-input:disabled,.gg-select:disabled,.gg-textarea:disabled{background-color:var(--bkg-color-grad1);color:var(--text-color-grad2);cursor:not-allowed}.gg-button>img{vertical-align:middle}.gg-icon-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-icon{justify-content:center;align-items:center;display:flex}.gg-big,.gg-big-withtext{min-width:var(--app-standard-height);min-height:var(--app-standard-height);max-height:var(--app-standard-height)}.gg-big img,.gg-big-withtext img{width:calc(var(--app-standard-height) - 1.5rem);margin:0}.gg-big-withtext span{font-variant:small-caps;padding:0 1rem;font-size:.9rem}.gg-medium,.gg-medium-withtext{min-width:calc(var(--app-standard-height) / 1.2);min-height:calc(var(--app-standard-height) / 1.2);max-height:calc(var(--app-standard-height) / 1.2);flex-direction:row}.gg-medium img{width:calc(var(--app-standard-height) / 2.4);margin:0}.gg-medium-withtext img{width:calc(var(--app-standard-height) / 2.4);margin-left:.5rem}.gg-medium-withtext span{padding:0 1rem 0 .5rem;font-size:.9rem}.gg-small,.gg-small-withtext{min-width:calc(var(--app-standard-height) / 2);min-height:calc(var(--app-standard-height) / 2);max-height:calc(var(--app-standard-height) / 2);flex-direction:row}.gg-small img{width:calc(var(--app-standard-height) / 3);margin:0}.gg-small-withtext img{width:calc(var(--app-standard-height) / 3);margin-left:.5rem}.gg-small-withtext span{padding:0 .5rem 0 .3rem;font-size:.9rem}.gg-button:hover:not(:disabled),.gg-select:hover:not(:disabled),.gg-input:hover:not(:disabled),.gg-textarea:hover:not(:disabled),.gg-icon-button:hover:not(:disabled){background-color:var(--bkg-color-grad1)}.gg-opacity{opacity:.5}.gg-opacity:hover{opacity:1;background-color:#0000}.gg-tabs{cursor:pointer;grid-auto-flow:column;padding-bottom:1rem;font-size:1rem;display:grid}.gg-tab{border:none;border-bottom:var(--app-standard-border);cursor:pointer;color:var(--text-color);background:0 0;padding:.5rem}.gg-tab.active{border-bottom:solid 1px var(--text-color)}.girafe-button-big,.girafe-button-large,.girafe-button-small,.girafe-button-tiny{color:var(--text-color);background-color:#0000;border:none;flex-direction:column;display:flex}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color-grad1);cursor:pointer}.girafe-button-big.dark,.girafe-button-large.dark,.girafe-button-small.dark,.girafe-button-tiny.dark{background-color:var(--bkg-color);filter:invert()}.girafe-button-big{width:var(--app-standard-height);height:var(--app-standard-height);align-items:center;padding:1rem}.girafe-button-big img{overflow:hidden}.girafe-button-large{flex-direction:row}.girafe-button-large img{height:2rem;margin:.3rem}.girafe-button-large span{height:2rem;margin:.3rem;line-height:2rem}.girafe-button-small{min-width:calc(var(--app-standard-height) / 2);height:calc(var(--app-standard-height) / 2);align-items:center;padding:.5rem}.girafe-button-small img{overflow:hidden}.girafe-button-small span{text-align:left;text-overflow:ellipsis;width:100%;overflow:hidden}.girafe-button-tiny{align-items:center;width:1rem;height:1rem;padding:0}.girafe-button-tiny img{overflow:hidden}.girafe-onboarding-theme{background-color:var(--bkg-color)!important;color:var(--text-color)!important}.girafe-onboarding-theme button{background-color:var(--bkg-color)!important;color:var(--text-color)!important;text-shadow:none!important}.girafe-onboarding-theme button.driver-popover-close-btn{z-index:10000}
 </style><style>
-#container,#ol-map{background-color:var(--bkg-color);width:100%;height:100%;position:relative}#ol-map.darkmap canvas{filter:invert()hue-rotate(180deg)}.hidden{display:none}.center{text-align:center;margin:10px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.loading span{color:var(--text-color);margin-top:1rem;font-weight:600;display:block}.loading span.quote{font-style:italic;font-weight:300}#cs-map{background-color:var(--bkg-color);border-left:3px solid #444;height:100%;display:none;position:absolute;overflow:hidden}.ol-control{background-color:#0000;border:none;box-shadow:0 1px 4px #0000004d;right:2rem!important;left:unset!important}.ol-zoom{top:2rem!important}.mobile-map .ol-zoom{display:none!important}.ol-rotate{top:9.3rem!important}.ol-location{top:7rem!important}.img-location,.img-disable-location{width:55%;height:auto}.ol-zoom-in,.ol-zoom-out,.btn-location,.btn-disable-location,.ol-rotate-reset{cursor:pointer;background-color:var(--bkg-color)!important;width:2rem!important;height:2rem!important;color:var(--text-color)!important;font-size:1.2rem!important}.ol-scale-line{bottom:.5rem!important;right:1rem!important;left:unset!important}#swiper{width:100%;height:0;margin:0;display:none;position:absolute;top:50%}input[type=range]{-webkit-appearance:none;width:100%}input[type=range]::-webkit-slider-runnable-track{height:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--bkg-color);cursor:ew-resize;border:2px solid #444;width:6px;height:0;margin-top:-1000px;padding-top:1000px;padding-bottom:1000px}input[type=range]::-moz-range-thumb{background:var(--bkg-color);cursor:ew-resize;border:2px solid #444;width:3px;height:0;padding-top:1000px;padding-bottom:1000px}.close-swiper{--button-size:2rem;transform:translateX(calc(-1 * var(--button-size) / 2));width:var(--button-size);height:var(--button-size);background-color:var(--bkg-color);color:var(--text-color);cursor:pointer;border-width:1px;border-radius:4px;display:none;position:absolute;top:0}.close-swiper:hover,.close-swiper:focus{outline:1px solid var(--text-color);color:var(--text-color-grad1)}.ol-viewport .tooltip{color:#fff;opacity:.7;white-space:nowrap;background:#00000080;border-radius:0;padding:.32rem .62rem;position:relative}@media screen and (hover:none){.ol-zoom,.ol-rotate,.ol-location{display:none!important}}.contextmenu{background-color:var(--bkg-color);color:var(--text-color);border:1px solid #ccc;box-shadow:1px 3px 4px #0006;& .hidden{display:none}& .menu-entry{cursor:pointer;padding:10px}& .menu-entry:hover{background-color:var(--bkg-color-grad1)}& .menu-entry[aria-disabled=true]{pointer-events:none;color:var(--text-color-grad1)}}
+#container,#ol-map{background-color:var(--bkg-color);width:100%;height:100%;position:relative}#ol-map.darkmap canvas{filter:invert()hue-rotate(180deg)}.hidden{display:none}.center{text-align:center;margin:10px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.loading span{color:var(--text-color);margin-top:1rem;font-weight:600;display:block}.loading span.quote{font-style:italic;font-weight:300}#cs-map{background-color:var(--bkg-color);border-left:3px solid #444;height:100%;display:none;position:absolute;overflow:hidden}.ol-control{background-color:#0000;border:none;box-shadow:0 1px 4px #0000004d;right:2rem!important;left:unset!important}.ol-zoom{top:2rem!important}.mobile-map .ol-zoom{display:none!important}.ol-rotate{top:11.6rem!important}.ol-fullscreen{top:7rem!important}.ol-location{top:9.3rem!important}.img-location,.img-disable-location,.img-fullscreen{width:55%;height:auto}.ol-zoom-in,.ol-zoom-out,.btn-location,.btn-disable-location,.btn-fullscreen,.btn-exit-fullscreen,.ol-rotate-reset{cursor:pointer;background-color:var(--bkg-color)!important;width:2rem!important;height:2rem!important;color:var(--text-color)!important;font-size:1.2rem!important}.ol-scale-line{bottom:.5rem!important;right:1rem!important;left:unset!important}#swiper{width:100%;height:0;margin:0;display:none;position:absolute;top:50%}input[type=range]{-webkit-appearance:none;width:100%}input[type=range]::-webkit-slider-runnable-track{height:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--bkg-color);cursor:ew-resize;border:2px solid #444;width:6px;height:0;margin-top:-1000px;padding-top:1000px;padding-bottom:1000px}input[type=range]::-moz-range-thumb{background:var(--bkg-color);cursor:ew-resize;border:2px solid #444;width:3px;height:0;padding-top:1000px;padding-bottom:1000px}.close-swiper{--button-size:2rem;transform:translateX(calc(-1 * var(--button-size) / 2));width:var(--button-size);height:var(--button-size);background-color:var(--bkg-color);color:var(--text-color);cursor:pointer;border-width:1px;border-radius:4px;display:none;position:absolute;top:0}.close-swiper:hover,.close-swiper:focus{outline:1px solid var(--text-color);color:var(--text-color-grad1)}.ol-viewport .tooltip{color:#fff;opacity:.7;white-space:nowrap;background:#00000080;border-radius:0;padding:.32rem .62rem;position:relative}@media screen and (hover:none){.ol-zoom,.ol-rotate,.ol-location,.ol-fullscreen{display:none!important}}.contextmenu{background-color:var(--bkg-color);color:var(--text-color);border:1px solid #ccc;box-shadow:1px 3px 4px #0006;& .hidden{display:none}& .menu-entry{cursor:pointer;padding:10px}& .menu-entry:hover{background-color:var(--bkg-color-grad1)}& .menu-entry[aria-disabled=true]{pointer-events:none;color:var(--text-color-grad1)}}
 </style>
 <style>${this.customStyle}</style>
-<div id="container"><div id="ol-map" class="${this.onMobile ? 'mobile-map' : ''}"></div><div class="${this.onMobile ? 'hidden' : 'ol-location ol-unselectable ol-control'}"><button onclick="${() => this.locateUser()}" class="btn-location" tip="Locate user"><img class="img-location" alt="location-icon" src="icons/adjust.svg"></button> <button id="disable-location" onclick="${() => this.disableLocateUser()}" tip="Disable locate user" class="btn-disable-location hidden"><img class="img-disable-location" alt="disable-location-icon" src="icons/adjust-disable.svg"></button></div><div id="cs-map"><div class="${this.loading ? 'loading center' : 'loading hidden'}"><img alt="loading-icon" src="icons/loading.svg" class="gg-spin"> <span i18n="Loading cesium...">Loading cesium...</span> <span class="quote" i18n="cesium-loading-quote">Please be patient, like a giraffe reaching for the tastiest leaves.</span></div></div><input id="swiper" type="range" min="0" max="1000" step="1"> <button tip="Hide Swiper" id="close-swiper" class="close-swiper">×</button></div>
+<div id="container"><div id="ol-map" class="${this.onMobile ? 'mobile-map' : ''}"></div><div class="${this.onMobile ? 'hidden' : 'ol-fullscreen ol-unselectable ol-control'}"><button id="fullscreen-enter-button" onclick="${() => this.toggleFullscreen()}" tip="fullscreen-on" class="btn-fullscreen"><img class="img-fullscreen" alt="fullscreen-icon" src="icons/fullscreen.svg"></button> <button id="fullscreen-exit-button" onclick="${() => this.toggleFullscreen()}" tip="fullscreen-off" class="btn-exit-fullscreen hidden"><img class="img-fullscreen" alt="fullscreen-exit-icon" src="icons/fullscreen-exit.svg"></button></div><div class="${this.onMobile ? 'hidden' : 'ol-location ol-unselectable ol-control'}"><button onclick="${() => this.locateUser()}" class="btn-location" tip="Locate user"><img class="img-location" alt="location-icon" src="icons/adjust.svg"></button> <button id="disable-location" onclick="${() => this.disableLocateUser()}" tip="Disable locate user" class="btn-disable-location hidden"><img class="img-disable-location" alt="disable-location-icon" src="icons/adjust-disable.svg"></button></div><div id="cs-map"><div class="${this.loading ? 'loading center' : 'loading hidden'}"><img alt="loading-icon" src="icons/loading.svg" class="gg-spin"> <span i18n="Loading cesium...">Loading cesium...</span> <span class="quote" i18n="cesium-loading-quote">Please be patient, like a giraffe reaching for the tastiest leaves.</span></div></div><input id="swiper" type="range" min="0" max="1000" step="1"> <button tip="Hide Swiper" id="close-swiper" class="close-swiper">×</button></div>
 ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     };
     olMap;
@@ -127,6 +127,12 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     constructor() {
         super('map');
     }
+    /**
+     * The Map needs to be displayed in Fullscreen Mode.
+     */
+    get isFullscreenComponent() {
+        return true;
+    }
     resetAllSwipedLayers(layers) {
         for (const layer of layers) {
             if (layer instanceof Layer) {
@@ -150,6 +156,7 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         this.subscribe(/activeBasemaps\.\d\.opacity/, (_oldOpacity, _newOpacity, basemap) => this.onChangeBasemapOpacity(basemap));
         this.subscribe('projection', (oldProjection, newProjection) => this.onChangeProjection(oldProjection, newProjection));
         this.subscribe('interface.darkMapMode', () => this.onChangeDarkMode());
+        this.subscribe('interface.fullscreenMode', (_oldValue, newValue) => this.updateFullscreenButton(newValue));
         this.subscribe('selection.selectionParameters', (_, newParams) => this.onSelectFeatures(newParams));
         this.subscribe('selection.selectedFeatures', (_oldFeatures, newFeatures) => this.onFeaturesSelected(newFeatures));
         this.subscribe('selection.selectedFeaturesType', (_oldFeaturesType, newFeaturesType) => this.onFeaturesTypeChanged(newFeaturesType));
@@ -245,6 +252,20 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         this.geolocationSource.clear();
         this.shadow.getElementById('disable-location')?.classList.add('hidden');
     };
+    /**
+     * Toggles the application fullscreen mode.
+     * The button is displayed over the map, like the geolocation button.
+     */
+    toggleFullscreen() {
+        this.state.interface.fullscreenMode = !this.state.interface.fullscreenMode;
+    }
+    /**
+     * Shows the matching fullscreen button (enter or exit) depending on the current mode.
+     */
+    updateFullscreenButton(fullscreen) {
+        this.shadow.getElementById('fullscreen-enter-button')?.classList.toggle('hidden', fullscreen);
+        this.shadow.getElementById('fullscreen-exit-button')?.classList.toggle('hidden', !fullscreen);
+    }
     updateGeolocation = (position) => {
         const coords = position.coords;
         const longitude = coords.longitude;

package/components/map/style.css

@@ -61,15 +61,23 @@
 }
 
 .ol-rotate {
-  top: 9.3rem !important;
+  top: 11.6rem !important;
 }
 
-.ol-location {
+/* Inserted between the zoom controls (top: 2rem) and the geolocation button. */
+.ol-fullscreen {
   top: 7rem !important;
 }
 
+/* Shifted down to leave room for the fullscreen button (top: 7rem),
+   which is inserted between the zoom controls and the geolocation button. */
+.ol-location {
+  top: 9.3rem !important;
+}
+
 .img-location,
-.img-disable-location {
+.img-disable-location,
+.img-fullscreen {
   width: 55%;
   height: auto;
 }
@@ -78,6 +86,8 @@
 .ol-zoom-out,
 .btn-location,
 .btn-disable-location,
+.btn-fullscreen,
+.btn-exit-fullscreen,
 .ol-rotate-reset {
   width: 2rem !important;
   height: 2rem !important;
@@ -169,7 +179,8 @@ input[type='range']::-moz-range-thumb {
 @media screen and (hover: none) {
   .ol-zoom,
   .ol-rotate,
-  .ol-location {
+  .ol-location,
+  .ol-fullscreen {
     display: none !important;
   }
 }

package/components/selectiongrid/component.d.ts

@@ -19,6 +19,10 @@ declare class SelectionGridComponent extends GirafeResizableElement {
     currentTabId: string;
     resultsSelected: boolean;
     constructor();
+    /**
+     * We want the Results of a Selection/Query to be shown either in the Grid. So we ignore the Fullscree Mode
+     */
+    protected get isFullscreenComponent(): boolean;
     protected connectedCallback(): void;
     /**
      * Render the component regarding its visibility.

package/components/selectiongrid/component.js

@@ -37,6 +37,12 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     constructor() {
         super('selectiongrid');
     }
+    /**
+     * We want the Results of a Selection/Query to be shown either in the Grid. So we ignore the Fullscree Mode
+     */
+    get isFullscreenComponent() {
+        return true;
+    }
     connectedCallback() {
         super.connectedCallback();
         this.csvManager = new CsvManager(this.context);

package/components/selectionwindow/component.d.ts

@@ -39,6 +39,10 @@ declare class SelectionWindowComponent extends GirafeDraggableElement {
     private columnAliasHelper;
     showDirectionsProviderDropdown: boolean;
     constructor();
+    /**
+     * We want the Results of a Selection/Query to be shown either in the Window. So we ignore the Fullscree Mode
+     */
+    protected get isFullscreenComponent(): boolean;
     protected connectedCallback(): void;
     /**
      * Render the component regarding its visibility.

package/components/selectionwindow/component.js

@@ -50,6 +50,12 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
     constructor() {
         super('selectionwindow');
     }
+    /**
+     * We want the Results of a Selection/Query to be shown either in the Window. So we ignore the Fullscree Mode
+     */
+    get isFullscreenComponent() {
+        return true;
+    }
     connectedCallback() {
         super.connectedCallback();
         this.csvManager = new CsvManager(this.context);

package/package.json

@@ -5,7 +5,7 @@
     "name": "GeoGirafe PSC",
     "url": "https://doc.geogirafe.org"
   },
-  "version": "1.2.0-dev.2646908874",
+  "version": "1.2.0-dev.2657510436",
   "type": "module",
   "engines": {
     "node": ">=20.19.0"

package/styles/index.css

@@ -14,14 +14,14 @@ header {
   position: fixed;
   top: 0;
   left: 0;
-  right: 0;
+  right: calc(var(--app-standard-height) - 0px);
   display: flex;
   flex-direction: row;
   align-items: center;
   border-bottom: var(--app-standard-border);
   background: var(--bkg-color);
   height: var(--app-standard-height);
-  z-index: 100;
+  z-index: 101;
   justify-content: space-between;
 }
 
@@ -50,19 +50,82 @@ girafe-search {
   display: flex;
   flex-direction: column;
   position: fixed;
-  top: var(--app-standard-height);
+  top: 0;
   right: 0;
-  height: calc(100% - var(--app-standard-height));
+  height: 100%;
   width: var(--app-standard-height);
   background-color: var(--bkg-color);
   border-left: var(--app-standard-border);
-  z-index: 1000;
+  z-index: 100;
 }
 
 #buttonbar .filler {
   flex-grow: 1;
 }
 
+#buttonbar-toggle {
+  display: none;
+}
+
+#buttonbar-grid {
+  display: contents;
+}
+
+/* Small screens */
+@media (max-height: 700px) {
+  #buttonbar {
+    position: absolute;
+    bottom: 0.75rem;
+    z-index: 20;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 0.5rem;
+  }
+
+  #buttonbar-toggle {
+    display: inline-flex;
+  }
+
+  #buttonbar-grid {
+    display: none;
+  }
+
+  #buttonbar.open #buttonbar-grid {
+    display: grid;
+    grid-template-columns: repeat(2, auto);
+    gap: 0.5rem;
+    padding: 0.5rem;
+    margin-right: 0.75rem;
+    border-radius: 0.5rem;
+    background-color: var(--bkg-color);
+    box-shadow: var(--bx-shdw);
+  }
+
+  #buttonbar.open .filler {
+    display: none;
+  }
+}
+
+/* Slightly smaller screens: use 3 columns */
+@media (max-height: 500px) {
+  #buttonbar.open #buttonbar-grid {
+    grid-template-columns: repeat(3, auto);
+  }
+}
+
+/* Full Screen Mode: Hide most of the Apps Components */
+girafe-app.fullscreen-mode header,
+girafe-app.fullscreen-mode footer,
+girafe-app.fullscreen-mode #buttonbar {
+  display: none;
+}
+
+girafe-app.fullscreen-mode #content {
+  top: 0;
+  right: 0;
+}
+
 #content {
   position: absolute;
   display: flex;

package/templates/index.html

@@ -125,7 +125,6 @@
         <girafe-news-button plugin="config:news"></girafe-news-button>
         <girafe-oauth></girafe-oauth>
         <girafe-add-bookmark></girafe-add-bookmark>
-        <girafe-video-record></girafe-video-record>
       </header>
 
       <girafe-help></girafe-help>
@@ -186,134 +185,155 @@
 
       <div id="buttonbar">
         <button
-          tip="drawing-panel"
-          slot="menu-content"
+          id="buttonbar-toggle"
           class="gg-icon-button gg-big"
-          onclick="
-            document.geogirafe.state.interface.drawingPanelVisible =
-              !document.geogirafe.state.interface.drawingPanelVisible
-          ">
-          <img alt="draw-icon" src="icons/draw.svg" />
-        </button>
-        <button
-          tip="selection-tool-panel"
-          slot="menu-content"
-          class="gg-icon-button gg-big"
-          onclick="
-            document.geogirafe.state.interface.selectionToolPanelVisible =
-              !document.geogirafe.state.interface.selectionToolPanelVisible
-          ">
-          <img alt="draw-icon" src="icons/select.svg" />
-        </button>
-        <button
-          tip="external-entry"
-          slot="menu-content"
-          class="gg-icon-button gg-big"
-          onclick="
-            document.geogirafe.state.interface.extLayerPanelVisible =
-              !document.geogirafe.state.interface.extLayerPanelVisible
-          ">
-          <img alt="ext-icon" src="icons/external-entry.svg" />
-        </button>
-        <button
-          tip="print-panel"
-          slot="menu-content"
-          class="gg-icon-button gg-big"
-          plugin="config:print"
-          onclick="
-            document.geogirafe.state.interface.printPanelVisible = !document.geogirafe.state.interface.printPanelVisible
-          ">
-          <img alt="print-icon" src="icons/print.svg" />
-        </button>
-        <button
-          tip="lidar-panel"
-          slot="menu-content"
-          class="gg-icon-button gg-big"
-          plugin="config:lidar"
-          onclick="
-            document.geogirafe.state.interface.crossSectionPanelVisible =
-              !document.geogirafe.state.interface.crossSectionPanelVisible
-          ">
-          <img alt="cross-section-icon" src="icons/cross-section.svg" />
-        </button>
-        <button
-          tip="advanced-filter-panel"
-          slot="menu-content"
-          class="gg-icon-button gg-big"
-          onclick="
-            document.geogirafe.state.interface.advancedFilterPanelVisible =
-              !document.geogirafe.state.interface.advancedFilterPanelVisible
-          ">
-          <img alt="advanced-filter-icon" src="icons/advanced-filter.svg" />
-        </button>
-        <button
-          tip="edit-panel"
-          slot="menu-content"
-          class="gg-icon-button gg-big"
-          onclick="
-            document.geogirafe.state.interface.editPanelVisible = !document.geogirafe.state.interface.editPanelVisible
-          ">
-          <img alt="edit-icon" src="icons/edit.svg" />
-        </button>
-        <button
-          tip="share-panel"
-          slot="menu-content"
-          class="gg-icon-button gg-big"
-          plugin="config:share"
-          onclick="
-            document.geogirafe.state.interface.sharePanelVisible = !document.geogirafe.state.interface.sharePanelVisible
-          ">
-          <img alt="share-icon" src="icons/share.svg" />
-        </button>
-        <button
-          tip="layout-panel"
-          class="gg-icon-button gg-big"
-          plugin="config:map3d"
-          onclick="
-            document.geogirafe.state.interface.layoutPanelVisible =
-              !document.geogirafe.state.interface.layoutPanelVisible
-          ">
-          <img alt="layout-icon" src="icons/layout.svg" />
-        </button>
-        <button
-          tip="contact-panel"
-          class="gg-icon-button gg-big"
-          plugin="config:contact"
-          onclick="
-            document.geogirafe.state.interface.contactPanelVisible =
-              !document.geogirafe.state.interface.contactPanelVisible
-          ">
-          <img alt="layout-icon" src="icons/mail.svg" />
-        </button>
-        <button tip="infra3d" class="gg-icon-button gg-big" plugin="plugin_infra3d" onclick="alert('infra3d')">
-          <img alt="help-icon" src="icons/infra3d.svg" />
+          type="button"
+          tip="open-buttonbar-menu"
+          aria-expanded="false"
+          onclick="this.parentNode.classList.toggle('open')">
+          <img alt="" src="icons/menu.svg" />
         </button>
 
-        <div class="filler"></div>
+        <div
+          id="buttonbar-grid"
+          role="menubar"
+          tabindex="0"
+          onclick="this.parentNode.classList.toggle('open')"
+          onkeyup="this.parentNode.classList.toggle('open')">
+          <girafe-video-record></girafe-video-record>
+          <button
+            tip="drawing-panel"
+            slot="menu-content"
+            class="gg-icon-button gg-big"
+            onclick="
+              document.geogirafe.state.interface.drawingPanelVisible =
+                !document.geogirafe.state.interface.drawingPanelVisible
+            ">
+            <img alt="draw-icon" src="icons/draw.svg" />
+          </button>
+          <button
+            tip="selection-tool-panel"
+            slot="menu-content"
+            class="gg-icon-button gg-big"
+            onclick="
+              document.geogirafe.state.interface.selectionToolPanelVisible =
+                !document.geogirafe.state.interface.selectionToolPanelVisible
+            ">
+            <img alt="draw-icon" src="icons/select.svg" />
+          </button>
+          <button
+            tip="external-entry"
+            slot="menu-content"
+            class="gg-icon-button gg-big"
+            onclick="
+              document.geogirafe.state.interface.extLayerPanelVisible =
+                !document.geogirafe.state.interface.extLayerPanelVisible
+            ">
+            <img alt="ext-icon" src="icons/external-entry.svg" />
+          </button>
+          <button
+            tip="print-panel"
+            slot="menu-content"
+            class="gg-icon-button gg-big"
+            plugin="config:print"
+            onclick="
+              document.geogirafe.state.interface.printPanelVisible =
+                !document.geogirafe.state.interface.printPanelVisible
+            ">
+            <img alt="print-icon" src="icons/print.svg" />
+          </button>
+          <button
+            tip="lidar-panel"
+            slot="menu-content"
+            class="gg-icon-button gg-big"
+            plugin="config:lidar"
+            onclick="
+              document.geogirafe.state.interface.crossSectionPanelVisible =
+                !document.geogirafe.state.interface.crossSectionPanelVisible
+            ">
+            <img alt="cross-section-icon" src="icons/cross-section.svg" />
+          </button>
+          <button
+            tip="advanced-filter-panel"
+            slot="menu-content"
+            class="gg-icon-button gg-big"
+            onclick="
+              document.geogirafe.state.interface.advancedFilterPanelVisible =
+                !document.geogirafe.state.interface.advancedFilterPanelVisible
+            ">
+            <img alt="advanced-filter-icon" src="icons/advanced-filter.svg" />
+          </button>
+          <button
+            tip="edit-panel"
+            slot="menu-content"
+            class="gg-icon-button gg-big"
+            onclick="
+              document.geogirafe.state.interface.editPanelVisible = !document.geogirafe.state.interface.editPanelVisible
+            ">
+            <img alt="edit-icon" src="icons/edit.svg" />
+          </button>
+          <button
+            tip="share-panel"
+            slot="menu-content"
+            class="gg-icon-button gg-big"
+            plugin="config:share"
+            onclick="
+              document.geogirafe.state.interface.sharePanelVisible =
+                !document.geogirafe.state.interface.sharePanelVisible
+            ">
+            <img alt="share-icon" src="icons/share.svg" />
+          </button>
+          <button
+            tip="layout-panel"
+            class="gg-icon-button gg-big"
+            plugin="config:map3d"
+            onclick="
+              document.geogirafe.state.interface.layoutPanelVisible =
+                !document.geogirafe.state.interface.layoutPanelVisible
+            ">
+            <img alt="layout-icon" src="icons/layout.svg" />
+          </button>
+          <button
+            tip="contact-panel"
+            class="gg-icon-button gg-big"
+            plugin="config:contact"
+            onclick="
+              document.geogirafe.state.interface.contactPanelVisible =
+                !document.geogirafe.state.interface.contactPanelVisible
+            ">
+            <img alt="layout-icon" src="icons/mail.svg" />
+          </button>
+          <button tip="infra3d" class="gg-icon-button gg-big" plugin="plugin_infra3d" onclick="alert('infra3d')">
+            <img alt="help-icon" src="icons/infra3d.svg" />
+          </button>
 
-        <button
-          tip="help"
-          class="gg-icon-button gg-big"
-          onclick="document.geogirafe.state.interface.helpVisible = true">
-          <img alt="help-icon" src="icons/help.svg" />
-        </button>
-        <button
-          tip="about-panel"
-          class="gg-icon-button gg-big"
-          onclick="
-            document.geogirafe.state.interface.aboutPanelVisible = !document.geogirafe.state.interface.aboutPanelVisible
-          ">
-          <img alt="info-icon" src="icons/info.svg" />
-        </button>
-        <button
-          tip="user-preferences-panel"
-          class="gg-icon-button gg-big"
-          onclick="
-            document.geogirafe.state.interface.userPreferencesPanelVisible =
-              !document.geogirafe.state.interface.userPreferencesPanelVisible
-          ">
-          <img alt="user-preferences-icon" src="icons/config.svg" />
-        </button>
+          <div class="filler"></div>
+
+          <button
+            tip="help"
+            class="gg-icon-button gg-big"
+            onclick="document.geogirafe.state.interface.helpVisible = true">
+            <img alt="help-icon" src="icons/help.svg" />
+          </button>
+          <button
+            tip="about-panel"
+            class="gg-icon-button gg-big"
+            onclick="
+              document.geogirafe.state.interface.aboutPanelVisible =
+                !document.geogirafe.state.interface.aboutPanelVisible
+            ">
+            <img alt="info-icon" src="icons/info.svg" />
+          </button>
+          <button
+            tip="user-preferences-panel"
+            class="gg-icon-button gg-big"
+            onclick="
+              document.geogirafe.state.interface.userPreferencesPanelVisible =
+                !document.geogirafe.state.interface.userPreferencesPanelVisible
+            ">
+            <img alt="user-preferences-icon" src="icons/config.svg" />
+          </button>
+        </div>
       </div>
     </girafe-app>
   </body>

package/templates/public/about.json

@@ -1 +1 @@
-{"version":"1.2.0-dev.2646908874", "build":"2646908874", "date":"02/07/2026"}
+{"version":"1.2.0-dev.2657510436", "build":"2657510436", "date":"07/07/2026"}

package/tools/app/geogirafe-component.d.ts

@@ -7,6 +7,10 @@ export default class GeoGirafeAppComponent extends GirafeHTMLElement {
     private resolveReady;
     constructor();
     getContext(): IGirafeContext;
+    /**
+     * This one needs to be displayed in Fullscreen Mode. Otherwise the User will see nothing at all ;)
+     */
+    protected get isFullscreenComponent(): boolean;
     protected connectedCallback(): void;
     getInheritedContext(): IGirafeContext;
     isReady(): Promise<void>;

package/tools/app/geogirafe-component.js

@@ -18,8 +18,19 @@ export default class GeoGirafeAppComponent extends GirafeHTMLElement {
     getContext() {
         return this.context;
     }
+    /**
+     * This one needs to be displayed in Fullscreen Mode. Otherwise the User will see nothing at all ;)
+     */
+    get isFullscreenComponent() {
+        return true;
+    }
     connectedCallback() {
         super.connectedCallback();
+        // Reflect the fullscreen mode as a class on the app root, so that plain
+        // layout elements (header, footer, button bar) can be hidden via CSS.
+        this.subscribe('interface.fullscreenMode', (_oldValue, newValue) => {
+            this.classList.toggle('fullscreen-mode', newValue);
+        });
         this.initialize().then(() => {
             // App is ready
             this.resolveReady();

package/tools/state/graphicalInterface.d.ts

@@ -21,6 +21,7 @@ export default class GraphicalInterface {
     searchComponentVisible: boolean;
     basemapComponentVisible: boolean;
     darkMapMode: boolean;
+    fullscreenMode: boolean;
     selectionToolPanelVisible: boolean;
     darkFrontendMode: boolean;
     swipeupPanelMode: SwipeupPanelMode;

package/tools/state/graphicalInterface.js

@@ -21,6 +21,7 @@ export default class GraphicalInterface {
     searchComponentVisible = true;
     basemapComponentVisible = true;
     darkMapMode = false;
+    fullscreenMode = false;
     selectionToolPanelVisible = false;
     // TODO: remove of adjust this when the component UserDataManager is monted on mobile UI
     darkFrontendMode = systemIsInDarkMode() ?? false;