@geogirafe/lib-geoportal 1.1.0-dev.2454789578 → 1.1.0-dev.2456762594

package/LICENSE

@@ -290,6 +290,17 @@ COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
+-------------------------------------------------------------------------------
+
+Thanks to the Invisible Artists
+
+Some images in this project come from the public domain.  
+Their names may have faded with time, but their impact has not.  
+Thanks a lot to them:
+
+- https://openclipart.org/artist/nadsud
+
+
 -------------------------------------------------------------------------------
 
 ===============================================================================

package/assets/i18n/de.json

@@ -181,6 +181,8 @@
     "help": "Hilfe",
     "help-basemap": "Wählen Sie aus den verfügbaren Hintergrundkarten, um Ihre Ansicht anzupassen.",
     "help-menu": "Greifen Sie auf erweiterte Werkzeuge zu, wie Drucken, Zeichnen, 3D-Ansicht und mehr.",
+    "help-onboarding": "Starten Sie die Onboarding Tour erneut.",
+    "help-onboarding-link": "Klicken Sie hier zum starten.",
     "help-search": "Suchen Sie nach einem Ort, einer Adresse, einer Karte oder Geodaten.",
     "help-themes": "Entdecken Sie die verfügbaren Themen. Nach der Auswahl werden die zugehörigen Karten automatisch geladen.",
     "help-user-preferences": "Verwalten Sie Ihre Benutzereinstellungen, einschließlich Sprache, Anzeigemodus und Kartenoptionen.",

package/assets/i18n/en.json

@@ -182,6 +182,8 @@
     "help": "Help",
     "help-basemap": "Choose from available background layers to customize your view.",
     "help-menu": "Access advanced tools such as printing, drawing, 3D view, and more.",
+    "help-onboarding": "Restart the onboarding tour.",
+    "help-onboarding-link": "Click here to start.",
     "help-search": "Search for a place, address, map, or geographic data.",
     "help-themes": "Explore available topics. Once selected, the associated maps load automatically.",
     "help-user-preferences": "Manage your user preferences, like language, display mode and map options.",

package/assets/i18n/fr.json

@@ -181,6 +181,8 @@
     "help": "Aide",
     "help-basemap": "Choisissez les fonds de carte disponibles pour personnaliser votre affichage.",
     "help-menu": "Accédez à des outils avancés comme l'impression, le dessin, la vue 3D, et plus encore.",
+    "help-onboarding": "Relancer le tour d'onboarding.",
+    "help-onboarding-link": "Cliquez ici pour commencer.",
     "help-search": "Recherchez un lieu, une adresse, une carte ou une donnée géographique.",
     "help-themes": "Explorez les thèmes disponibles. Une fois un thème sélectionné, les cartes associées s'affichent automatiquement.",
     "help-user-preferences": "Gérez vos préférences utilisateur, notamment la langue, le mode d'affichage et les options de la carte.",

package/assets/i18n/it.json

@@ -181,6 +181,8 @@
     "help": "Aiuto",
     "help-basemap": "Scegli tra gli sfondi cartografici disponibili per personalizzare la visualizzazione.",
     "help-menu": "Accedi a strumenti avanzati come stampa, disegno, vista 3D e altro ancora.",
+    "help-onboarding": "Riavvia il tour di onboarding.",
+    "help-onboarding-link": "Clicca qui per iniziare.",
     "help-search": "Cerca un luogo, un indirizzo, una mappa o un dato geografico.",
     "help-themes": "Scopri i temi disponibili. Selezionando un tema, le mappe correlate vengono caricate automaticamente.",
     "help-user-preferences": "Gestisci le preferenze utente, inclusa la lingua, la modalità di visualizzazione e le opzioni mappa.",

package/components/help/component.d.ts

@@ -7,18 +7,19 @@ declare class HelpComponent extends GirafeHTMLElement {
     themes: HTMLElement;
     search: HTMLElement;
     menu: HTMLElement;
+    onboarding: HTMLElement;
     basemap: HTMLElement;
     userPreferences: HTMLElement;
     darkFrontendMode: boolean;
-    arrowBlack: string;
-    arrowWhite: string;
     currentArrow?: string;
+    currentCircle?: string;
     constructor();
     render(): void;
     private hideHelpFor;
     registerEvents(): void;
     changeArrowColor(): void;
     toggleHelp(visible: boolean): void;
+    startOnboardingTour(): void;
     protected connectedCallback(): void;
 }
 export default HelpComponent;

package/components/help/component.js

