@geogirafe/lib-geoportal 1.1.0-dev.2418238104 → 1.1.0-dev.2433737633

package/CONTRIBUTING.md

@@ -78,7 +78,7 @@ Once the merge request has been reviewed and accepted, it will be merged. If som
 You can contact us through the following channels:
 
 - By opening an issue in this GitLab Repository
-- By Email
+- By Email: info@geogirafe.org
 
 ## Thank you!
 

package/assets/i18n/de.json

@@ -229,6 +229,7 @@
     "My Drawing": "Meine Zeichnung",
     "My selection": "Meine Auswahl",
     "Name": "Name",
+    "news": "Nachrichten",
     "No": "Nein",
     "No bookmark": "Kein Lesezeichen",
     "No data": "Keine Daten",
@@ -383,6 +384,7 @@
     "Show metadata": "Metadaten anzeigen",
     "Show or hide measure information": "Massinformationen anzeigen oder ausblenden",
     "Show or hide shape name": "Formname anzeigen oder ausblenden",
+    "show_content": "Inhalt anzeigen",
     "sitn2001": "LiDAR 2001",
     "sitn2010": "LiDAR 2010",
     "sitn2016": "LiDAR 2016",

package/assets/i18n/en.json

@@ -230,6 +230,7 @@
     "My Drawing": "My Drawing",
     "My selection": "My selection",
     "Name": "Name",
+    "news": "News",
     "No": "No",
     "No bookmark": "No bookmark",
     "No data": "No data",
@@ -384,6 +385,7 @@
     "Show metadata": "Show metadata",
     "Show or hide measure information": "Show or hide measure information",
     "Show or hide shape name": "Show or hide shape name",
+    "show_content": "Show content",
     "sitn2001": "LiDAR 2001",
     "sitn2010": "LiDAR 2010",
     "sitn2016": "LiDAR 2016",

package/assets/i18n/fr.json

@@ -229,6 +229,7 @@
     "My Drawing": "Mon dessin",
     "My selection": "Ma sélection",
     "Name": "Nom",
+    "news": "Actualités",
     "No": "Non",
     "No bookmark": "Aucun favori",
     "No data": "Pas de données",
@@ -383,6 +384,7 @@
     "Show metadata": "Afficher les métadonnées",
     "Show or hide measure information": "Afficher ou masquer les informations de mesure",
     "Show or hide shape name": "Afficher ou masquer le nom de la forme",
+    "show_content": "Afficher le contenu",
     "sitn2001": "LiDAR 2001",
     "sitn2010": "LiDAR 2010",
     "sitn2016": "LiDAR 2016",

package/assets/i18n/it.json

@@ -229,6 +229,7 @@
     "My Drawing": "Il mio disegno",
     "My selection": "La mia selezione",
     "Name": "Nome",
+    "news": "Notizie",
     "No": "No",
     "No bookmark": "Nessun segnalibro",
     "No data": "Nessun dato",
@@ -383,6 +384,7 @@
     "Show metadata": "Mostra metadati",
     "Show or hide measure information": "Mostra o nascondi le informazioni di misura",
     "Show or hide shape name": "Mostra o nascondi il nome della forma",
+    "show_content": "Visualizzare il contenuto",
     "sitn2001": "LiDAR 2001",
     "sitn2010": "LiDAR 2010",
     "sitn2016": "LiDAR 2016",

package/assets/icons/bell-warn.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="24" height="24" fill="none" viewBox="0 0 24 24"><circle cx="12" cy="3.131" r="1.411" style="fill:#000;fill-opacity:1;stroke:none;stroke-width:1.63248;stroke-linecap:round;stroke-linejoin:round"/><path d="M4 17.2h16C16 17.2 20 4 12 4S8 17.2 4 17.2" style="fill:none;fill-opacity:1;stroke:#000;stroke-width:2.11754;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"/><path d="M14.566 19.778A2.57 2.57 0 0 1 13.283 22a2.57 2.57 0 0 1-2.566 0 2.57 2.57 0 0 1-1.283-2.222H12Z" style="fill:#000;fill-opacity:1;stroke:none;stroke-width:4.212;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"/><circle cx="16.706" cy="7.332" r="5.168" style="fill:red;fill-opacity:1;stroke:none;stroke-width:33.6314"/></svg>

