latex/onpoint
6
0
Fork 0
Code Issues 2 Pull Requests Releases 1 Wiki Activity

Add basic slide navigation functionality

Browse Source
This commit is contained in:
Kremitzl 2020-01-28 19:19:14 +01:00
parent b023ee2991
commit e19ca7fe94
7 changed files with 3155 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
slidify.js Normal file
View File

@ -0,0 +1,61 @@
window.addEventListener('load', init);
let slides;
let currentSlide;
function init() {
slides = Array.from(document.querySelectorAll('article'));
for (let i = 0; i < slides.length; i++) {
slides[i].id = `slide${i}`;
}
goToSlide(0);
document.addEventListener('keydown', onKeyPressed);
}
function goToSlide(index) {
if (index >= 0 && index < slides.length) {
currentSlide = index;
window.location.href = window.location.href.split('#')[0] + `#slide${index}`;
}
}
function goToPreviousSlide() {
goToSlide(currentSlide - 1);
}
function goToNextSlide() {
goToSlide(currentSlide + 1);
}
function goToFirstSlide() {
goToSlide(0);
}
function goToLastSlide() {
goToSlide(slides.length - 1);
}
function onKeyPressed(event) {
switch (event.keyCode) {
case 34: // page down
case 40: // arrow down
case 39:
// arrow right
goToNextSlide();
break;
case 33: // page up
case 38: // arrow up
case 37:
// arrow left
goToPreviousSlide();
break;
case 36:
// pos1
goToFirstSlide();
break;
case 35:
// end
goToLastSlide();
break;
}
}

111
test/.gitignore vendored Normal file
View File

@ -0,0 +1,111 @@
# Created by https://www.gitignore.io/api/node
# Edit at https://www.gitignore.io/?templates=node
### Node ###
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
*.lcov
# nyc test coverage
.nyc_output
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# TypeScript v1 declaration files
typings/
# TypeScript cache
*.tsbuildinfo
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
.env.test
# parcel-bundler cache (https://parceljs.org/)
.cache
# next.js build output
.next
# nuxt.js build output
.nuxt
# rollup.js default build output
dist/
# Uncomment the public line if your project uses Gatsby
# https://nextjs.org/blog/next-9-1#public-directory-support
# https://create-react-app.dev/docs/using-the-public-folder/#docsNav
# public
# Storybook build outputs
.out
.storybook-out
# vuepress build output
.vuepress/dist
# Serverless directories
.serverless/
# FuseBox cache
.fusebox/
# DynamoDB Local files
.dynamodb/
# Temporary folders
tmp/
temp/
# End of https://www.gitignore.io/api/node

2
test/layouts/root.html
View File

@ -4,9 +4,11 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles/style.scss">
<title>@title</title>
</head>
<body>
@slides <!-- reserved keyword -->
<script src="scripts/slidify.js"></script>
</body>
</html>

2883
test/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

10
test/package.json Normal file
View File

@ -0,0 +1,10 @@
{
"name": "onpoint-core",
"version": "0.0.1",
"scripts": {
"build": "babel scripts -d ../"
},
"devDependencies": {
"babel-cli": "^6.26.0"
}
}

57
test/scripts/slidify.js Normal file
View File

@ -0,0 +1,57 @@
window.addEventListener('load', init)
let slides
let currentSlide
function init() {
slides = Array.from(document.querySelectorAll('article'))
for (let i=0; i<slides.length; i++) {
slides[i].id = `slide${i}`
}
goToSlide(0)
document.addEventListener('keydown', onKeyPressed)
}
function goToSlide(index) {
if (index >= 0 && index < slides.length) {
currentSlide = index
window.location.href = window.location.href.split('#')[0] + `#slide${index}`
}
}
function goToPreviousSlide() {
goToSlide(currentSlide - 1)
}
function goToNextSlide() {
goToSlide(currentSlide + 1)
}
function goToFirstSlide() {
goToSlide(0)
}
function goToLastSlide() {
goToSlide(slides.length - 1)
}
function onKeyPressed(event) {
switch (event.keyCode) {
case 34: // page down
case 40: // arrow down
case 39: // arrow right
goToNextSlide()
break
case 33: // page up
case 38: // arrow up
case 37: // arrow left
goToPreviousSlide()
break
case 36: // pos1
goToFirstSlide()
break
case 35: // end
goToLastSlide()
break
}
}

33
test/styles/style.scss
View File

@ -1,3 +1,32 @@
* {
box-sizing: border-box
}
box-sizing: border-box;
}
html {
margin: 0;
padding: 0;
}
@media screen {
body {
background: black;
margin: 0;
padding: 0;
}
section {
display: contents;
}
article {
display: none;
background: white;
position: absolute;
border: 1px solid red;
}
article:target {
display: block;
}
}