Skip to content
Snippets Groups Projects
Commit 12a47154 authored by Han DongGyun ULAC154's avatar Han DongGyun ULAC154
Browse files

add keyboard shortcuts

parent d10660d0
Branches
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
templates/impress.cs/js/slide-drawing.js
+ 26
− 6
View file @ 12a47154
...@@ -62,7 +62,7 @@ function slide_drawing_init(paneId) { ...@@ -62,7 +62,7 @@ function slide_drawing_init(paneId) {
hidePanel() hidePanel()
document.getElementById("fabric-show").onclick = showPanel document.getElementById("fabric-show").onclick = showPanel
document.getElementById("fabric-hide").onclick = function() { document.getElementById("fabric-hide").onclick = function () {
hidePanel() hidePanel()
canvas.clear() canvas.clear()
} }
...@@ -71,12 +71,16 @@ function slide_drawing_init(paneId) { ...@@ -71,12 +71,16 @@ function slide_drawing_init(paneId) {
canvas.isDrawingMode = false canvas.isDrawingMode = false
} }
function initBrush(col) {
canvas.isDrawingMode = true
canvas.freeDrawingBrush.color = col
canvas.freeDrawingBrush.width = 3
}
new Array("red", "blue", "black").forEach(col => { new Array("red", "blue", "black").forEach(col => {
document.getElementById("fabric-" + col).onclick = function () { document.getElementById("fabric-" + col).addEventListener("click", (e) => {
canvas.isDrawingMode = true initBrush(col);
canvas.freeDrawingBrush.color = col })
canvas.freeDrawingBrush.width = 3
}
}) })
document.getElementById("fabric-delete").onclick = function () { document.getElementById("fabric-delete").onclick = function () {
...@@ -88,4 +92,20 @@ function slide_drawing_init(paneId) { ...@@ -88,4 +92,20 @@ function slide_drawing_init(paneId) {
document.getElementById("fabric-clear").onclick = function () { document.getElementById("fabric-clear").onclick = function () {
canvas.clear() 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;
}
});
} }
templates/impress.cs/slides.html
+ 69
− 62
View file @ 12a47154
...@@ -2,104 +2,111 @@ ...@@ -2,104 +2,111 @@
--- ---
{% if jekyll %} {% if jekyll %}
{% assign headers = site.headers %} {% assign headers = site.headers %}
{% assign slides = site.slides %} {% assign slides = site.slides %}
{% assign style_css = 'style.css' %} {% assign style_css = 'style.css' %}
{% else %} {% else %}
{% capture style_css %}{{ name }}.css{% endcapture %} {% capture style_css %}{{ name }}.css{% endcapture %}
{% endif %} {% endif %}
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<base target="_blank"/> <base target="_blank" />
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=1024"> <meta name="viewport" content="width=1024">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<title>{{ headers['title'] }} | by {{ headers['author'] }}</title> <title>{{ headers['title'] }} | by {{ headers['author'] }}</title>
<meta name="generator" content="{{ headers['generator'] }}"> <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="css/style.css" />
<link rel="stylesheet" href="{{ headers['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> </head>
<body class="impress-not-supported" onload="initialisePage()"> <body class="impress-not-supported" onload="initialisePage()">
<h1 style="display:none">{{ headers['title'] }}</h1> <h1 style="display:none">{{ headers['title'] }}</h1>
<h2 style="display:none">Presentation Contents</h2> <h2 style="display:none">Presentation Contents</h2>
<nav> <nav>
<div id="start-presentation" onclick="startPresentation()"> <div id="start-presentation" onclick="startPresentation()">
Start presentation Start presentation
</div> </div>
<div class='toc'> <div class='toc'>
<h3 id="toc-header">Table of Contents</h3> <h3 id="toc-header">Table of Contents</h3>
<ul id="toc-list"> </ul> <ul id="toc-list"> </ul>
</div> </div>
</nav> </nav>
<div id="drawing-pane"> </div> <div id="drawing-pane"> </div>
<div id="impress"> <div id="impress">
<!-- note: assumes no header (breaking slides w/ SLIDE directive) --> <!-- note: assumes no header (breaking slides w/ SLIDE directive) -->
{% for slide in slides %} {% for slide in slides %}
<div class='step {{ slide.classes }}' {{ slide.data_attributes }}> <div class='step {{ slide.classes }}' {{ slide.data_attributes }}>
{{ slide.content }} {{ slide.content }}
</div> </div>
{% endfor %} {% 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({ MathJax.Hub.Config({
tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]} tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
}); });
</script> </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 src="js/slide-drawing.js"></script>
<script> <script>
function startPresentation() { function startPresentation() {
impress().init() impress().init()
slide_drawing_init("drawing-pane") slide_drawing_init("drawing-pane")
document.getElementsByTagName("nav")[0].style.display = "none" document.getElementsByTagName("nav")[0].style.display = "none"
} }
function createTOC() { function createTOC() {
const h3s = document.getElementsByTagName("h3") const h3s = document.getElementsByTagName("h3")
const toc = document.getElementById("toc-list") const toc = document.getElementById("toc-list")
for (heading of h3s) { for (heading of h3s) {
const id = heading.id const id = heading.id
if (id == "toc-header") if (id == "toc-header")
continue continue
const li = document.createElement("li") const li = document.createElement("li")
const a = document.createElement("a") const a = document.createElement("a")
const text = document.createTextNode(heading.textContent) const text = document.createTextNode(heading.textContent)
a.href = "#" + id a.href = "#" + id
a.target = "_self" a.target = "_self"
a.appendChild(text) a.appendChild(text)
li.appendChild(a) li.appendChild(a)
toc.appendChild(li) toc.appendChild(li)
}
} }
}
function initialisePage() { function initialisePage() {
console.log("Creating TOC") console.log("Creating TOC")
createTOC() createTOC()
} document.addEventListener('keydown', (e) => {
</script> if (e.key == "s") {
startPresentation();
}
});
}
</script>
</body> </body>
</html>
</html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

GitLab by CIM Team | RHUL