mirror of
https://github.com/hugo-fixit/FixIt.git
synced 2026-08-24 23:38:56 +00:00
feat(tooltip): add cell-tooltip integration for footnote references a… (#709)
* feat(tooltip): add cell-tooltip integration for footnote references and initialize tooltips * fix(code-header): add data-ct-tooltip attribute to action buttons for better accessibility
This commit is contained in:
Cell
@@ -0,0 +1,11 @@
|
||||
body {
|
||||
.cell-tooltip {
|
||||
--tooltip-bg: #ffffff;
|
||||
--tooltip-color: #0f172a;
|
||||
|
||||
[data-theme=dark] & {
|
||||
--tooltip-bg: #39393c;
|
||||
--tooltip-color: #e2e2e6;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,4 @@
|
||||
@import 'cell-tooltip';
|
||||
@import 'cookieconsent';
|
||||
@import 'details';
|
||||
@import 'fixed-button';
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
# See https://github.com/hugo-fixit/FixIt/issues/67
|
||||
|
||||
prefix:
|
||||
libFiles: https://cdn.jsdelivr.net/npm/
|
||||
libFiles: https://cdn.jsdelivr.net/npm/cell-tooltip/dist/
|
||||
# simple-icons@9.19.0 https://github.com/simple-icons/simple-icons
|
||||
simpleIcons: https://cdn.jsdelivr.net/npm/simple-icons@9.19.0/icons/
|
||||
libFiles:
|
||||
@@ -19,6 +19,8 @@ libFiles:
|
||||
# autocomplete-js@0.38.1 https://github.com/algolia/autocomplete
|
||||
# TODO update autocompleteJS: '@algolia/autocomplete-js@1.7.1/dist/umd/index.production.js'
|
||||
autocompleteJS: autocomplete.js@0.38.1/dist/autocomplete.min.js
|
||||
# cell-tooltip@0.1.2 https://github.com/Lruihao/cell-tooltip
|
||||
cellTooltipJS: cell-tooltip@0.1.2/dist/cell-tooltip.umd.cjs
|
||||
# cell-watermark@1.0.3 https://github.com/Lruihao/watermark
|
||||
cellWatermarkJS: cell-watermark@1.0.3/src/watermark.min.js
|
||||
# cookieconsent@3.1.1 https://github.com/osano/cookieconsent
|
||||
|
||||
@@ -19,6 +19,8 @@ libFiles:
|
||||
# autocomplete-js@0.38.1 https://github.com/algolia/autocomplete
|
||||
# TODO update autocompleteJS: '@algolia/autocomplete-js@1.7.1/dist/umd/index.production.js'
|
||||
autocompleteJS: autocomplete.js@0.38.1/dist/autocomplete.min.js
|
||||
# cell-tooltip@0.1.2 https://github.com/Lruihao/cell-tooltip
|
||||
cellTooltipJS: cell-tooltip@0.1.2/dist/cell-tooltip.umd.cjs
|
||||
# cell-watermark@1.0.3 https://github.com/Lruihao/watermark
|
||||
cellWatermarkJS: cell-watermark@1.0.3/src/watermark.min.js
|
||||
# cookieconsent@3.1.1 https://github.com/osano/cookieconsent
|
||||
|
||||
@@ -1210,6 +1210,47 @@ class FixIt {
|
||||
}, false);
|
||||
}
|
||||
|
||||
initFootnotes() {
|
||||
const $footnoteRefs = document.querySelectorAll('#content sup[id^="fnref:"]');
|
||||
const $footnotes = document.querySelector('.footnotes[role="doc-endnotes"]');
|
||||
if (!$footnoteRefs.length || !$footnotes) return;
|
||||
const footnoteMap = new Map();
|
||||
$footnoteRefs.forEach(($ref) => {
|
||||
if (this.config.tooltip) {
|
||||
const $link = $ref.querySelector('a.footnote-ref');
|
||||
if ($link) {
|
||||
$link.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
}, false);
|
||||
}
|
||||
}
|
||||
const id = $ref.id.replace('fnref:', '');
|
||||
const $footnoteContent = $footnotes.querySelector(`[id="fn:${id}"]`);
|
||||
if ($footnoteContent) {
|
||||
const $clonedContent = $footnoteContent.cloneNode(true);
|
||||
const $backref = $clonedContent.querySelector('.footnote-backref');
|
||||
if ($backref) {
|
||||
$backref.remove();
|
||||
}
|
||||
footnoteMap.set($ref, $clonedContent);
|
||||
}
|
||||
});
|
||||
footnoteMap.forEach(($content, $ref) => {
|
||||
if ($ref.hasAttribute('title')) return;
|
||||
$ref.setAttribute('title', $content.textContent.trim());
|
||||
if (this.config.tooltip) {
|
||||
const { Tooltip } = window.CellTooltip;
|
||||
Tooltip.getOrCreateInstance($ref);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
initTooltip() {
|
||||
if (!this.config.tooltip) return;
|
||||
const { Tooltip } = window.CellTooltip;
|
||||
Tooltip.initAll('[data-ct-tooltip]');
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper method to initialize content components
|
||||
* @param {Element} target - The target element (optional, defaults to document)
|
||||
@@ -1224,6 +1265,8 @@ class FixIt {
|
||||
this.initEcharts();
|
||||
this.initTypeit(target);
|
||||
this.initMapbox();
|
||||
this.initFootnotes();
|
||||
this.initTooltip();
|
||||
if (includeToc) {
|
||||
this.fixTocScroll();
|
||||
this.initToc();
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -453,6 +453,8 @@ summaryPlainify = false
|
||||
# default is false for better performance, especially for single-language sites
|
||||
# set to true if your site has multiple languages and you want to show all content
|
||||
enableTranslationMerge = false
|
||||
# FixIt 0.4.4 | NEW whether to enable tooltip replacement for elements with title attribute, such as footnote references
|
||||
tooltip = true
|
||||
# FixIt 0.2.14 | NEW FixIt will, by default, inject a theme meta tag in the HTML head on the home page only.
|
||||
# You can turn it off, but we would really appreciate if you don’t, as this is a good way to watch FixIt's popularity on the rise.
|
||||
disableThemeInject = false
|
||||
|
||||
@@ -214,6 +214,13 @@ FixIt theme assets partial
|
||||
{{- $config = dict "pangu" .Site.Params.pangu | merge $config -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- /* Cell Tooltip */ -}}
|
||||
{{- if eq .Site.Params.tooltip true -}}
|
||||
{{- $source := $cdn.cellTooltipJS | default "lib/cell-tooltip/cell-tooltip.umd.cjs" -}}
|
||||
{{- dict "Source" $source "Fingerprint" $fingerprint "Defer" true | dict "Page" . "Data" | partial "store/script.html" -}}
|
||||
{{- $config = dict "tooltip" true | merge $config -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- /* Watermark */ -}}
|
||||
{{- if eq .Site.Params.watermark.enable true -}}
|
||||
{{- $source := $cdn.cellWatermarkJS | default "lib/cell-watermark/watermark.min.js" -}}
|
||||
|
||||
@@ -18,27 +18,27 @@
|
||||
{{- end -}}
|
||||
{{- if $config.linenostoggler -}}
|
||||
{{- $lineNosIcon := dict "Class" "fa-solid fa-list-ol" | partial "plugin/icon.html" -}}
|
||||
{{- $lineNosBtn = printf `<span class="line-nos-btn" aria-label="%s" role="button" title="%s">%s</span>` (T "assets.toggleLineNumbers") (T "assets.toggleLineNumbers") $lineNosIcon -}}
|
||||
{{- $lineNosBtn = printf `<span class="line-nos-btn" aria-label="%s" role="button" title="%s" data-ct-tooltip>%s</span>` (T "assets.toggleLineNumbers") (T "assets.toggleLineNumbers") $lineNosIcon -}}
|
||||
{{- end -}}
|
||||
{{- if $config.linewraptoggler -}}
|
||||
{{- $lineWrapIcon := dict "Class" "fa-solid fa-right-left" | partial "plugin/icon.html" -}}
|
||||
{{- $lineWrapBtn = printf `<span class="line-wrap-btn" aria-label="%s" role="button" title="%s">%s</span>` (T "assets.toggleLineWrap") (T "assets.toggleLineWrap") $lineWrapIcon -}}
|
||||
{{- $lineWrapBtn = printf `<span class="line-wrap-btn" aria-label="%s" role="button" title="%s" data-ct-tooltip>%s</span>` (T "assets.toggleLineWrap") (T "assets.toggleLineWrap") $lineWrapIcon -}}
|
||||
{{- end -}}
|
||||
{{- if $config.editable -}}
|
||||
{{- $editIcon := dict "Class" "fa-solid fa-pen-to-square" | partial "plugin/icon.html" -}}
|
||||
{{- $editBtn = printf `<span class="edit-btn" aria-label="%s" role="button" title="%s">%s</span>` (T "assets.toggleCodeEditable") (T "assets.toggleCodeEditable") $editIcon -}}
|
||||
{{- $editBtn = printf `<span class="edit-btn" aria-label="%s" role="button" title="%s" data-ct-tooltip>%s</span>` (T "assets.toggleCodeEditable") (T "assets.toggleCodeEditable") $editIcon -}}
|
||||
{{- end -}}
|
||||
{{- if $config.copyable -}}
|
||||
{{- $copyIcon := dict "Class" "fa-regular fa-clone" | partial "plugin/icon.html" -}}
|
||||
{{- $copyBtn = printf `<span class="copy-btn" aria-label="%s" role="button" title="%s">%s</span>` (T "assets.copyToClipboard") (T "assets.copyToClipboard") $copyIcon -}}
|
||||
{{- $copyBtn = printf `<span class="copy-btn" aria-label="%s" role="button" title="%s" data-ct-tooltip>%s</span>` (T "assets.copyToClipboard") (T "assets.copyToClipboard") $copyIcon -}}
|
||||
{{- end -}}
|
||||
{{- if $config.downloadable -}}
|
||||
{{- $downloadIcon := dict "Class" "fa-solid fa-download" | partial "plugin/icon.html" -}}
|
||||
{{- $downloadBtn = printf `<span class="download-btn" aria-label="%s" role="button" title="%s">%s</span>` (T "assets.downloadCode") (T "assets.downloadCode") $downloadIcon -}}
|
||||
{{- $downloadBtn = printf `<span class="download-btn" aria-label="%s" role="button" title="%s" data-ct-tooltip>%s</span>` (T "assets.downloadCode") (T "assets.downloadCode") $downloadIcon -}}
|
||||
{{- end -}}
|
||||
{{- if $config.fullscreen -}}
|
||||
{{- $fullscreenIcon := dict "Class" "fa-solid fa-expand" | partial "plugin/icon.html" -}}
|
||||
{{- $fullscreenBtn = printf `<span class="fullscreen-btn" aria-label="%s" role="button" title="%s">%s</span>` (T "assets.toggleCodeFullscreen") (T "assets.toggleCodeFullscreen") $fullscreenIcon -}}
|
||||
{{- $fullscreenBtn = printf `<span class="fullscreen-btn" aria-label="%s" role="button" title="%s" data-ct-tooltip>%s</span>` (T "assets.toggleCodeFullscreen") (T "assets.toggleCodeFullscreen") $fullscreenIcon -}}
|
||||
{{- end -}}
|
||||
{{- with $config.name -}}
|
||||
{{- $titleEl = replace $titleEl `<span class="code-title">` (printf `<span class="code-title" data-name="%s">` .) -}}
|
||||
|
||||
Reference in New Issue
Block a user