From 757567d3bd33efacdb224b2f3f22275e26321d8e Mon Sep 17 00:00:00 2001
From: Yarden Shoham <git@yardenshoham.com>
Date: Sat, 24 Feb 2024 21:11:51 +0200
Subject: [PATCH] Remove jQuery from the Unicode escape button (#29369)

- Switched to plain JavaScript
- Tested the Unicode escape button functionality and it works as before

# Demo using JavaScript without jQuery

![action](https://github.com/go-gitea/gitea/assets/20454870/664f0ced-876b-4cb7-a668-bd62169fc843)

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
(cherry picked from commit c86d033a3ec0514efcd9524d03dce1b6551e487f)
---
 web_src/js/features/repo-unicode-escape.js | 46 ++++++++++------------
 web_src/js/utils/dom.js                    |  4 ++
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/web_src/js/features/repo-unicode-escape.js b/web_src/js/features/repo-unicode-escape.js
index 6a201ec4d1..d878532001 100644
--- a/web_src/js/features/repo-unicode-escape.js
+++ b/web_src/js/features/repo-unicode-escape.js
@@ -1,31 +1,27 @@
-import $ from 'jquery';
-import {hideElem, showElem} from '../utils/dom.js';
+import {hideElem, queryElemSiblings, showElem, toggleElem} from '../utils/dom.js';
 
 export function initUnicodeEscapeButton() {
-  $(document).on('click', '.escape-button', (e) => {
+  document.addEventListener('click', (e) => {
+    const btn = e.target.closest('.escape-button, .unescape-button, .toggle-escape-button');
+    if (!btn) return;
+
     e.preventDefault();
-    $(e.target).parents('.file-content, .non-diff-file-content').find('.file-code, .file-view').addClass('unicode-escaped');
-    hideElem($(e.target));
-    showElem($(e.target).siblings('.unescape-button'));
-  });
-  $(document).on('click', '.unescape-button', (e) => {
-    e.preventDefault();
-    $(e.target).parents('.file-content, .non-diff-file-content').find('.file-code, .file-view').removeClass('unicode-escaped');
-    hideElem($(e.target));
-    showElem($(e.target).siblings('.escape-button'));
-  });
-  $(document).on('click', '.toggle-escape-button', (e) => {
-    e.preventDefault();
-    const fileContent = $(e.target).parents('.file-content, .non-diff-file-content');
-    const fileView = fileContent.find('.file-code, .file-view');
-    if (fileView.hasClass('unicode-escaped')) {
-      fileView.removeClass('unicode-escaped');
-      hideElem(fileContent.find('.unescape-button'));
-      showElem(fileContent.find('.escape-button'));
-    } else {
-      fileView.addClass('unicode-escaped');
-      showElem(fileContent.find('.unescape-button'));
-      hideElem(fileContent.find('.escape-button'));
+
+    const fileContent = btn.closest('.file-content, .non-diff-file-content');
+    const fileView = fileContent?.querySelectorAll('.file-code, .file-view');
+    if (btn.matches('.escape-button')) {
+      for (const el of fileView) el.classList.add('unicode-escaped');
+      hideElem(btn);
+      showElem(queryElemSiblings(btn, '.unescape-button'));
+    } else if (btn.matches('.unescape-button')) {
+      for (const el of fileView) el.classList.remove('unicode-escaped');
+      hideElem(btn);
+      showElem(queryElemSiblings(btn, '.escape-button'));
+    } else if (btn.matches('.toggle-escape-button')) {
+      const isEscaped = fileView[0]?.classList.contains('unicode-escaped');
+      for (const el of fileView) el.classList.toggle('unicode-escaped', !isEscaped);
+      toggleElem(fileContent.querySelectorAll('.unescape-button'), !isEscaped);
+      toggleElem(fileContent.querySelectorAll('.escape-button'), isEscaped);
     }
   });
 }
diff --git a/web_src/js/utils/dom.js b/web_src/js/utils/dom.js
index 1f6066acab..f9f5737554 100644
--- a/web_src/js/utils/dom.js
+++ b/web_src/js/utils/dom.js
@@ -51,6 +51,10 @@ export function isElemHidden(el) {
   return res[0];
 }
 
+export function queryElemSiblings(el, selector) {
+  return Array.from(el.parentNode.children).filter((child) => child !== el && child.matches(selector));
+}
+
 export function onDomReady(cb) {
   if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', cb);