@geogirafe/lib-geoportal 1.1.0-dev.2569726569 → 1.1.0-dev.2572458576

package/assets/i18n/de.json

@@ -64,6 +64,8 @@
     "Copy value": "Wert kopieren",
     "copy-cell-content": "Zelleninhalt kopieren",
     "Create custom theme": "Thema erstellen",
+    "create-bookmark": "Lesezeichen erstellen",
+    "create-bookmark-by-shortcut": "Drücken Sie ${shortcut} oder nutzen Sie die Option <i>Zu Favoriten hinzufügen</i> in Ihrem Browser.<br/><br/>Schliessen Sie diese Nachricht erst, nachdem Sie den Lesezeichen hinzugefügt haben.",
     "cross-section-settings": "Querschnitt",
     "CSV export": "CSV-Export",
     "Current Feature": "Aktuelles Objekt",

package/assets/i18n/en.json

@@ -64,6 +64,8 @@
     "Copy value": "Copier value",
     "copy-cell-content": "Copy cell content",
     "Create custom theme": "Create custom theme",
+    "create-bookmark": "Create bookmark",
+    "create-bookmark-by-shortcut": "Press ${shortcut} or use your browser's <i>Add to Favorites</i> option.<br/><br/>Do not close this message until you have added the favorite.",
     "cross-section-settings": "Cross-section",
     "CSV export": "CSV export",
     "Current Feature": "Current Feature",

package/assets/i18n/fr.json

@@ -64,6 +64,8 @@
     "Copy value": "Copier la valeur",
     "copy-cell-content": "Copier le contenu de la cellule",
     "Create custom theme": "Créer un thème personnalisé",
+    "create-bookmark": "Créer un favori",
+    "create-bookmark-by-shortcut": "Appuyer sur ${shortcut} ou utilisez l'option <i>Ajouter aux favoris</i> de votre navigateur. <br/><br/>Ne fermez ce message qu'après avoir ajouté le favori.",
     "cross-section-settings": "Coupe transversale",
     "CSV export": "Export CSV",
     "Current Feature": "Entité actuelle",

package/assets/i18n/it.json

@@ -64,6 +64,8 @@
     "Copy value": "Copia il valore",
     "copy-cell-content": "Copia contenuto cella",
     "Create custom theme": "Crea un tema personalizzato",
+    "create-bookmark": "Crea segnalibro",
+    "create-bookmark-by-shortcut": "Premere ${shortcut} o usare l'opzione <i>Aggiungi ai preferiti</i> del browser.<br/><br/>Non chiudere questo messaggio finché il preferito non è stato aggiunto.",
     "cross-section-settings": "Sezione trasversale",
     "CSV export": "Esporta CSV",
     "Current Feature": "Elemento corrente",

package/components/addbookmark/component.d.ts

@@ -0,0 +1,21 @@
+import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
+import { IUrlShortener } from '../../tools/share/iurlshortener.js';
+declare class AddBookmarkComponent extends GirafeHTMLElement {
+    protected templateUrl: string | null;
+    protected styleUrls: string[] | null;
+    template: () => import("uhtml").Hole;
+    private readonly isMac;
+    protected awaitingBookmarkLink: boolean;
+    private showingModal;
+    private bookmarkLink;
+    get urlShortener(): IUrlShortener | undefined;
+    constructor();
+    render(): void;
+    protected connectedCallback(): void;
+    protected disconnectedCallback(): void;
+    addBookmark(): Promise<void>;
+    private generateBookmarkLink;
+    private closeOnKeyUp;
+    private handleBookmarkShortcut;
+}
+export default AddBookmarkComponent;

package/components/addbookmark/component.js

