From 757567d3bd33efacdb224b2f3f22275e26321d8e Mon Sep 17 00:00:00 2001 From: Yarden Shoham 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 Co-authored-by: wxiaoguang (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);