FIX: Inline footnotes doesn’t work in the table at fullscreen (#27686)

* FIX: Inline footnotes doesn’t work in the table at fullscreen

meta topic: https://meta.discourse.org/t/inline-footnotes-doesnt-work-in-the-table-at-fullscreen/313445
This commit is contained in:
锦心 2024-07-03 18:52:36 +08:00 committed by GitHub
parent 395cbbfe67
commit f3130bc6d9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 20 additions and 5 deletions

View File

@ -156,7 +156,16 @@ export default {
function generateFullScreenTableModal(event) { function generateFullScreenTableModal(event) {
const table = event.currentTarget.parentElement.nextElementSibling; const table = event.currentTarget.parentElement.nextElementSibling;
const tempTable = table.cloneNode(true); const tempTable = table.cloneNode(true);
modal.show(FullscreenTableModal, { model: { tableHtml: tempTable } }); const cookedWrapper = document.createElement("div");
cookedWrapper.classList.add("cooked");
if (siteSettings.display_footnotes_inline) {
cookedWrapper.classList.add("inline-footnotes");
}
cookedWrapper.dataset.refPostId = this.id;
cookedWrapper.appendChild(tempTable);
modal.show(FullscreenTableModal, {
model: { tableHtml: cookedWrapper },
});
} }
function generateSpreadsheetModal() { function generateSpreadsheetModal() {
@ -228,7 +237,7 @@ export default {
buttonWrapper.append(expandTableBtn); buttonWrapper.append(expandTableBtn);
expandTableBtn.addEventListener( expandTableBtn.addEventListener(
"click", "click",
generateFullScreenTableModal, generateFullScreenTableModal.bind(attrs),
false false
); );
table.parentNode.insertBefore(buttonWrapper, table); table.parentNode.insertBefore(buttonWrapper, table);

View File

@ -65,7 +65,13 @@ function footnoteEventHandler(event) {
// append footnote to tooltip body // append footnote to tooltip body
const footnoteContent = tooltip.querySelector(".footnote-tooltip-content"); const footnoteContent = tooltip.querySelector(".footnote-tooltip-content");
const cooked = expandableFootnote.closest(".cooked"); let cooked = expandableFootnote.closest(".cooked");
if (cooked.dataset.refPostId != null) {
// For full screen tables, redirect
cooked = document.querySelector(
`article[data-post-id="${cooked.dataset.refPostId}"] .cooked`
);
}
const newContent = cooked.querySelector(footnoteId); const newContent = cooked.querySelector(footnoteId);
footnoteContent.innerHTML = newContent.innerHTML; footnoteContent.innerHTML = newContent.innerHTML;
@ -107,7 +113,7 @@ export default {
} }
document.body.append(buildTooltip()); document.body.append(buildTooltip());
window.addEventListener("click", footnoteEventHandler); window.addEventListener("click", footnoteEventHandler, true);
withPluginApi("0.8.9", (api) => { withPluginApi("0.8.9", (api) => {
api.decorateCookedElement((elem) => applyInlineFootnotes(elem), { api.decorateCookedElement((elem) => applyInlineFootnotes(elem), {

View File

@ -45,7 +45,7 @@
font-size: var(--font-down-1); font-size: var(--font-down-1);
border-radius: 3px; border-radius: 3px;
display: none; display: none;
z-index: z("tooltip"); z-index: z("modal", "tooltip");
max-width: 400px; max-width: 400px;
overflow-wrap: break-word; overflow-wrap: break-word;