diff --git a/templates/impress.cs/js/slide-drawing.js b/templates/impress.cs/js/slide-drawing.js
index 911c72af701edcc3125e92cca32dfede45b19002..99f0509813cd5ef531c374223dfd94c3e3cfb293 100644
--- a/templates/impress.cs/js/slide-drawing.js
+++ b/templates/impress.cs/js/slide-drawing.js
@@ -62,7 +62,7 @@ function slide_drawing_init(paneId) {
hidePanel()
document.getElementById("fabric-show").onclick = showPanel
- document.getElementById("fabric-hide").onclick = function() {
+ document.getElementById("fabric-hide").onclick = function () {
hidePanel()
canvas.clear()
}
@@ -71,12 +71,16 @@ function slide_drawing_init(paneId) {
canvas.isDrawingMode = false
}
+ function initBrush(col) {
+ canvas.isDrawingMode = true
+ canvas.freeDrawingBrush.color = col
+ canvas.freeDrawingBrush.width = 3
+ }
+
new Array("red", "blue", "black").forEach(col => {
- document.getElementById("fabric-" + col).onclick = function () {
- canvas.isDrawingMode = true
- canvas.freeDrawingBrush.color = col
- canvas.freeDrawingBrush.width = 3
- }
+ document.getElementById("fabric-" + col).addEventListener("click", (e) => {
+ initBrush(col);
+ })
})
document.getElementById("fabric-delete").onclick = function () {
@@ -88,4 +92,20 @@ function slide_drawing_init(paneId) {
document.getElementById("fabric-clear").onclick = function () {
canvas.clear()
}
+
+ document.addEventListener('keydown', (e) => {
+ switch (e.key) {
+ case "ArrowLeft":
+ case "ArrowRight":
+ case "c":
+ lowerCanvas();
+ canvas.clear();
+ break;
+
+ case "r":
+ raiseCanvas();
+ initBrush("red");
+ break;
+ }
+ });
}
diff --git a/templates/impress.cs/slides.html b/templates/impress.cs/slides.html
index e87d6a6c56a47af62d0b4fc281a6addd8f12a9b5..d05db0b8408721632eebd487ee694aa706b15970 100644
--- a/templates/impress.cs/slides.html
+++ b/templates/impress.cs/slides.html
@@ -2,104 +2,111 @@
---
{% if jekyll %}
- {% assign headers = site.headers %}
- {% assign slides = site.slides %}
- {% assign style_css = 'style.css' %}
+{% assign headers = site.headers %}
+{% assign slides = site.slides %}
+{% assign style_css = 'style.css' %}
{% else %}
- {% capture style_css %}{{ name }}.css{% endcapture %}
+{% capture style_css %}{{ name }}.css{% endcapture %}
{% endif %}
<!doctype html>
<html lang="en">
+
<head>
- <base target="_blank"/>
+ <base target="_blank" />
<meta charset="utf-8">
<meta name="viewport" content="width=1024">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>{{ headers['title'] }} | by {{ headers['author'] }}</title>
<meta name="generator" content="{{ headers['generator'] }}">
- <meta name="author" content="{{ headers['author'] }}">
+ <meta name="author" content="{{ headers['author'] }}">
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="{{ headers['css'] }}">
- <link rel="apple-touch-icon" href="apple-touch-icon.png" >
+ <link rel="apple-touch-icon" href="apple-touch-icon.png">
</head>
<body class="impress-not-supported" onload="initialisePage()">
-<h1 style="display:none">{{ headers['title'] }}</h1>
-<h2 style="display:none">Presentation Contents</h2>
-
-<nav>
- <div id="start-presentation" onclick="startPresentation()">
- Start presentation
- </div>
- <div class='toc'>
- <h3 id="toc-header">Table of Contents</h3>
- <ul id="toc-list"> </ul>
- </div>
-</nav>
-<div id="drawing-pane"> </div>
-<div id="impress">
-
-<!-- note: assumes no header (breaking slides w/ SLIDE directive) -->
-{% for slide in slides %}
- <div class='step {{ slide.classes }}' {{ slide.data_attributes }}>
- {{ slide.content }}
- </div>
-{% endfor %}
+ <h1 style="display:none">{{ headers['title'] }}</h1>
+ <h2 style="display:none">Presentation Contents</h2>
+
+ <nav>
+ <div id="start-presentation" onclick="startPresentation()">
+ Start presentation
+ </div>
+ <div class='toc'>
+ <h3 id="toc-header">Table of Contents</h3>
+ <ul id="toc-list"> </ul>
+ </div>
+ </nav>
+ <div id="drawing-pane"> </div>
+ <div id="impress">
+
+ <!-- note: assumes no header (breaking slides w/ SLIDE directive) -->
+ {% for slide in slides %}
+ <div class='step {{ slide.classes }}' {{ slide.data_attributes }}>
+ {{ slide.content }}
+ </div>
+ {% endfor %}
-</div>
+ </div>
-<script src="js/impress.js"></script>
+ <script src="js/impress.js"></script>
-<script type="text/x-mathjax-config">
+ <script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
</script>
-<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
+ <script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
-<script src="js/fabric.js"></script>
+ <script src="js/fabric.js"></script>
-<script src="js/slide-drawing.js"></script>
-<script>
- function startPresentation() {
- impress().init()
- slide_drawing_init("drawing-pane")
- document.getElementsByTagName("nav")[0].style.display = "none"
- }
+ <script src="js/slide-drawing.js"></script>
+ <script>
+ function startPresentation() {
+ impress().init()
+ slide_drawing_init("drawing-pane")
+ document.getElementsByTagName("nav")[0].style.display = "none"
+ }
- function createTOC() {
- const h3s = document.getElementsByTagName("h3")
- const toc = document.getElementById("toc-list")
+ function createTOC() {
+ const h3s = document.getElementsByTagName("h3")
+ const toc = document.getElementById("toc-list")
- for (heading of h3s) {
- const id = heading.id
+ for (heading of h3s) {
+ const id = heading.id
- if (id == "toc-header")
- continue
+ if (id == "toc-header")
+ continue
- const li = document.createElement("li")
- const a = document.createElement("a")
- const text = document.createTextNode(heading.textContent)
+ const li = document.createElement("li")
+ const a = document.createElement("a")
+ const text = document.createTextNode(heading.textContent)
- a.href = "#" + id
- a.target = "_self"
- a.appendChild(text)
- li.appendChild(a)
- toc.appendChild(li)
+ a.href = "#" + id
+ a.target = "_self"
+ a.appendChild(text)
+ li.appendChild(a)
+ toc.appendChild(li)
+ }
}
- }
- function initialisePage() {
- console.log("Creating TOC")
- createTOC()
- }
-</script>
+ function initialisePage() {
+ console.log("Creating TOC")
+ createTOC()
+ document.addEventListener('keydown', (e) => {
+ if (e.key == "s") {
+ startPresentation();
+ }
+ });
+ }
+ </script>
</body>
-</html>
+
+</html>
\ No newline at end of file