package/assets/icons/bell.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="24" height="24" fill="none" viewBox="0 0 24 24"><circle cx="12" cy="3.131" r="1.411" style="fill:#000;fill-opacity:1;stroke:none;stroke-width:1.63248;stroke-linecap:round;stroke-linejoin:round"/><path d="M4 17.2h16C16 17.2 20 4 12 4S8 17.2 4 17.2" style="fill:none;fill-opacity:1;stroke:#000;stroke-width:2.11754;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"/><path d="M14.566 19.778A2.57 2.57 0 0 1 13.283 22a2.57 2.57 0 0 1-2.566 0 2.57 2.57 0 0 1-1.283-2.222H12Z" style="fill:#000;fill-opacity:1;stroke:none;stroke-width:4.212;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"/></svg>

package/components/main.d.ts

@@ -27,6 +27,8 @@ export { default as MenuMobile } from './menu-mobile/component.js';
 export { default as MenuButtonComponent } from './menubutton/component.js';
 export { default as ModalsComponent } from './modals/component.js';
 export { default as NavigationComponent } from './navigation/component.js';
+export { default as NewsButtonComponent } from './news/news-button/component.js';
+export { default as NewsPanelComponent } from './news/news-panel/component.js';
 export { default as OfflineComponent } from './offline/component.js';
 export { default as PrintComponent } from './print/component.js';
 export { default as PrototypeBannerComponent } from './prototypebanner/component.js';

package/components/main.js

@@ -27,6 +27,8 @@ export { default as MenuMobile } from './menu-mobile/component.js';
 export { default as MenuButtonComponent } from './menubutton/component.js';
 export { default as ModalsComponent } from './modals/component.js';
 export { default as NavigationComponent } from './navigation/component.js';
+export { default as NewsButtonComponent } from './news/news-button/component.js';
+export { default as NewsPanelComponent } from './news/news-panel/component.js';
 export { default as OfflineComponent } from './offline/component.js';
 export { default as PrintComponent } from './print/component.js';
 export { default as PrototypeBannerComponent } from './prototypebanner/component.js';

package/components/news/news-button/component.d.ts

@@ -0,0 +1,12 @@
+import GirafeHTMLElement from '../../../base/GirafeHTMLElement.js';
+declare class NewsButtonComponent extends GirafeHTMLElement {
+    template: () => import("uhtml").Hole;
+    visible: boolean;
+    warn: boolean;
+    constructor();
+    setWarn(): void;
+    loadLastViewDate(): void;
+    getIcon(): "icons/bell-warn.svg" | "icons/bell.svg";
+    connectedCallback(): void;
+}
+export default NewsButtonComponent;

package/components/news/news-button/component.js

@@ -0,0 +1,47 @@
+import { html as uHtml } from 'uhtml';
+import GirafeHTMLElement from '../../../base/GirafeHTMLElement.js';
+class NewsButtonComponent extends GirafeHTMLElement {
+    template = () => {
+        return uHtml `<style>
+button img{width:1.5rem}
+</style><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>
+<button tip="news" class="gg-icon-button gg-big" onclick="document.geogirafe.state.interface.newsPanelVisible=!document.geogirafe.state.interface.newsPanelVisible"><img alt="news-icon" src="${this.getIcon()}"></button>`;
+    };
+    visible = false;
+    warn = false;
+    constructor() {
+        super('news-button');
+    }
+    setWarn() {
+        this.warn = this.state.news.lastPublishDate > this.state.news.lastViewDate;
+        if (this.context.configManager.Config.news?.autoDisplay && this.warn) {
+            this.state.interface.newsPanelVisible = true;
+        }
+        super.render();
+    }
+    loadLastViewDate() {
+        const lastViewDate = this.context.userDataManager.getUserData('lastViewDate');
+        if (lastViewDate) {
+            this.context.stateManager.state.news.lastViewDate = lastViewDate;
+        }
+    }
+    getIcon() {
+        const icon = this.warn ? 'icons/bell-warn.svg' : 'icons/bell.svg';
+        return icon;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.context.configManager.Config.news) {
+            this.subscribe('news.lastViewDate', (_oldValue, _newValue) => {
+                this.setWarn();
+            });
+            this.subscribe('news.lastPublishDate', (_oldValue, _newValue) => {
+                this.setWarn();
+            });
+            super.girafeTranslate();
+        }
+    }
+}
+export default NewsButtonComponent;

package/components/news/news-panel/component.d.ts

