diff --git a/assets/data/cdn/jsdelivr.yml b/assets/data/cdn/jsdelivr.yml index a163c581..f819ff68 100644 --- a/assets/data/cdn/jsdelivr.yml +++ b/assets/data/cdn/jsdelivr.yml @@ -19,8 +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-tooltip@0.2.0 https://github.com/Lruihao/cell-tooltip + cellTooltipJS: cell-tooltip@0.2.0/dist/cell-tooltip.umd.js # 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 diff --git a/assets/data/cdn/unpkg.yml b/assets/data/cdn/unpkg.yml index 39c266c3..5dd18f8a 100644 --- a/assets/data/cdn/unpkg.yml +++ b/assets/data/cdn/unpkg.yml @@ -19,8 +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-tooltip@0.2.0 https://github.com/Lruihao/cell-tooltip + cellTooltipJS: cell-tooltip@0.2.0/dist/cell-tooltip.umd.js # 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 diff --git a/assets/js/theme.js b/assets/js/theme.js index 6d6540db..81095e1b 100644 --- a/assets/js/theme.js +++ b/assets/js/theme.js @@ -1351,16 +1351,14 @@ class FixIt { if ($ref.hasAttribute('title')) return; $ref.setAttribute('title', $content.textContent.trim()); if (this.config.tooltip) { - const { Tooltip } = window.CellTooltip; - Tooltip.getOrCreateInstance($ref); + window.CellTooltip.getOrCreateInstance($ref); } }); } initTooltip() { if (!this.config.tooltip) return; - const { Tooltip } = window.CellTooltip; - Tooltip.initAll('[data-ct-tooltip]'); + window.CellTooltip.initAll('[data-ct-tooltip]'); } /** diff --git a/assets/lib/cell-tooltip/cell-tooltip.umd.cjs b/assets/lib/cell-tooltip/cell-tooltip.umd.cjs deleted file mode 100644 index 064c24e8..00000000 --- a/assets/lib/cell-tooltip/cell-tooltip.umd.cjs +++ /dev/null @@ -1 +0,0 @@ -(function(c,f){typeof exports=="object"&&typeof module<"u"?f(exports):typeof define=="function"&&define.amd?define(["exports"],f):(c=typeof globalThis<"u"?globalThis:c||self,f(c.CellTooltip={}))})(this,(function(c){"use strict";const f=".cell-tooltip{position:absolute;z-index:999;pointer-events:none;opacity:0;transform:scale(.97);transition:opacity .12s ease,transform .12s ease;filter:drop-shadow(0 10px 24px rgba(15,23,42,.2));--tooltip-bg: #111827;--tooltip-color: #f8fafc;--tooltip-arrow-size: 8px}.cell-tooltip[data-theme=light],.cell-tooltip[data-theme=auto]{--tooltip-bg: #ffffff;--tooltip-color: #0f172a}@media(prefers-color-scheme:dark){.cell-tooltip[data-theme=auto]{--tooltip-bg: #111827;--tooltip-color: #f8fafc}}.cell-tooltip.show{opacity:1;transform:scale(1)}.cell-tooltip-inner{max-width:240px;padding:6px 10px;border-radius:8px;font-size:12px;line-height:1.35;color:var(--tooltip-color);background:var(--tooltip-bg);text-align:center;word-wrap:break-word}.cell-tooltip-arrow{position:absolute;width:0;height:0;transform:translate(-50%,-50%)}.cell-tooltip[data-placement=top] .cell-tooltip-arrow{bottom:calc(-1 * var(--tooltip-arrow-size));border-left:var(--tooltip-arrow-size) solid transparent;border-right:var(--tooltip-arrow-size) solid transparent;border-top:var(--tooltip-arrow-size) solid var(--tooltip-bg)}.cell-tooltip[data-placement=bottom] .cell-tooltip-arrow{top:0;border-left:var(--tooltip-arrow-size) solid transparent;border-right:var(--tooltip-arrow-size) solid transparent;border-bottom:var(--tooltip-arrow-size) solid var(--tooltip-bg)}.cell-tooltip[data-placement=left] .cell-tooltip-arrow{right:calc(-1 * var(--tooltip-arrow-size));border-top:var(--tooltip-arrow-size) solid transparent;border-bottom:var(--tooltip-arrow-size) solid transparent;border-left:var(--tooltip-arrow-size) solid var(--tooltip-bg)}.cell-tooltip[data-placement=right] .cell-tooltip-arrow{left:0;border-top:var(--tooltip-arrow-size) solid transparent;border-bottom:var(--tooltip-arrow-size) solid transparent;border-right:var(--tooltip-arrow-size) solid var(--tooltip-bg)}",d={placement:"top",trigger:"hover focus",theme:"dark",offset:8,html:!1},v={show:120,hide:80},b=["top","bottom","right","left"],w=new WeakMap;let T=0;function z(o){return T+=1,`${o}-${T}`}function y(o){return o instanceof HTMLElement}function L(o){return typeof o=="number"?{show:o,hide:o}:{show:o?.show??v.show,hide:o?.hide??v.hide}}function C(o){const t=o.trim().split(/\s+/).filter(Boolean);if(t.length===0)return["hover","focus"];const e=[];for(const i of t)(i==="hover"||i==="focus"||i==="click"||i==="manual")&&e.push(i);return e.length>0?e:["hover","focus"]}function u(o,t,e){return Math.min(Math.max(o,t),e)}function k(o){return o==="light"||o==="dark"||o==="auto"?o:d.theme}class m{element;config;tip=null;arrow=null;isEnabled=!0;timeoutId=null;hoverState=null;activeTrigger={click:!1,hover:!1,focus:!1};listeners=[];constructor(t,e={}){this.element=t;const i=t.getAttribute("data-ct-title")??t.getAttribute("title")??"",l=t.getAttribute("data-ct-placement")??void 0,r=t.getAttribute("data-ct-trigger")??void 0,s=t.getAttribute("data-ct-theme")??void 0;this.config={title:e.title??i,placement:e.placement??l??d.placement,trigger:e.trigger??r??d.trigger,theme:k(e.theme??s??d.theme),container:e.container??document.body,offset:e.offset??d.offset,html:e.html??d.html,delay:L(e.delay)},t.title&&(t.setAttribute("data-ct-original-title",t.title),t.removeAttribute("title")),this.addListeners(),w.set(t,this)}static getOrCreateInstance(t,e){return w.get(t)??new m(t,e)}static initAll(t="[data-ct-title]",e){return Array.from(document.querySelectorAll(t)).map(i=>m.getOrCreateInstance(i,e))}enable(){this.isEnabled=!0}disable(){this.isEnabled=!1}toggleEnabled(){this.isEnabled=!this.isEnabled}toggle(){if(this.tip&&this.tip.classList.contains("show")){this.leave();return}this.enter()}show(){if(!this.isEnabled||!this.hasContent())return;const t=this.getTipElement();t.dataset.theme=this.config.theme;const e=t.classList.contains("show");t.isConnected||this.config.container.appendChild(t),this.setContent(t),e||(this.updatePosition(),t.classList.add("show"),this.element.setAttribute("aria-describedby",t.id))}hide(){const t=this.tip;t&&(t.classList.remove("show"),this.activeTrigger.click=!1,this.activeTrigger.focus=!1,this.activeTrigger.hover=!1,this.hoverState=null,this.element.removeAttribute("aria-describedby"),window.setTimeout(()=>{t.classList.contains("show")||t.remove()},150))}update(){this.tip&&this.tip.classList.contains("show")&&this.updatePosition()}dispose(){this.clearTimer(),this.listeners.forEach(t=>t()),this.listeners=[],this.hide(),w.delete(this.element)}addListeners(){const t=C(this.config.trigger);for(const e of t)e!=="manual"&&(e==="hover"&&(this.bind(this.element,"mouseenter",()=>{this.activeTrigger.hover=!0,this.enter()}),this.bind(this.element,"mouseleave",()=>{this.activeTrigger.hover=!1,this.leave()})),e==="focus"&&(this.bind(this.element,"focusin",()=>{this.activeTrigger.focus=!0,this.enter()}),this.bind(this.element,"focusout",()=>{this.activeTrigger.focus=!1,this.leave()})),e==="click"&&this.bind(this.element,"click",i=>{i.preventDefault(),this.activeTrigger.click=!this.activeTrigger.click,this.toggle()}));this.bind(window,"resize",()=>this.update()),this.bind(window,"scroll",()=>{if(this.activeTrigger.hover||this.activeTrigger.focus){this.hide();return}this.update()})}bind(t,e,i){t.addEventListener(e,i),this.listeners.push(()=>t.removeEventListener(e,i))}clearTimer(){this.timeoutId!==null&&(window.clearTimeout(this.timeoutId),this.timeoutId=null)}enter(){this.isEnabled&&(this.clearTimer(),this.hoverState="show",this.timeoutId=window.setTimeout(()=>{this.hoverState==="show"&&this.show()},this.config.delay.show))}leave(){this.hasActiveTrigger()||(this.clearTimer(),this.hoverState="out",this.timeoutId=window.setTimeout(()=>{this.hoverState==="out"&&this.hide()},this.config.delay.hide))}hasActiveTrigger(){return this.activeTrigger.click||this.activeTrigger.focus||this.activeTrigger.hover}hasContent(){return this.getTitle().trim().length>0}getTitle(){const{title:t}=this.config;return typeof t=="function"?t():t}getTipElement(){if(this.tip)return this.tip;const t=document.createElement("div");t.className="cell-tooltip",t.id=z("cell-tooltip"),t.setAttribute("role","tooltip"),t.dataset.theme=this.config.theme,t.innerHTML='
';const e=t.querySelector(".cell-tooltip-arrow");if(!y(e))throw new Error("Tooltip arrow element is missing");return this.tip=t,this.arrow=e,t}setContent(t){const e=t.querySelector(".cell-tooltip-inner");if(!y(e))throw new Error("Tooltip inner element is missing");const i=this.getTitle();if(this.config.html){e.innerHTML=i;return}e.textContent=i}updatePosition(){const t=this.getTipElement();t.style.top="0",t.style.left="0";const e=this.element.getBoundingClientRect(),i=t.getBoundingClientRect(),l=this.resolvePlacement(e,i);t.dataset.placement=l;const r=window.scrollX,s=window.scrollY,p=window.innerWidth,g=window.innerHeight,a=this.config.offset;let n=0,h=0;switch(l){case"top":n=e.top+s-i.height-a,h=e.left+r+(e.width-i.width)/2;break;case"bottom":n=e.bottom+s+a,h=e.left+r+(e.width-i.width)/2;break;case"left":n=e.top+s+(e.height-i.height)/2,h=e.left+r-i.width-1.5*a;break;case"right":n=e.top+s+(e.height-i.height)/2,h=e.right+r+a;break}const A=u(n,s+4,s+g-i.height-4),x=u(h,r+4,r+p-i.width-4);t.style.top=`${Math.round(A)}px`,t.style.left=`${Math.round(x)}px`,this.updateArrowPosition(l,e,{top:A,left:x,width:i.width,height:i.height})}resolvePlacement(t,e){if(this.config.placement!=="auto")return this.config.placement;const i=this.config.offset,l=t.top,r=window.innerHeight-t.bottom,s=t.left,p=window.innerWidth-t.right,g={top:l>=e.height+i,bottom:r>=e.height+i,left:s>=e.width+i,right:p>=e.width+i};for(const n of b)if(g[n])return n;const a={top:l,bottom:r,left:s,right:p};return b.reduce((n,h)=>a[h]>a[n]?h:n,"top")}updateArrowPosition(t,e,i){if(!this.arrow)return;const l=e.left+window.scrollX+e.width/2,r=e.top+window.scrollY+e.height/2;if(t==="top"||t==="bottom"){const g=l-i.left,a=u(g,10,i.width-10);this.arrow.style.left=`${a}px`,this.arrow.style.top="";return}const s=r-i.top,p=u(s,10,i.height-10);this.arrow.style.top=`${p}px`,this.arrow.style.left=""}}const E="cell-tooltip-runtime-style";function S(){if(typeof document>"u"||document.getElementById(E))return;const o=document.createElement("style");o.id=E,o.textContent=f,document.head.appendChild(o)}S(),c.Tooltip=m,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})})); diff --git a/assets/lib/cell-tooltip/cell-tooltip.umd.js b/assets/lib/cell-tooltip/cell-tooltip.umd.js new file mode 100644 index 00000000..fcfe1be2 --- /dev/null +++ b/assets/lib/cell-tooltip/cell-tooltip.umd.js @@ -0,0 +1 @@ +(function(p,l){typeof exports=="object"&&typeof module<"u"?module.exports=l():typeof define=="function"&&define.amd?define(l):(p=typeof globalThis<"u"?globalThis:p||self,p.CellTooltip=l())})(this,(function(){"use strict";const p=".cell-tooltip{position:absolute;z-index:999;pointer-events:none;opacity:0;transform:scale(.97);transition:opacity .12s ease,transform .12s ease;filter:drop-shadow(0 10px 24px rgba(15,23,42,.2));--tooltip-bg: #111827;--tooltip-color: #f8fafc;--tooltip-arrow-size: 8px}.cell-tooltip[data-theme=light],.cell-tooltip[data-theme=auto]{--tooltip-bg: #ffffff;--tooltip-color: #0f172a}@media(prefers-color-scheme:dark){.cell-tooltip[data-theme=auto]{--tooltip-bg: #111827;--tooltip-color: #f8fafc}}.cell-tooltip.show{opacity:1;transform:scale(1)}.cell-tooltip-inner{max-width:240px;padding:6px 10px;border-radius:8px;font-size:12px;line-height:1.35;color:var(--tooltip-color);background:var(--tooltip-bg);text-align:center;word-wrap:break-word}.cell-tooltip-arrow{position:absolute;width:0;height:0;transform:translate(-50%,-50%)}.cell-tooltip[data-placement=top] .cell-tooltip-arrow{bottom:calc(-1 * var(--tooltip-arrow-size));border-left:var(--tooltip-arrow-size) solid transparent;border-right:var(--tooltip-arrow-size) solid transparent;border-top:var(--tooltip-arrow-size) solid var(--tooltip-bg)}.cell-tooltip[data-placement=bottom] .cell-tooltip-arrow{top:0;border-left:var(--tooltip-arrow-size) solid transparent;border-right:var(--tooltip-arrow-size) solid transparent;border-bottom:var(--tooltip-arrow-size) solid var(--tooltip-bg)}.cell-tooltip[data-placement=left] .cell-tooltip-arrow{right:calc(-1 * var(--tooltip-arrow-size));border-top:var(--tooltip-arrow-size) solid transparent;border-bottom:var(--tooltip-arrow-size) solid transparent;border-left:var(--tooltip-arrow-size) solid var(--tooltip-bg)}.cell-tooltip[data-placement=right] .cell-tooltip-arrow{left:0;border-top:var(--tooltip-arrow-size) solid transparent;border-bottom:var(--tooltip-arrow-size) solid transparent;border-right:var(--tooltip-arrow-size) solid var(--tooltip-bg)}",l={placement:"top",trigger:"hover focus",theme:"dark",offset:8,html:!1},w={show:120,hide:80},v=["top","bottom","right","left"],m=new WeakMap;let b=0;function x(o){return b+=1,`${o}-${b}`}function T(o){return o instanceof HTMLElement}function z(o){return typeof o=="number"?{show:o,hide:o}:{show:o?.show??w.show,hide:o?.hide??w.hide}}function L(o){const t=o.trim().split(/\s+/).filter(Boolean);if(t.length===0)return["hover","focus"];const e=[];for(const i of t)(i==="hover"||i==="focus"||i==="click"||i==="manual")&&e.push(i);return e.length>0?e:["hover","focus"]}function g(o,t,e){return Math.min(Math.max(o,t),e)}function C(o){return o==="light"||o==="dark"||o==="auto"?o:l.theme}class u{element;config;tip=null;arrow=null;isEnabled=!0;timeoutId=null;hoverState=null;activeTrigger={click:!1,hover:!1,focus:!1};listeners=[];constructor(t,e={}){this.element=t;const i=t.getAttribute("data-ct-title")??t.getAttribute("title")??"",a=t.getAttribute("data-ct-placement")??void 0,r=t.getAttribute("data-ct-trigger")??void 0,s=t.getAttribute("data-ct-theme")??void 0;this.config={title:e.title??i,placement:e.placement??a??l.placement,trigger:e.trigger??r??l.trigger,theme:C(e.theme??s??l.theme),container:e.container??document.body,offset:e.offset??l.offset,html:e.html??l.html,delay:z(e.delay)},t.title&&(t.setAttribute("data-ct-original-title",t.title),t.removeAttribute("title")),this.addListeners(),m.set(t,this)}static getOrCreateInstance(t,e){return m.get(t)??new u(t,e)}static initAll(t="[data-ct-title]",e){return Array.from(document.querySelectorAll(t)).map(i=>u.getOrCreateInstance(i,e))}enable(){this.isEnabled=!0}disable(){this.isEnabled=!1}toggleEnabled(){this.isEnabled=!this.isEnabled}toggle(){if(this.tip&&this.tip.classList.contains("show")){this.leave();return}this.enter()}show(){if(!this.isEnabled||!this.hasContent())return;const t=this.getTipElement();t.dataset.theme=this.config.theme;const e=t.classList.contains("show");t.isConnected||this.config.container.appendChild(t),this.setContent(t),e||(this.updatePosition(),t.classList.add("show"),this.element.setAttribute("aria-describedby",t.id))}hide(){const t=this.tip;t&&(t.classList.remove("show"),this.activeTrigger.click=!1,this.activeTrigger.focus=!1,this.activeTrigger.hover=!1,this.hoverState=null,this.element.removeAttribute("aria-describedby"),window.setTimeout(()=>{t.classList.contains("show")||t.remove()},150))}update(){this.tip&&this.tip.classList.contains("show")&&this.updatePosition()}dispose(){this.clearTimer(),this.listeners.forEach(t=>t()),this.listeners=[],this.hide(),m.delete(this.element)}addListeners(){const t=L(this.config.trigger);for(const e of t)e!=="manual"&&(e==="hover"&&(this.bind(this.element,"mouseenter",()=>{this.activeTrigger.hover=!0,this.enter()}),this.bind(this.element,"mouseleave",()=>{this.activeTrigger.hover=!1,this.leave()})),e==="focus"&&(this.bind(this.element,"focusin",()=>{this.activeTrigger.focus=!0,this.enter()}),this.bind(this.element,"focusout",()=>{this.activeTrigger.focus=!1,this.leave()})),e==="click"&&this.bind(this.element,"click",i=>{i.preventDefault(),this.activeTrigger.click=!this.activeTrigger.click,this.toggle()}));this.bind(window,"resize",()=>this.update()),this.bind(window,"scroll",()=>{if(this.activeTrigger.hover||this.activeTrigger.focus){this.hide();return}this.update()})}bind(t,e,i){t.addEventListener(e,i),this.listeners.push(()=>t.removeEventListener(e,i))}clearTimer(){this.timeoutId!==null&&(window.clearTimeout(this.timeoutId),this.timeoutId=null)}enter(){this.isEnabled&&(this.clearTimer(),this.hoverState="show",this.timeoutId=window.setTimeout(()=>{this.hoverState==="show"&&this.show()},this.config.delay.show))}leave(){this.hasActiveTrigger()||(this.clearTimer(),this.hoverState="out",this.timeoutId=window.setTimeout(()=>{this.hoverState==="out"&&this.hide()},this.config.delay.hide))}hasActiveTrigger(){return this.activeTrigger.click||this.activeTrigger.focus||this.activeTrigger.hover}hasContent(){return this.getTitle().trim().length>0}getTitle(){const{title:t}=this.config;return typeof t=="function"?t():t}getTipElement(){if(this.tip)return this.tip;const t=document.createElement("div");t.className="cell-tooltip",t.id=x("cell-tooltip"),t.setAttribute("role","tooltip"),t.dataset.theme=this.config.theme,t.innerHTML='
';const e=t.querySelector(".cell-tooltip-arrow");if(!T(e))throw new Error("Tooltip arrow element is missing");return this.tip=t,this.arrow=e,t}setContent(t){const e=t.querySelector(".cell-tooltip-inner");if(!T(e))throw new Error("Tooltip inner element is missing");const i=this.getTitle();if(this.config.html){e.innerHTML=i;return}e.textContent=i}updatePosition(){const t=this.getTipElement();t.style.top="0",t.style.left="0";const e=this.element.getBoundingClientRect(),i=t.getBoundingClientRect(),a=this.resolvePlacement(e,i);t.dataset.placement=a;const r=window.scrollX,s=window.scrollY,d=window.innerWidth,f=window.innerHeight,h=this.config.offset;let n=0,c=0;switch(a){case"top":n=e.top+s-i.height-h,c=e.left+r+(e.width-i.width)/2;break;case"bottom":n=e.bottom+s+h,c=e.left+r+(e.width-i.width)/2;break;case"left":n=e.top+s+(e.height-i.height)/2,c=e.left+r-i.width-1.5*h;break;case"right":n=e.top+s+(e.height-i.height)/2,c=e.right+r+h;break}const E=g(n,s+4,s+f-i.height-4),A=g(c,r+4,r+d-i.width-4);t.style.top=`${Math.round(E)}px`,t.style.left=`${Math.round(A)}px`,this.updateArrowPosition(a,e,{top:E,left:A,width:i.width,height:i.height})}resolvePlacement(t,e){if(this.config.placement!=="auto")return this.config.placement;const i=this.config.offset,a=t.top,r=window.innerHeight-t.bottom,s=t.left,d=window.innerWidth-t.right,f={top:a>=e.height+i,bottom:r>=e.height+i,left:s>=e.width+i,right:d>=e.width+i};for(const n of v)if(f[n])return n;const h={top:a,bottom:r,left:s,right:d};return v.reduce((n,c)=>h[c]>h[n]?c:n,"top")}updateArrowPosition(t,e,i){if(!this.arrow)return;const a=e.left+window.scrollX+e.width/2,r=e.top+window.scrollY+e.height/2;if(t==="top"||t==="bottom"){const f=a-i.left,h=g(f,10,i.width-10);this.arrow.style.left=`${h}px`,this.arrow.style.top="";return}const s=r-i.top,d=g(s,10,i.height-10);this.arrow.style.top=`${d}px`,this.arrow.style.left=""}}const y="cell-tooltip-runtime-style";function k(){if(typeof document>"u"||document.getElementById(y))return;const o=document.createElement("style");o.id=y,o.textContent=p,document.head.appendChild(o)}return k(),u})); diff --git a/layouts/_partials/assets.html b/layouts/_partials/assets.html index b93bb7cd..d645695d 100644 --- a/layouts/_partials/assets.html +++ b/layouts/_partials/assets.html @@ -216,7 +216,7 @@ FixIt theme assets partial {{- /* Cell Tooltip */ -}} {{- if eq .Site.Params.tooltip true -}} - {{- $source := $cdn.cellTooltipJS | default "lib/cell-tooltip/cell-tooltip.umd.cjs" -}} + {{- $source := $cdn.cellTooltipJS | default "lib/cell-tooltip/cell-tooltip.umd.js" -}} {{- dict "Source" $source "Fingerprint" $fingerprint "Defer" true | dict "Page" . "Data" | partial "store/script.html" -}} {{- $config = dict "tooltip" true | merge $config -}} {{- end -}}