2022-01-28 16:00:11 -05:00
|
|
|
import $ from 'jquery';
|
2022-10-01 09:26:38 -05:00
|
|
|
import {createApp} from 'vue';
|
2021-07-13 13:09:19 -05:00
|
|
|
import ContextPopup from '../components/ContextPopup.vue';
|
2021-10-22 09:34:01 -05:00
|
|
|
import {parseIssueHref} from '../utils.js';
|
2022-07-18 17:33:34 -05:00
|
|
|
import {createTippy} from '../modules/tippy.js';
|
2020-02-11 20:53:18 -05:00
|
|
|
|
2022-12-23 11:03:11 -05:00
|
|
|
export function initContextPopups() {
|
2020-01-19 23:39:21 -05:00
|
|
|
const refIssues = $('.ref-issue');
|
Append `(comment)` when a link points at a comment rather than the whole issue (#23734)
Close #23671
For the feature mentioned above, this PR append ' (comment)' to the
rendered html if it is a hashcomment.
After the PR, type in the following
```
pull request from other repo:
http://localhost:3000/testOrg/testOrgRepo/pulls/2
pull request from this repo:
http://localhost:3000/aaa/testA/pulls/2
issue comment from this repo:
http://localhost:3000/aaa/testA/issues/1#issuecomment-18
http://localhost:3000/aaa/testA/pulls/2#issue-9
issue comment from other repo:
http://localhost:3000/testOrg/testOrgRepo/pulls/2#issuecomment-24
http://localhost:3000/testOrg/testOrgRepo/pulls/2#issue
```
Gives:
<img width="687" alt="截屏2023-03-27 13 53 06"
src="https://user-images.githubusercontent.com/17645053/227852387-2b218e0d-3468-4d90-ad81-d702ddd17fd2.png">
Other than the above feature, this PR also includes two other changes:
1 Right now, the render of links from file changed tab in pull request
might not be very proper, for example, if type in the following. (not
sure if this is an issue or design, if not an issue, I will revert the
changes). example on
[try.gitea.io](https://try.gitea.io/HesterG/testrepo/pulls/1)
```
https://try.gitea.io/HesterG/testrepo/pulls/1/files#issuecomment-162725
https://try.gitea.io/HesterG/testrepo/pulls/1/files
```
it will render the following
<img width="899" alt="截屏2023-03-24 15 41 37"
src="https://user-images.githubusercontent.com/17645053/227456117-5eccedb7-9118-4540-929d-aee9a76de852.png">
In this PR, skip processing the link into a ref issue if it is a link
from files changed tab in pull request
After:
type in following
```
hash comment on files changed tab:
http://localhost:3000/testOrg/testOrgRepo/pulls/2/files#issuecomment-24
files changed link:
http://localhost:3000/testOrg/testOrgRepo/pulls/2/files
```
Gives
<img width="708" alt="截屏2023-03-27 22 09 02"
src="https://user-images.githubusercontent.com/17645053/227964273-5dc06c50-3713-489c-b05d-d95367d0ab0f.png">
2 Right now, after editing the comment area, there will not be tippys
attached to `ref-issue`; and no tippy attached on preview as well.
example:
https://user-images.githubusercontent.com/17645053/227850540-5ae34e2d-b1d7-4d0d-9726-7701bf825d1f.mov
In this PR, in frontend, make sure tippy is added after editing the
comment, and to the comment on preview tab
After:
https://user-images.githubusercontent.com/17645053/227853777-06f56b4c-1148-467c-b6f7-f79418e67504.mov
2023-04-03 03:02:57 -05:00
|
|
|
attachRefIssueContextPopup(refIssues);
|
|
|
|
}
|
2020-01-19 23:39:21 -05:00
|
|
|
|
Append `(comment)` when a link points at a comment rather than the whole issue (#23734)
Close #23671
For the feature mentioned above, this PR append ' (comment)' to the
rendered html if it is a hashcomment.
After the PR, type in the following
```
pull request from other repo:
http://localhost:3000/testOrg/testOrgRepo/pulls/2
pull request from this repo:
http://localhost:3000/aaa/testA/pulls/2
issue comment from this repo:
http://localhost:3000/aaa/testA/issues/1#issuecomment-18
http://localhost:3000/aaa/testA/pulls/2#issue-9
issue comment from other repo:
http://localhost:3000/testOrg/testOrgRepo/pulls/2#issuecomment-24
http://localhost:3000/testOrg/testOrgRepo/pulls/2#issue
```
Gives:
<img width="687" alt="截屏2023-03-27 13 53 06"
src="https://user-images.githubusercontent.com/17645053/227852387-2b218e0d-3468-4d90-ad81-d702ddd17fd2.png">
Other than the above feature, this PR also includes two other changes:
1 Right now, the render of links from file changed tab in pull request
might not be very proper, for example, if type in the following. (not
sure if this is an issue or design, if not an issue, I will revert the
changes). example on
[try.gitea.io](https://try.gitea.io/HesterG/testrepo/pulls/1)
```
https://try.gitea.io/HesterG/testrepo/pulls/1/files#issuecomment-162725
https://try.gitea.io/HesterG/testrepo/pulls/1/files
```
it will render the following
<img width="899" alt="截屏2023-03-24 15 41 37"
src="https://user-images.githubusercontent.com/17645053/227456117-5eccedb7-9118-4540-929d-aee9a76de852.png">
In this PR, skip processing the link into a ref issue if it is a link
from files changed tab in pull request
After:
type in following
```
hash comment on files changed tab:
http://localhost:3000/testOrg/testOrgRepo/pulls/2/files#issuecomment-24
files changed link:
http://localhost:3000/testOrg/testOrgRepo/pulls/2/files
```
Gives
<img width="708" alt="截屏2023-03-27 22 09 02"
src="https://user-images.githubusercontent.com/17645053/227964273-5dc06c50-3713-489c-b05d-d95367d0ab0f.png">
2 Right now, after editing the comment area, there will not be tippys
attached to `ref-issue`; and no tippy attached on preview as well.
example:
https://user-images.githubusercontent.com/17645053/227850540-5ae34e2d-b1d7-4d0d-9726-7701bf825d1f.mov
In this PR, in frontend, make sure tippy is added after editing the
comment, and to the comment on preview tab
After:
https://user-images.githubusercontent.com/17645053/227853777-06f56b4c-1148-467c-b6f7-f79418e67504.mov
2023-04-03 03:02:57 -05:00
|
|
|
export function attachRefIssueContextPopup(refIssues) {
|
|
|
|
if (!refIssues.length) return;
|
2020-01-19 23:39:21 -05:00
|
|
|
refIssues.each(function () {
|
2021-09-15 03:45:27 -05:00
|
|
|
if ($(this).hasClass('ref-external-issue')) {
|
|
|
|
return;
|
|
|
|
}
|
2021-10-22 09:34:01 -05:00
|
|
|
|
|
|
|
const {owner, repo, index} = parseIssueHref($(this).attr('href'));
|
|
|
|
if (!owner) return;
|
2020-01-19 23:39:21 -05:00
|
|
|
|
2021-07-13 13:09:19 -05:00
|
|
|
const el = document.createElement('div');
|
|
|
|
this.parentNode.insertBefore(el, this.nextSibling);
|
2020-01-19 23:39:21 -05:00
|
|
|
|
2022-10-01 09:26:38 -05:00
|
|
|
const view = createApp(ContextPopup);
|
2020-01-19 23:39:21 -05:00
|
|
|
|
2021-07-13 13:09:19 -05:00
|
|
|
try {
|
2022-10-01 09:26:38 -05:00
|
|
|
view.mount(el);
|
2021-07-13 13:09:19 -05:00
|
|
|
} catch (err) {
|
|
|
|
console.error(err);
|
|
|
|
el.textContent = 'ContextPopup failed to load';
|
2020-01-19 23:39:21 -05:00
|
|
|
}
|
|
|
|
|
2022-07-18 17:33:34 -05:00
|
|
|
createTippy(this, {
|
|
|
|
content: el,
|
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 04:56:15 -05:00
|
|
|
placement: 'top-start',
|
2022-07-18 17:33:34 -05:00
|
|
|
interactive: true,
|
2023-03-05 10:40:50 -05:00
|
|
|
interactiveBorder: 5,
|
2021-07-13 13:09:19 -05:00
|
|
|
onShow: () => {
|
2023-03-05 09:23:42 -05:00
|
|
|
el.firstChild.dispatchEvent(new CustomEvent('ce-load-context-popup', {detail: {owner, repo, index}}));
|
2022-07-18 17:33:34 -05:00
|
|
|
}
|
2020-01-19 23:39:21 -05:00
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|