From b0cadeb022685cc870278ba64855307254e00627 Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Wed, 28 Feb 2024 16:11:54 +0200 Subject: [PATCH] Remove jQuery from the "find file" page (#29456) - Switched to plain JavaScript - Tested the file searching functionality and it works as before # Demo using JavaScript without jQuery ![action](https://github.com/go-gitea/gitea/assets/20454870/8ceef0ed-ab87-448c-8b9b-9b5c0cd8bebd) --------- Signed-off-by: Yarden Shoham Co-authored-by: Giteabot (cherry picked from commit 71e0f185f9773d1cc4909867a10c86f74d12ce8d) --- web_src/js/features/repo-findfile.js | 60 ++++++++++++++-------------- 1 file changed, 29 insertions(+), 31 deletions(-) diff --git a/web_src/js/features/repo-findfile.js b/web_src/js/features/repo-findfile.js index 158732acc2..cb03d9e803 100644 --- a/web_src/js/features/repo-findfile.js +++ b/web_src/js/features/repo-findfile.js @@ -1,13 +1,11 @@ -import $ from 'jquery'; import {svg} from '../svg.js'; import {toggleElem} from '../utils/dom.js'; import {pathEscapeSegments} from '../utils/url.js'; - -const {csrf} = window.config; +import {GET} from '../modules/fetch.js'; const threshold = 50; let files = []; -let $repoFindFileInput, $repoFindFileTableBody, $repoFindFileNoResult; +let repoFindFileInput, repoFindFileTableBody, repoFindFileNoResult; // return the case-insensitive sub-match result as an array: [unmatched, matched, unmatched, matched, ...] // res[even] is unmatched, res[odd] is matched, see unit tests for examples @@ -74,46 +72,46 @@ export function filterRepoFilesWeighted(files, filter) { } function filterRepoFiles(filter) { - const treeLink = $repoFindFileInput.attr('data-url-tree-link'); - $repoFindFileTableBody.empty(); + const treeLink = repoFindFileInput.getAttribute('data-url-tree-link'); + repoFindFileTableBody.innerHTML = ''; const filterResult = filterRepoFilesWeighted(files, filter); - const tmplRow = ``; - toggleElem($repoFindFileNoResult, filterResult.length === 0); + toggleElem(repoFindFileNoResult, filterResult.length === 0); for (const r of filterResult) { - const $row = $(tmplRow); - const $a = $row.find('a'); - $a.attr('href', `${treeLink}/${pathEscapeSegments(r.matchResult.join(''))}`); - const $octiconFile = $(svg('octicon-file')).addClass('gt-mr-3'); - $a.append($octiconFile); - // if the target file path is "abc/xyz", to search "bx", then the matchResult is ['a', 'b', 'c/', 'x', 'yz'] - // the matchResult[odd] is matched and highlighted to red. - for (let j = 0; j < r.matchResult.length; j++) { - if (!r.matchResult[j]) continue; - const $span = $('').text(r.matchResult[j]); - if (j % 2 === 1) $span.addClass('ui text red'); - $a.append($span); + const row = document.createElement('tr'); + const cell = document.createElement('td'); + const a = document.createElement('a'); + a.setAttribute('href', `${treeLink}/${pathEscapeSegments(r.matchResult.join(''))}`); + a.innerHTML = svg('octicon-file', 16, 'gt-mr-3'); + row.append(cell); + cell.append(a); + for (const [index, part] of r.matchResult.entries()) { + const span = document.createElement('span'); + // safely escape by using textContent + span.textContent = part; + // if the target file path is "abc/xyz", to search "bx", then the matchResult is ['a', 'b', 'c/', 'x', 'yz'] + // the matchResult[odd] is matched and highlighted to red. + if (index % 2 === 1) span.classList.add('ui', 'text', 'red'); + a.append(span); } - $repoFindFileTableBody.append($row); + repoFindFileTableBody.append(row); } } async function loadRepoFiles() { - files = await $.ajax({ - url: $repoFindFileInput.attr('data-url-data-link'), - headers: {'X-Csrf-Token': csrf} - }); - filterRepoFiles($repoFindFileInput.val()); + const response = await GET(repoFindFileInput.getAttribute('data-url-data-link')); + files = await response.json(); + filterRepoFiles(repoFindFileInput.value); } export function initFindFileInRepo() { - $repoFindFileInput = $('#repo-file-find-input'); - if (!$repoFindFileInput.length) return; + repoFindFileInput = document.getElementById('repo-file-find-input'); + if (!repoFindFileInput) return; - $repoFindFileTableBody = $('#repo-find-file-table tbody'); - $repoFindFileNoResult = $('#repo-find-file-no-result'); - $repoFindFileInput.on('input', () => filterRepoFiles($repoFindFileInput.val())); + repoFindFileTableBody = document.querySelector('#repo-find-file-table tbody'); + repoFindFileNoResult = document.getElementById('repo-find-file-no-result'); + repoFindFileInput.addEventListener('input', () => filterRepoFiles(repoFindFileInput.value)); loadRepoFiles(); }