From 2fcb857f3810aabb48e4836a9860b3148f297e1c Mon Sep 17 00:00:00 2001 From: garrettmills Date: Thu, 29 Sep 2022 14:02:30 -0500 Subject: [PATCH] Create initial Reveal.js template --- .gitignore | 2 + index.html | 66 +++++++++++++++++++++++++++++++++ lib/attribution/plugin.css | 18 +++++++++ lib/attribution/plugin.js | 75 ++++++++++++++++++++++++++++++++++++++ package.json | 16 ++++++++ pnpm-lock.yaml | 20 ++++++++++ 6 files changed, 197 insertions(+) create mode 100644 .gitignore create mode 100644 index.html create mode 100644 lib/attribution/plugin.css create mode 100644 lib/attribution/plugin.js create mode 100644 package.json create mode 100644 pnpm-lock.yaml diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..7a1537b --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +.idea +node_modules diff --git a/index.html b/index.html new file mode 100644 index 0000000..e3e8158 --- /dev/null +++ b/index.html @@ -0,0 +1,66 @@ + + + + + + + + + + +
+
+
Hello, World!
+
+ Slide 2! + + + Template courtesy of my template. + +
+
+ + +
+
+ + + + + + + + + + + diff --git a/lib/attribution/plugin.css b/lib/attribution/plugin.css new file mode 100644 index 0000000..7f0b5d4 --- /dev/null +++ b/lib/attribution/plugin.css @@ -0,0 +1,18 @@ +/* Attribution plugin: text along the right edge of the viewport */ +.attribution{ + position: absolute; + top: 50%; + bottom: auto; + left: 50%; + right: auto; + font-size: 0.4em; + pointer-events: none; + text-align: center; + writing-mode: vertical-lr; + transform: translate( -50%, -50% ) scale( 100% ) rotate(-180deg); +} + +/* Attribution plugin: activate pointer events for attribution text only */ +.attribution .content{ + pointer-events: auto; +} diff --git a/lib/attribution/plugin.js b/lib/attribution/plugin.js new file mode 100644 index 0000000..8adb300 --- /dev/null +++ b/lib/attribution/plugin.js @@ -0,0 +1,75 @@ +/***************************************************************** +** Author: Roland Schmehl, r.schmehl@tudelft.nl +** +** A plugin for displaying attribution texts sideways along the right +** edge of the viewport. When resizing the viewport or toggling full +** screen mode, the attribution text sticks persistently to the right +** edge of the viewport. +** +** The dynamic scaling of the attribution text via CSS transform +** is adopted from the fullscreen plugin. +** +** Version: 1.0 +** +** License: MIT license (see file LICENSE) +** +******************************************************************/ + +window.RevealAttribution = window.RevealAttribution || { + id: 'RevealAttribution', + init: function(deck) { + initAttribution(deck); + } +}; + +const initAttribution = function(Reveal){ + + var ready = false; + var resize = false; + var scale = 1; + + window.addEventListener( 'ready', function( event ) { + + var content; + + // Remove configured margin of the presentation + var attribution = document.getElementsByClassName("attribution"); + var width = window.innerWidth; + var configuredWidth = Reveal.getConfig().width; + var configuredHeight = Reveal.getConfig().height; + + scale = 1/(1-Reveal.getConfig().margin); + + for (var i = 0; i < attribution.length; i++) { + content = attribution[i].innerHTML; + attribution[i].style.width = configuredWidth + "px"; + attribution[i].style.height = configuredHeight + "px"; + attribution[i].innerHTML = "" + content + ""; + attribution[i].style.transform = 'translate( -50%, -50% ) scale( ' + scale*100 + '% ) rotate(-180deg)'; + } + + // Scale with cover class to mimic backgroundSize cover + resizeCover(); + + }); + + window.addEventListener( 'resize', resizeCover ); + + function resizeCover() { + + // Scale to mimic backgroundSize cover + var attribution = document.getElementsByClassName("attribution"); + var xScale = window.innerWidth / Reveal.getConfig().width; + var yScale = window.innerHeight / Reveal.getConfig().height; + var s = 1; + + if (xScale > yScale) { + // The div fits perfectly in x axis, stretched in y + s = xScale/yScale; + } + for (var i = 0; i < attribution.length; i++) { + attribution[i].style.transform = 'translate( -50%, -50% ) scale( ' + s*scale*100 + '% ) rotate(-180deg)'; + } + } + +}; diff --git a/package.json b/package.json new file mode 100644 index 0000000..e4c5608 --- /dev/null +++ b/package.json @@ -0,0 +1,16 @@ +{ + "name": "slides", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [], + "author": "", + "license": "ISC", + "dependencies": { + "reveal.js": "^4.3.1", + "reveal.js-drawer": "^0.1.3" + } +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml new file mode 100644 index 0000000..0ff5ba5 --- /dev/null +++ b/pnpm-lock.yaml @@ -0,0 +1,20 @@ +lockfileVersion: 5.4 + +specifiers: + reveal.js: ^4.3.1 + reveal.js-drawer: ^0.1.3 + +dependencies: + reveal.js: 4.3.1 + reveal.js-drawer: 0.1.3 + +packages: + + /reveal.js-drawer/0.1.3: + resolution: {integrity: sha512-+ObLL2JCQxmhRJGvqnhSzo380gJiv2hMzlZimZlG1yAeXCwn+qyc/dXLQog/89vWve2RS9bk68jTYqlhPwMUBA==} + dev: false + + /reveal.js/4.3.1: + resolution: {integrity: sha512-1kyEnWeUkaCdBdX//XXq9dtBK95ppvIlSwlHelrP8/wrX6LcsYp4HT9WTFoFEOUBfVqkm8C2aHQ367o+UKfcxw==} + engines: {node: '>=10.0.0'} + dev: false