@@ -0,0 +1,18 @@
+import type { FeedEntry } from './newsfeedutils.js';
+import GirafeHTMLElement from '../../../base/GirafeHTMLElement.js';
+import IGirafePanel from '../../../tools/state/igirafepanel.js';
+declare class NewsPanelComponent extends GirafeHTMLElement implements IGirafePanel {
+    template: () => import("uhtml").Hole;
+    isPanelVisible: boolean;
+    panelTitle: string;
+    panelTogglePath: string;
+    entries: FeedEntry[];
+    constructor();
+    saveLastViewDate(): void;
+    loadLastViewDate(): void;
+    togglePanel(visible: boolean): void;
+    render(): void;
+    private initializeNewsState;
+    protected connectedCallback(): void;
+}
+export default NewsPanelComponent;

package/components/news/news-panel/component.js

@@ -0,0 +1,66 @@
+import { htmlFor as uHtmlFor } from 'uhtml/keyed';
+import { html as uHtml } from 'uhtml';
+import GirafeHTMLElement from '../../../base/GirafeHTMLElement.js';
+import { loadFeeds } from './newsfeedutils.js';
+class NewsPanelComponent extends GirafeHTMLElement {
+    template = () => {
+        return uHtml `<style>
+#panel{box-sizing:border-box;flex-direction:column;min-width:20rem;height:100%;min-height:0;display:flex;overflow:auto}#content{background:var(--bkg-color);box-sizing:border-box;width:100%;min-width:0;color:var(--text-color);flex:auto;margin:0;padding:1.5rem}.news-item{box-sizing:border-box;background-color:#c8d1d12b;border:1px solid #d5d5d5;width:100%;min-width:0;margin:16px 0;padding:15px 13px;box-shadow:0 0 5px #0000001f}.news-header{justify-content:space-between;align-items:flex-start;gap:1rem;display:flex}.news-title{flex:auto;min-width:0;font-size:14px}.news-meta{text-align:right;color:#6b7280;white-space:nowrap;flex:none;font-size:.8rem;line-height:1.3}.news-date{font-weight:500}.news-age{opacity:.8}.news-description{margin-top:.75rem}.news-details{width:100%;min-width:0;margin-top:.75rem}.details-content{box-sizing:border-box;contain:inline-size;width:100%;min-width:0;max-width:100%;overflow-x:auto}.news-details-toggle{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:none;padding:6px}.news-details-toggle:hover{background-color:#fdf6c3ba}
+</style><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>
+<div id="panel"><div id="content">${this.entries.map(f => uHtmlFor(f, f.id) `<div class="news-item"><div class="news-header"><div class="news-title"><b>${f.title}</b></div><div class="news-meta"><div class="news-date">${f.date?.toLocaleDateString(undefined, { day: '2-digit', month: 'short', year: 'numeric' }) ?? ''}</div></div></div><div class="news-description">${this.htmlUnsafe(f.description ?? '')}</div>${f.content ? uHtml `<details class="news-details"><summary class="news-details-toggle" i18n="show_content">Show content</summary><div class="details-content">${this.htmlUnsafe(f.content ?? '')}</div></details>` : ''}</div>`)}</div></div>`;
+    };
+    isPanelVisible = false;
+    panelTitle = 'news';
+    panelTogglePath = 'interface.newsPanelVisible'; // Subscribes to changes in the state manager's newsPanelVisible property
+    entries = [];
+    constructor() {
+        super('news-panel');
+    }
+    saveLastViewDate() {
+        const currentTimestamp = Date.now();
+        this.context.userDataManager.saveUserData('lastViewDate', currentTimestamp);
+        this.context.stateManager.state.news.lastViewDate = currentTimestamp;
+    }
+    loadLastViewDate() {
+        const raw = this.context.userDataManager.getUserData('lastViewDate');
+        const lastViewDate = Number(raw);
+        this.context.stateManager.state.news.lastViewDate = Number.isFinite(lastViewDate) ? lastViewDate : 0;
+    }
+    togglePanel(visible) {
+        this.isPanelVisible = visible;
+        if (visible) {
+            this.saveLastViewDate();
+        }
+        this.render();
+    }
+    render() {
+        if (this.isPanelVisible) {
+            super.render();
+        }
+        else {
+            this.hide();
+        }
+        super.girafeTranslate();
+    }
+    async initializeNewsState() {
+        if (!this.context.configManager.Config.news) {
+            return;
+        }
+        this.loadLastViewDate();
+        const urls = this.context.configManager.Config.news.urls;
+        this.entries = await loadFeeds(urls);
+        // Update state manager
+        const lastPublishDate = this.entries.length > 0 ? (this.entries[0].date?.getTime() ?? 0) : 0;
+        this.context.stateManager.state.news.lastPublishDate = lastPublishDate;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.context.configManager.Config.news) {
+            void this.initializeNewsState();
+            this.render();
+        }
+    }
+}
+export default NewsPanelComponent;

