mirror of
				https://github.com/go-gitea/gitea
				synced 2025-11-04 13:28:25 +00:00 
			
		
		
		
	Refactor diffFileInfo / DiffTreeStore (#24998)
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>    </details>
This commit is contained in:
		@@ -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) => {
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user