From a3fdd0db6b82d4d248b5e64aaf80b7be506e783b Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Fri, 29 Mar 2024 14:13:06 +0000 Subject: [PATCH 1/5] Remove jQuery class from the diff view - Switched from jQuery class functions to plain JavaScript `classList` - Tested the diff view functionality and it works as before Signed-off-by: Yarden Shoham --- web_src/js/features/repo-diff.js | 52 ++++++++++++++++++-------------- 1 file changed, 29 insertions(+), 23 deletions(-) diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js index 596b1ea380507..2da1af510b9af 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; @@ -28,22 +27,25 @@ function initRepoDiffReviewButton() { 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'); + const _ = reviewBox.getBoundingClientRect().width; + 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 = document.querySelector(this.getAttribute('data-toggle-selector')); + if (!target) return; - const $target = $($this.data('toggle-selector')); - $target.parent().children().addClass('tw-hidden'); - $target.removeClass('tw-hidden'); + hideElem(queryElemSiblings(target, '*')); + showElem(target); }); } @@ -57,9 +59,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 @@ -74,10 +76,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); @@ -85,7 +91,7 @@ function initRepoDiffConversationForm() { console.error('Error:', error); showErrorToast(i18n.network_error); } finally { - $form.removeClass('is-loading'); + e.target.classList.remove('is-loading'); } }); @@ -145,13 +151,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); @@ -168,7 +174,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; } } @@ -185,11 +191,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'); @@ -205,7 +211,7 @@ function initRepoDiffShowMore() { } catch (error) { console.error('Error:', error); } finally { - $target.removeClass('disabled'); + e.target.classList.remove('disabled'); } }); } From 523552fbe2ebe28cc0ebe4da5d5de3eca3595c0b Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Fri, 29 Mar 2024 15:08:49 +0000 Subject: [PATCH 2/5] Use requestAnimationFrame --- web_src/js/features/repo-diff.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js index 2da1af510b9af..a9f804e6b0753 100644 --- a/web_src/js/features/repo-diff.js +++ b/web_src/js/features/repo-diff.js @@ -28,8 +28,9 @@ function initRepoDiffReviewButton() { counter.textContent = num; // Force the browser to reflow the DOM. This is to ensure that the browser replay the animation reviewBox.classList.remove('pulse'); - const _ = reviewBox.getBoundingClientRect().width; - reviewBox.classList.add('pulse'); + requestAnimationFrame(() => { + reviewBox.classList.add('pulse'); + }); }); }); } From 70cc2b302ce2adfc98658fdb0d06a3af628c9bed Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Fri, 29 Mar 2024 15:11:12 +0000 Subject: [PATCH 3/5] Add default as '*' --- web_src/js/features/repo-diff.js | 4 ++-- web_src/js/utils/dom.js | 3 +++ 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js index a9f804e6b0753..5df969e6d52d3 100644 --- a/web_src/js/features/repo-diff.js +++ b/web_src/js/features/repo-diff.js @@ -37,7 +37,7 @@ function initRepoDiffReviewButton() { function initRepoDiffFileViewToggle() { $('.file-view-toggle').on('click', function () { - for (const el of queryElemSiblings(this, '*')) { + for (const el of queryElemSiblings(this)) { el.classList.remove('active'); } this.classList.add('active'); @@ -45,7 +45,7 @@ function initRepoDiffFileViewToggle() { const target = document.querySelector(this.getAttribute('data-toggle-selector')); if (!target) return; - hideElem(queryElemSiblings(target, '*')); + hideElem(queryElemSiblings(target)); showElem(target); }); } diff --git a/web_src/js/utils/dom.js b/web_src/js/utils/dom.js index 59c455e2ab483..a634e7f87e996 100644 --- a/web_src/js/utils/dom.js +++ b/web_src/js/utils/dom.js @@ -52,6 +52,9 @@ export function isElemHidden(el) { } export function queryElemSiblings(el, selector) { + if (!selector) { + selector = '*'; + } return Array.from(el.parentNode.children).filter((child) => child !== el && child.matches(selector)); } From fa57a4b1e96eb9a914bac378112937da401abc87 Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Fri, 29 Mar 2024 18:25:41 +0300 Subject: [PATCH 4/5] Update web_src/js/utils/dom.js Co-authored-by: silverwind --- web_src/js/utils/dom.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/web_src/js/utils/dom.js b/web_src/js/utils/dom.js index a634e7f87e996..fffe9c6109ba5 100644 --- a/web_src/js/utils/dom.js +++ b/web_src/js/utils/dom.js @@ -51,10 +51,7 @@ export function isElemHidden(el) { return res[0]; } -export function queryElemSiblings(el, selector) { - if (!selector) { - selector = '*'; - } +export function queryElemSiblings(el, selector = '*') { return Array.from(el.parentNode.children).filter((child) => child !== el && child.matches(selector)); } From 14a797da355e36205729118b3a05815e480a3fe6 Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Fri, 29 Mar 2024 15:26:32 +0000 Subject: [PATCH 5/5] Remove comment --- web_src/js/features/repo-diff.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js index 5df969e6d52d3..b2e8ec4866f98 100644 --- a/web_src/js/features/repo-diff.js +++ b/web_src/js/features/repo-diff.js @@ -26,7 +26,7 @@ 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.classList.remove('pulse'); requestAnimationFrame(() => { reviewBox.classList.add('pulse');