@@ -0,0 +1,94 @@
+import { html as uHtml } from 'uhtml';
+// SPDX-License-Identifier: Apache-2.0
+import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
+import { noop } from '../../tools/utils/async.js';
+class AddBookmarkComponent extends GirafeHTMLElement {
+    templateUrl = null;
+    styleUrls = null;
+    template = () => {
+        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>${this.customStyle}</style>
+<div class="add-bookmark"><button tip="add_bookmark" class="gg-icon-button gg-big" onclick="${() => this.addBookmark()}"><img alt="add-icon" src="icons/bookmark-add.svg" ?hidden="${this.awaitingBookmarkLink}"> <img ?hidden="${!this.awaitingBookmarkLink}" loading="eager" src="icons/progress.svg" class="gg-spin gg-small" alt="${this.context.i18nManager.getTranslation('Loading')}"></button></div>`;
+    };
+    isMac = navigator.userAgent.includes('Mac');
+    awaitingBookmarkLink = false;
+    showingModal = false;
+    bookmarkLink;
+    get urlShortener() {
+        return this.context.shareManager.UrlShortener;
+    }
+    constructor() {
+        super('addbookmark');
+        this.closeOnKeyUp = this.closeOnKeyUp.bind(this);
+        this.handleBookmarkShortcut = this.handleBookmarkShortcut.bind(this);
+    }
+    render() {
+        super.render();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.render();
+        super.girafeTranslate();
+        globalThis.addEventListener('keydown', this.handleBookmarkShortcut);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        globalThis.removeEventListener('keydown', this.handleBookmarkShortcut);
+    }
+    async addBookmark() {
+        this.showingModal = true;
+        const currentUrl = globalThis.location.href;
+        await this.generateBookmarkLink();
+        if (!this.bookmarkLink) {
+            return;
+        }
+        const messages = ['create-bookmark-by-shortcut'];
+        // Change URL so that this is used to create a bookmark when the User presses the Shortcut
+        globalThis.history.pushState({}, '', this.bookmarkLink);
+        const shortcut = this.isMac ? '⌘ + D' : 'Ctrl + D';
+        globalThis.addEventListener('keydown', this.closeOnKeyUp);
+        window
+            .gInfo(messages, 'create-bookmark', (translatedMessage) => {
+            return Array.isArray(translatedMessage)
+                ? translatedMessage.map((message) => message.replace('${shortcut}', shortcut)).join('<br /><br />')
+                : translatedMessage;
+        })
+            .then(() => {
+            this.showingModal = false;
+            globalThis.removeEventListener('keydown', this.closeOnKeyUp);
+            // Restore the URL afterwards
+            globalThis.history.pushState({}, '', currentUrl);
+        });
+    }
+    async generateBookmarkLink() {
+        if (!this.urlShortener) {
+            return;
+        }
+        this.awaitingBookmarkLink = true;
+        this.refreshRender();
+        const baseUrl = this.context.urlManager.getBaseUrlPath();
+        const hash = this.context.shareManager.getStateToShare();
+        const bookmarkUrl = `${baseUrl}#${hash}`;
+        const response = await this.urlShortener.shortenUrl(bookmarkUrl);
+        if (response.success) {
+            this.bookmarkLink = response.shorturl;
+        }
+        this.awaitingBookmarkLink = false;
+        this.refreshRender();
+    }
+    closeOnKeyUp(event) {
+        if (event.key === 'Escape') {
+            window.gCloseModal();
+        }
+    }
+    handleBookmarkShortcut(event) {
+        const addBookmarkShortcutPressed = event.key === 'd' && ((!this.isMac && event.ctrlKey) || (this.isMac && event.metaKey));
+        if (addBookmarkShortcutPressed && !this.showingModal) {
+            event.preventDefault();
+            this.addBookmark().then(noop);
+        }
+    }
+}
+export default AddBookmarkComponent;

package/components/main.d.ts

@@ -1,4 +1,5 @@
 export { default as AboutComponent } from './about/component.js';
+export { default as AddBookmarkComponent } from './addbookmark/component.js';
 export { default as AdvancedFilterComponent } from './advancedfilter/component.js';
 export { default as AlignNorthButtonMobile } from './alignnorthbutton-mobile/component.js';
 export { default as OauthComponent } from './auth/component.js';

package/components/main.js

@@ -1,4 +1,5 @@
 export { default as AboutComponent } from './about/component.js';
+export { default as AddBookmarkComponent } from './addbookmark/component.js';
 export { default as AdvancedFilterComponent } from './advancedfilter/component.js';
 export { default as AlignNorthButtonMobile } from './alignnorthbutton-mobile/component.js';
 export { default as OauthComponent } from './auth/component.js';

package/components/modals/component.d.ts

