mirror of
				https://github.com/go-gitea/gitea
				synced 2025-11-04 13:28:25 +00:00 
			
		
		
		
	Remove jQuery from the repo commit functions (#29230)
- Switched to plain JavaScript - Tested the commit ellipsis button functionality and it works as before - Tested the commits statuses tippy functionality and it works as before - Tested the last commit loader functionality and it works as before # Demo using JavaScript without jQuery   --------- Signed-off-by: Yarden Shoham <git@yardenshoham.com> Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
		@@ -1,70 +1,70 @@
 | 
				
			|||||||
import $ from 'jquery';
 | 
					 | 
				
			||||||
import {createTippy} from '../modules/tippy.js';
 | 
					import {createTippy} from '../modules/tippy.js';
 | 
				
			||||||
import {toggleElem} from '../utils/dom.js';
 | 
					import {toggleElem} from '../utils/dom.js';
 | 
				
			||||||
 | 
					import {parseDom} from '../utils.js';
 | 
				
			||||||
const {csrfToken} = window.config;
 | 
					import {POST} from '../modules/fetch.js';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export function initRepoEllipsisButton() {
 | 
					export function initRepoEllipsisButton() {
 | 
				
			||||||
  $('.js-toggle-commit-body').on('click', function (e) {
 | 
					  for (const button of document.querySelectorAll('.js-toggle-commit-body')) {
 | 
				
			||||||
 | 
					    button.addEventListener('click', function (e) {
 | 
				
			||||||
      e.preventDefault();
 | 
					      e.preventDefault();
 | 
				
			||||||
    const expanded = $(this).attr('aria-expanded') === 'true';
 | 
					      const expanded = this.getAttribute('aria-expanded') === 'true';
 | 
				
			||||||
    toggleElem($(this).parent().find('.commit-body'));
 | 
					      toggleElem(this.parentElement.querySelector('.commit-body'));
 | 
				
			||||||
    $(this).attr('aria-expanded', String(!expanded));
 | 
					      this.setAttribute('aria-expanded', String(!expanded));
 | 
				
			||||||
    });
 | 
					    });
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export function initRepoCommitLastCommitLoader() {
 | 
					export async function initRepoCommitLastCommitLoader() {
 | 
				
			||||||
  const notReadyEls = document.querySelectorAll('table#repo-files-table tr.notready');
 | 
					 | 
				
			||||||
  if (!notReadyEls.length) return;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  const entryMap = {};
 | 
					  const entryMap = {};
 | 
				
			||||||
  const entries = [];
 | 
					
 | 
				
			||||||
  for (const el of notReadyEls) {
 | 
					  const entries = Array.from(document.querySelectorAll('table#repo-files-table tr.notready'), (el) => {
 | 
				
			||||||
    const entryname = el.getAttribute('data-entryname');
 | 
					    const entryName = el.getAttribute('data-entryname');
 | 
				
			||||||
    entryMap[entryname] = $(el);
 | 
					    entryMap[entryName] = el;
 | 
				
			||||||
    entries.push(entryname);
 | 
					    return entryName;
 | 
				
			||||||
 | 
					  });
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  if (entries.length === 0) {
 | 
				
			||||||
 | 
					    return;
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  const lastCommitLoaderURL = $('table#repo-files-table').data('lastCommitLoaderUrl');
 | 
					  const lastCommitLoaderURL = document.querySelector('table#repo-files-table').getAttribute('data-last-commit-loader-url');
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  if (entries.length > 200) {
 | 
					  if (entries.length > 200) {
 | 
				
			||||||
    $.post(lastCommitLoaderURL, {
 | 
					    // For more than 200 entries, replace the entire table
 | 
				
			||||||
      _csrf: csrfToken,
 | 
					    const response = await POST(lastCommitLoaderURL);
 | 
				
			||||||
    }, (data) => {
 | 
					    const data = await response.text();
 | 
				
			||||||
      $('table#repo-files-table').replaceWith(data);
 | 
					    document.querySelector('table#repo-files-table').outerHTML = data;
 | 
				
			||||||
    });
 | 
					 | 
				
			||||||
    return;
 | 
					    return;
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  $.post(lastCommitLoaderURL, {
 | 
					  // For fewer entries, update individual rows
 | 
				
			||||||
    _csrf: csrfToken,
 | 
					  const response = await POST(lastCommitLoaderURL, {data: {'f': entries}});
 | 
				
			||||||
    'f': entries,
 | 
					  const data = await response.text();
 | 
				
			||||||
  }, (data) => {
 | 
					  const doc = parseDom(data, 'text/html');
 | 
				
			||||||
    $(data).find('tr').each((_, row) => {
 | 
					  for (const row of doc.querySelectorAll('tr')) {
 | 
				
			||||||
    if (row.className === 'commit-list') {
 | 
					    if (row.className === 'commit-list') {
 | 
				
			||||||
        $('table#repo-files-table .commit-list').replaceWith(row);
 | 
					      document.querySelector('table#repo-files-table .commit-list')?.replaceWith(row);
 | 
				
			||||||
        return;
 | 
					      continue;
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
    // there are other <tr> rows in response (eg: <tr class="has-parent">)
 | 
					    // there are other <tr> rows in response (eg: <tr class="has-parent">)
 | 
				
			||||||
    // at the moment only the "data-entryname" rows should be processed
 | 
					    // at the moment only the "data-entryname" rows should be processed
 | 
				
			||||||
      const entryName = $(row).attr('data-entryname');
 | 
					    const entryName = row.getAttribute('data-entryname');
 | 
				
			||||||
    if (entryName) {
 | 
					    if (entryName) {
 | 
				
			||||||
        entryMap[entryName].replaceWith(row);
 | 
					      entryMap[entryName]?.replaceWith(row);
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
    });
 | 
					 | 
				
			||||||
  });
 | 
					 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export function initCommitStatuses() {
 | 
					export function initCommitStatuses() {
 | 
				
			||||||
  $('[data-tippy="commit-statuses"]').each(function () {
 | 
					  for (const element of document.querySelectorAll('[data-tippy="commit-statuses"]')) {
 | 
				
			||||||
    const top = $('.repository.file.list').length > 0 || $('.repository.diff').length > 0;
 | 
					    const top = document.querySelector('.repository.file.list') || document.querySelector('.repository.diff');
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    createTippy(this, {
 | 
					    createTippy(element, {
 | 
				
			||||||
      content: this.nextElementSibling,
 | 
					      content: element.nextElementSibling,
 | 
				
			||||||
      placement: top ? 'top-start' : 'bottom-start',
 | 
					      placement: top ? 'top-start' : 'bottom-start',
 | 
				
			||||||
      interactive: true,
 | 
					      interactive: true,
 | 
				
			||||||
      role: 'dialog',
 | 
					      role: 'dialog',
 | 
				
			||||||
      theme: 'box-with-header',
 | 
					      theme: 'box-with-header',
 | 
				
			||||||
    });
 | 
					    });
 | 
				
			||||||
  });
 | 
					  }
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user