refactor: replace jquery.are-you-sure with first-party code (#39233)

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

web_src/js/features/common-form.ts

@@ -1,17 +1,7 @@
-import {applyAreYouSure, initAreYouSure} from '../vendor/jquery.are-you-sure.ts';
 import {handleGlobalEnterQuickSubmit} from './comp/QuickSubmit.ts';
 import {queryElems} from '../utils/dom.ts';
 import {initComboMarkdownEditor} from './comp/ComboMarkdownEditor.ts';
 
-export function initGlobalFormDirtyLeaveConfirm() {
-  initAreYouSure(window.jQuery);
-  // Warn users that try to leave a page after entering data into a form.
-  // Except on sign-in pages, and for forms marked as 'ignore-dirty'.
-  if (!document.querySelector('.page-content.user.signin')) {
-    applyAreYouSure('form:not(.ignore-dirty)');
-  }
-}
-
 export function initGlobalEnterQuickSubmit() {
   document.addEventListener('keydown', (e) => {
     if (e.isComposing) return;

web_src/js/features/repo-editor.ts

@@ -5,7 +5,7 @@ import {hideElem, queryElems, showElem, createElementFromHTML, onInputDebounce}
 import {POST} from '../modules/fetch.ts';
 import {initDropzone} from './dropzone.ts';
 import {confirmModal} from './comp/ConfirmModal.ts';
-import {applyAreYouSure, ignoreAreYouSure} from '../vendor/jquery.are-you-sure.ts';
+import {applyAreYouSure, ignoreAreYouSure} from '../modules/are-you-sure.ts';
 import {submitFormFetchAction} from '../modules/fetch-action.ts';
 import {dirname} from '../utils.ts';
 import {pathEscapeSegments} from '../utils/url.ts';
@@ -181,24 +181,10 @@ export function initRepoEditor() {
   const editArea = document.querySelector<HTMLTextAreaElement>('.page-content.repository.editor textarea#edit_area');
   if (!editArea) return;
 
-  // Using events from https://github.com/codedance/jquery.AreYouSure#advanced-usage
-  // to enable or disable the commit button
   const commitButton = document.querySelector<HTMLButtonElement>('#commit-button')!;
-  const dirtyFileClass = 'dirty-file';
-
-  const syncCommitButtonState = () => {
-    const dirty = elForm.classList.contains(dirtyFileClass);
-    commitButton.disabled = !dirty;
-  };
-  // Registering a custom listener for the file path and the file content
-  // FIXME: it is not quite right here (old bug), it causes double-init, the global areYouSure "dirty" class will also be added
-  applyAreYouSure(elForm, {
-    silent: true,
-    dirtyClass: dirtyFileClass,
-    fieldSelector: ':input:not(.commit-form-wrapper :input)',
-    change: syncCommitButtonState,
-  });
-  syncCommitButtonState(); // disable the "commit" button when no content changes
+  commitButton.disabled = true;
+  elForm.querySelector('.commit-form-wrapper')!.classList.add('ays-ignore'); // commit form fields don't count
+  applyAreYouSure(elForm, (dirty) => commitButton.disabled = !dirty);
 
   initEditPreviewTab(elForm);
 
@@ -207,7 +193,7 @@ export function initRepoEditor() {
     filenameInput.addEventListener('input', onInputDebounce(() => editor.updateFilename(filenameInput.value)));
 
     // Update the editor from query params, if available,
-    // only after the dirtyFileClass initialization
+    // only after the areYouSure initialization
     const params = new URLSearchParams(window.location.search);
     const value = params.get('value');
     if (value) {

web_src/js/features/repo-issue-edit.ts

@@ -6,7 +6,7 @@ import {hideElem, querySingleVisibleElem, showElem} from '../utils/dom.ts';
 import {errorMessage} from '../modules/errors.ts';
 import {triggerUploadStateChanged} from './comp/EditorUpload.ts';
 import {convertHtmlToMarkdown} from '../markup/html2markdown.ts';
-import {applyAreYouSure, reinitializeAreYouSure} from '../vendor/jquery.are-you-sure.ts';
+import {applyAreYouSure} from '../modules/are-you-sure.ts';
 
 async function tryOnEditContent(e: Event) {
   const clickTarget = (e.target as HTMLElement).closest('.edit-content');
@@ -52,7 +52,7 @@ async function tryOnEditContent(e: Event) {
         return;
       }
 
-      reinitializeAreYouSure(editContentZone.querySelector('form')); // the form is no longer dirty
+      applyAreYouSure(editContentZone.querySelector('form')!); // the form is no longer dirty
       editContentZone.setAttribute('data-content-version', data.contentVersion);
 
       // replace the render content with new one, to trigger re-initialization of all features

web_src/js/features/repo-issue.ts

@@ -16,7 +16,7 @@ import {showErrorToast} from '../modules/toast.ts';
 import {initRepoIssueSidebar} from './repo-issue-sidebar.ts';
 import {fomanticQuery} from '../modules/fomantic/base.ts';
 import {showFomanticModal} from '../modules/fomantic/modal.ts';
-import {ignoreAreYouSure} from '../vendor/jquery.are-you-sure.ts';
+import {ignoreAreYouSure} from '../modules/are-you-sure.ts';
 import {registerGlobalInitFunc} from '../modules/observer.ts';
 import type {FomanticApiResponse} from '../types.ts';