@@ -3,7 +3,10 @@ import { html as uHtml } from 'uhtml';
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
 import ArrowBlack from './images/arrow_black.webp';
 import ArrowWhite from './images/arrow_white.webp';
+import CircledBlack from './images/circled_black.webp';
+import CircledWhite from './images/circled_white.webp';
 import { systemIsInDarkMode } from '../../tools/utils/utils.js';
+import { noop } from '../../tools/utils/async.js';
 class HelpComponent extends GirafeHTMLElement {
     templateUrl = null;
     styleUrls = null;
@@ -11,20 +14,20 @@ class HelpComponent extends GirafeHTMLElement {
         return uHtml `<style>
 *{font-family:Arial,sans-serif}.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}.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-grad2);background-color:var(--text-color-grad2);color:var(--bkg-color)}.gg-button:disabled{color:gray;cursor:not-allowed;background-color:#d3d3d3;border:none}.gg-input:disabled,.gg-select:disabled,.gg-textarea:disabled{color:gray;cursor:not-allowed;background-color:#d3d3d3}.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,.gg-select:hover,.gg-input:hover,.gg-textarea:hover,.gg-icon-button:hover{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>
-#content{z-index:10000;display:none;position:fixed;inset:0}.box{background-repeat:no-repeat;position:absolute}.description{color:var(--bkg-color);width:15rem;font-size:1.2rem;position:absolute}#themes{background-position:left -60px bottom -50px;width:150px;height:120px;top:4.5rem;left:0;transform:rotateY(0)rotateX(0)rotate(90deg)}#themes-description{top:10.5rem;left:10rem}#search{background-position:-60px -30px;width:180px;height:70px;top:8rem;left:45%;transform:rotateY(0)rotateX(0)rotate(90deg)}#search-description{text-align:center;top:16rem;left:45%}#menu{background-position:left -60px bottom -50px;width:150px;height:120px;top:4.5rem;right:3rem;transform:rotateY(0)rotateX(0)rotate(180deg)}#menu-description{text-align:right;top:14rem;right:10rem}#basemap{background-position:left -60px bottom -50px;width:150px;height:120px;bottom:11rem;left:26rem;transform:rotateY(0)rotateX(180deg)rotate(90deg)}#basemap-description{bottom:17rem;left:36rem}#user-preferences{background-position:left -60px bottom -50px;width:150px;height:120px;bottom:.5rem;right:3rem;transform:rotateY(180deg)rotateX(0)rotate(0)}#user-preferences-description{text-align:right;bottom:10rem;right:10rem}
+#content{z-index:10000;display:none;position:fixed;inset:0}.box{background-repeat:no-repeat;position:absolute}.description{color:var(--bkg-color);width:15rem;font-size:1.2rem;position:absolute}#themes{background-position:left -60px bottom -50px;width:150px;height:120px;top:4.5rem;left:0;transform:rotateY(0)rotateX(0)rotate(90deg)}#themes-description{top:10.5rem;left:10rem}#search{background-position:-60px -30px;width:180px;height:70px;top:8rem;left:45%;transform:rotateY(0)rotateX(0)rotate(90deg)}#search-description{text-align:center;top:16rem;left:45%}#menu{background-position:left -60px bottom -50px;width:150px;height:120px;top:4.5rem;right:3rem;transform:rotateY(0)rotateX(0)rotate(180deg)}#menu-description{text-align:right;top:14rem;right:10rem}#onboarding,#onboarding-description{--onboarding-help-width:320px;--onboarding-help-height:160px}#onboarding{top:calc(50% - var(--onboarding-help-height) * .5);right:calc(50% - var(--onboarding-help-width) * .5);width:var(--onboarding-help-width);height:var(--onboarding-help-height);background-size:var(--onboarding-help-width) var(--onboarding-help-height)}#onboarding-description{top:calc(50% - var(--onboarding-help-height) * .5);right:calc(50% - var(--onboarding-help-width) * .5);width:var(--onboarding-help-width);height:var(--onboarding-help-height);text-align:center;flex-direction:column;align-items:center;display:flex;& span{flex-grow:1;align-content:center;align-items:end;margin:0 4rem;display:inline-flex}& button{cursor:pointer;font:inherit;color:currentColor;-webkit-appearance:none;background:0 0;border:0;flex-grow:1;align-items:baseline;margin:0 4rem;padding:0;text-decoration:underline;display:inline-flex}}#basemap{background-position:left -60px bottom -50px;width:150px;height:120px;bottom:11rem;left:26rem;transform:rotateY(0)rotateX(180deg)rotate(90deg)}#basemap-description{bottom:17rem;left:36rem}#user-preferences{background-position:left -60px bottom -50px;width:150px;height:120px;bottom:.5rem;right:3rem;transform:rotateY(180deg)rotateX(0)rotate(0)}#user-preferences-description{text-align:right;bottom:10rem;right:10rem}
 </style>
-<div id="content"><div id="themes" class="box"></div><div id="themes-description" class="description" i18n="help-themes">Explore available topics. Once selected, the associated maps load automatically.</div><div id="search" class="box"></div><div id="search-description" class="description" i18n="help-search">Search for a place, address, map, or geographic data.</div><div id="menu" class="box"></div><div id="menu-description" class="description" i18n="help-menu">Access advanced tools such as printing, drawing, 3D view, and more.</div><div id="basemap" class="box"></div><div id="basemap-description" class="description" i18n="help-basemap">Choose from available background layers to customize your view.</div><div id="user-preferences" class="box"></div><div id="user-preferences-description" class="description" i18n="help-user-preferences">Manage your user preferences, like language, display mode and map options.</div></div>`;
+<div id="content"><div id="themes" class="box"></div><div id="themes-description" class="description" i18n="help-themes">Explore available topics. Once selected, the associated maps load automatically.</div><div id="search" class="box"></div><div id="search-description" class="description" i18n="help-search">Search for a place, address, map, or geographic data.</div><div id="menu" class="box"></div><div id="menu-description" class="description" i18n="help-menu">Access advanced tools such as printing, drawing, 3D view, and more.</div><div id="onboarding" class="box"></div><div id="onboarding-description" class="description"><span i18n="help-onboarding"></span> <button i18n="help-onboarding-link" onclick="${() => this.startOnboardingTour()}"></button></div><div id="basemap" class="box"></div><div id="basemap-description" class="description" i18n="help-basemap">Choose from available background layers to customize your view.</div><div id="user-preferences" class="box"></div><div id="user-preferences-description" class="description" i18n="help-user-preferences">Manage your user preferences, like language, display mode and map options.</div></div>`;
     };
     content;
     themes;
     search;
     menu;
+    onboarding;
     basemap;
     userPreferences;
     darkFrontendMode = false;
-    arrowBlack = ArrowBlack;
-    arrowWhite = ArrowWhite;
     currentArrow;
+    currentCircle;
     constructor() {
         super('help');
     }
@@ -35,6 +38,7 @@ class HelpComponent extends GirafeHTMLElement {
         this.themes = this.shadow.querySelector('#themes');
         this.search = this.shadow.querySelector('#search');
         this.menu = this.shadow.querySelector('#menu');
+        this.onboarding = this.shadow.querySelector('#onboarding');
         this.basemap = this.shadow.querySelector('#basemap');
         this.userPreferences = this.shadow.querySelector('#user-preferences');
         // hide help for hideable Parts of the UI
@@ -61,10 +65,12 @@ class HelpComponent extends GirafeHTMLElement {
     changeArrowColor() {
         // change the arrow color depending on the darkFrontendMode state
         this.darkFrontendMode = this.context.stateManager.state.interface.darkFrontendMode ?? systemIsInDarkMode();
-        this.currentArrow = this.darkFrontendMode ? this.arrowBlack : this.arrowWhite;
+        this.currentArrow = this.darkFrontendMode ? ArrowBlack : ArrowWhite;
+        this.currentCircle = this.darkFrontendMode ? CircledBlack : CircledWhite;
         this.themes.style.backgroundImage = `url(${this.currentArrow})`;
         this.search.style.backgroundImage = `url(${this.currentArrow})`;
         this.menu.style.backgroundImage = `url(${this.currentArrow})`;
+        this.onboarding.style.backgroundImage = `url(${this.currentCircle})`;
         this.basemap.style.backgroundImage = `url(${this.currentArrow})`;
         this.userPreferences.style.backgroundImage = `url(${this.currentArrow})`;
         this.content.style.backgroundColor = this.darkFrontendMode ? 'rgba(255, 255, 255, 0.65)' : 'rgba(0, 0, 0, 0.65)';
@@ -78,6 +84,10 @@ class HelpComponent extends GirafeHTMLElement {
             this.content.style.display = 'none';
         }
     }
+    startOnboardingTour() {
+        this.toggleHelp(false);
+        this.context.onBoardingManager.restart().then(noop);
+    }
     connectedCallback() {
         super.connectedCallback();
         this.render();

package/package.json

@@ -5,7 +5,7 @@
     "name": "GeoGirafe PSC",
     "url": "https://doc.geomapfish.dev"
   },
-  "version": "1.1.0-dev.2454789578",
+  "version": "1.1.0-dev.2456762594",
   "type": "module",
   "engines": {
     "node": ">=20.19.0"

package/templates/public/about.json

@@ -1 +1 @@
-{"version":"1.1.0-dev.2454789578", "build":"2454789578", "date":"15/04/2026"}
+{"version":"1.1.0-dev.2456762594", "build":"2456762594", "date":"16/04/2026"}

package/tools/main.d.ts

@@ -104,6 +104,7 @@ export { default as PermalinkManager } from './url/permalinkmanager.js';
 export { default as UrlManager } from './url/urlmanager.js';
 export { default as UserDataManager } from './userdata/userdatamanager.js';
 export { default as ColumnAliasHelper } from './utils/aliases.js';
+export { noop } from './utils/async.js';
 export { debounce } from './utils/debounce.js';
 export { default as GirafeColorPicker } from './utils/girafecolorpicker.js';
 export { unByKeyAll, getOlayerByName, removeUnwantedOlParams, polygonFromCircle, getDistance, getAreaOfPolygon, getAreaOfCircle, isCoordinateInDegrees, getSelectionBoxFromMapClick, reprojectGeometry, ensurePolygonIsProperlyClosed, getHalfPoint, getLabelStyle, getRadiusDataForCircle, getLengthAsMetricText, getAreaAsMetricText, getAzimuthAsText } from './utils/olutils.js';

package/tools/main.js

@@ -79,6 +79,7 @@ export { default as PermalinkManager } from './url/permalinkmanager.js';
 export { default as UrlManager } from './url/urlmanager.js';
 export { default as UserDataManager } from './userdata/userdatamanager.js';
 export { default as ColumnAliasHelper } from './utils/aliases.js';
+export { noop } from './utils/async.js';
 export { debounce } from './utils/debounce.js';
 export { default as GirafeColorPicker } from './utils/girafecolorpicker.js';
 export { unByKeyAll, getOlayerByName, removeUnwantedOlParams, polygonFromCircle, getDistance, getAreaOfPolygon, getAreaOfCircle, isCoordinateInDegrees, getSelectionBoxFromMapClick, reprojectGeometry, ensurePolygonIsProperlyClosed, getHalfPoint, getLabelStyle, getRadiusDataForCircle, getLengthAsMetricText, getAreaAsMetricText, getAzimuthAsText } from './utils/olutils.js';

package/tools/onboarding/onboardingmanager.d.ts

@@ -2,6 +2,7 @@ import GirafeSingleton from '../../base/GirafeSingleton.js';
 import 'driver.js/dist/driver.css';
 export default class OnBoardingManager extends GirafeSingleton {
     private get config();
-    private readonly STORAGE_ITEM_NAME;
+    private readonly STORAGE_PATH;
+    restart(): Promise<void>;
     start(): Promise<void>;
 }

package/tools/onboarding/onboardingmanager.js

@@ -6,20 +6,24 @@ export default class OnBoardingManager extends GirafeSingleton {
     get config() {
         return this.context.configManager.Config;
     }
-    STORAGE_ITEM_NAME = 'geogirafe-onboarding';
+    STORAGE_PATH = 'onboardingTourAlreadyDone';
+    async restart() {
+        this.context.userDataManager.saveUserData(this.STORAGE_PATH, 'false');
+        return this.start();
+    }
     async start() {
         if (!this.config.onboarding) {
             // No tour configured
             return;
         }
         await this.context.i18nManager.ensureTranslationLoaded();
-        const tourAlreadyDone = sessionStorage.getItem(this.STORAGE_ITEM_NAME);
+        const tourAlreadyDone = this.context.userDataManager.getUserData(this.STORAGE_PATH) || 'false';
         if (tourAlreadyDone !== 'true') {
             const onboardingDriver = driver({
                 popoverClass: 'girafe-onboarding-theme',
                 showProgress: true,
                 onDestroyed: (_element, _step, _options) => {
-                    sessionStorage.setItem(this.STORAGE_ITEM_NAME, 'true');
+                    this.context.userDataManager.saveUserData(this.STORAGE_PATH, 'true');
                 },
                 nextBtnText: this.context.i18nManager.getTranslation('onboarding-next-button-text'),
                 prevBtnText: this.context.i18nManager.getTranslation('onboarding-previous-button-text'),

package/tools/utils/async.d.ts

@@ -0,0 +1 @@
+export declare const noop: () => void;

package/tools/utils/async.js

@@ -0,0 +1 @@
+export const noop = () => { };