2022-01-29 02:30:11 +05:30
|
|
|
import $ from 'jquery';
|
2021-10-16 22:58:04 +05:30
|
|
|
import {htmlEscape} from 'escape-goat';
|
Use a general approach to show tooltip, fix temporary tooltip bug (#23574)
## TLDR
* Improve performance: lazy creating the tippy instances.
* Transparently support all "tooltip" elements, no need to call
`initTooltip` again and again.
* Fix a temporary tooltip re-entrance bug, which causes showing temp
content forever.
* Upgrade vue3-calendar-heatmap to 2.0.2 with lazy tippy init
(initHeatmap time decreases from 100ms to 50ms)
## Details
### The performance
Creating a lot of tippy tooltip instances is expensive. This PR doesn't
create all tippy tooltip instances, instead, it only adds "mouseover"
event listener to necessary elements, and then switches to the tippy
tooltip
### The general approach for all tooltips
Before, dynamically generated tooltips need to be called with
`initTooltip`.
After, use MutationObserver to:
* Attach the event listeners to newly created tooltip elements, work for
Vue (easier than before)
* Catch changed attributes and update the tooltip content (better than
before)
It does help a lot, eg:
https://github.com/go-gitea/gitea/blob/1a4efa0ee9a49d48549be7479a46be133b9bc260/web_src/js/components/PullRequestMergeForm.vue#L33-L36
### Temporary tooltip re-entrance bug
To reproduce, on try.gitea.io, click the "copy clone url" quickly, then
the tooltip will be "Copied!" forever.
After this PR, with the help of `attachTippyTooltip`, the tooltip
content could be reset to the default correctly.
### Other changes
* `data-tooltip-content` is preferred from now on, the old
`data-content` may cause conflicts with other modules.
* `data-placement` was only used for tooltip, so it's renamed to
`data-tooltip-placement`, and removed from `createTippy`.
2023-03-23 15:26:15 +05:30
|
|
|
import {showTemporaryTooltip, createTippy} from '../modules/tippy.js';
|
2023-02-19 09:36:14 +05:30
|
|
|
import {hideElem, showElem, toggleElem} from '../utils/dom.js';
|
Imrove scroll behavior to hash issuecomment(scroll position, auto expand if file is folded, and on refreshing) (#23513)
Close #23466
Right now on pull request "files Changed" tab, if a file is viewed, when
the comments' links are visited, the comment will not be shown as the
file is folded after viewed. This PR is to improve the behavior, to make
the comment seen even the related file is folded, like on github.
And right now scroll position will be remembered and hence it won’t
scroll to hashed comment after refreshing, this PR also adjust the
scroll position remembering behavior: When there is hash comment in url,
do not remember the scroll position.
Before:
https://user-images.githubusercontent.com/17645053/225512079-6cf79581-9346-44cf-95d6-06919642e6a8.mov
After:
https://user-images.githubusercontent.com/17645053/225523753-3f6728f2-977b-4ed0-a65c-63dcef2ace80.mov
Update - long comment's behavior after using `scrollTop ` (Comment div
scroll to the position which is 30px below the diff header, or 30px
below top on conversation tab):
https://user-images.githubusercontent.com/17645053/225614460-0602c1a6-229c-41f4-84d2-334e78251486.mov
2023-03-17 15:54:18 +05:30
|
|
|
import {setFileFolding} from './file-fold.js';
|
2023-04-03 15:36:57 +05:30
|
|
|
import {getComboMarkdownEditor, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.js';
|
2021-10-16 22:58:04 +05:30
|
|
|
|
2021-10-21 13:07:43 +05:30
|
|
|
const {appSubUrl, csrfToken} = window.config;
|
2021-10-16 22:58:04 +05:30
|
|
|
|
|
|
|
export function initRepoIssueTimeTracking() {
|
|
|
|
$(document).on('click', '.issue-add-time', () => {
|
|
|
|
$('.issue-start-time-modal').modal({
|
|
|
|
duration: 200,
|
|
|
|
onApprove() {
|
|
|
|
$('#add_time_manual_form').trigger('submit');
|
|
|
|
},
|
|
|
|
}).modal('show');
|
|
|
|
$('.issue-start-time-modal input').on('keydown', (e) => {
|
|
|
|
if ((e.keyCode || e.key) === 13) {
|
|
|
|
$('#add_time_manual_form').trigger('submit');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
$(document).on('click', '.issue-start-time, .issue-stop-time', () => {
|
|
|
|
$('#toggle_stopwatch_form').trigger('submit');
|
|
|
|
});
|
|
|
|
$(document).on('click', '.issue-cancel-time', () => {
|
|
|
|
$('#cancel_stopwatch_form').trigger('submit');
|
|
|
|
});
|
|
|
|
$(document).on('click', 'button.issue-delete-time', function () {
|
|
|
|
const sel = `.issue-delete-time-modal[data-id="${$(this).data('id')}"]`;
|
2022-01-16 16:49:26 +05:30
|
|
|
$(sel).modal({
|
2021-10-16 22:58:04 +05:30
|
|
|
duration: 200,
|
|
|
|
onApprove() {
|
|
|
|
$(`${sel} form`).trigger('submit');
|
|
|
|
},
|
|
|
|
}).modal('show');
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
function updateDeadline(deadlineString) {
|
2023-02-19 09:36:14 +05:30
|
|
|
hideElem($('#deadline-err-invalid-date'));
|
2021-10-16 22:58:04 +05:30
|
|
|
$('#deadline-loader').addClass('loading');
|
|
|
|
|
|
|
|
let realDeadline = null;
|
|
|
|
if (deadlineString !== '') {
|
|
|
|
const newDate = Date.parse(deadlineString);
|
|
|
|
|
|
|
|
if (Number.isNaN(newDate)) {
|
|
|
|
$('#deadline-loader').removeClass('loading');
|
2023-02-19 09:36:14 +05:30
|
|
|
showElem($('#deadline-err-invalid-date'));
|
2021-10-16 22:58:04 +05:30
|
|
|
return false;
|
|
|
|
}
|
|
|
|
realDeadline = new Date(newDate);
|
|
|
|
}
|
|
|
|
|
2022-04-08 00:29:56 +05:30
|
|
|
$.ajax(`${$('#update-issue-deadline-form').attr('action')}`, {
|
2021-10-16 22:58:04 +05:30
|
|
|
data: JSON.stringify({
|
|
|
|
due_date: realDeadline,
|
|
|
|
}),
|
|
|
|
headers: {
|
2021-10-21 13:07:43 +05:30
|
|
|
'X-Csrf-Token': csrfToken,
|
2021-10-16 22:58:04 +05:30
|
|
|
},
|
|
|
|
contentType: 'application/json',
|
|
|
|
type: 'POST',
|
|
|
|
success() {
|
|
|
|
window.location.reload();
|
|
|
|
},
|
|
|
|
error() {
|
|
|
|
$('#deadline-loader').removeClass('loading');
|
2023-02-19 09:36:14 +05:30
|
|
|
showElem($('#deadline-err-invalid-date'));
|
2021-10-16 22:58:04 +05:30
|
|
|
},
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
export function initRepoIssueDue() {
|
|
|
|
$(document).on('click', '.issue-due-edit', () => {
|
2023-03-28 06:37:21 +05:30
|
|
|
toggleElem('#deadlineForm');
|
2021-10-16 22:58:04 +05:30
|
|
|
});
|
|
|
|
$(document).on('click', '.issue-due-remove', () => {
|
|
|
|
updateDeadline('');
|
|
|
|
});
|
|
|
|
$(document).on('submit', '.issue-due-form', () => {
|
|
|
|
updateDeadline($('#deadlineDate').val());
|
|
|
|
return false;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2023-04-07 05:41:02 +05:30
|
|
|
export function initRepoIssueSidebarList() {
|
2021-10-16 22:58:04 +05:30
|
|
|
const repolink = $('#repolink').val();
|
|
|
|
const repoId = $('#repoId').val();
|
|
|
|
const crossRepoSearch = $('#crossRepoSearch').val();
|
|
|
|
const tp = $('#type').val();
|
2022-04-08 00:29:56 +05:30
|
|
|
let issueSearchUrl = `${appSubUrl}/${repolink}/issues/search?q={query}&type=${tp}`;
|
2021-10-16 22:58:04 +05:30
|
|
|
if (crossRepoSearch === 'true') {
|
2022-04-08 00:29:56 +05:30
|
|
|
issueSearchUrl = `${appSubUrl}/issues/search?q={query}&priority_repo_id=${repoId}&type=${tp}`;
|
2021-10-16 22:58:04 +05:30
|
|
|
}
|
|
|
|
$('#new-dependency-drop-list')
|
|
|
|
.dropdown({
|
|
|
|
apiSettings: {
|
|
|
|
url: issueSearchUrl,
|
|
|
|
onResponse(response) {
|
|
|
|
const filteredResponse = {success: true, results: []};
|
|
|
|
const currIssueId = $('#new-dependency-drop-list').data('issue-id');
|
|
|
|
// Parse the response from the api to work with our dropdown
|
|
|
|
$.each(response, (_i, issue) => {
|
|
|
|
// Don't list current issue in the dependency list.
|
|
|
|
if (issue.id === currIssueId) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
filteredResponse.results.push({
|
|
|
|
name: `#${issue.number} ${htmlEscape(issue.title)
|
|
|
|
}<div class="text small dont-break-out">${htmlEscape(issue.repository.full_name)}</div>`,
|
|
|
|
value: issue.id,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
return filteredResponse;
|
|
|
|
},
|
|
|
|
cache: false,
|
|
|
|
},
|
|
|
|
|
|
|
|
fullTextSearch: true,
|
|
|
|
});
|
|
|
|
|
|
|
|
function excludeLabel(item) {
|
|
|
|
const href = $(item).attr('href');
|
|
|
|
const id = $(item).data('label-id');
|
|
|
|
|
|
|
|
const regStr = `labels=((?:-?[0-9]+%2c)*)(${id})((?:%2c-?[0-9]+)*)&`;
|
|
|
|
const newStr = 'labels=$1-$2$3&';
|
|
|
|
|
|
|
|
window.location = href.replace(new RegExp(regStr), newStr);
|
|
|
|
}
|
|
|
|
|
|
|
|
$('.menu a.label-filter-item').each(function () {
|
|
|
|
$(this).on('click', function (e) {
|
|
|
|
if (e.altKey) {
|
|
|
|
e.preventDefault();
|
|
|
|
excludeLabel(this);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
$('.menu .ui.dropdown.label-filter').on('keydown', (e) => {
|
|
|
|
if (e.altKey && e.keyCode === 13) {
|
|
|
|
const selectedItems = $('.menu .ui.dropdown.label-filter .menu .item.selected');
|
|
|
|
if (selectedItems.length > 0) {
|
|
|
|
excludeLabel($(selectedItems[0]));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
2023-06-18 23:03:12 +05:30
|
|
|
$('.ui.dropdown.label-filter').dropdown('setting', {'hideDividers': 'empty'}).dropdown('refreshItems');
|
2021-10-16 22:58:04 +05:30
|
|
|
}
|
|
|
|
|
|
|
|
export function initRepoIssueCommentDelete() {
|
|
|
|
// Delete comment
|
|
|
|
$(document).on('click', '.delete-comment', function () {
|
|
|
|
const $this = $(this);
|
|
|
|
if (window.confirm($this.data('locale'))) {
|
|
|
|
$.post($this.data('url'), {
|
2021-10-21 13:07:43 +05:30
|
|
|
_csrf: csrfToken,
|
2021-10-16 22:58:04 +05:30
|
|
|
}).done(() => {
|
|
|
|
const $conversationHolder = $this.closest('.conversation-holder');
|
2022-05-07 11:05:12 +05:30
|
|
|
|
|
|
|
// Check if this was a pending comment.
|
|
|
|
if ($conversationHolder.find('.pending-label').length) {
|
|
|
|
const $counter = $('#review-box .review-comments-counter');
|
|
|
|
let num = parseInt($counter.attr('data-pending-comment-number')) - 1 || 0;
|
|
|
|
num = Math.max(num, 0);
|
|
|
|
$counter.attr('data-pending-comment-number', num);
|
|
|
|
$counter.text(num);
|
|
|
|
}
|
|
|
|
|
2021-10-16 22:58:04 +05:30
|
|
|
$(`#${$this.data('comment-id')}`).remove();
|
|
|
|
if ($conversationHolder.length && !$conversationHolder.find('.comment').length) {
|
|
|
|
const path = $conversationHolder.data('path');
|
|
|
|
const side = $conversationHolder.data('side');
|
|
|
|
const idx = $conversationHolder.data('idx');
|
|
|
|
const lineType = $conversationHolder.closest('tr').data('line-type');
|
|
|
|
if (lineType === 'same') {
|
2023-05-22 02:17:41 +05:30
|
|
|
$(`[data-path="${path}"] .add-code-comment[data-idx="${idx}"]`).removeClass('invisible');
|
2021-10-16 22:58:04 +05:30
|
|
|
} else {
|
2023-05-22 02:17:41 +05:30
|
|
|
$(`[data-path="${path}"] .add-code-comment[data-side="${side}"][data-idx="${idx}"]`).removeClass('invisible');
|
2021-10-16 22:58:04 +05:30
|
|
|
}
|
|
|
|
$conversationHolder.remove();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
return false;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
export function initRepoIssueDependencyDelete() {
|
|
|
|
// Delete Issue dependency
|
|
|
|
$(document).on('click', '.delete-dependency-button', (e) => {
|
2021-11-22 13:49:01 +05:30
|
|
|
const id = e.currentTarget.getAttribute('data-id');
|
|
|
|
const type = e.currentTarget.getAttribute('data-type');
|
2021-10-16 22:58:04 +05:30
|
|
|
|
|
|
|
$('.remove-dependency').modal({
|
|
|
|
closable: false,
|
|
|
|
duration: 200,
|
|
|
|
onApprove: () => {
|
|
|
|
$('#removeDependencyID').val(id);
|
|
|
|
$('#dependencyType').val(type);
|
|
|
|
$('#removeDependencyForm').trigger('submit');
|
|
|
|
},
|
|
|
|
}).modal('show');
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
export function initRepoIssueCodeCommentCancel() {
|
|
|
|
// Cancel inline code comment
|
|
|
|
$(document).on('click', '.cancel-code-comment', (e) => {
|
|
|
|
const form = $(e.currentTarget).closest('form');
|
|
|
|
if (form.length > 0 && form.hasClass('comment-form')) {
|
2023-02-19 09:36:14 +05:30
|
|
|
form.addClass('gt-hidden');
|
|
|
|
showElem(form.closest('.comment-code-cloud').find('button.comment-form-reply'));
|
2021-10-16 22:58:04 +05:30
|
|
|
} else {
|
|
|
|
form.closest('.comment-code-cloud').remove();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
export function initRepoPullRequestUpdate() {
|
|
|
|
// Pull Request update button
|
|
|
|
const $pullUpdateButton = $('.update-button > button');
|
|
|
|
$pullUpdateButton.on('click', function (e) {
|
|
|
|
e.preventDefault();
|
|
|
|
const $this = $(this);
|
|
|
|
const redirect = $this.data('redirect');
|
|
|
|
$this.addClass('loading');
|
|
|
|
$.post($this.data('do'), {
|
2021-10-21 13:07:43 +05:30
|
|
|
_csrf: csrfToken
|
2021-10-16 22:58:04 +05:30
|
|
|
}).done((data) => {
|
|
|
|
if (data.redirect) {
|
|
|
|
window.location.href = data.redirect;
|
|
|
|
} else if (redirect) {
|
|
|
|
window.location.href = redirect;
|
|
|
|
} else {
|
|
|
|
window.location.reload();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
$('.update-button > .dropdown').dropdown({
|
|
|
|
onChange(_text, _value, $choice) {
|
|
|
|
const $url = $choice.data('do');
|
|
|
|
if ($url) {
|
|
|
|
$pullUpdateButton.find('.button-text').text($choice.text());
|
|
|
|
$pullUpdateButton.data('do', $url);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
export function initRepoPullRequestMergeInstruction() {
|
|
|
|
$('.show-instruction').on('click', () => {
|
2023-02-19 09:36:14 +05:30
|
|
|
toggleElem($('.instruct-content'));
|
2021-10-16 22:58:04 +05:30
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2022-04-28 21:15:33 +05:30
|
|
|
export function initRepoPullRequestAllowMaintainerEdit() {
|
|
|
|
const $checkbox = $('#allow-edits-from-maintainers');
|
|
|
|
if (!$checkbox.length) return;
|
|
|
|
|
|
|
|
const promptError = $checkbox.attr('data-prompt-error');
|
|
|
|
$checkbox.checkbox({
|
|
|
|
'onChange': () => {
|
|
|
|
const checked = $checkbox.checkbox('is checked');
|
|
|
|
let url = $checkbox.attr('data-url');
|
|
|
|
url += '/set_allow_maintainer_edit';
|
|
|
|
$checkbox.checkbox('set disabled');
|
|
|
|
$.ajax({url, type: 'POST',
|
|
|
|
data: {_csrf: csrfToken, allow_maintainer_edit: checked},
|
|
|
|
error: () => {
|
2022-08-09 18:07:34 +05:30
|
|
|
showTemporaryTooltip($checkbox[0], promptError);
|
2022-04-28 21:15:33 +05:30
|
|
|
},
|
|
|
|
complete: () => {
|
|
|
|
$checkbox.checkbox('set enabled');
|
|
|
|
},
|
|
|
|
});
|
|
|
|
},
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2021-10-16 22:58:04 +05:30
|
|
|
export function initRepoIssueReferenceRepositorySearch() {
|
|
|
|
$('.issue_reference_repository_search')
|
|
|
|
.dropdown({
|
|
|
|
apiSettings: {
|
2022-04-08 00:29:56 +05:30
|
|
|
url: `${appSubUrl}/repo/search?q={query}&limit=20`,
|
2021-10-16 22:58:04 +05:30
|
|
|
onResponse(response) {
|
|
|
|
const filteredResponse = {success: true, results: []};
|
|
|
|
$.each(response.data, (_r, repo) => {
|
|
|
|
filteredResponse.results.push({
|
2023-05-14 03:29:01 +05:30
|
|
|
name: htmlEscape(repo.repository.full_name),
|
|
|
|
value: repo.repository.full_name
|
2021-10-16 22:58:04 +05:30
|
|
|
});
|
|
|
|
});
|
|
|
|
return filteredResponse;
|
|
|
|
},
|
|
|
|
cache: false,
|
|
|
|
},
|
|
|
|
onChange(_value, _text, $choice) {
|
|
|
|
const $form = $choice.closest('form');
|
2021-10-21 13:07:43 +05:30
|
|
|
$form.attr('action', `${appSubUrl}/${_text}/issues/new`);
|
2021-10-16 22:58:04 +05:30
|
|
|
},
|
|
|
|
fullTextSearch: true
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
export function initRepoIssueWipTitle() {
|
|
|
|
$('.title_wip_desc > a').on('click', (e) => {
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
const $issueTitle = $('#issue_title');
|
2023-04-20 14:58:27 +05:30
|
|
|
$issueTitle.trigger('focus');
|
2021-10-16 22:58:04 +05:30
|
|
|
const value = $issueTitle.val().trim().toUpperCase();
|
|
|
|
|
|
|
|
const wipPrefixes = $('.title_wip_desc').data('wip-prefixes');
|
|
|
|
for (const prefix of wipPrefixes) {
|
|
|
|
if (value.startsWith(prefix.toUpperCase())) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
$issueTitle.val(`${wipPrefixes[0]} ${$issueTitle.val()}`);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2021-11-16 07:51:13 +05:30
|
|
|
export async function updateIssuesMeta(url, action, issueIds, elementId) {
|
|
|
|
return $.ajax({
|
|
|
|
type: 'POST',
|
|
|
|
url,
|
|
|
|
data: {
|
|
|
|
_csrf: csrfToken,
|
|
|
|
action,
|
|
|
|
issue_ids: issueIds,
|
|
|
|
id: elementId,
|
|
|
|
},
|
2021-10-16 22:58:04 +05:30
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
export function initRepoIssueComments() {
|
|
|
|
if ($('.repository.view.issue .timeline').length === 0) return;
|
|
|
|
|
2021-11-22 13:49:01 +05:30
|
|
|
$('.re-request-review').on('click', function (e) {
|
|
|
|
e.preventDefault();
|
2021-10-16 22:58:04 +05:30
|
|
|
const url = $(this).data('update-url');
|
|
|
|
const issueId = $(this).data('issue-id');
|
|
|
|
const id = $(this).data('id');
|
|
|
|
const isChecked = $(this).hasClass('checked');
|
|
|
|
|
|
|
|
updateIssuesMeta(
|
|
|
|
url,
|
|
|
|
isChecked ? 'detach' : 'attach',
|
|
|
|
issueId,
|
|
|
|
id,
|
2021-12-04 12:13:14 +05:30
|
|
|
).then(() => window.location.reload());
|
2021-10-16 22:58:04 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
$(document).on('click', (event) => {
|
|
|
|
const urlTarget = $(':target');
|
|
|
|
if (urlTarget.length === 0) return;
|
|
|
|
|
|
|
|
const urlTargetId = urlTarget.attr('id');
|
|
|
|
if (!urlTargetId) return;
|
|
|
|
if (!/^(issue|pull)(comment)?-\d+$/.test(urlTargetId)) return;
|
|
|
|
|
|
|
|
const $target = $(event.target);
|
|
|
|
|
|
|
|
if ($target.closest(`#${urlTargetId}`).length === 0) {
|
|
|
|
const scrollPosition = $(window).scrollTop();
|
|
|
|
window.location.hash = '';
|
|
|
|
$(window).scrollTop(scrollPosition);
|
|
|
|
window.history.pushState(null, null, ' ');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2023-03-03 01:23:22 +05:30
|
|
|
export async function handleReply($el) {
|
|
|
|
hideElem($el);
|
|
|
|
const form = $el.closest('.comment-code-cloud').find('.comment-form');
|
|
|
|
form.removeClass('gt-hidden');
|
2023-04-03 15:36:57 +05:30
|
|
|
|
2023-03-03 01:23:22 +05:30
|
|
|
const $textarea = form.find('textarea');
|
2023-04-03 15:36:57 +05:30
|
|
|
let editor = getComboMarkdownEditor($textarea);
|
|
|
|
if (!editor) {
|
|
|
|
editor = await initComboMarkdownEditor(form.find('.combo-markdown-editor'));
|
2023-03-03 01:23:22 +05:30
|
|
|
}
|
2023-04-03 15:36:57 +05:30
|
|
|
editor.focus();
|
|
|
|
return editor;
|
2023-03-03 01:23:22 +05:30
|
|
|
}
|
|
|
|
|
2021-10-16 22:58:04 +05:30
|
|
|
export function initRepoPullRequestReview() {
|
|
|
|
if (window.location.hash && window.location.hash.startsWith('#issuecomment-')) {
|
Imrove scroll behavior to hash issuecomment(scroll position, auto expand if file is folded, and on refreshing) (#23513)
Close #23466
Right now on pull request "files Changed" tab, if a file is viewed, when
the comments' links are visited, the comment will not be shown as the
file is folded after viewed. This PR is to improve the behavior, to make
the comment seen even the related file is folded, like on github.
And right now scroll position will be remembered and hence it won’t
scroll to hashed comment after refreshing, this PR also adjust the
scroll position remembering behavior: When there is hash comment in url,
do not remember the scroll position.
Before:
https://user-images.githubusercontent.com/17645053/225512079-6cf79581-9346-44cf-95d6-06919642e6a8.mov
After:
https://user-images.githubusercontent.com/17645053/225523753-3f6728f2-977b-4ed0-a65c-63dcef2ace80.mov
Update - long comment's behavior after using `scrollTop ` (Comment div
scroll to the position which is 30px below the diff header, or 30px
below top on conversation tab):
https://user-images.githubusercontent.com/17645053/225614460-0602c1a6-229c-41f4-84d2-334e78251486.mov
2023-03-17 15:54:18 +05:30
|
|
|
// set scrollRestoration to 'manual' when there is a hash in url, so that the scroll position will not be remembered after refreshing
|
|
|
|
if (window.history.scrollRestoration !== 'manual') {
|
|
|
|
window.history.scrollRestoration = 'manual';
|
|
|
|
}
|
2021-10-16 22:58:04 +05:30
|
|
|
const commentDiv = $(window.location.hash);
|
|
|
|
if (commentDiv) {
|
|
|
|
// get the name of the parent id
|
|
|
|
const groupID = commentDiv.closest('div[id^="code-comments-"]').attr('id');
|
|
|
|
if (groupID && groupID.startsWith('code-comments-')) {
|
2022-02-18 12:20:36 +05:30
|
|
|
const id = groupID.slice(14);
|
Imrove scroll behavior to hash issuecomment(scroll position, auto expand if file is folded, and on refreshing) (#23513)
Close #23466
Right now on pull request "files Changed" tab, if a file is viewed, when
the comments' links are visited, the comment will not be shown as the
file is folded after viewed. This PR is to improve the behavior, to make
the comment seen even the related file is folded, like on github.
And right now scroll position will be remembered and hence it won’t
scroll to hashed comment after refreshing, this PR also adjust the
scroll position remembering behavior: When there is hash comment in url,
do not remember the scroll position.
Before:
https://user-images.githubusercontent.com/17645053/225512079-6cf79581-9346-44cf-95d6-06919642e6a8.mov
After:
https://user-images.githubusercontent.com/17645053/225523753-3f6728f2-977b-4ed0-a65c-63dcef2ace80.mov
Update - long comment's behavior after using `scrollTop ` (Comment div
scroll to the position which is 30px below the diff header, or 30px
below top on conversation tab):
https://user-images.githubusercontent.com/17645053/225614460-0602c1a6-229c-41f4-84d2-334e78251486.mov
2023-03-17 15:54:18 +05:30
|
|
|
const ancestorDiffBox = commentDiv.closest('.diff-file-box');
|
|
|
|
// on pages like conversation, there is no diff header
|
|
|
|
const diffHeader = ancestorDiffBox.find('.diff-file-header');
|
|
|
|
// offset is for scrolling
|
|
|
|
let offset = 30;
|
|
|
|
if (diffHeader[0]) {
|
|
|
|
offset += $('.diff-detail-box').outerHeight() + diffHeader.outerHeight();
|
|
|
|
}
|
2023-02-16 17:37:21 +05:30
|
|
|
$(`#show-outdated-${id}`).addClass('gt-hidden');
|
|
|
|
$(`#code-comments-${id}`).removeClass('gt-hidden');
|
|
|
|
$(`#code-preview-${id}`).removeClass('gt-hidden');
|
|
|
|
$(`#hide-outdated-${id}`).removeClass('gt-hidden');
|
Imrove scroll behavior to hash issuecomment(scroll position, auto expand if file is folded, and on refreshing) (#23513)
Close #23466
Right now on pull request "files Changed" tab, if a file is viewed, when
the comments' links are visited, the comment will not be shown as the
file is folded after viewed. This PR is to improve the behavior, to make
the comment seen even the related file is folded, like on github.
And right now scroll position will be remembered and hence it won’t
scroll to hashed comment after refreshing, this PR also adjust the
scroll position remembering behavior: When there is hash comment in url,
do not remember the scroll position.
Before:
https://user-images.githubusercontent.com/17645053/225512079-6cf79581-9346-44cf-95d6-06919642e6a8.mov
After:
https://user-images.githubusercontent.com/17645053/225523753-3f6728f2-977b-4ed0-a65c-63dcef2ace80.mov
Update - long comment's behavior after using `scrollTop ` (Comment div
scroll to the position which is 30px below the diff header, or 30px
below top on conversation tab):
https://user-images.githubusercontent.com/17645053/225614460-0602c1a6-229c-41f4-84d2-334e78251486.mov
2023-03-17 15:54:18 +05:30
|
|
|
// if the comment box is folded, expand it
|
|
|
|
if (ancestorDiffBox.attr('data-folded') && ancestorDiffBox.attr('data-folded') === 'true') {
|
|
|
|
setFileFolding(ancestorDiffBox[0], ancestorDiffBox.find('.fold-file')[0], false);
|
|
|
|
}
|
|
|
|
window.scrollTo({
|
|
|
|
top: commentDiv.offset().top - offset,
|
|
|
|
behavior: 'instant'
|
|
|
|
});
|
2021-10-16 22:58:04 +05:30
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
$(document).on('click', '.show-outdated', function (e) {
|
|
|
|
e.preventDefault();
|
|
|
|
const id = $(this).data('comment');
|
2023-02-16 17:37:21 +05:30
|
|
|
$(this).addClass('gt-hidden');
|
|
|
|
$(`#code-comments-${id}`).removeClass('gt-hidden');
|
|
|
|
$(`#code-preview-${id}`).removeClass('gt-hidden');
|
|
|
|
$(`#hide-outdated-${id}`).removeClass('gt-hidden');
|
2021-10-16 22:58:04 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
$(document).on('click', '.hide-outdated', function (e) {
|
|
|
|
e.preventDefault();
|
|
|
|
const id = $(this).data('comment');
|
2023-02-16 17:37:21 +05:30
|
|
|
$(this).addClass('gt-hidden');
|
|
|
|
$(`#code-comments-${id}`).addClass('gt-hidden');
|
|
|
|
$(`#code-preview-${id}`).addClass('gt-hidden');
|
|
|
|
$(`#show-outdated-${id}`).removeClass('gt-hidden');
|
2021-10-16 22:58:04 +05:30
|
|
|
});
|
|
|
|
|
2022-01-05 17:47:25 +05:30
|
|
|
$(document).on('click', 'button.comment-form-reply', async function (e) {
|
2021-10-16 22:58:04 +05:30
|
|
|
e.preventDefault();
|
2023-03-03 01:23:22 +05:30
|
|
|
await handleReply($(this));
|
2021-10-16 22:58:04 +05:30
|
|
|
});
|
|
|
|
|
2023-02-21 19:06:53 +05:30
|
|
|
const $reviewBox = $('.review-box-panel');
|
2021-10-16 22:58:04 +05:30
|
|
|
if ($reviewBox.length === 1) {
|
2023-04-03 15:36:57 +05:30
|
|
|
const _promise = initComboMarkdownEditor($reviewBox.find('.combo-markdown-editor'));
|
2021-10-16 22:58:04 +05:30
|
|
|
}
|
|
|
|
|
|
|
|
// The following part is only for diff views
|
|
|
|
if ($('.repository.pull.diff').length === 0) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2023-03-17 22:54:00 +05:30
|
|
|
const $reviewBtn = $('.js-btn-review');
|
|
|
|
const $panel = $reviewBtn.parent().find('.review-box-panel');
|
|
|
|
const $closeBtn = $panel.find('.close');
|
|
|
|
|
2023-03-19 02:38:38 +05:30
|
|
|
if ($reviewBtn.length && $panel.length) {
|
|
|
|
const tippy = createTippy($reviewBtn[0], {
|
|
|
|
content: $panel[0],
|
|
|
|
placement: 'bottom',
|
|
|
|
trigger: 'click',
|
|
|
|
maxWidth: 'none',
|
|
|
|
interactive: true,
|
|
|
|
hideOnClick: true,
|
|
|
|
});
|
2023-03-17 22:54:00 +05:30
|
|
|
|
2023-03-19 02:38:38 +05:30
|
|
|
$closeBtn.on('click', (e) => {
|
|
|
|
e.preventDefault();
|
|
|
|
tippy.hide();
|
|
|
|
});
|
|
|
|
}
|
2021-10-16 22:58:04 +05:30
|
|
|
|
2023-05-22 02:17:41 +05:30
|
|
|
$(document).on('click', '.add-code-comment', async function (e) {
|
2021-10-16 22:58:04 +05:30
|
|
|
if ($(e.target).hasClass('btn-add-single')) return; // https://github.com/go-gitea/gitea/issues/4745
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
const isSplit = $(this).closest('.code-diff').hasClass('code-diff-split');
|
|
|
|
const side = $(this).data('side');
|
|
|
|
const idx = $(this).data('idx');
|
2021-11-19 07:58:27 +05:30
|
|
|
const path = $(this).closest('[data-path]').data('path');
|
2021-10-16 22:58:04 +05:30
|
|
|
const tr = $(this).closest('tr');
|
|
|
|
const lineType = tr.data('line-type');
|
|
|
|
|
|
|
|
let ntr = tr.next();
|
|
|
|
if (!ntr.hasClass('add-comment')) {
|
|
|
|
ntr = $(`
|
|
|
|
<tr class="add-comment" data-line-type="${lineType}">
|
|
|
|
${isSplit ? `
|
2022-10-25 16:41:49 +05:30
|
|
|
<td class="add-comment-left" colspan="4"></td>
|
|
|
|
<td class="add-comment-right" colspan="4"></td>
|
2021-10-16 22:58:04 +05:30
|
|
|
` : `
|
2022-10-25 16:41:49 +05:30
|
|
|
<td class="add-comment-left add-comment-right" colspan="5"></td>
|
2021-10-16 22:58:04 +05:30
|
|
|
`}
|
|
|
|
</tr>`);
|
|
|
|
tr.after(ntr);
|
|
|
|
}
|
|
|
|
|
|
|
|
const td = ntr.find(`.add-comment-${side}`);
|
2023-04-03 15:36:57 +05:30
|
|
|
const commentCloud = td.find('.comment-code-cloud');
|
2023-03-04 12:43:37 +05:30
|
|
|
if (commentCloud.length === 0 && !ntr.find('button[name="pending_review"]').length) {
|
2023-04-03 15:36:57 +05:30
|
|
|
const html = await $.get($(this).closest('[data-new-comment-url]').attr('data-new-comment-url'));
|
|
|
|
td.html(html);
|
2021-10-16 22:58:04 +05:30
|
|
|
td.find("input[name='line']").val(idx);
|
|
|
|
td.find("input[name='side']").val(side === 'left' ? 'previous' : 'proposed');
|
|
|
|
td.find("input[name='path']").val(path);
|
2023-04-03 15:36:57 +05:30
|
|
|
|
|
|
|
const editor = await initComboMarkdownEditor(td.find('.combo-markdown-editor'));
|
|
|
|
editor.focus();
|
2021-10-16 22:58:04 +05:30
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
export function initRepoIssueReferenceIssue() {
|
|
|
|
// Reference issue
|
|
|
|
$(document).on('click', '.reference-issue', function (event) {
|
|
|
|
const $this = $(this);
|
2022-12-09 21:55:32 +05:30
|
|
|
const content = $(`#${$this.data('target')}`).text();
|
2021-10-16 22:58:04 +05:30
|
|
|
const poster = $this.data('poster-username');
|
|
|
|
const reference = $this.data('reference');
|
2022-01-16 16:49:26 +05:30
|
|
|
const $modal = $($this.data('modal'));
|
2021-10-16 22:58:04 +05:30
|
|
|
$modal.find('textarea[name="content"]').val(`${content}\n\n_Originally posted by @${poster} in ${reference}_`);
|
|
|
|
$modal.modal('show');
|
|
|
|
|
|
|
|
event.preventDefault();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
export function initRepoIssueWipToggle() {
|
|
|
|
// Toggle WIP
|
|
|
|
$('.toggle-wip a, .toggle-wip button').on('click', async (e) => {
|
|
|
|
e.preventDefault();
|
2021-11-22 13:49:01 +05:30
|
|
|
const toggleWip = e.currentTarget.closest('.toggle-wip');
|
|
|
|
const title = toggleWip.getAttribute('data-title');
|
|
|
|
const wipPrefix = toggleWip.getAttribute('data-wip-prefix');
|
|
|
|
const updateUrl = toggleWip.getAttribute('data-update-url');
|
2021-10-16 22:58:04 +05:30
|
|
|
await $.post(updateUrl, {
|
2021-10-21 13:07:43 +05:30
|
|
|
_csrf: csrfToken,
|
2022-02-18 12:20:36 +05:30
|
|
|
title: title?.startsWith(wipPrefix) ? title.slice(wipPrefix.length).trim() : `${wipPrefix.trim()} ${title}`,
|
2021-10-16 22:58:04 +05:30
|
|
|
});
|
|
|
|
window.location.reload();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
export function initRepoIssueTitleEdit() {
|
|
|
|
// Edit issue title
|
|
|
|
const $issueTitle = $('#issue-title');
|
|
|
|
const $editInput = $('#edit-title-input input');
|
|
|
|
|
|
|
|
const editTitleToggle = function () {
|
2023-02-19 09:36:14 +05:30
|
|
|
toggleElem($issueTitle);
|
|
|
|
toggleElem($('.not-in-edit'));
|
|
|
|
toggleElem($('#edit-title-input'));
|
|
|
|
toggleElem($('#pull-desc'));
|
|
|
|
toggleElem($('#pull-desc-edit'));
|
|
|
|
toggleElem($('.in-edit'));
|
2023-05-04 03:28:59 +05:30
|
|
|
toggleElem($('.new-issue-button'));
|
2021-10-16 22:58:04 +05:30
|
|
|
$('#issue-title-wrapper').toggleClass('edit-active');
|
2023-05-04 03:28:59 +05:30
|
|
|
$editInput[0].focus();
|
|
|
|
$editInput[0].select();
|
2021-10-16 22:58:04 +05:30
|
|
|
return false;
|
|
|
|
};
|
|
|
|
|
|
|
|
$('#edit-title').on('click', editTitleToggle);
|
|
|
|
$('#cancel-edit-title').on('click', editTitleToggle);
|
|
|
|
$('#save-edit-title').on('click', editTitleToggle).on('click', function () {
|
|
|
|
const pullrequest_targetbranch_change = function (update_url) {
|
|
|
|
const targetBranch = $('#pull-target-branch').data('branch');
|
|
|
|
const $branchTarget = $('#branch_target');
|
|
|
|
if (targetBranch === $branchTarget.text()) {
|
2023-02-09 22:41:16 +05:30
|
|
|
window.location.reload();
|
2021-10-16 22:58:04 +05:30
|
|
|
return false;
|
|
|
|
}
|
|
|
|
$.post(update_url, {
|
2021-10-21 13:07:43 +05:30
|
|
|
_csrf: csrfToken,
|
2021-10-16 22:58:04 +05:30
|
|
|
target_branch: targetBranch
|
|
|
|
}).always(() => {
|
|
|
|
window.location.reload();
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2023-02-09 22:41:16 +05:30
|
|
|
const pullrequest_target_update_url = $(this).attr('data-target-update-url');
|
2021-10-16 22:58:04 +05:30
|
|
|
if ($editInput.val().length === 0 || $editInput.val() === $issueTitle.text()) {
|
|
|
|
$editInput.val($issueTitle.text());
|
|
|
|
pullrequest_targetbranch_change(pullrequest_target_update_url);
|
|
|
|
} else {
|
2023-02-09 22:41:16 +05:30
|
|
|
$.post($(this).attr('data-update-url'), {
|
2021-10-21 13:07:43 +05:30
|
|
|
_csrf: csrfToken,
|
2021-10-16 22:58:04 +05:30
|
|
|
title: $editInput.val()
|
|
|
|
}, (data) => {
|
|
|
|
$editInput.val(data.title);
|
|
|
|
$issueTitle.text(data.title);
|
2023-02-09 22:41:16 +05:30
|
|
|
if (pullrequest_target_update_url) {
|
|
|
|
pullrequest_targetbranch_change(pullrequest_target_update_url); // it will reload the window
|
|
|
|
} else {
|
|
|
|
window.location.reload();
|
|
|
|
}
|
2021-10-16 22:58:04 +05:30
|
|
|
});
|
|
|
|
}
|
|
|
|
return false;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
export function initRepoIssueBranchSelect() {
|
|
|
|
const changeBranchSelect = function () {
|
|
|
|
const selectionTextField = $('#pull-target-branch');
|
|
|
|
|
|
|
|
const baseName = selectionTextField.data('basename');
|
|
|
|
const branchNameNew = $(this).data('branch');
|
|
|
|
const branchNameOld = selectionTextField.data('branch');
|
|
|
|
|
|
|
|
// Replace branch name to keep translation from HTML template
|
|
|
|
selectionTextField.html(selectionTextField.html().replace(
|
|
|
|
`${baseName}:${branchNameOld}`,
|
|
|
|
`${baseName}:${branchNameNew}`
|
|
|
|
));
|
|
|
|
selectionTextField.data('branch', branchNameNew); // update branch name in setting
|
|
|
|
};
|
|
|
|
$('#branch-select > .item').on('click', changeBranchSelect);
|
|
|
|
}
|
2023-05-07 21:14:16 +05:30
|
|
|
|
2023-05-09 03:52:52 +05:30
|
|
|
export function initSingleCommentEditor($commentForm) {
|
|
|
|
// pages:
|
|
|
|
// * normal new issue/pr page, no status-button
|
|
|
|
// * issue/pr view page, with comment form, has status-button
|
|
|
|
const opts = {};
|
|
|
|
const $statusButton = $('#status-button');
|
|
|
|
if ($statusButton.length) {
|
|
|
|
opts.onContentChanged = (editor) => {
|
|
|
|
$statusButton.text($statusButton.attr(editor.value().trim() ? 'data-status-and-comment' : 'data-status'));
|
|
|
|
};
|
|
|
|
}
|
|
|
|
initComboMarkdownEditor($commentForm.find('.combo-markdown-editor'), opts);
|
|
|
|
}
|
|
|
|
|
|
|
|
export function initIssueTemplateCommentEditors($commentForm) {
|
|
|
|
// pages:
|
|
|
|
// * new issue with issue template
|
|
|
|
const $comboFields = $commentForm.find('.combo-editor-dropzone');
|
|
|
|
|
|
|
|
const initCombo = async ($combo) => {
|
|
|
|
const $dropzoneContainer = $combo.find('.form-field-dropzone');
|
|
|
|
const $formField = $combo.find('.form-field-real');
|
|
|
|
const $markdownEditor = $combo.find('.combo-markdown-editor');
|
|
|
|
|
|
|
|
const editor = await initComboMarkdownEditor($markdownEditor, {
|
|
|
|
onContentChanged: (editor) => {
|
|
|
|
$formField.val(editor.value());
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
$formField.on('focus', async () => {
|
|
|
|
// deactivate all markdown editors
|
|
|
|
showElem($commentForm.find('.combo-editor-dropzone .form-field-real'));
|
|
|
|
hideElem($commentForm.find('.combo-editor-dropzone .combo-markdown-editor'));
|
|
|
|
hideElem($commentForm.find('.combo-editor-dropzone .form-field-dropzone'));
|
|
|
|
|
|
|
|
// activate this markdown editor
|
|
|
|
hideElem($formField);
|
|
|
|
showElem($markdownEditor);
|
|
|
|
showElem($dropzoneContainer);
|
|
|
|
|
|
|
|
await editor.switchToUserPreference();
|
|
|
|
editor.focus();
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
for (const el of $comboFields) {
|
|
|
|
initCombo($(el));
|
|
|
|
}
|
|
|
|
}
|