gitea/web_src/js/features/repo-common.js
silverwind d6fed9ab88
Fix various loading states, remove `.loading` class (#29920)
Various code was using fomantic `loading` class which I think got broken
a while ago and rendered only a full circle. Fix those to use
`is-loading`.

Before:
<img width="295" alt="Screenshot 2024-03-19 at 22 56 26"
src="https://github.com/go-gitea/gitea/assets/115237/dbe83395-5db4-4868-90bc-3613866a35f0">

After:
<img width="60" alt="Screenshot 2024-03-19 at 22 54 35"
src="https://github.com/go-gitea/gitea/assets/115237/8ac19b7e-035a-4c6d-850b-53a234ef69c2">
<img width="294" alt="Screenshot 2024-03-19 at 22 54 56"
src="https://github.com/go-gitea/gitea/assets/115237/34e819d7-25f7-43a1-9d48-4a68dcd2b6ad">
<img width="320" alt="Screenshot 2024-03-19 at 22 55 16"
src="https://github.com/go-gitea/gitea/assets/115237/05127544-47ff-4e18-9fd8-c84e44c374f8">
<img width="153" alt="Screenshot 2024-03-19 at 23 01 43"
src="https://github.com/go-gitea/gitea/assets/115237/a33248c6-b11d-40ff-82d8-f5a3d85b55aa">
<img width="1300" alt="Screenshot 2024-03-19 at 23 56 25"
src="https://github.com/go-gitea/gitea/assets/115237/562ca876-b5d5-4295-961e-9d2cdab31ab0">
<img width="136" alt="Screenshot 2024-03-20 at 00 00 38"
src="https://github.com/go-gitea/gitea/assets/115237/44838ac4-67f3-4fec-a8e3-978cc5dbdb72">
2024-03-21 16:31:15 +00:00

94 lines
2.6 KiB
JavaScript

import $ from 'jquery';
import {hideElem, showElem} from '../utils/dom.js';
import {POST} from '../modules/fetch.js';
async function getArchive($target, url, first) {
const dropdownBtn = $target[0].closest('.ui.dropdown.button');
try {
dropdownBtn.classList.add('is-loading');
const response = await POST(url);
if (response.status === 200) {
const data = await response.json();
if (!data) {
// XXX Shouldn't happen?
dropdownBtn.classList.remove('is-loading');
return;
}
if (!data.complete) {
// Wait for only three quarters of a second initially, in case it's
// quickly archived.
setTimeout(() => {
getArchive($target, url, false);
}, first ? 750 : 2000);
} else {
// We don't need to continue checking.
dropdownBtn.classList.remove('is-loading');
window.location.href = url;
}
}
} catch {
dropdownBtn.classList.remove('is-loading');
}
}
export function initRepoArchiveLinks() {
$('.archive-link').on('click', function (event) {
event.preventDefault();
const url = this.getAttribute('href');
if (!url) return;
getArchive($(event.target), url, true);
});
}
export function initRepoCloneLink() {
const $repoCloneSsh = $('#repo-clone-ssh');
const $repoCloneHttps = $('#repo-clone-https');
const $inputLink = $('#repo-clone-url');
if ((!$repoCloneSsh.length && !$repoCloneHttps.length) || !$inputLink.length) {
return;
}
$repoCloneSsh.on('click', () => {
localStorage.setItem('repo-clone-protocol', 'ssh');
window.updateCloneStates();
});
$repoCloneHttps.on('click', () => {
localStorage.setItem('repo-clone-protocol', 'https');
window.updateCloneStates();
});
$inputLink.on('focus', () => {
$inputLink.trigger('select');
});
}
export function initRepoCommonBranchOrTagDropdown(selector) {
$(selector).each(function () {
const $dropdown = $(this);
$dropdown.find('.reference.column').on('click', function () {
hideElem($dropdown.find('.scrolling.reference-list-menu'));
showElem($($(this).data('target')));
return false;
});
});
}
export function initRepoCommonFilterSearchDropdown(selector) {
const $dropdown = $(selector);
if (!$dropdown.length) return;
$dropdown.dropdown({
fullTextSearch: 'exact',
selectOnKeydown: false,
onChange(_text, _value, $choice) {
if ($choice[0].getAttribute('data-url')) {
window.location.href = $choice[0].getAttribute('data-url');
}
},
message: {noResults: $dropdown[0].getAttribute('data-no-results')},
});
}