@@ -1,5 +1,5 @@
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
-type ModalType = 'alert' | 'confirm' | 'prompt';
+type ModalType = 'alert' | 'confirm' | 'prompt' | 'info';
 declare class ModalsComponent extends GirafeHTMLElement {
     protected templateUrl: string | null;
     protected styleUrls: string[] | null;
@@ -13,8 +13,10 @@ declare class ModalsComponent extends GirafeHTMLElement {
     resolvePrompt: (value: string | false) => void;
     constructor();
     private initBox;
+    private initBoxWithMessageArray;
     private resetBox;
     private promptBox;
+    private alertInfoBox;
     private alertConfirmBox;
     ok(): void;
     nok(): void;

package/components/modals/component.js

@@ -8,10 +8,10 @@ class ModalsComponent 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;background-color:#000000a6;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--bkg-color);border:var(--app-standard-border);border-radius:10px;width:300px;min-height:400px;box-shadow:5px 5px 10px #0003}header{background:var(--app-color-grey);border-top-left-radius:10px;border-top-right-radius:10px;justify-content:center;height:100px;padding:2rem;display:flex}section{text-align:center;flex-direction:column;padding:30px;display:flex}span{margin-bottom:1rem;font-size:1.2rem;display:inline-block}.confirm-buttons{flex-direction:row;justify-content:center;gap:1rem;margin-top:2rem;display:flex}.confirm-buttons button{width:7rem}h2,span{color:var(--text-color)}
+#content{z-index:10000;background-color:#000000a6;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--bkg-color);border:var(--app-standard-border);border-radius:10px;width:300px;min-height:400px;box-shadow:5px 5px 10px #0003}.wide{width:auto;max-width:480px}header{background:var(--app-color-grey);border-top-left-radius:10px;border-top-right-radius:10px;justify-content:center;height:100px;padding:2rem;display:flex}section{text-align:center;flex-direction:column;padding:30px;display:flex}span{margin-bottom:1rem;font-size:1.2rem;display:inline-block}.confirm-buttons{flex-direction:row;justify-content:center;gap:1rem;margin-top:2rem;display:flex}.confirm-buttons button{width:7rem}h2,span{color:var(--text-color)}
 </style>
 <style>${this.customStyle}</style>
-<div id="content" class="${this.visible ? '' : 'hidden'}"><div class="modal"><header><img alt="question-icon" src="icons/help.svg" class="${this.boxType === 'alert' ? 'hidden' : ''}"> <img alt="error-icon" src="icons/error.svg" class="${this.boxType === 'alert' ? '' : 'hidden'}"></header><section><h2>${this.boxTitle}</h2><span>${this.boxMessage}</span> <input id="input-text" class="${this.boxType === 'prompt' ? 'gg-input' : 'hidden'}" placeholder="${this.boxPlaceholder}"><div class="${this.boxType === 'alert' ? 'confirm-buttons' : 'hidden'}"><button class="gg-button" onclick="${() => this.ok()}" i18n="Ok">Ok</button></div><div class="${this.boxType === 'confirm' ? 'confirm-buttons' : 'hidden'}"><button class="gg-button" onclick="${() => this.ok()}" i18n="Yes">Yes</button> <button class="gg-button" onclick="${() => this.nok()}" i18n="No">No</button></div><div class="${this.boxType === 'prompt' ? 'confirm-buttons' : 'hidden'}"><button class="gg-button" onclick="${() => this.promptOk()}" i18n="Ok">Ok</button> <button class="gg-button" onclick="${() => this.promptNok()}" i18n="Cancel">Cancel</button></div></section></div></div>`;
+<div id="content" class="${this.visible ? '' : 'hidden'}"><div class="${this.boxType == 'info' ? 'modal wide' : 'modal'}"><header><img alt="question-icon" src="icons/help.svg" class="${(this.boxType === 'alert' || this.boxType === 'info') ? 'hidden' : ''}"> <img alt="error-icon" src="icons/error.svg" class="${this.boxType === 'alert' ? '' : 'hidden'}"> <img alt="info-icon" src="icons/info.svg" class="${this.boxType === 'info' ? '' : 'hidden'}"></header><section><h2>${this.boxTitle}</h2><span>${this.htmlUnsafe(this.boxMessage)}</span> <input id="input-text" class="${this.boxType === 'prompt' ? 'gg-input' : 'hidden'}" placeholder="${this.boxPlaceholder}"><div class="${(this.boxType === 'alert' || this.boxType === 'info') ? 'confirm-buttons' : 'hidden'}"><button class="gg-button" onclick="${() => this.ok()}" i18n="Ok">Ok</button></div><div class="${this.boxType === 'confirm' ? 'confirm-buttons' : 'hidden'}"><button class="gg-button" onclick="${() => this.ok()}" i18n="Yes">Yes</button> <button class="gg-button" onclick="${() => this.nok()}" i18n="No">No</button></div><div class="${this.boxType === 'prompt' ? 'confirm-buttons' : 'hidden'}"><button class="gg-button" onclick="${() => this.promptOk()}" i18n="Ok">Ok</button> <button class="gg-button" onclick="${() => this.promptNok()}" i18n="Cancel">Cancel</button></div></section></div></div>`;
     };
     visible = false;
     boxType;
@@ -35,6 +35,23 @@ class ModalsComponent extends GirafeHTMLElement {
         this.visible = true;
         this.refreshRender();
     }
+    initBoxWithMessageArray(type, message, messageHandler, title, placeholder) {
+        this.boxType = type;
+        if (Array.isArray(message)) {
+            this.boxMessage = messageHandler(message.map((msg) => this.context.i18nManager.getTranslation(msg)));
+        }
+        else {
+            this.boxMessage = messageHandler(this.context.i18nManager.getTranslation(message));
+        }
+        if (title) {
+            this.boxTitle = this.context.i18nManager.getTranslation(title);
+        }
+        if (placeholder) {
+            this.boxPlaceholder = this.context.i18nManager.getTranslation(placeholder);
+        }
+        this.visible = true;
+        this.refreshRender();
+    }
     resetBox() {
         this.visible = false;
         this.boxType = undefined;
@@ -44,11 +61,17 @@ class ModalsComponent extends GirafeHTMLElement {
         this.refreshRender();
     }
     async promptBox(message, title, placeholder) {
-        this.initBox('prompt', message, (message) => message, title, placeholder);
+        this.initBox('prompt', message, (message) => (Array.isArray(message) ? message[0] : message), title, placeholder);
         return new Promise((resolve) => {
             this.resolvePrompt = resolve;
         });
     }
+    async alertInfoBox(message, title, messageHandler) {
+        this.initBoxWithMessageArray('info', message, messageHandler, title);
+        return new Promise((resolve) => {
+            this.resolveAlertConfirm = resolve;
+        });
+    }
     async alertConfirmBox(type, message, title, messageHandler) {
         this.initBox(type, message, messageHandler, title);
         return new Promise((resolve) => {
@@ -80,9 +103,14 @@ class ModalsComponent extends GirafeHTMLElement {
     connectedCallback() {
         super.connectedCallback();
         const defaultMessageHandler = (translatedMessage) => translatedMessage;
+        const defaultMessageArrayHandler = (translatedMessage) => Array.isArray(translatedMessage) ? translatedMessage[0] : translatedMessage;
         window.gConfirm = (message, title, messageHandler) => this.alertConfirmBox('confirm', message, title, messageHandler ?? defaultMessageHandler);
         window.gAlert = (message, title) => this.alertConfirmBox('alert', message, title ?? '', defaultMessageHandler);
         window.gPrompt = (message, title, placeholder) => this.promptBox(message, title, placeholder);
+        window.gInfo = (message, title, messageHandler) => this.alertInfoBox(message, title, messageHandler ?? defaultMessageArrayHandler);
+        window.gCloseModal = () => {
+            this.ok();
+        };
         this.render();
         super.girafeTranslate();
     }

package/components/share/component.d.ts

@@ -1,3 +1,4 @@
+import { IUrlShortener } from '../../tools/share/iurlshortener.js';
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
 import { ShareState } from './sharestate.js';
 import IGirafePanel from '../../tools/state/igirafepanel.js';
@@ -19,15 +20,14 @@ declare class ShareComponent extends GirafeHTMLElement implements IGirafePanel {
     iframeCode?: string;
     awaitingShareLink: boolean;
     awaitingIframeUrl: boolean;
-    private urlShortener?;
     private simpleMaskManager?;
     private readonly eventsCallbacks;
     private iframeSize;
     get shareState(): ShareState;
+    get urlShortener(): IUrlShortener | undefined;
     get iframeWidth(): 400 | 600 | 800;
     get iframeHeight(): 300 | 600 | 450;
     constructor();
-    private initializeShortenerService;
     render(): void;
     /**
      * Renders the component by calling the necessary methods.

package/components/share/component.js

@@ -4,10 +4,8 @@ import TwitterLogo from './images/twitter.svg';
 import FacebookLogo from './images/facebook.svg';
 import LinkedInLogo from './images/linkedin.svg';
 import MailLogo from './images/mail.svg';
-import GmfShareManager from './tools/gmfsharemanager.js';
 import GirafeHTMLElement from '../../base/GirafeHTMLElement.js';
 import SimpleMaskManager from '../../tools/layers/simplemaskmanager.js';
-import GeoGirafeShareManager from './tools/geogirafesharemanager.js';
 class ShareComponent extends GirafeHTMLElement {
     templateUrl = null;
     styleUrls = null;
@@ -34,13 +32,15 @@ class ShareComponent extends GirafeHTMLElement {
     iframeCode;
     awaitingShareLink = false;
     awaitingIframeUrl = false;
-    urlShortener;
     simpleMaskManager;
     eventsCallbacks = [];
     iframeSize = '';
     get shareState() {
         return this.state.extendedState.share;
     }
+    get urlShortener() {
+        return this.context.shareManager.UrlShortener;
+    }
     get iframeWidth() {
         switch (this.iframeSize) {
             case 'small':
@@ -68,19 +68,6 @@ class ShareComponent extends GirafeHTMLElement {
     constructor() {
         super('share');
     }
-    initializeShortenerService() {
-        const share = this.context.configManager.Config.share;
-        if (share) {
-            switch (share.service) {
-                case 'gmf':
-                    this.urlShortener = new GmfShareManager(share.createUrl);
-                    break;
-                case 'geogirafe':
-                    this.urlShortener = new GeoGirafeShareManager(share.createUrl, this.context.urlManager);
-                    break;
-            }
-        }
-    }
     render() {
         if (this.isPanelVisible) {
             this.renderComponent();
@@ -238,7 +225,6 @@ class ShareComponent extends GirafeHTMLElement {
     connectedCallback() {
         super.connectedCallback();
         this.render();
-        this.initializeShortenerService();
     }
 }
 export default ShareComponent;

package/components/share/tools/geogirafesharemanager.d.ts

@@ -1,5 +1,5 @@
 import UrlManager from '../../../tools/url/urlmanager.js';
-import { IUrlShortener, UrlShortenerResponse } from './iurlshortener.js';
+import { IUrlShortener, UrlShortenerResponse } from '../../../tools/share/iurlshortener.js';
 declare class GeoGirafeShareManager implements IUrlShortener {
     private readonly serviceUrl;
     private readonly urlManager;

package/components/share/tools/gmfsharemanager.d.ts

@@ -1,4 +1,4 @@
-import { IUrlShortener, UrlShortenerResponse } from './iurlshortener.js';
+import { IUrlShortener, UrlShortenerResponse } from '../../../tools/share/iurlshortener.js';
 export type GmfSuccessResponse = {
     short_url: string;
 };

package/main.tools.d.ts

@@ -13,8 +13,10 @@ declare global {
         cordova: unknown;
         gConfirm(message: string, title: string, messageHandler?: (translatedMessage: string) => string): Promise<boolean>;
         gAlert(message: string, title?: string): Promise<boolean>;
+        gInfo(message: string | string[], title: string, messageHandler?: (translatedMessage: string | string[]) => string): Promise<boolean>;
         gPrompt(message: string, title?: string, placeholder?: string): Promise<string | false>;
         gOpenWindow(title: string, url: string, width?: string | number, height?: string | number, top?: string | number, left?: string | number): void;
+        gCloseModal(): void;
     }
     interface Navigator {
         connection: Connection;

package/package.json

@@ -5,7 +5,7 @@
     "name": "GeoGirafe PSC",
     "url": "https://doc.geomapfish.dev"
   },
-  "version": "1.1.0-dev.2569726569",
+  "version": "1.1.0-dev.2572458576",
   "type": "module",
   "engines": {
     "node": ">=20.19.0"
@@ -98,6 +98,7 @@
     "prettier-plugin-sort-json": "4.2.0",
     "proj4": "2.20.8",
     "svgo": "4.0.1",
+    "tsx": "4.22.3",
     "typescript": "6.0.2",
     "vite": "8.0.7",
     "vite-bundle-analyzer": "1.3.7",
@@ -171,6 +172,7 @@
     "generate-dev-certs-win": "buildtools\\generate-dev-certs.cmd",
     "generate-dev-certs-nix": "bash -C './buildtools/generate-dev-certs.sh'",
     "trust-default-dev-certs-win": "buildtools\\trust-dev-certs.cmd",
-    "size-analysis": "node buildtools/app-clean.js && cross-env NODE_OPTIONS=--max-old-space-size=8192 vite build --mode analyze"
+    "size-analysis": "node buildtools/app-clean.js && cross-env NODE_OPTIONS=--max-old-space-size=8192 vite build --mode analyze",
+    "create-component": "tsx buildtools/create-component.ts"
   }
 }

package/styles/index.css

@@ -186,6 +186,9 @@ girafe-selection-window {
 girafe-nav-history {
   z-index: 10;
 }
+girafe-add-bookmark {
+  z-index: 10;
+}
 
 girafe-info-window {
   position: absolute;

package/templates/index.html

@@ -124,7 +124,7 @@
         </girafe-search>
         <girafe-news-button plugin="config:news"></girafe-news-button>
         <girafe-oauth></girafe-oauth>
-        <girafe-nav-history></girafe-nav-history>
+        <girafe-add-bookmark></girafe-add-bookmark>
         <girafe-video-record></girafe-video-record>
       </header>
 

package/templates/public/about.json

@@ -1 +1 @@
-{"version":"1.1.0-dev.2569726569", "build":"2569726569", "date":"02/06/2026"}
+{"version":"1.1.0-dev.2572458576", "build":"2572458576", "date":"03/06/2026"}

package/tools/app/geogirafeapp.js

@@ -50,6 +50,7 @@ import SelectionToolComponent from '../../components/selectiontool/component.js'
 import AdvancedFilterComponent from '../../components/advancedfilter/component.js';
 import FixedDimensionComponent from '../../components/drawing/fixed-dimension/component.js';
 import GetDirectionsArtifact from '../../components/getdirections/component.js';
+import AddBookmarkComponent from '../../components/addbookmark/component.js';
 export default class GeoGirafeApp {
     readyPromise;
     resolveReady;
@@ -144,6 +145,7 @@ export default class GeoGirafeApp {
         customElements.define('girafe-video-record', VideoRecordComponent);
         customElements.define('girafe-fixed-dimension', FixedDimensionComponent);
         customElements.define('girafe-get-directions', GetDirectionsArtifact);
+        customElements.define('girafe-add-bookmark', AddBookmarkComponent);
     }
     async initializeServiceWorker() {
         try {

package/tools/main.d.ts

@@ -55,6 +55,7 @@ export type { GeoTransform } from './raster/rasterutils.js';
 export { extractGeoTransform, mapToPixel, pixelToMap, getImage, getPixelValue } from './raster/rasterutils.js';
 export { default as ResizeWindow } from './resizewindow.js';
 export type { default as ISessionManager } from './share/isessionmanager.js';
+export type { UrlShortenerResponse, IUrlShortener } from './share/iurlshortener.js';
 export { default as ActiveBasemapsSerializer } from './share/serializers/activebasemapsserializer.js';
 export { default as CustomLayersSerializer } from './share/serializers/customlayersserializer.js';
 export { default as GlobeSerializer } from './share/serializers/globeserializer.js';

package/tools/share/sharemanager.d.ts

@@ -1,5 +1,9 @@
 import GirafeSingleton from '../../base/GirafeSingleton.js';
+import { IUrlShortener } from './iurlshortener.js';
 declare class ShareManager extends GirafeSingleton {
+    private urlShortener?;
+    get UrlShortener(): IUrlShortener | undefined;
+    initializeSingleton(): void;
     getStateToShare(): string;
     hasSharedState(): boolean;
     private getStateFromUrl;

package/tools/share/sharemanager.js

@@ -1,6 +1,25 @@
 // SPDX-License-Identifier: Apache-2.0
 import GirafeSingleton from '../../base/GirafeSingleton.js';
+import GmfShareManager from '../../components/share/tools/gmfsharemanager.js';
+import GeoGirafeShareManager from '../../components/share/tools/geogirafesharemanager.js';
 class ShareManager extends GirafeSingleton {
+    urlShortener;
+    get UrlShortener() {
+        return this.urlShortener;
+    }
+    initializeSingleton() {
+        const share = this.context.configManager.Config.share;
+        if (share) {
+            switch (share.service) {
+                case 'gmf':
+                    this.urlShortener = new GmfShareManager(share.createUrl);
+                    break;
+                case 'geogirafe':
+                    this.urlShortener = new GeoGirafeShareManager(share.createUrl, this.context.urlManager);
+                    break;
+            }
+        }
+    }
     getStateToShare() {
         const encodedState = this.context.stateSerializer.getSerializedState();
         return encodedState;