diff --git a/amical.html b/amical.html index 9e4dd3ac..48f10a41 100644 --- a/amical.html +++ b/amical.html @@ -10,6 +10,7 @@ + + + + +``` + +Alternatively to loading the CSS styles as a separate file, you can add the content of file `fullscreen.css` directly to your local cases file (typically in folders `dist` or `dist/theme`). + +## Usage + +Add the image in the content section of the slide with the `fullscreen` class. To mimic `cover` mode add also the `cover` class, otherwise the image will be displayed in `contain` mode. + +```html +
+ + +
+``` + +## License + +Copyright (C) 2021, Roland Schmehl diff --git a/plugin/fullscreen/plugin.js b/plugin/fullscreen/plugin.js new file mode 100644 index 00000000..14717d7f --- /dev/null +++ b/plugin/fullscreen/plugin.js @@ -0,0 +1,68 @@ +/***************************************************************** +** Author: Roland Schmehl, r.schmehl@tudelft.nl +** +** A plugin for displaying fullscreen images in the same way as +** background images are. +** +** Note: +** - addEventListener() method needs to be called for target window +** and not for target Reveal for dynamic resizing to work. +** +** Version: 1.0 +** +** License: MIT license (see file LICENSE) +** +******************************************************************/ + +window.RevealFullscreen = window.RevealFullscreen || { + id: 'RevealFullscreen', + init: function(deck) { + initFullscreen(deck); + } +}; + +const initFullscreen = function(Reveal){ + + var ready = false; + var resize = false; + var scale = 0; + + window.addEventListener( 'ready', function( event ) { + + // Remove configured margin of the presentation + var fullscreen = document.getElementsByClassName("fullscreen"); + + scale = 1/(1-Reveal.getConfig().margin); + + for (var i = 0; i < fullscreen.length; i++) { + fullscreen[i].style.transform = 'translate( -50%, -50% ) scale( ' + scale*100 + '% )'; + } + + // Scale images with cover class to mimic backgroundSize cover + resizeCover(); + + }); + + window.addEventListener( 'resize', resizeCover ); + + function resizeCover() { + + // Scale to mimic backgroundSize cover + var fullscreen = document.getElementsByClassName("fullscreen cover"); + var xScale = window.innerWidth / Reveal.getConfig().width; + var yScale = window.innerHeight / Reveal.getConfig().height; + var s; + + if (xScale > yScale) { + // The image fits perfectly in x axis, stretched in y + s = xScale/yScale; + } else { + // The image fits perfectly in y axis, stretched in x + s = yScale/xScale; + } + for (var i = 0; i < fullscreen.length; i++) { + fullscreen[i].style.transform = 'translate( -50%, -50% ) scale( ' + s*scale*100 + '% )'; + } + } + +};