add i18n to idf-legend and idf-viewer

_layouts/default.html

@@ -8,7 +8,7 @@
     <div class="row">
       <div class="col">
         <h1 class="display-5" data-i18n="home.master">
-          Maitrisez le fonctionnement de votre bâtiment à travers son jumeau numérique
+          Maitrisez le fonctionnement de votre bâtiment à travers un jumeau numérique
         </h1>
         <idf-legend viewer="building"></idf-legend>
       </div>
@@ -20,7 +20,6 @@ <h1 class="display-5" data-i18n="home.master">
   <script type="module" src="/lib/modules/components/idf-legend.js"></script>
   <script>
     const models = [
-      'example.idf',
       'bardoux.idf',
       'agence_acf.idf',
     ];

lib/modules/components/idf-legend.js

@@ -1,4 +1,6 @@
 /** Standalone legend for an <idf-viewer> element. */
+import { t } from "../locales/locales.js";
+
 const TEMPLATE = /* html */ `
 <style>
   :host {
@@ -71,24 +73,44 @@ const TEMPLATE = /* html */ `
 </style><div class="panel" hidden></div>`;
 
 export class IdfLegend extends HTMLElement {
-  static get observedAttributes() { return ['viewer']; }
+  static get observedAttributes() {
+    return ['viewer'];
+  }
   constructor() {
-    super(); this.attachShadow({ mode:'open' }); this.shadowRoot.innerHTML = TEMPLATE;
+    super(); this.attachShadow({ mode:'open' });
+    this.shadowRoot.innerHTML = TEMPLATE;
     this._panel = this.shadowRoot.querySelector('.panel'); this._viewer = null;
     this._onData = (event) => this._render(event.detail?.data ?? null);
   }
-  connectedCallback() { this._connectViewer(); }
-  disconnectedCallback() { this._disconnectViewer(); }
-  attributeChangedCallback(name, oldValue, newValue) { if (oldValue !== newValue && this.isConnected) this._connectViewer(); }
+  _onLocaleChanged = () => {
+    this._render(this._viewer?.getLegendData() ?? null);
+  }
+  connectedCallback() {
+    this._connectViewer();
+    document.addEventListener("obm-locale-changed", this._onLocaleChanged);
+  }
+  disconnectedCallback() {
+    this._disconnectViewer();
+    document.removeEventListener("obm-locale-changed", this._onLocaleChanged);
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue !== newValue && this.isConnected) this._connectViewer();
+  }
   _connectViewer() {
     this._disconnectViewer();
     const id = this.getAttribute('viewer');
     this._viewer = id ? this.ownerDocument.getElementById(id) : this.parentElement?.querySelector('idf-viewer');
-    if (!this._viewer || this._viewer.localName !== 'idf-viewer') { this._render(null); return; }
+    if (!this._viewer || this._viewer.localName !== 'idf-viewer') {
+      this._render(null);
+      return;
+    }
     this._viewer.addEventListener('legend-data-changed', this._onData);
     this._render(this._viewer.getLegendData?.() ?? null);
   }
-  _disconnectViewer() { this._viewer?.removeEventListener('legend-data-changed', this._onData); this._viewer = null; }
+  _disconnectViewer() {
+    this._viewer?.removeEventListener('legend-data-changed', this._onData);
+    this._viewer = null;
+  }
   _render(data) {
     if (!data || this._viewer?.hasAttribute('no-legend')) {
       this._panel.hidden = true;
@@ -100,7 +122,7 @@ export class IdfLegend extends HTMLElement {
     const zonesColumn = doc.createElement('section');
     zonesColumn.className = 'column';
     const zonesTitle = doc.createElement('h4');
-    zonesTitle.textContent = 'Zones';
+    zonesTitle.textContent = t("legend.zones");
     zonesColumn.append(zonesTitle);
 
     for (const zone of data.zones) {
@@ -131,7 +153,7 @@ export class IdfLegend extends HTMLElement {
     const keysColumn = doc.createElement('section');
     keysColumn.className = 'column';
     const keysTitle = doc.createElement('h4');
-    keysTitle.textContent = 'Légende';
+    keysTitle.textContent = t("legend.title");
     keysColumn.append(keysTitle);
 
     for (const key of data.keys) {