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>
This commit is contained in:
Yarden Shoham 2024-03-29 21:51:44 +03:00 committed by GitHub
parent 56ac5f18e8
commit c487a32bcd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
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 {initViewedCheckboxListenerFor, countAndUpdateViewedFiles, initExpandAndCollapseFilesButton} from './pull-view-file.js';
import {initImageDiff} from './imagediff.js'; import {initImageDiff} from './imagediff.js';
import {showErrorToast} from '../modules/toast.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'; import {POST, GET} from '../modules/fetch.js';
const {pageData, i18n} = window.config; const {pageData, i18n} = window.config;
@ -16,7 +16,6 @@ function initRepoDiffReviewButton() {
const reviewBox = document.getElementById('review-box'); const reviewBox = document.getElementById('review-box');
if (!reviewBox) return; if (!reviewBox) return;
const $reviewBox = $(reviewBox);
const counter = reviewBox.querySelector('.review-comments-counter'); const counter = reviewBox.querySelector('.review-comments-counter');
if (!counter) return; if (!counter) return;
@ -27,23 +26,27 @@ function initRepoDiffReviewButton() {
const num = parseInt(counter.getAttribute('data-pending-comment-number')) + 1 || 1; const num = parseInt(counter.getAttribute('data-pending-comment-number')) + 1 || 1;
counter.setAttribute('data-pending-comment-number', num); counter.setAttribute('data-pending-comment-number', num);
counter.textContent = 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.classList.remove('pulse');
$reviewBox.width(); requestAnimationFrame(() => {
$reviewBox.addClass('pulse'); reviewBox.classList.add('pulse');
});
}); });
}); });
} }
function initRepoDiffFileViewToggle() { function initRepoDiffFileViewToggle() {
$('.file-view-toggle').on('click', function () { $('.file-view-toggle').on('click', function () {
const $this = $(this); for (const el of queryElemSiblings(this)) {
$this.parent().children().removeClass('active'); el.classList.remove('active');
$this.addClass('active'); }
this.classList.add('active');
const $target = $($this.data('toggle-selector')); const target = document.querySelector(this.getAttribute('data-toggle-selector'));
$target.parent().children().addClass('tw-hidden'); if (!target) return;
$target.removeClass('tw-hidden');
hideElem(queryElemSiblings(target));
showElem(target);
}); });
} }
@ -57,9 +60,9 @@ function initRepoDiffConversationForm() {
return; return;
} }
if ($form.hasClass('is-loading')) return; if (e.target.classList.contains('is-loading')) return;
try { try {
$form.addClass('is-loading'); e.target.classList.add('is-loading');
const formData = new FormData($form[0]); 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 // if the form is submitted by a button, append the button's name and value to the form data
@ -74,10 +77,14 @@ function initRepoDiffConversationForm() {
const {path, side, idx} = $newConversationHolder.data(); const {path, side, idx} = $newConversationHolder.data();
$form.closest('.conversation-holder').replaceWith($newConversationHolder); $form.closest('.conversation-holder').replaceWith($newConversationHolder);
let selector;
if ($form.closest('tr').data('line-type') === 'same') { 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 { } 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(); $newConversationHolder.find('.dropdown').dropdown();
initCompReactionSelector($newConversationHolder); initCompReactionSelector($newConversationHolder);
@ -85,7 +92,7 @@ function initRepoDiffConversationForm() {
console.error('Error:', error); console.error('Error:', error);
showErrorToast(i18n.network_error); showErrorToast(i18n.network_error);
} finally { } finally {
$form.removeClass('is-loading'); e.target.classList.remove('is-loading');
} }
}); });
@ -145,13 +152,13 @@ function onShowMoreFiles() {
} }
export async function loadMoreFiles(url) { export async function loadMoreFiles(url) {
const $target = $('a#diff-show-more-files'); const target = document.querySelector('a#diff-show-more-files');
if ($target.hasClass('disabled') || pageData.diffFileInfo.isLoadingNewData) { if (target?.classList.contains('disabled') || pageData.diffFileInfo.isLoadingNewData) {
return; return;
} }
pageData.diffFileInfo.isLoadingNewData = true; pageData.diffFileInfo.isLoadingNewData = true;
$target.addClass('disabled'); target?.classList.add('disabled');
try { try {
const response = await GET(url); const response = await GET(url);
@ -168,7 +175,7 @@ export async function loadMoreFiles(url) {
console.error('Error:', error); console.error('Error:', error);
showErrorToast('An error occurred while loading more files.'); showErrorToast('An error occurred while loading more files.');
} finally { } finally {
$target.removeClass('disabled'); target?.classList.remove('disabled');
pageData.diffFileInfo.isLoadingNewData = false; pageData.diffFileInfo.isLoadingNewData = false;
} }
} }
@ -185,11 +192,11 @@ function initRepoDiffShowMore() {
e.preventDefault(); e.preventDefault();
const $target = $(e.target); const $target = $(e.target);
if ($target.hasClass('disabled')) { if (e.target.classList.contains('disabled')) {
return; return;
} }
$target.addClass('disabled'); e.target.classList.add('disabled');
const url = $target.data('href'); const url = $target.data('href');
@ -205,7 +212,7 @@ function initRepoDiffShowMore() {
} catch (error) { } catch (error) {
console.error('Error:', error); console.error('Error:', error);
} finally { } finally {
$target.removeClass('disabled'); e.target.classList.remove('disabled');
} }
}); });
} }

View File

@ -51,7 +51,7 @@ export function isElemHidden(el) {
return res[0]; 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)); return Array.from(el.parentNode.children).filter((child) => child !== el && child.matches(selector));
} }