Add laser pointer option

help-menu.html

@@ -8,6 +8,7 @@
     <li>Open slide overview: Hit <kbd>Ctrl</kbd> twice.</li>
     <li>Close slide overview: <kbd>Esc</kbd></li>
     <li>Open the help menu: <kbd>H</kbd></li>
+    <li>Show laser pointer: <kbd>P</kbd></li>
   </ul>
   <p>
     <a href="@imprint">Imprint</a> and <a href="@privacy-policy">privacy policy</a>

onpoint.js

@@ -104,6 +104,9 @@ function onKeyPressed(event) {
 		case 72: // H
 			onHPressed();
 			break;
+		case 80: // P
+			onPPressed();
+			break;
 	}
 }
 
@@ -112,6 +115,11 @@ function onHPressed() {
 		toggleHelpMenu();
 }
 
+function onPPressed() {
+	if (!(document.activeElement === topicListSearch))
+		togglePointer();
+}
+
 function showNextFragment() {
 	let fragments = [...slides[currentSlide].querySelectorAll('.fragment')]
 	let visible = [...slides[currentSlide].querySelectorAll('.fragment.visible')]
@@ -395,6 +403,10 @@ function toggleHelpMenu() {
 	document.getElementById('help-menu-toggle').click();
 }
 
+function togglePointer() {
+	document.body.classList.toggle('laser-pointer-active');
+}
+
 function hideHelpMenu() {
 	document.getElementById('help-menu-checkbox').checked = false;
 }

test/images/pointer.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="4.2333331mm"
+   height="4.2333331mm"
+   viewBox="0 0 4.2333331 4.2333331"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="translate(-36.493334,-89.210833)">
+    <circle
+       style="fill:#d40000;stroke-width:0.264583"
+       id="path1"
+       cx="38.610001"
+       cy="91.327499"
+       r="2.1166666" />
+  </g>
+</svg>

test/styles/style.css

@@ -22,6 +22,10 @@ h1 {
   opacity: 1;
 }
 
+body.laser-pointer-active {
+  cursor: url("../images/pointer.svg"), auto;
+}
+
 @media screen {
   body {
     background: black;