From ecc78da55a3560d76cdc277f1c7439a263ee84ff Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Fri, 29 Mar 2024 21:51:44 +0300 Subject: [PATCH] Remove jQuery class from the diff view (#30176) - Switched from jQuery class functions to plain JavaScript `classList` - Tested the diff view functionality and it works as before --------- Signed-off-by: Yarden Shoham Co-authored-by: silverwind (cherry picked from commit c487a32bcd093affe3284282ea279d97f52a867f) --- web_src/js/features/repo-diff.js | 55 ++++++++++++++++++-------------- web_src/js/utils/dom.js | 2 +- 2 files changed, 32 insertions(+), 25 deletions(-) diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js index b704e91bd..e5723af04 100644 --- a/web_src/js/features/repo-diff.js +++ b/web_src/js/features/repo-diff.js @@ -7,7 +7,7 @@ import {validateTextareaNonEmpty} from './comp/ComboMarkdownEditor.js'; import {initViewedCheckboxListenerFor, countAndUpdateViewedFiles, initExpandAndCollapseFilesButton} from './pull-view-file.js'; import {initImageDiff} from './imagediff.js'; import {showErrorToast} from '../modules/toast.js'; -import {submitEventSubmitter} from '../utils/dom.js'; +import {submitEventSubmitter, queryElemSiblings, hideElem, showElem} from '../utils/dom.js'; import {POST, GET} from '../modules/fetch.js'; const {pageData, i18n} = window.config; @@ -16,7 +16,6 @@ function initRepoDiffReviewButton() { const reviewBox = document.getElementById('review-box'); if (!reviewBox) return; - const $reviewBox = $(reviewBox); const counter = reviewBox.querySelector('.review-comments-counter'); if (!counter) return; @@ -27,23 +26,27 @@ function initRepoDiffReviewButton() { const num = parseInt(counter.getAttribute('data-pending-comment-number')) + 1 || 1; counter.setAttribute('data-pending-comment-number', num); counter.textContent = num; - // Force the browser to reflow the DOM. This is to ensure that the browser replay the animation - $reviewBox.removeClass('pulse'); - $reviewBox.width(); - $reviewBox.addClass('pulse'); + + reviewBox.classList.remove('pulse'); + requestAnimationFrame(() => { + reviewBox.classList.add('pulse'); + }); }); }); } function initRepoDiffFileViewToggle() { $('.file-view-toggle').on('click', function () { - const $this = $(this); - $this.parent().children().removeClass('active'); - $this.addClass('active'); + for (const el of queryElemSiblings(this)) { + el.classList.remove('active'); + } + this.classList.add('active'); - const $target = $($this.data('toggle-selector')); - $target.parent().children().addClass('tw-hidden'); - $target.removeClass('tw-hidden'); + const target = document.querySelector(this.getAttribute('data-toggle-selector')); + if (!target) return; + + hideElem(queryElemSiblings(target)); + showElem(target); }); } @@ -57,9 +60,9 @@ function initRepoDiffConversationForm() { return; } - if ($form.hasClass('is-loading')) return; + if (e.target.classList.contains('is-loading')) return; try { - $form.addClass('is-loading'); + e.target.classList.add('is-loading'); const formData = new FormData($form[0]); // If the form is submitted by a button, append the button's name and value to the form data. @@ -76,10 +79,14 @@ function initRepoDiffConversationForm() { const {path, side, idx} = $newConversationHolder.data(); $form.closest('.conversation-holder').replaceWith($newConversationHolder); + let selector; if ($form.closest('tr').data('line-type') === 'same') { - $(`[data-path="${path}"] .add-code-comment[data-idx="${idx}"]`).addClass('tw-invisible'); + selector = `[data-path="${path}"] .add-code-comment[data-idx="${idx}"]`; } else { - $(`[data-path="${path}"] .add-code-comment[data-side="${side}"][data-idx="${idx}"]`).addClass('tw-invisible'); + selector = `[data-path="${path}"] .add-code-comment[data-side="${side}"][data-idx="${idx}"]`; + } + for (const el of document.querySelectorAll(selector)) { + el.classList.add('tw-invisible'); } $newConversationHolder.find('.dropdown').dropdown(); initCompReactionSelector($newConversationHolder); @@ -87,7 +94,7 @@ function initRepoDiffConversationForm() { console.error('error when submitting conversation', e); showErrorToast(i18n.network_error); } finally { - $form.removeClass('is-loading'); + e.target.classList.remove('is-loading'); } }); @@ -147,13 +154,13 @@ function onShowMoreFiles() { } export async function loadMoreFiles(url) { - const $target = $('a#diff-show-more-files'); - if ($target.hasClass('disabled') || pageData.diffFileInfo.isLoadingNewData) { + const target = document.querySelector('a#diff-show-more-files'); + if (target?.classList.contains('disabled') || pageData.diffFileInfo.isLoadingNewData) { return; } pageData.diffFileInfo.isLoadingNewData = true; - $target.addClass('disabled'); + target?.classList.add('disabled'); try { const response = await GET(url); @@ -170,7 +177,7 @@ export async function loadMoreFiles(url) { console.error('Error:', error); showErrorToast('An error occurred while loading more files.'); } finally { - $target.removeClass('disabled'); + target?.classList.remove('disabled'); pageData.diffFileInfo.isLoadingNewData = false; } } @@ -187,11 +194,11 @@ function initRepoDiffShowMore() { e.preventDefault(); const $target = $(e.target); - if ($target.hasClass('disabled')) { + if (e.target.classList.contains('disabled')) { return; } - $target.addClass('disabled'); + e.target.classList.add('disabled'); const url = $target.data('href'); @@ -207,7 +214,7 @@ function initRepoDiffShowMore() { } catch (error) { console.error('Error:', error); } finally { - $target.removeClass('disabled'); + e.target.classList.remove('disabled'); } }); } diff --git a/web_src/js/utils/dom.js b/web_src/js/utils/dom.js index a96d40ced..65302becf 100644 --- a/web_src/js/utils/dom.js +++ b/web_src/js/utils/dom.js @@ -51,7 +51,7 @@ export function isElemHidden(el) { return res[0]; } -export function queryElemSiblings(el, selector) { +export function queryElemSiblings(el, selector = '*') { return Array.from(el.parentNode.children).filter((child) => child !== el && child.matches(selector)); }