BerriJ/PHD-Presentation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pimp pointer

Browse Source
This commit is contained in:
Jonathan Berrisch
2025-06-08 11:54:47 +02:00
parent 8df71ce1d3
commit 5cea7e03c2
4 changed files with 21 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
_extensions/quarto-ext/pointer/_extension.yml
View File

@@ -10,7 +10,8 @@ contributes:
config:
pointer:
key: "q"
color: "red"
pointerSize: 16
alwaysVisible: false
icon: "fa-solid fa-arrow-pointer"
hideDelay: 3000
color: "#202020FF"
scaleFactor: 0.03 # 3% of viewport height
icon: "fa fa-hand-point-up"

19
_extensions/quarto-ext/pointer/pointer.css
View File

@@ -1,3 +1,8 @@
:root {
--pointer-scale-factor: 0.025;
/* 2.5% of viewport height */
}
.cursor-dot,
.cursor-dot-outline {
pointer-events: none;
@@ -6,15 +11,23 @@
left: 0;
opacity: 0;
transform: translate(-50%, -50%);
transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
transition: opacity 0.4s ease-in-out;
z-index: 99;
}
.cursor-dot {
font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 5 Free", "Font Awesome 5 Brands";
font-weight: 900;
color: rgb(46, 46, 46);
font-size: 16px;
color: red;
font-size: calc(var(--pointer-scale-factor) * 100vh);
}
.cursor-dot.visible {
opacity: 0.8 !important;
}
.cursor-dot.hidden {
opacity: 0 !important;
}
.no-cursor {

2
_extensions/quarto-ext/pointer/pointer.js
View File

@@ -1 +1 @@
var RevealPointer=function(){"use strict";var e={backspace:8,tab:9,enter:13,shift:16,ctrl:17,alt:18,pausebreak:19,capslock:20,esc:27,space:32,pageup:33,pagedown:34,end:35,home:36,leftarrow:37,uparrow:38,rightarrow:39,downarrow:40,insert:45,delete:46,0:48,1:49,2:50,3:51,4:52,5:53,6:54,7:55,8:56,9:57,a:65,b:66,c:67,d:68,e:69,f:70,g:71,h:72,i:73,j:74,k:75,l:76,m:77,n:78,o:79,p:80,q:81,r:82,s:83,t:84,u:85,v:86,w:87,x:88,y:89,z:90,leftwindowkey:91,rightwindowkey:92,selectkey:93,numpad0:96,numpad1:97,numpad2:98,numpad3:99,numpad4:100,numpad5:101,numpad6:102,numpad7:103,numpad8:104,numpad9:105,multiply:106,add:107,subtract:109,decimalpoint:110,divide:111,f1:112,f2:113,f3:114,f4:115,f5:116,f6:117,f7:118,f8:119,f9:120,f10:121,f11:122,f12:123,numlock:144,scrolllock:145,semicolon:186,equalsign:187,comma:188,dash:189,period:190,forwardslash:191,graveaccent:192,openbracket:219,backslash:220,closebracket:221,singlequote:222};return function(){var t={},o=!1,a=null,n={x:0,y:0,isVisible:!1},i={x:0,y:0,scale:1};function l(o){var a;null==(t=o.pointer||{}).key?t.key="q":t.key=t.key.toLowerCase(),null!=t.pointerSize&&"number"==typeof t.pointerSize||(t.pointerSize=16),null!=t.tailLength&&"number"==typeof t.tailLength||(t.tailLength=10),null!=t.color&&"string"==typeof t.color||(t.color="red"),null!=t.alwaysVisible&&"boolean"==typeof t.alwaysVisible||(t.alwaysVisible=!1),null!=t.icon&&"string"==typeof t.icon||(t.icon="fa-solid fa-arrow-pointer"),t.keyCode=(a=t.key,e[a])}function s(){a.style.top="".concat((n.y-i.y)/i.scale,"px"),a.style.left="".concat((n.x-i.x)/i.scale,"px"),n.isVisible?a.style.opacity="0.8":a.style.opacity="0",1!==i.scale?a.style.fontSize="".concat(t.pointerSize/i.scale,"px"):a.style.fontSize="".concat(t.pointerSize,"px")}function c(e){n.x=e.pageX,n.y=e.pageY;var t=document.body.style.transform;""!==t?(i.x=Number.parseInt(/translate\((.*)px,/gm.exec(t)[1]),i.y=Number.parseInt(/px,\s(.*)px\)/gm.exec(t)[1]),i.scale=Number.parseFloat(/scale\((.)\)/gm.exec(t)[1])):(i.x=0,i.y=0,i.scale=1),requestAnimationFrame(s)}function r(){(o=!o)?(document.addEventListener("mousemove",c),document.body.classList.add("no-cursor"),n.isVisible=!0):(document.removeEventListener("mousemove",c),document.body.classList.remove("no-cursor"),n.isVisible=!1,requestAnimationFrame(s))}return{id:"pointer",init:function(e){var o;l(e.getConfig()),t.alwaysVisible?r():e.addKeyBinding({keyCode:t.keyCode,key:t.key},(function(){r()})),(o=document.createElement("i")).className="cursor-dot "+t.icon,o.style.fontSize="".concat(t.pointerSize,"px"),o.style.color=t.color,t.alwaysVisible&&(o.style.opacity="0.8"),document.body.appendChild(o),a=o}}}}();
var RevealPointer=function(){"use strict";var e={backspace:8,tab:9,enter:13,shift:16,ctrl:17,alt:18,pausebreak:19,capslock:20,esc:27,space:32,pageup:33,pagedown:34,end:35,home:36,leftarrow:37,uparrow:38,rightarrow:39,downarrow:40,insert:45,delete:46,0:48,1:49,2:50,3:51,4:52,5:53,6:54,7:55,8:56,9:57,a:65,b:66,c:67,d:68,e:69,f:70,g:71,h:72,i:73,j:74,k:75,l:76,m:77,n:78,o:79,p:80,q:81,r:82,s:83,t:84,u:85,v:86,w:87,x:88,y:89,z:90,leftwindowkey:91,rightwindowkey:92,selectkey:93,numpad0:96,numpad1:97,numpad2:98,numpad3:99,numpad4:100,numpad5:101,numpad6:102,numpad7:103,numpad8:104,numpad9:105,multiply:106,add:107,subtract:109,decimalpoint:110,divide:111,f1:112,f2:113,f3:114,f4:115,f5:116,f6:117,f7:118,f8:119,f9:120,f10:121,f11:122,f12:123,numlock:144,scrolllock:145,semicolon:186,equalsign:187,comma:188,dash:189,period:190,forwardslash:191,graveaccent:192,openbracket:219,backslash:220,closebracket:221,singlequote:222};return function(){var t={},o=!1,a=null,n={x:0,y:0,isVisible:!1},i={x:0,y:0,scale:1},hideTimer=null;function l(o){var a;null==(t=o.pointer||{}).key?t.key="q":t.key=t.key.toLowerCase(),null!=t.tailLength&&"number"==typeof t.tailLength||(t.tailLength=10),null!=t.color&&"string"==typeof t.color||(t.color="red"),null!=t.alwaysVisible&&"boolean"==typeof t.alwaysVisible||(t.alwaysVisible=!1),null!=t.icon&&"string"==typeof t.icon||(t.icon="fa-solid fa-arrow-pointer"),null!=t.hideDelay&&"number"==typeof t.hideDelay||(t.hideDelay=3e3),null!=t.scaleFactor&&"number"==typeof t.scaleFactor||(t.scaleFactor=0.025),t.keyCode=(a=t.key,e[a])}function updatePointerSize(){document.documentElement.style.setProperty("--pointer-scale-factor",t.scaleFactor)}function showPointer(){if(!n.isVisible){n.isVisible=!0;a.classList.remove("hidden");setTimeout(()=>{a.classList.add("visible")},10);if(hideTimer){clearTimeout(hideTimer);hideTimer=null}if(!t.alwaysVisible){hideTimer=setTimeout(hidePointer,t.hideDelay)}}}function hidePointer(){if(n.isVisible){n.isVisible=!1;a.classList.remove("visible");if(hideTimer){clearTimeout(hideTimer);hideTimer=null}}}function s(){a.style.top="".concat((n.y-i.y)/i.scale,"px"),a.style.left="".concat((n.x-i.x)/i.scale,"px")}function c(e){n.x=e.pageX,n.y=e.pageY;var t=document.body.style.transform;""!==t?(i.x=Number.parseInt(/translate\((.*)px,/gm.exec(t)[1]),i.y=Number.parseInt(/px,\s(.*)px\)/gm.exec(t)[1]),i.scale=Number.parseFloat(/scale\((.)\)/gm.exec(t)[1])):(i.x=0,i.y=0,i.scale=1),requestAnimationFrame(s);if(o&&!t.alwaysVisible){showPointer()}}function r(){(o=!o)?(document.addEventListener("mousemove",c),document.body.classList.add("no-cursor"),showPointer()):(document.removeEventListener("mousemove",c),document.body.classList.remove("no-cursor"),hidePointer())}return{id:"pointer",init:function(e){var o;l(e.getConfig()),updatePointerSize(),t.alwaysVisible?r():e.addKeyBinding({keyCode:t.keyCode,key:t.key},(function(){r()})),(o=document.createElement("i")).className="cursor-dot "+t.icon,o.style.color=t.color,t.alwaysVisible&&o.classList.add("visible"),document.body.appendChild(o),a=o,window.addEventListener("resize",updatePointerSize)}}}}();