From 169a9b58db70687a4627edb81004d67f95777b92 Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Sat, 17 Feb 2024 20:09:51 +0000 Subject: [PATCH 1/7] Remove jQuery from repo commit functions - Switched to plain JavaScript - Tested the commit ellipsis button functionality and it works as before - Tested the commits statuses tippy functionality and it works as before Signed-off-by: Yarden Shoham --- web_src/js/features/repo-commit.js | 92 ++++++++++++++++-------------- 1 file changed, 48 insertions(+), 44 deletions(-) diff --git a/web_src/js/features/repo-commit.js b/web_src/js/features/repo-commit.js index 76b34d2077719..0ff4b5bc7169b 100644 --- a/web_src/js/features/repo-commit.js +++ b/web_src/js/features/repo-commit.js @@ -1,72 +1,76 @@ -import $ from 'jquery'; import {createTippy} from '../modules/tippy.js'; import {toggleElem} from '../utils/dom.js'; - -const {csrfToken} = window.config; +import {POST} from '../modules/fetch.js'; export function initRepoEllipsisButton() { - $('.js-toggle-commit-body').on('click', function (e) { - e.preventDefault(); - const expanded = $(this).attr('aria-expanded') === 'true'; - toggleElem($(this).parent().find('.commit-body')); - $(this).attr('aria-expanded', String(!expanded)); - }); + for (const button of document.querySelectorAll('.js-toggle-commit-body')) { + button.addEventListener('click', function (e) { + e.preventDefault(); + const expanded = this.getAttribute('aria-expanded') === 'true'; + toggleElem(this.parentElement.querySelector('.commit-body')); + this.setAttribute('aria-expanded', String(!expanded)); + }); + } } -export function initRepoCommitLastCommitLoader() { +const parser = new DOMParser(); + +export async function initRepoCommitLastCommitLoader() { const entryMap = {}; - const entries = $('table#repo-files-table tr.notready') - .map((_, v) => { - entryMap[$(v).attr('data-entryname')] = $(v); - return $(v).attr('data-entryname'); - }) - .get(); + const entries = Array.from(document.querySelectorAll('table#repo-files-table tr.notready'), (v) => { + entryMap[v.getAttribute('data-entryname')] = v; + return v.getAttribute('data-entryname'); + }); if (entries.length === 0) { return; } - const lastCommitLoaderURL = $('table#repo-files-table').data('lastCommitLoaderUrl'); + const lastCommitLoaderURL = document.querySelector('table#repo-files-table').getAttribute('data-last-commit-loader-url'); if (entries.length > 200) { - $.post(lastCommitLoaderURL, { - _csrf: csrfToken, - }, (data) => { - $('table#repo-files-table').replaceWith(data); - }); + // For more than 200 entries, replace the entire table + const response = await POST(lastCommitLoaderURL); + const data = await response.text(); + const table = document.querySelector('table#repo-files-table'); + const parent = table.parentNode; + const wrapper = document.createElement('div'); + wrapper.innerHTML = data; + const newTable = wrapper.querySelector('table'); + if (newTable) { + parent.replaceChild(newTable, table); + } return; } - $.post(lastCommitLoaderURL, { - _csrf: csrfToken, - 'f': entries, - }, (data) => { - $(data).find('tr').each((_, row) => { - if (row.className === 'commit-list') { - $('table#repo-files-table .commit-list').replaceWith(row); - return; - } - // there are other rows in response (eg: ) - // at the moment only the "data-entryname" rows should be processed - const entryName = $(row).attr('data-entryname'); - if (entryName) { - entryMap[entryName].replaceWith(row); - } - }); - }); + // For fewer entries, update individual rows + const response = POST(lastCommitLoaderURL, {data: {'f': entries}}); + const data = await response.text(); + const doc = parser.parseFromString(data, 'text/html'); + for (const row of doc.querySelectorAll('tr')) { + if (row.className === 'commit-list') { + document.querySelector('table#repo-files-table .commit-list')?.replaceWith(row); + return; + } + + const entryName = row.getAttribute('data-entryname'); + if (entryName) { + entryMap[entryName].replaceWith(row); + } + } } export function initCommitStatuses() { - $('[data-tippy="commit-statuses"]').each(function () { - const top = $('.repository.file.list').length > 0 || $('.repository.diff').length > 0; + for (const element of document.querySelectorAll('[data-tippy="commit-statuses"]')) { + const top = document.querySelector('.repository.file.list') || document.querySelector('.repository.diff'); - createTippy(this, { - content: this.nextElementSibling, + createTippy(element, { + content: element.nextElementSibling, placement: top ? 'top-start' : 'bottom-start', interactive: true, role: 'dialog', theme: 'box-with-header', }); - }); + } } From 629da541088e1ba0ebc5a86f63e4f7c5c81d56f4 Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Sun, 18 Feb 2024 07:57:03 +0200 Subject: [PATCH 2/7] Update web_src/js/features/repo-commit.js Co-authored-by: silverwind --- web_src/js/features/repo-commit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/features/repo-commit.js b/web_src/js/features/repo-commit.js index 0ff4b5bc7169b..9d15e64721d4a 100644 --- a/web_src/js/features/repo-commit.js +++ b/web_src/js/features/repo-commit.js @@ -45,7 +45,7 @@ export async function initRepoCommitLastCommitLoader() { } // For fewer entries, update individual rows - const response = POST(lastCommitLoaderURL, {data: {'f': entries}}); + const response = await POST(lastCommitLoaderURL, {data: {'f': entries}}); const data = await response.text(); const doc = parser.parseFromString(data, 'text/html'); for (const row of doc.querySelectorAll('tr')) { From 048159fcf2e09106f2a09978c086362fc63d6a80 Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Sun, 18 Feb 2024 06:04:26 +0000 Subject: [PATCH 3/7] Use `outerHTML` Signed-off-by: Yarden Shoham --- web_src/js/features/repo-commit.js | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/web_src/js/features/repo-commit.js b/web_src/js/features/repo-commit.js index 9d15e64721d4a..536a06fc6eb61 100644 --- a/web_src/js/features/repo-commit.js +++ b/web_src/js/features/repo-commit.js @@ -34,12 +34,8 @@ export async function initRepoCommitLastCommitLoader() { const response = await POST(lastCommitLoaderURL); const data = await response.text(); const table = document.querySelector('table#repo-files-table'); - const parent = table.parentNode; - const wrapper = document.createElement('div'); - wrapper.innerHTML = data; - const newTable = wrapper.querySelector('table'); - if (newTable) { - parent.replaceChild(newTable, table); + if (table) { + table.outerHTML = data; } return; } @@ -50,13 +46,14 @@ export async function initRepoCommitLastCommitLoader() { const doc = parser.parseFromString(data, 'text/html'); for (const row of doc.querySelectorAll('tr')) { if (row.className === 'commit-list') { - document.querySelector('table#repo-files-table .commit-list')?.replaceWith(row); + const commitList = document.querySelector('table#repo-files-table .commit-list'); + commitList.outerHTML = row; return; } const entryName = row.getAttribute('data-entryname'); if (entryName) { - entryMap[entryName].replaceWith(row); + entryMap[entryName].outerHTML = row; } } } From 09ea44d60c0894b5d7ac26b7b988bd54396826e8 Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Sun, 18 Feb 2024 11:28:09 +0000 Subject: [PATCH 4/7] Use replaceWith if it's a node --- web_src/js/features/repo-commit.js | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/web_src/js/features/repo-commit.js b/web_src/js/features/repo-commit.js index 536a06fc6eb61..d0ef8387ee06e 100644 --- a/web_src/js/features/repo-commit.js +++ b/web_src/js/features/repo-commit.js @@ -33,10 +33,7 @@ export async function initRepoCommitLastCommitLoader() { // For more than 200 entries, replace the entire table const response = await POST(lastCommitLoaderURL); const data = await response.text(); - const table = document.querySelector('table#repo-files-table'); - if (table) { - table.outerHTML = data; - } + document.querySelector('table#repo-files-table').outerHTML = data; return; } @@ -46,14 +43,13 @@ export async function initRepoCommitLastCommitLoader() { const doc = parser.parseFromString(data, 'text/html'); for (const row of doc.querySelectorAll('tr')) { if (row.className === 'commit-list') { - const commitList = document.querySelector('table#repo-files-table .commit-list'); - commitList.outerHTML = row; + document.querySelector('table#repo-files-table .commit-list')?.replaceWith(row); return; } const entryName = row.getAttribute('data-entryname'); if (entryName) { - entryMap[entryName].outerHTML = row; + entryMap[entryName].replaceWith(row); } } } From 2b34062f6ac2737c495348ed35773317deb0e1d2 Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Tue, 20 Feb 2024 20:31:52 +0000 Subject: [PATCH 5/7] Fix --- web_src/js/features/repo-commit.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/web_src/js/features/repo-commit.js b/web_src/js/features/repo-commit.js index d0ef8387ee06e..56acbf245cf48 100644 --- a/web_src/js/features/repo-commit.js +++ b/web_src/js/features/repo-commit.js @@ -1,5 +1,6 @@ import {createTippy} from '../modules/tippy.js'; import {toggleElem} from '../utils/dom.js'; +import {parseDom} from '../utils.js'; import {POST} from '../modules/fetch.js'; export function initRepoEllipsisButton() { @@ -13,8 +14,6 @@ export function initRepoEllipsisButton() { } } -const parser = new DOMParser(); - export async function initRepoCommitLastCommitLoader() { const entryMap = {}; @@ -40,16 +39,17 @@ export async function initRepoCommitLastCommitLoader() { // For fewer entries, update individual rows const response = await POST(lastCommitLoaderURL, {data: {'f': entries}}); const data = await response.text(); - const doc = parser.parseFromString(data, 'text/html'); + const doc = parseDom(data, 'text/html'); for (const row of doc.querySelectorAll('tr')) { if (row.className === 'commit-list') { document.querySelector('table#repo-files-table .commit-list')?.replaceWith(row); - return; + continue; } - + // there are other rows in response (eg: ) + // at the moment only the "data-entryname" rows should be processed const entryName = row.getAttribute('data-entryname'); if (entryName) { - entryMap[entryName].replaceWith(row); + entryMap[entryName]?.replaceWith(row); } } } From 2998713d6a68eaf34a9284670a0ffe590ea832dc Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Thu, 22 Feb 2024 18:47:45 +0200 Subject: [PATCH 6/7] Update web_src/js/features/repo-commit.js Co-authored-by: silverwind --- web_src/js/features/repo-commit.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/web_src/js/features/repo-commit.js b/web_src/js/features/repo-commit.js index 56acbf245cf48..769ba6ebcf2a2 100644 --- a/web_src/js/features/repo-commit.js +++ b/web_src/js/features/repo-commit.js @@ -17,9 +17,10 @@ export function initRepoEllipsisButton() { export async function initRepoCommitLastCommitLoader() { const entryMap = {}; - const entries = Array.from(document.querySelectorAll('table#repo-files-table tr.notready'), (v) => { - entryMap[v.getAttribute('data-entryname')] = v; - return v.getAttribute('data-entryname'); + const entries = Array.from(document.querySelectorAll('table#repo-files-table tr.notready'), (el) => { + entryname = el.getAttribute('data-entryname'); + entryMap[entryname] = el; + return entryname; }); if (entries.length === 0) { From 6da52e021cb2f53640876b8adaf921926c3a40cb Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Thu, 22 Feb 2024 16:52:52 +0000 Subject: [PATCH 7/7] Lint --- web_src/js/features/repo-commit.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/web_src/js/features/repo-commit.js b/web_src/js/features/repo-commit.js index 769ba6ebcf2a2..7e2f6fa58ead2 100644 --- a/web_src/js/features/repo-commit.js +++ b/web_src/js/features/repo-commit.js @@ -18,9 +18,9 @@ export async function initRepoCommitLastCommitLoader() { const entryMap = {}; const entries = Array.from(document.querySelectorAll('table#repo-files-table tr.notready'), (el) => { - entryname = el.getAttribute('data-entryname'); - entryMap[entryname] = el; - return entryname; + const entryName = el.getAttribute('data-entryname'); + entryMap[entryName] = el; + return entryName; }); if (entries.length === 0) {