web/forgejo
10
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Refactor diffFileInfo / DiffTreeStore (#24998)

Browse source 
Follow  #21012, #22399

Replace #24983, fix #24938

Help #24956

Now, the `window.config.pageData.diffFileInfo` itself is a reactive
store, so it's quite easy to sync values/states by it, no need to do
"doLoadMoreFiles" or "callback".

Screenshot: these two buttons both work. After complete loading, the UI
is also right.

<details>


![image](cc6310fd-7f27-45ea-ab4f-24952a87b421)


![image](4c11dd67-ac03-4568-8541-91204d27a4e3)


![image](38a22cec-41be-41e6-a209-f347b7a4c1de)

</details>
This commit is contained in:
wxiaoguang 2023-05-30 18:53:15 +08:00 • committed by GitHub
parent 32185efc14
commit ee99cf6313
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 76 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

39
web_src/js/features/repo-diff.js
View file

@ -5,7 +5,7 @@ import {initDiffFileTree} from './repo-diff-filetree.js';
import {validateTextareaNonEmpty} from './comp/ComboMarkdownEditor.js';
import {initViewedCheckboxListenerFor, countAndUpdateViewedFiles, initExpandAndCollapseFilesButton} from './pull-view-file.js';
const {csrfToken} = window.config;
const {csrfToken, pageData} = window.config;
function initRepoDiffReviewButton() {
const $reviewBox = $('#review-box');
@ -119,37 +119,29 @@ function onShowMoreFiles() {
countAndUpdateViewedFiles();
}
export function doLoadMoreFiles(link, diffEnd, callback) {
const url = `${link}?skip-to=${diffEnd}&file-only=true`;
loadMoreFiles(url, callback);
}
function loadMoreFiles(url, callback) {
export function loadMoreFiles(url) {
const $target = $('a#diff-show-more-files');
if ($target.hasClass('disabled')) {
callback();
if ($target.hasClass('disabled') || pageData.diffFileInfo.isLoadingNewData) {
return;
}
pageData.diffFileInfo.isLoadingNewData = true;
$target.addClass('disabled');
$.ajax({
type: 'GET',
url,
}).done((resp) => {
if (!resp) {
$target.removeClass('disabled');
callback(resp);
return;
}
$('#diff-incomplete').replaceWith($(resp).find('#diff-file-boxes').children());
// By simply rerunning the script we add the new data to our existing
// pagedata object. this triggers vue and the filetree and filelist will
// render the new elements.
$('body').append($(resp).find('script#diff-data-script'));
const $resp = $(resp);
// the response is a full HTML page, we need to extract the relevant contents:
// 1. append the newly loaded file list items to the existing list
$('#diff-incomplete').replaceWith($resp.find('#diff-file-boxes').children());
// 2. re-execute the script to append the newly loaded items to the JS variables to refresh the DiffFileTree
$('body').append($resp.find('script#diff-data-script'));
onShowMoreFiles();
callback(resp);
}).fail(() => {
}).always(() => {
$target.removeClass('disabled');
callback();
pageData.diffFileInfo.isLoadingNewData = false;
});
}
@ -158,7 +150,8 @@ function initRepoDiffShowMore() {
e.preventDefault();
const $target = $(e.target);
loadMoreFiles($target.data('href'), () => {});
const linkLoadMore = $target.attr('data-href');
loadMoreFiles(linkLoadMore);
});
$(document).on('click', 'a.diff-load-button', (e) => {