package/components/news/news-panel/newsfeedutils.d.ts

@@ -0,0 +1,10 @@
+export type FeedEntry = {
+    id: string;
+    title: string;
+    date: Date | null;
+    description: string;
+    content: string;
+    link: string;
+    author: string;
+};
+export declare function loadFeeds(urls: string[]): Promise<FeedEntry[]>;

package/components/news/news-panel/newsfeedutils.js

@@ -0,0 +1,99 @@
+import DOMPurify from 'dompurify';
+export async function loadFeeds(urls) {
+    const entries = [];
+    for (const url of urls) {
+        const res = await fetch(url);
+        const xmlText = await res.text();
+        const parser = new DOMParser();
+        const xml = parser.parseFromString(xmlText, 'text/xml');
+        const feedType = detectFeedType(xml);
+        if (feedType === 'rss') {
+            entries.push(...parseRssFeed(xml));
+        }
+        else if (feedType === 'atom') {
+            entries.push(...parseAtomFeed(xml));
+        }
+        else {
+            console.warn(`Invalid feed URL or unknown feed format: ${url}`);
+        }
+    }
+    entries.sort((a, b) => (b.date?.getTime() ?? 0) - (a.date?.getTime() ?? 0));
+    return entries;
+}
+function detectFeedType(xml) {
+    const root = xml.documentElement;
+    const tagName = root.tagName.toLowerCase();
+    if (tagName.includes('rss')) {
+        return 'rss';
+    }
+    if (tagName.includes('feed')) {
+        return 'atom';
+    }
+    if (tagName.includes('rdf')) {
+        return 'rss'; // RSS 1.0
+    }
+    return 'unknown';
+}
+function parseRssFeed(xml) {
+    return Array.from(xml.querySelectorAll('item')).map((entry, index) => {
+        const title = entry.querySelector('title')?.textContent?.trim() || '';
+        const pubDateText = entry.querySelector('pubDate')?.textContent?.trim() || '';
+        const date = pubDateText ? new Date(pubDateText) : null;
+        const description = getSanitizedHtml(entry.querySelector('description'));
+        const contentNode = entry.getElementsByTagNameNS('http://purl.org/rss/1.0/modules/content/', 'encoded')[0];
+        const content = getSanitizedHtml(contentNode);
+        const link = entry.querySelector('link')?.textContent?.trim() || '';
+        const author = entry.querySelector('author')?.textContent?.trim() ||
+            entry.getElementsByTagName('dc:creator')[0]?.textContent?.trim() ||
+            '';
+        const guid = entry.querySelector('guid')?.textContent?.trim() || '';
+        const id = guid || link || `rss-${index}`;
+        return {
+            id,
+            title,
+            date,
+            description,
+            content,
+            link,
+            author
+        };
+    });
+}
+function parseAtomFeed(xml) {
+    return Array.from(xml.querySelectorAll('entry')).map((entry, index) => {
+        const title = entry.querySelector('title')?.textContent?.trim() || '';
+        const id = entry.querySelector('id')?.textContent?.trim() || `atom-${index}`;
+        const updated = entry.querySelector('updated')?.textContent?.trim() || '';
+        const published = entry.querySelector('published')?.textContent?.trim() || '';
+        const date = updated || published ? new Date(updated || published) : null;
+        const summary = getSanitizedHtml(entry.querySelector('summary'));
+        const content = getSanitizedHtml(entry.querySelector('content'));
+        const description = summary || content;
+        const author = entry.querySelector('author > name')?.textContent?.trim() ||
+            entry.querySelector('author')?.textContent?.trim() ||
+            '';
+        const link = entry.querySelector('link[rel="alternate"]')?.getAttribute('href') ||
+            entry.querySelector('link')?.getAttribute('href') ||
+            '';
+        return {
+            id,
+            title,
+            date,
+            description,
+            content,
+            link,
+            author
+        };
+    });
+}
+function sanitizeHtml(value) {
+    return DOMPurify.sanitize(value, {
+        USE_PROFILES: { html: true },
+        FORBID_TAGS: ['style', 'script', 'iframe', 'object', 'embed'],
+        FORBID_ATTR: ['style', 'onerror', 'onload', 'onclick']
+    });
+}
+function getSanitizedHtml(node) {
+    const raw = node?.textContent?.trim() || '';
+    return raw ? sanitizeHtml(raw) : '';
+}

