feat: Add skip unsaved changes confirmation (#13065)

- Added a confirmation popup when the user clicks skip if there are unsaved changes.

Closes: #13050

weblate/static/editor/base.js

@@ -30,6 +30,7 @@ WLT.Utils = (() => ({
 
 WLT.Editor = (() => {
   let lastEditor = null;
+  let hasChanges = false;
 
   function EditorBase() {
     const translationAreaSelector = ".translation-editor";
@@ -40,6 +41,7 @@ WLT.Editor = (() => {
 
     this.$editor.on("input", translationAreaSelector, (e) => {
       WLT.Utils.markTranslated($(e.target).closest("form"));
+      hasChanges = true;
     });
 
     this.$editor.on("focusin", translationAreaSelector, function () {
@@ -103,6 +105,7 @@ WLT.Editor = (() => {
         });
       }
       WLT.Utils.markFuzzy($this.closest("form"));
+      hasChanges = true;
       return false;
     });
 
@@ -114,6 +117,7 @@ WLT.Editor = (() => {
 
       container.find(".translation-editor").attr("dir", direction);
       container.find(".highlighted-output").attr("dir", direction);
+      hasChanges = true;
     });
 
     /* Special characters */
@@ -126,12 +130,22 @@ WLT.Editor = (() => {
         .find(".translation-editor")
         .insertAtCaret(text);
       e.preventDefault();
+      hasChanges = true;
     });
 
     this.initHighlight();
     this.init();
 
     this.$translationArea[0].focus();
+
+    // Skip confirmation
+    this.$editor.on("click", ".skip", (e) => {
+      if (hasChanges) {
+        return confirm(
+          gettext("You have unsaved changes. Are you sure you want to skip?"),
+        );
+      }
+    });
   }
 
   EditorBase.prototype.init = () => {};
@@ -145,6 +159,7 @@ WLT.Editor = (() => {
       const $this = $(this);
       insertEditor(this.getAttribute("data-value"), $this);
       e.preventDefault();
+      hasChanges = true;
     });
 
     /* and shortcuts */

weblate/templates/translate.html

@@ -234,7 +234,7 @@ <h4 class="panel-title">
       {% endif %}
     >{% icon "suggest.svg" %} {% trans "Suggest" %}</button>
     {% endif %}
-    <a class="btn btn-warning btn-spaced" href="{{ next_unit_url }}" rel="next">{% if LANGUAGE_BIDI %}{% icon "rewind.svg" %}{% else %}{% icon "fast-forward.svg" %}{% endif %} {% trans "Skip" %}</a>
+    <a class="btn btn-warning btn-spaced skip" href="{{ next_unit_url }}" rel="next">{% if LANGUAGE_BIDI %}{% icon "rewind.svg" %}{% else %}{% icon "fast-forward.svg" %}{% endif %} {% trans "Skip" %}</a>
     </div>
   </div>
 </div>