From 28937eceac135f9f765f940d069f13b469e5ae0e Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Wed, 10 Apr 2024 17:02:29 +0000 Subject: [PATCH 1/3] Remove jQuery from the commit graph (except Fomantic) - Switched to plain JavaScript - Tested the commit graph and it works as before Signed-off-by: Yarden Shoham --- web_src/js/features/repo-graph.js | 140 +++++++++++++++++------------- 1 file changed, 79 insertions(+), 61 deletions(-) diff --git a/web_src/js/features/repo-graph.js b/web_src/js/features/repo-graph.js index a5b61bff54d9d..3b2796fceafa9 100644 --- a/web_src/js/features/repo-graph.js +++ b/web_src/js/features/repo-graph.js @@ -1,14 +1,16 @@ import $ from 'jquery'; +import {hideElem, showElem} from '../utils/dom.js'; import {GET} from '../modules/fetch.js'; export function initRepoGraphGit() { const graphContainer = document.getElementById('git-graph-container'); if (!graphContainer) return; - $('#flow-color-monochrome').on('click', () => { - $('#flow-color-monochrome').addClass('active'); - $('#flow-color-colored').removeClass('active'); - $('#git-graph-container').removeClass('colored').addClass('monochrome'); + document.getElementById('flow-color-monochrome')?.addEventListener('click', () => { + document.getElementById('flow-color-monochrome').classList.add('active'); + document.getElementById('flow-color-colored')?.classList.remove('active'); + graphContainer.classList.remove('colored'); + graphContainer.classList.add('monochrome'); const params = new URLSearchParams(window.location.search); params.set('mode', 'monochrome'); const queryString = params.toString(); @@ -17,29 +19,33 @@ export function initRepoGraphGit() { } else { window.history.replaceState({}, '', window.location.pathname); } - $('.pagination a').each((_, that) => { - const href = that.getAttribute('href'); - if (!href) return; + const paginationLinks = document.querySelectorAll('.pagination a'); + for (const link of paginationLinks) { + const href = link.getAttribute('href'); + if (!href) continue; const url = new URL(href, window.location); const params = url.searchParams; params.set('mode', 'monochrome'); url.search = `?${params.toString()}`; - that.setAttribute('href', url.href); - }); + link.setAttribute('href', url.href); + } }); - $('#flow-color-colored').on('click', () => { - $('#flow-color-colored').addClass('active'); - $('#flow-color-monochrome').removeClass('active'); - $('#git-graph-container').addClass('colored').removeClass('monochrome'); - $('.pagination a').each((_, that) => { - const href = that.getAttribute('href'); - if (!href) return; + + document.getElementById('flow-color-colored')?.addEventListener('click', () => { + document.getElementById('flow-color-colored').classList.add('active'); + document.getElementById('flow-color-monochrome')?.classList.remove('active'); + graphContainer.classList.add('colored'); + graphContainer.classList.remove('monochrome'); + const paginationLinks = document.querySelectorAll('.pagination a'); + for (const link of paginationLinks) { + const href = link.getAttribute('href'); + if (!href) continue; const url = new URL(href, window.location); const params = url.searchParams; params.delete('mode'); url.search = `?${params.toString()}`; - that.setAttribute('href', url.href); - }); + link.setAttribute('href', url.href); + } const params = new URLSearchParams(window.location.search); params.delete('mode'); const queryString = params.toString(); @@ -56,20 +62,21 @@ export function initRepoGraphGit() { const ajaxUrl = new URL(url); ajaxUrl.searchParams.set('div-only', 'true'); window.history.replaceState({}, '', queryString ? `?${queryString}` : window.location.pathname); - $('#pagination').empty(); - $('#rel-container').addClass('tw-hidden'); - $('#rev-container').addClass('tw-hidden'); - $('#loading-indicator').removeClass('tw-hidden'); + document.getElementById('pagination').innerHTML = ''; + hideElem('#rel-container'); + hideElem('#rev-container'); + showElem('#loading-indicator'); (async () => { const response = await GET(String(ajaxUrl)); const html = await response.text(); - const $div = $(html); - $('#pagination').html($div.find('#pagination').html()); - $('#rel-container').html($div.find('#rel-container').html()); - $('#rev-container').html($div.find('#rev-container').html()); - $('#loading-indicator').addClass('tw-hidden'); - $('#rel-container').removeClass('tw-hidden'); - $('#rev-container').removeClass('tw-hidden'); + const div = document.createElement('div'); + div.innerHTML = html; + document.getElementById('pagination').innerHTML = div.querySelector('#pagination').innerHTML; + document.getElementById('rel-container').innerHTML = div.querySelector('#rel-container').innerHTML; + document.getElementById('rev-container').innerHTML = div.querySelector('#rev-container').innerHTML; + hideElem('#loading-indicator'); + showElem('#rel-container'); + showElem('#rev-container'); })(); }; const dropdownSelected = params.getAll('branch'); @@ -77,8 +84,9 @@ export function initRepoGraphGit() { dropdownSelected.splice(0, 0, '...flow-hide-pr-refs'); } - $('#flow-select-refs-dropdown').dropdown('set selected', dropdownSelected); - $('#flow-select-refs-dropdown').dropdown({ + const flowSelectRefsDropdown = document.getElementById('flow-select-refs-dropdown'); + $(flowSelectRefsDropdown).dropdown('set selected', dropdownSelected); + $(flowSelectRefsDropdown).dropdown({ clearable: true, fullTextSeach: 'exact', onRemove(toRemove) { @@ -104,36 +112,46 @@ export function initRepoGraphGit() { updateGraph(); }, }); - $('#git-graph-container').on('mouseenter', '#rev-list li', (e) => { - const flow = $(e.currentTarget).data('flow'); - if (flow === 0) return; - $(`#flow-${flow}`).addClass('highlight'); - $(e.currentTarget).addClass('hover'); - $(`#rev-list li[data-flow='${flow}']`).addClass('highlight'); - }); - $('#git-graph-container').on('mouseleave', '#rev-list li', (e) => { - const flow = $(e.currentTarget).data('flow'); - if (flow === 0) return; - $(`#flow-${flow}`).removeClass('highlight'); - $(e.currentTarget).removeClass('hover'); - $(`#rev-list li[data-flow='${flow}']`).removeClass('highlight'); - }); - $('#git-graph-container').on('mouseenter', '#rel-container .flow-group', (e) => { - $(e.currentTarget).addClass('highlight'); - const flow = $(e.currentTarget).data('flow'); - $(`#rev-list li[data-flow='${flow}']`).addClass('highlight'); - }); - $('#git-graph-container').on('mouseleave', '#rel-container .flow-group', (e) => { - $(e.currentTarget).removeClass('highlight'); - const flow = $(e.currentTarget).data('flow'); - $(`#rev-list li[data-flow='${flow}']`).removeClass('highlight'); - }); - $('#git-graph-container').on('mouseenter', '#rel-container .flow-commit', (e) => { - const rev = $(e.currentTarget).data('rev'); - $(`#rev-list li#commit-${rev}`).addClass('hover'); + + graphContainer.addEventListener('mouseenter', (e) => { + if (e.target.matches('#rev-list li')) { + const flow = e.target.getAttribute('data-flow'); + if (flow === '0') return; + document.getElementById(`flow-${flow}`)?.classList.add('highlight'); + e.target.classList.add('hover'); + for (const item of document.querySelectorAll(`#rev-list li[data-flow='${flow}']`)) { + item.classList.add('highlight'); + } + } else if (e.target.matches('#rel-container .flow-group')) { + e.target.classList.add('highlight'); + const flow = e.target.getAttribute('data-flow'); + for (const item of document.querySelectorAll(`#rev-list li[data-flow='${flow}']`)) { + item.classList.add('highlight'); + } + } else if (e.target.matches('#rel-container .flow-commit')) { + const rev = e.target.getAttribute('data-rev'); + document.querySelector(`#rev-list li#commit-${rev}`)?.classList.add('hover'); + } }); - $('#git-graph-container').on('mouseleave', '#rel-container .flow-commit', (e) => { - const rev = $(e.currentTarget).data('rev'); - $(`#rev-list li#commit-${rev}`).removeClass('hover'); + + graphContainer.addEventListener('mouseleave', (e) => { + if (e.target.matches('#rev-list li')) { + const flow = e.target.getAttribute('data-flow'); + if (flow === '0') return; + document.getElementById(`flow-${flow}`)?.classList.remove('highlight'); + e.target.classList.remove('hover'); + for (const item of document.querySelectorAll(`#rev-list li[data-flow='${flow}']`)) { + item.classList.remove('highlight'); + } + } else if (e.target.matches('#rel-container .flow-group')) { + e.target.classList.remove('highlight'); + const flow = e.target.getAttribute('data-flow'); + for (const item of document.querySelectorAll(`#rev-list li[data-flow='${flow}']`)) { + item.classList.remove('highlight'); + } + } else if (e.target.matches('#rel-container .flow-commit')) { + const rev = e.target.getAttribute('data-rev'); + document.querySelector(`#rev-list li#commit-${rev}`)?.classList.remove('hover'); + } }); } From bf6f47641a2a3b55ec7037612b361bbf98074b33 Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Wed, 10 Apr 2024 20:17:57 +0300 Subject: [PATCH 2/3] Apply suggestions from code review Co-authored-by: silverwind --- web_src/js/features/repo-graph.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/web_src/js/features/repo-graph.js b/web_src/js/features/repo-graph.js index 3b2796fceafa9..689b6f13694ef 100644 --- a/web_src/js/features/repo-graph.js +++ b/web_src/js/features/repo-graph.js @@ -19,8 +19,7 @@ export function initRepoGraphGit() { } else { window.history.replaceState({}, '', window.location.pathname); } - const paginationLinks = document.querySelectorAll('.pagination a'); - for (const link of paginationLinks) { + for (const link of document.querySelectorAll('.pagination a')) { const href = link.getAttribute('href'); if (!href) continue; const url = new URL(href, window.location); @@ -36,8 +35,7 @@ export function initRepoGraphGit() { document.getElementById('flow-color-monochrome')?.classList.remove('active'); graphContainer.classList.add('colored'); graphContainer.classList.remove('monochrome'); - const paginationLinks = document.querySelectorAll('.pagination a'); - for (const link of paginationLinks) { + for (const link of document.querySelectorAll('.pagination a')) { const href = link.getAttribute('href'); if (!href) continue; const url = new URL(href, window.location); From 316fd15f947847fad795f723f8ac79b6e565f054 Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Thu, 11 Apr 2024 09:11:27 +0300 Subject: [PATCH 3/3] Update web_src/js/features/repo-graph.js Co-authored-by: delvh --- web_src/js/features/repo-graph.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/web_src/js/features/repo-graph.js b/web_src/js/features/repo-graph.js index 689b6f13694ef..0086b92021bd8 100644 --- a/web_src/js/features/repo-graph.js +++ b/web_src/js/features/repo-graph.js @@ -69,9 +69,9 @@ export function initRepoGraphGit() { const html = await response.text(); const div = document.createElement('div'); div.innerHTML = html; - document.getElementById('pagination').innerHTML = div.querySelector('#pagination').innerHTML; - document.getElementById('rel-container').innerHTML = div.querySelector('#rel-container').innerHTML; - document.getElementById('rev-container').innerHTML = div.querySelector('#rev-container').innerHTML; + document.getElementById('pagination').innerHTML = div.getElementById('pagination').innerHTML; + document.getElementById('rel-container').innerHTML = div.getElementById('rel-container').innerHTML; + document.getElementById('rev-container').innerHTML = div.getElementById('rev-container').innerHTML; hideElem('#loading-indicator'); showElem('#rel-container'); showElem('#rev-container');