Pimp pointer

_extensions/quarto-ext/pointer/_extension.yml

@@ -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"

_extensions/quarto-ext/pointer/pointer.css

@@ -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);
+  color: red;
-  font-size: 16px;
+  font-size: calc(var(--pointer-scale-factor) * 100vh);
+}
+
+.cursor-dot.visible {
+  opacity: 0.8 !important;
+}
+
+.cursor-dot.hidden {
+  opacity: 0 !important;
 }
 
 .no-cursor {

_extensions/quarto-ext/pointer/pointer.js

@@ -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)}}}}();

index.qmd

@@ -10,11 +10,6 @@ affiliations:
       name: University of Duisburg-Essen, House of Energy, Climate, and Finance
 format:
     revealjs:
-        pointer:
-          key: "q"
-          color: "#202020FF"
-          pointerSize: 30
-          icon: "fa fa-hand-point-up"
         embed-resources: false
         self-contained-math: true
         width: 1280