右键菜单
This commit is contained in:
@@ -0,0 +1,267 @@
|
||||
<div class="custom-context-menu" data-context-menu role="menu" aria-hidden="true">
|
||||
<div class="context-menu-nav" aria-label="页面导航">
|
||||
<button type="button" data-context-action="back" aria-label="后退上一页" title="后退上一页">
|
||||
<i class="fa-solid fa-arrow-left" aria-hidden="true"></i>
|
||||
</button>
|
||||
<button type="button" data-context-action="forward" aria-label="前进下一页" title="前进下一页">
|
||||
<i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
|
||||
</button>
|
||||
<button type="button" data-context-action="reload" aria-label="刷新页面" title="刷新页面">
|
||||
<i class="fa-solid fa-rotate-right" aria-hidden="true"></i>
|
||||
</button>
|
||||
<a href="/" aria-label="返回首页" title="返回首页">
|
||||
<i class="fa-solid fa-house" aria-hidden="true"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="context-menu-group" data-selection-group hidden>
|
||||
<button type="button" data-context-action="copy-selection" data-selection-item>
|
||||
<i class="fa-regular fa-copy" aria-hidden="true"></i>
|
||||
<span>复制选中文字</span>
|
||||
</button>
|
||||
<button type="button" data-context-action="search-selection" data-selection-item>
|
||||
<i class="fa-brands fa-microsoft" aria-hidden="true"></i>
|
||||
<span>用 Bing 搜索</span>
|
||||
</button>
|
||||
<button type="button" data-context-action="quote-selection" data-selection-item data-comments-item>
|
||||
<i class="fa-regular fa-comment-dots" aria-hidden="true"></i>
|
||||
<span>引用到评论区</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="context-menu-group" data-image-group hidden>
|
||||
<button type="button" data-context-action="copy-image">
|
||||
<i class="fa-regular fa-image" aria-hidden="true"></i>
|
||||
<span>复制图片</span>
|
||||
</button>
|
||||
<button type="button" data-context-action="open-image">
|
||||
<i class="fa-solid fa-up-right-from-square" aria-hidden="true"></i>
|
||||
<span>新页面打开图片</span>
|
||||
</button>
|
||||
<button type="button" data-context-action="copy-image-url">
|
||||
<i class="fa-solid fa-link" aria-hidden="true"></i>
|
||||
<span>复制图片地址</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="context-menu-group">
|
||||
<a href="/archives/">
|
||||
<i class="fa-solid fa-box-archive" aria-hidden="true"></i>
|
||||
<span>时间线</span>
|
||||
</a>
|
||||
<a href="/categories/">
|
||||
<i class="fa-solid fa-folder" aria-hidden="true"></i>
|
||||
<span>分类</span>
|
||||
</a>
|
||||
<a href="/tags/">
|
||||
<i class="fa-solid fa-hashtag" aria-hidden="true"></i>
|
||||
<span>标签</span>
|
||||
</a>
|
||||
<button type="button" data-context-action="comments" data-comments-item>
|
||||
<i class="fa-regular fa-comment-dots" aria-hidden="true"></i>
|
||||
<span>跳转评论区</span>
|
||||
</button>
|
||||
<button type="button" data-context-action="print">
|
||||
<i class="fa-solid fa-print" aria-hidden="true"></i>
|
||||
<span>打印页面</span>
|
||||
</button>
|
||||
<a href="/cc/">
|
||||
<i class="fa-solid fa-circle-info" aria-hidden="true"></i>
|
||||
<span>网站版权</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script is:inline>
|
||||
(() => {
|
||||
const menu = document.querySelector('[data-context-menu]');
|
||||
if (!menu) return;
|
||||
|
||||
const selectionItems = [...menu.querySelectorAll('[data-selection-item]')];
|
||||
const selectionGroup = menu.querySelector('[data-selection-group]');
|
||||
const commentsItems = [...menu.querySelectorAll('[data-comments-item]')];
|
||||
const imageGroup = menu.querySelector('[data-image-group]');
|
||||
const focusableSelector = 'a[href], button:not([disabled])';
|
||||
let lastSelectionText = '';
|
||||
let lastImage = null;
|
||||
|
||||
const isNativeContextTarget = (target) =>
|
||||
target instanceof Element &&
|
||||
Boolean(target.closest('input, textarea, select, [contenteditable="true"], [contenteditable=""]'));
|
||||
|
||||
const getCommentsTarget = () =>
|
||||
document.querySelector('.twikoo-comments, #twikoo-wrap, #twikoo, .tk-comments-container');
|
||||
|
||||
const getSelectionText = () => String(window.getSelection?.() || '').trim();
|
||||
|
||||
const getImageTarget = (target) => {
|
||||
if (!(target instanceof Element)) return null;
|
||||
const image = target.closest('img');
|
||||
return image instanceof HTMLImageElement ? image : null;
|
||||
};
|
||||
|
||||
const getImageUrl = () => {
|
||||
if (!lastImage) return '';
|
||||
return lastImage.currentSrc || lastImage.src || lastImage.getAttribute('src') || '';
|
||||
};
|
||||
|
||||
const copyText = async (text) => {
|
||||
if (navigator.clipboard?.writeText) {
|
||||
await navigator.clipboard.writeText(text);
|
||||
return;
|
||||
}
|
||||
|
||||
const textarea = document.createElement('textarea');
|
||||
textarea.value = text;
|
||||
textarea.setAttribute('readonly', '');
|
||||
textarea.style.position = 'fixed';
|
||||
textarea.style.inset = '0 auto auto -9999px';
|
||||
document.body.appendChild(textarea);
|
||||
textarea.select();
|
||||
document.execCommand('copy');
|
||||
textarea.remove();
|
||||
};
|
||||
|
||||
const setMenuState = () => {
|
||||
const hasSelection = lastSelectionText.length > 0;
|
||||
const hasComments = Boolean(getCommentsTarget());
|
||||
const hasImage = Boolean(getImageUrl());
|
||||
|
||||
selectionItems.forEach((item) => {
|
||||
item.hidden = !hasSelection;
|
||||
});
|
||||
if (selectionGroup) selectionGroup.hidden = !hasSelection;
|
||||
|
||||
commentsItems.forEach((item) => {
|
||||
item.hidden = !hasComments || (item.hasAttribute('data-selection-item') && !hasSelection);
|
||||
});
|
||||
|
||||
if (imageGroup) imageGroup.hidden = !hasImage;
|
||||
};
|
||||
|
||||
const closeMenu = () => {
|
||||
menu.classList.remove('is-open');
|
||||
menu.setAttribute('aria-hidden', 'true');
|
||||
};
|
||||
|
||||
const openMenu = (x, y) => {
|
||||
setMenuState();
|
||||
menu.classList.add('is-open');
|
||||
menu.setAttribute('aria-hidden', 'false');
|
||||
|
||||
const rect = menu.getBoundingClientRect();
|
||||
const gap = 10;
|
||||
const left = Math.min(Math.max(gap, x), window.innerWidth - rect.width - gap);
|
||||
const top = Math.min(Math.max(gap, y), window.innerHeight - rect.height - gap);
|
||||
|
||||
menu.style.left = `${left}px`;
|
||||
menu.style.top = `${top}px`;
|
||||
};
|
||||
|
||||
const jumpToComments = () => {
|
||||
const target = getCommentsTarget();
|
||||
target?.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
};
|
||||
|
||||
const quoteToComments = () => {
|
||||
jumpToComments();
|
||||
window.setTimeout(() => {
|
||||
const textarea = document.querySelector('#twikoo textarea, .twikoo-comments textarea, .tk-input textarea');
|
||||
if (!(textarea instanceof HTMLTextAreaElement) || !lastSelectionText) return;
|
||||
|
||||
const quote = lastSelectionText
|
||||
.split(/\r?\n/)
|
||||
.map((line) => `> ${line}`)
|
||||
.join('\n');
|
||||
const current = textarea.value.trim();
|
||||
textarea.value = current ? `${current}\n\n${quote}\n` : `${quote}\n`;
|
||||
textarea.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
textarea.focus();
|
||||
}, 500);
|
||||
};
|
||||
|
||||
const searchSelection = () => {
|
||||
if (!lastSelectionText) return;
|
||||
const url = `https://www.bing.com/search?q=${encodeURIComponent(lastSelectionText)}`;
|
||||
window.open(url, '_blank', 'noopener,noreferrer');
|
||||
};
|
||||
|
||||
const copyImage = async () => {
|
||||
const imageUrl = getImageUrl();
|
||||
if (!imageUrl) return;
|
||||
|
||||
try {
|
||||
if (!navigator.clipboard?.write || typeof ClipboardItem === 'undefined') {
|
||||
throw new Error('Image clipboard is not available.');
|
||||
}
|
||||
|
||||
const response = await fetch(imageUrl, { mode: 'cors' });
|
||||
const blob = await response.blob();
|
||||
await navigator.clipboard.write([
|
||||
new ClipboardItem({ [blob.type || 'image/png']: blob }),
|
||||
]);
|
||||
} catch {
|
||||
await copyText(new URL(imageUrl, window.location.href).toString());
|
||||
}
|
||||
};
|
||||
|
||||
const openImage = () => {
|
||||
const imageUrl = getImageUrl();
|
||||
if (!imageUrl) return;
|
||||
window.open(new URL(imageUrl, window.location.href).toString(), '_blank', 'noopener,noreferrer');
|
||||
};
|
||||
|
||||
document.addEventListener('contextmenu', (event) => {
|
||||
if (isNativeContextTarget(event.target)) return;
|
||||
|
||||
lastSelectionText = getSelectionText();
|
||||
lastImage = getImageTarget(event.target);
|
||||
event.preventDefault();
|
||||
openMenu(event.clientX, event.clientY);
|
||||
});
|
||||
|
||||
document.addEventListener('click', (event) => {
|
||||
const actionTarget = event.target instanceof Element ? event.target.closest('[data-context-action]') : null;
|
||||
if (!actionTarget || !menu.contains(actionTarget)) {
|
||||
closeMenu();
|
||||
return;
|
||||
}
|
||||
|
||||
const action = actionTarget.dataset.contextAction;
|
||||
closeMenu();
|
||||
|
||||
if (action === 'back') history.back();
|
||||
if (action === 'forward') history.forward();
|
||||
if (action === 'reload') location.reload();
|
||||
if (action === 'copy-selection' && lastSelectionText) copyText(lastSelectionText);
|
||||
if (action === 'search-selection') searchSelection();
|
||||
if (action === 'quote-selection') quoteToComments();
|
||||
if (action === 'copy-image') copyImage();
|
||||
if (action === 'open-image') openImage();
|
||||
if (action === 'copy-image-url') copyText(new URL(getImageUrl(), window.location.href).toString());
|
||||
if (action === 'comments') jumpToComments();
|
||||
if (action === 'print') window.print();
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', (event) => {
|
||||
if (event.key === 'Escape') closeMenu();
|
||||
if (event.key === 'Tab' && menu.classList.contains('is-open')) {
|
||||
const items = [...menu.querySelectorAll(focusableSelector)].filter((item) => !item.closest('[hidden]'));
|
||||
if (items.length === 0) return;
|
||||
const first = items[0];
|
||||
const last = items[items.length - 1];
|
||||
|
||||
if (event.shiftKey && document.activeElement === first) {
|
||||
event.preventDefault();
|
||||
last.focus();
|
||||
} else if (!event.shiftKey && document.activeElement === last) {
|
||||
event.preventDefault();
|
||||
first.focus();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('scroll', closeMenu, { passive: true });
|
||||
window.addEventListener('resize', closeMenu);
|
||||
})();
|
||||
</script>
|
||||
Reference in New Issue
Block a user