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 <git@yardenshoham.com>
Co-authored-by: silverwind <me@silverwind.io>
(cherry picked from commit c487a32bcd093affe3284282ea279d97f52a867f)
This commit is contained in:
Yarden Shoham 2024-03-29 21:51:44 +03:00 committed by Gergely Nagy
parent 6d164224e9
commit ecc78da55a
No known key found for this signature in database
2 changed files with 32 additions and 25 deletions

View file

@ -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');
}
});
}

View file

@ -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));
}