1
0
Fork 0
forked from forgejo/forgejo

Replace fomantic popup module with tippy.js (#20428)

- replace fomantic popup module with tippy.js
- fix chaining and add comment
- add 100ms delay to tooltips
- stopwatch improvments, raise default maxWidth
- update web_src/js/features/common-global.js
- use type=submit instead of js
This commit is contained in:
silverwind 2022-08-09 14:37:34 +02:00 committed by GitHub
parent 36f9ee5813
commit 1b2cd4c4e1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
28 changed files with 199 additions and 2129 deletions

View file

@ -1,6 +1,8 @@
import $ from 'jquery';
import {svg} from '../svg.js';
import {invertFileFolding} from './file-fold.js';
import {createTippy} from '../modules/tippy.js';
import {copyToClipboard} from './clipboard.js';
function changeHash(hash) {
if (window.history.pushState) {
@ -39,13 +41,13 @@ function selectRange($list, $select, $from) {
$viewGitBlame.attr('href', href);
};
const updateCopyPermalinkHref = function(anchor) {
const updateCopyPermalinkUrl = function(anchor) {
if ($copyPermalink.length === 0) {
return;
}
let link = $copyPermalink.attr('data-clipboard-text');
let link = $copyPermalink.attr('data-url');
link = `${link.replace(/#L\d+$|#L\d+-L\d+$/, '')}#${anchor}`;
$copyPermalink.attr('data-clipboard-text', link);
$copyPermalink.attr('data-url', link);
};
if ($from) {
@ -67,7 +69,7 @@ function selectRange($list, $select, $from) {
updateIssueHref(`L${a}-L${b}`);
updateViewGitBlameFragment(`L${a}-L${b}`);
updateCopyPermalinkHref(`L${a}-L${b}`);
updateCopyPermalinkUrl(`L${a}-L${b}`);
return;
}
}
@ -76,17 +78,36 @@ function selectRange($list, $select, $from) {
updateIssueHref($select.attr('rel'));
updateViewGitBlameFragment($select.attr('rel'));
updateCopyPermalinkHref($select.attr('rel'));
updateCopyPermalinkUrl($select.attr('rel'));
}
function showLineButton() {
if ($('.code-line-menu').length === 0) return;
$('.code-line-button').remove();
$('.code-view td.lines-code.active').closest('tr').find('td:eq(0)').first().prepend(
$(`<button class="code-line-button">${svg('octicon-kebab-horizontal')}</button>`)
);
$('.code-line-menu').appendTo($('.code-view'));
$('.code-line-button').popup({popup: $('.code-line-menu'), on: 'click'});
const menu = document.querySelector('.code-line-menu');
if (!menu) return;
// remove all other line buttons
for (const el of document.querySelectorAll('.code-line-button')) {
el.remove();
}
// find active row and add button
const tr = document.querySelector('.code-view td.lines-code.active').closest('tr');
const td = tr.querySelector('td');
const btn = document.createElement('button');
btn.classList.add('code-line-button');
btn.innerHTML = svg('octicon-kebab-horizontal');
td.prepend(btn);
// put a copy of the menu back into DOM for the next click
btn.closest('.code-view').appendChild(menu.cloneNode(true));
createTippy(btn, {
trigger: 'click',
content: menu,
placement: 'right-start',
role: 'menu',
interactive: 'true',
});
}
export function initRepoCodeView() {
@ -159,4 +180,9 @@ export function initRepoCodeView() {
const blob = await $.get(`${url}?${query}&anchor=${anchor}`);
currentTarget.closest('tr').outerHTML = blob;
});
$(document).on('click', '.copy-line-permalink', async (e) => {
const success = await copyToClipboard(e.currentTarget.getAttribute('data-url'));
if (!success) return;
document.querySelector('.code-line-button')?._tippy?.hide();
});
}