feat: add lock comment coordinate checkbox

assets/html/index.html

@@ -115,6 +115,10 @@ <h1 id="toggle-texts" data-id="toggle-texts-container">{{TEXT}}<span data-id="to
               <input id="user-comment" type="text" value="44.797°N / 1.542°E" placeholder="{{MAP_COMMENT_PLACEHOLDER}}" maxlength="42">
               <input type="color" id="comment-color" aria-label='Comment color' class="text-edit" data-type="comment">
             </div>
+            <div class="toggle-icon-wrapper">
+              <label for="lock-comment-coordinates">{{LOCK_COMMENT_COORD}}</label>
+              <input type="checkbox" id="lock-comment-coordinates">
+            </div>
           </div>
           <h1 id="toggle-icon" data-id="toggle-icon-container">{{ICON}}<span data-id="toggle-icon-container" class="toggle">▲</span></h1>
           <div id="toggle-icon-container" class="icon-container category expanded">

assets/nls/ch.json

@@ -31,7 +31,8 @@
     "mapSubtitle": "字幕",
     "mapSubtitlePlaceholder": "地图副标题",
     "mapComment": "评论",
-    "mapCommentPlaceholder": "关于地图的评论"
+    "mapCommentPlaceholder": "关于地图的评论",
+    "lockCommentCoordinates": "锁定评论至当前坐标"
   },
   "icon": {
     "title": "图标",

assets/nls/de.json

@@ -31,7 +31,8 @@
     "mapSubtitle": "Untertitel",
     "mapSubtitlePlaceholder": "Karten Untertitel",
     "mapComment": "Kommentar",
-    "mapCommentPlaceholder": "Ein Kommentar über die Karte"
+    "mapCommentPlaceholder": "Ein Kommentar über die Karte",
+    "lockCommentCoordinates": "Kommentar an aktuellen Koordinaten sperren"
   },
   "icon": {
     "title": "Symbol",

assets/nls/en.json

@@ -31,7 +31,8 @@
     "mapSubtitle": "Subtitle",
     "mapSubtitlePlaceholder": "Map subtitle",
     "mapComment": "Comment",
-    "mapCommentPlaceholder": "A comment about the map"
+    "mapCommentPlaceholder": "A comment about the map",
+    "lockCommentCoordinates": "Lock comment to current coordinates"
   },
   "icon": {
     "title": "Icon",

assets/nls/es.json

@@ -31,7 +31,8 @@
     "mapSubtitle": "Subtítulos",
     "mapSubtitlePlaceholder": "Subtítulo del mapa",
     "mapComment": "Comentario",
-    "mapCommentPlaceholder": "Comentar sobre el mapa"
+    "mapCommentPlaceholder": "Comentar sobre el mapa",
+    "lockCommentCoordinates": "Bloquear comentario en coordenadas actuales"
   },
   "icon": {
     "title": "Icono",

assets/nls/fr.json

@@ -31,7 +31,8 @@
     "mapSubtitle": "Sous-Titre",
     "mapSubtitlePlaceholder": "Sous-Titre de la carte",
     "mapComment": "Commentaire",
-    "mapCommentPlaceholder": "Commentaire à propos de la carte"
+    "mapCommentPlaceholder": "Commentaire à propos de la carte",
+    "lockCommentCoordinates": "Bloquer le commentaire sur les coordonnées actuelles"
   },
   "icon": {
     "title": "Icone",

assets/nls/it.json

@@ -31,7 +31,8 @@
     "mapSubtitle": "Sottotitolo",
     "mapSubtitlePlaceholder": "Sottotitolo della mappa",
     "mapComment": "Commento",
-    "mapCommentPlaceholder": "Un commento sulla mappa"
+    "mapCommentPlaceholder": "Un commento sulla mappa",
+    "lockCommentCoordinates": "Blocca il commento alle coordinate correnti"
   },
   "icon": {
     "title": "Icona",

assets/nls/ja.json

@@ -31,7 +31,8 @@
     "mapSubtitle": "字幕",
     "mapSubtitlePlaceholder": "地図のサブタイトル",
     "mapComment": "コメント",
-    "mapCommentPlaceholder": "地図についてのコメント"
+    "mapCommentPlaceholder": "地図についてのコメント",
+    "lockCommentCoordinates": "コメントを現在の座標にロックする"
   },
   "icon": {
     "title": "アイコン",

assets/nls/pl.json

@@ -31,7 +31,8 @@
       "mapSubtitle": "Podtytuł",
       "mapSubtitlePlaceholder": "Podtytuł mapy",
       "mapComment": "Komentarz",
-      "mapCommentPlaceholder": "Komentarz do mapy"
+      "mapCommentPlaceholder": "Komentarz do mapy",
+      "lockCommentCoordinates": "Zablokuj komentarz do bieżących współrzędnych"
     },
     "icon": {
       "title": "Ikona",

assets/nls/pt.json

@@ -31,7 +31,8 @@
     "mapSubtitle": "Legenda",
     "mapSubtitlePlaceholder": "Legenda do mapa",
     "mapComment": "Comentário",
-    "mapCommentPlaceholder": "Um comentário sobre o mapa"
+    "mapCommentPlaceholder": "Um comentário sobre o mapa",
+    "lockCommentCoordinates": "Bloquear comentário nas coordenadas atuais"
   },
   "icon": {
     "title": "Ícone",

assets/nls/ru.json

@@ -31,7 +31,8 @@
     "mapSubtitle": "Субтитры",
     "mapSubtitlePlaceholder": "Подзаголовок карты",
     "mapComment": "Комментарий",
-    "mapCommentPlaceholder": "Комментарий к карте"
+    "mapCommentPlaceholder": "Комментарий к карте",
+    "lockCommentCoordinates": "Прикрепить комментарий к текущим координатам"
   },
   "icon": {
     "title": "Икона",

src/js/MesseMap.js

@@ -204,6 +204,7 @@ class MesseMap {
           this.replaceString(document.body, '{{MAP_SUBTITLE_PLACEHOLDER}}', this._nls.text.mapSubtitlePlaceholder);
           this.replaceString(document.body, '{{MAP_COMMENT}}', this._nls.text.mapComment);
           this.replaceString(document.body, '{{MAP_COMMENT_PLACEHOLDER}}', this._nls.text.mapCommentPlaceholder);
+          this.replaceString(document.body, '{{LOCK_COMMENT_COORD}}', this._nls.text.lockCommentCoordinates);
 
           this.replaceString(document.body, '{{ICON}}', this._nls.icon.title);
           this.replaceString(document.body, '{{TOGGLE_ICON}}', this._nls.icon.toggle);
@@ -362,6 +363,7 @@ class MesseMap {
       document.getElementById('user-title').addEventListener('input', this._applyTexts.bind(this));
       document.getElementById('user-subtitle').addEventListener('input', this._applyTexts.bind(this));
       document.getElementById('user-comment').addEventListener('input', this._applyTexts.bind(this));
+      document.getElementById('lock-comment-coordinates').addEventListener('click', this._updateLockCommentCoordinates.bind(this));
       // Icon
       document.getElementById('toggle-icon').addEventListener('click', this._toggleCategory.bind(this));
       document.getElementById('activate-icon').addEventListener('change', this._toggleIcon.bind(this));
@@ -731,6 +733,7 @@ class MesseMap {
     document.getElementById('comment').innerHTML = document.getElementById('user-comment').value;
     if (e && e.target && e.target.id === 'user-comment') {
       this._commentEdited = true;
+      document.getElementById('lock-comment-coordinates').checked = false;
     }
   }
 
@@ -771,6 +774,32 @@ class MesseMap {
     if (!this._commentEdited) {
       const c = this._map.getCenter();
       document.getElementById('comment').innerHTML = `${this.precisionRound(c.lat % 90, 3)}°N / ${this.precisionRound(c.lng % 180, 3)}° E`;
+      document.getElementById('user-comment').value = document.getElementById('comment').innerHTML;
+    }
+  }
+
+
+  /**
+   * @method
+   * @name _updateLockCommentCoordinates
+   * @private
+   * @memberof MesseMap
+   * @author Arthur Beaulieu
+   * @since July 2024
+   * @description
+   * <blockquote>
+   * Callback when user clicked on lock comment coordinates toggle
+   * </blockquote>
+   * @param {Event} e - The input checkbox change
+   **/
+  _updateLockCommentCoordinates(e) {
+    // Restore comment edited boolean to false
+    this._commentEdited = false;
+    if (e.target.checked === true) {
+      // Force to set value to lat/lng
+      this._updateCommentLabel();
+      // Then lock again editing (auto compute lat/lng on move)
+      this._commentEdited = true;
     }
   }
 

src/scss/app/_layout.scss

@@ -217,6 +217,17 @@ aside {
           width: 2.5rem;
         }
       }
+
+      .toggle-icon-wrapper {
+        display: flex;
+        justify-content: space-between;
+        margin: 0 0 3rem;
+        padding: 0 1rem;
+
+        label {
+          margin: 0;
+        }
+      }
     }
 
     .icon-container {