package/package.json

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

package/templates/index.html

@@ -94,6 +94,7 @@
             </p>
           </div> -->
         </girafe-search>
+        <girafe-news-button plugin="config:news"></girafe-news-button>
         <girafe-oauth></girafe-oauth>
         <girafe-nav-history></girafe-nav-history>
         <girafe-video-record></girafe-video-record>
@@ -136,6 +137,7 @@
             <girafe-print slot="main"></girafe-print>
             <girafe-ext-layer slot="main"></girafe-ext-layer>
             <girafe-cross-section-settings slot="main"></girafe-cross-section-settings>
+            <girafe-news slot="main"></girafe-news>
             <girafe-edit slot="main"></girafe-edit>
             <girafe-layout slot="main"></girafe-layout>
             <girafe-about slot="main"></girafe-about>

package/templates/public/about.json

@@ -1 +1 @@
-{"version":"1.1.0-dev.2418238104", "build":"2418238104", "date":"30/03/2026"}
+{"version":"1.1.0-dev.2433737633", "build":"2433737633", "date":"07/04/2026"}

package/tools/app/geogirafeapp.js

@@ -21,6 +21,8 @@ import MapComponent from '../../components/map/component.js';
 import MenuButtonComponent from '../../components/menubutton/component.js';
 import ModalsComponent from '../../components/modals/component.js';
 import NavigationComponent from '../../components/navigation/component.js';
+import NewsButtonComponent from '../../components/news/news-button/component.js';
+import NewsPanelComponent from '../../components/news/news-panel/component.js';
 import OauthComponent from '../../components/auth/component.js';
 import PrintComponent from '../../components/print/component.js';
 import PrototypeBannerComponent from '../../components/prototypebanner/component.js';
