mirror of
https://github.com/go-gitea/gitea.git
synced 2024-08-28 15:17:26 +02:00
Close #22847 This PR: * introduce Gitea's own `showElem` and related functions * remove jQuery show/hide * remove .hide class * remove inline style=display:none From now on: do not use: * "[hidden]" attribute: it's too weak, can not be applied to an element with "display: flex" * ".hidden" class: it has been polluted by Fomantic UI in many cases * inline style="display: none": it's difficult to tweak * jQuery's show/hide/toggle: it can not show/hide elements with "display: xxx !important" only use: * this ".gt-hidden" class * showElem/hideElem/toggleElem functions in "utils/dom.js" cc: @silverwind , this is the all-in-one PR
124 lines
4.1 KiB
JavaScript
124 lines
4.1 KiB
JavaScript
import $ from 'jquery';
|
|
import {svg} from '../svg.js';
|
|
import {toggleElem} from '../utils/dom.js';
|
|
|
|
const {csrf} = window.config;
|
|
|
|
const threshold = 50;
|
|
let files = [];
|
|
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
|
|
// argument subLower must be a lower-cased string.
|
|
export function strSubMatch(full, subLower) {
|
|
const res = [''];
|
|
let i = 0, j = 0;
|
|
const fullLower = full.toLowerCase();
|
|
while (i < subLower.length && j < fullLower.length) {
|
|
if (subLower[i] === fullLower[j]) {
|
|
if (res.length % 2 !== 0) res.push('');
|
|
res[res.length - 1] += full[j];
|
|
j++;
|
|
i++;
|
|
} else {
|
|
if (res.length % 2 === 0) res.push('');
|
|
res[res.length - 1] += full[j];
|
|
j++;
|
|
}
|
|
}
|
|
if (i !== subLower.length) {
|
|
// if the sub string doesn't match the full, only return the full as unmatched.
|
|
return [full];
|
|
}
|
|
if (j < full.length) {
|
|
// append remaining chars from full to result as unmatched
|
|
if (res.length % 2 === 0) res.push('');
|
|
res[res.length - 1] += full.substring(j);
|
|
}
|
|
return res;
|
|
}
|
|
|
|
export function calcMatchedWeight(matchResult) {
|
|
let weight = 0;
|
|
for (let i = 0; i < matchResult.length; i++) {
|
|
if (i % 2 === 1) { // matches are on odd indices, see strSubMatch
|
|
// use a function f(x+x) > f(x) + f(x) to make the longer matched string has higher weight.
|
|
weight += matchResult[i].length * matchResult[i].length;
|
|
}
|
|
}
|
|
return weight;
|
|
}
|
|
|
|
export function filterRepoFilesWeighted(files, filter) {
|
|
let filterResult = [];
|
|
if (filter) {
|
|
const filterLower = filter.toLowerCase();
|
|
// TODO: for large repo, this loop could be slow, maybe there could be one more limit:
|
|
// ... && filterResult.length < threshold * 20, wait for more feedbacks
|
|
for (let i = 0; i < files.length; i++) {
|
|
const res = strSubMatch(files[i], filterLower);
|
|
if (res.length > 1) { // length==1 means unmatched, >1 means having matched sub strings
|
|
filterResult.push({matchResult: res, matchWeight: calcMatchedWeight(res)});
|
|
}
|
|
}
|
|
filterResult.sort((a, b) => b.matchWeight - a.matchWeight);
|
|
filterResult = filterResult.slice(0, threshold);
|
|
} else {
|
|
for (let i = 0; i < files.length && i < threshold; i++) {
|
|
filterResult.push({matchResult: [files[i]], matchWeight: 0});
|
|
}
|
|
}
|
|
return filterResult;
|
|
}
|
|
|
|
export function escapePath(s) {
|
|
return s.split('/').map(encodeURIComponent).join('/');
|
|
}
|
|
|
|
function filterRepoFiles(filter) {
|
|
const treeLink = $repoFindFileInput.attr('data-url-tree-link');
|
|
$repoFindFileTableBody.empty();
|
|
|
|
const filterResult = filterRepoFilesWeighted(files, filter);
|
|
const tmplRow = `<tr><td><a></a></td></tr>`;
|
|
|
|
toggleElem($repoFindFileNoResult, filterResult.length === 0);
|
|
for (const r of filterResult) {
|
|
const $row = $(tmplRow);
|
|
const $a = $row.find('a');
|
|
$a.attr('href', `${treeLink}/${escapePath(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 = $('<span>').text(r.matchResult[j]);
|
|
if (j % 2 === 1) $span.addClass('ui text red');
|
|
$a.append($span);
|
|
}
|
|
$repoFindFileTableBody.append($row);
|
|
}
|
|
}
|
|
|
|
async function loadRepoFiles() {
|
|
files = await $.ajax({
|
|
url: $repoFindFileInput.attr('data-url-data-link'),
|
|
headers: {'X-Csrf-Token': csrf}
|
|
});
|
|
filterRepoFiles($repoFindFileInput.val());
|
|
}
|
|
|
|
export function initFindFileInRepo() {
|
|
$repoFindFileInput = $('#repo-file-find-input');
|
|
if (!$repoFindFileInput.length) return;
|
|
|
|
$repoFindFileTableBody = $('#repo-find-file-table tbody');
|
|
$repoFindFileNoResult = $('#repo-find-file-no-result');
|
|
$repoFindFileInput.on('input', () => filterRepoFiles($repoFindFileInput.val()));
|
|
|
|
loadRepoFiles();
|
|
}
|