@@ -110,6 +112,8 @@ export default class GeoGirafeApp {
         customElements.define('girafe-menu-button', MenuButtonComponent);
         customElements.define('girafe-modals', ModalsComponent);
         customElements.define('girafe-nav-history', NavigationComponent);
+        customElements.define('girafe-news-button', NewsButtonComponent);
+        customElements.define('girafe-news', NewsPanelComponent);
         customElements.define('girafe-print', PrintComponent);
         customElements.define('girafe-prototype-banner', PrototypeBannerComponent);
         customElements.define('girafe-query-builder', QueryBuilderComponent);

package/tools/configuration/girafeconfig.d.ts

@@ -117,6 +117,10 @@ declare class GirafeConfig {
     lidar?: {
         url: string;
     };
+    news?: {
+        urls: string[];
+        autoDisplay: boolean;
+    };
     externalLayers?: {
         predefinedSources: {
             label: string;
@@ -257,6 +261,7 @@ declare class GirafeConfig {
     private initConfigTreeview;
     private initConfigBasemaps;
     private initConfigLidar;
+    private initConfigNews;
     private initConfigCsv;
     private initConfigMetadata;
     private initConfigInfoWindow;

package/tools/configuration/girafeconfig.js

@@ -15,6 +15,7 @@ class GirafeConfig {
     map;
     map3d;
     lidar;
+    news;
     externalLayers;
     contextmenu;
     crs;
@@ -52,6 +53,7 @@ class GirafeConfig {
         this.drawing = this.initConfigDrawing(config);
         this.projections = this.initConfigProjections(config);
         this.map = this.initConfigMap(config);
+        this.news = this.initConfigNews(config);
         this.lidar = this.initConfigLidar(config);
         this.csv = this.initConfigCsv(config);
         this.metadata = this.initConfigMetadata(config);
@@ -104,6 +106,14 @@ class GirafeConfig {
             // We just display a warning in the console
             console.warn(e);
         }
+        try {
+            this.news = this.initConfigNews(config);
+        }
+        catch (e) {
+            // The application can be started even if the news is not correctly configured
+            // We just display a warning in the console
+            console.warn(e);
+        }
     }
     initConfigProjections(config) {
         if (!config.projections) {
@@ -229,6 +239,9 @@ class GirafeConfig {
     initConfigLidar(config) {
         return config.lidar;
     }
+    initConfigNews(config) {
+        return config.news;
+    }
     initConfigCsv(config) {
         const defaultConfig = {
             encoding: 'utf-8',

package/tools/main.d.ts

@@ -80,7 +80,7 @@ export type { MapMarker } from './state/mapposition.js';
 export { default as MapPosition } from './state/mapposition.js';
 export type { InitialSelectionQuery } from './state/objectselection.js';
 export { default as ObjectSelection } from './state/objectselection.js';
-export type { ThemesConfig, InfoBoxContent, Lidar, InfoWindow, ExtendedState } from './state/state.js';
+export type { ThemesConfig, InfoBoxContent, Lidar, News, InfoWindow, ExtendedState } from './state/state.js';
 export { default as State } from './state/state.js';
 export { default as StateToggleManager } from './state/stateToggleManager.js';
 export type { Callback } from './state/statemanager.js';

package/tools/state/graphicalInterface.d.ts

@@ -7,6 +7,7 @@ export default class GraphicalInterface {
     printPanelVisible: boolean;
     extLayerPanelVisible: boolean;
     crossSectionPanelVisible: boolean;
+    newsPanelVisible: boolean;
     editPanelVisible: boolean;
     sharePanelVisible: boolean;
     selectionComponentVisible: boolean;

package/tools/state/graphicalInterface.js

@@ -7,6 +7,7 @@ export default class GraphicalInterface {
     printPanelVisible = false;
     extLayerPanelVisible = false;
     crossSectionPanelVisible = false;
+    newsPanelVisible = false;
     editPanelVisible = false;
     sharePanelVisible = false;
     selectionComponentVisible = false;

package/tools/state/state.d.ts

@@ -38,6 +38,11 @@ export type Lidar = {
     line: OlGeomLineString | null;
     drawActive: boolean;
 };
+export type News = {
+    urls: string[] | null;
+    lastViewDate: number;
+    lastPublishDate: number;
+};
 type Functionalities = {
     authorized_plugins?: string[];
 };
@@ -97,6 +102,7 @@ export default class State {
     userInteractionListeners: GgUserInteractionListener[];
     language: string | null;
     lidar: Lidar;
+    news: News;
     loading: boolean;
     application: {
         isConfigurationLoaded: boolean;

package/tools/state/state.js

@@ -50,6 +50,11 @@ export default class State {
         line: null,
         drawActive: false
     };
+    news = {
+        urls: null,
+        lastViewDate: 0,
+        lastPublishDate: 0
+    };
     // Is the application currently loading map data?
     loading = false;
     // Global variables that represent the state of the application.

package/tools/state/stateToggleManager.spec.js

@@ -30,7 +30,8 @@ describe('StateToggleManager class', () => {
         new TestPanel('drawing', 'interface.drawingPanelVisible'),
         new TestPanel('print', 'interface.printPanelVisible'),
         new TestPanel('userprefs', 'interface.userPreferencesPanelVisible'),
-        new TestPanel('share', 'interface.sharePanelVisible')
+        new TestPanel('share', 'interface.sharePanelVisible'),
+        new TestPanel('news', 'interface.newsPanelVisible')
     ];
     beforeEach(() => {
         stateToggleManager = new StateToggleManager(panels, stateManager);
@@ -43,12 +44,14 @@ describe('StateToggleManager class', () => {
         expect(state.interface.printPanelVisible).toBeFalsy();
         expect(state.interface.userPreferencesPanelVisible).toBeFalsy();
         expect(state.interface.sharePanelVisible).toBeFalsy();
+        expect(state.interface.newsPanelVisible).toBeFalsy();
         state.interface.userPreferencesPanelVisible = true;
         expect(state.interface.helpVisible).toBeFalsy();
         expect(state.interface.drawingPanelVisible).toBeFalsy();
         expect(state.interface.printPanelVisible).toBeFalsy();
         expect(state.interface.userPreferencesPanelVisible).toBeTruthy();
         expect(state.interface.sharePanelVisible).toBeFalsy();
+        expect(state.interface.newsPanelVisible).toBeFalsy();
     });
     it('deactivateAll', () => {
         const state = stateManager.state;
@@ -58,5 +61,6 @@ describe('StateToggleManager class', () => {
         expect(state.interface.printPanelVisible).toBeFalsy();
         expect(state.interface.userPreferencesPanelVisible).toBeFalsy();
         expect(state.interface.sharePanelVisible).toBeFalsy();
+        expect(state.interface.newsPanelVisible).toBeFalsy();
     });
 });