install fullscreen; update amical.html to use

plugin/fullscreen/README.md

@@ -0,0 +1,39 @@
+# Fullscreen plugin
+
+This is a small Reveal.js plugin to display regular images in fullscreen mode, using the entire available window area, with options `contain` or `cover` mimicking the display behavior of background images.
+
+In Reveal.js, the scaling of [background images](https://revealjs.com/backgrounds/) is controlled by the [data-background-size](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size) attribute. The value `contain` uniformly scales the image to the available window area without cropping the image, leaving empty space if the aspect ratios of the image and the available window area are different, while the value `cover` scales the image to the available area, cropping it either vertically or horizontally, if necessary, so that no empty space remains. However, only one background image can be used per slide. In some cases, it can be useful to consecutively display several images of same size in fullscreen mode within one slide, using the [fragment feature](https://revealjs.com/fragments/) of Reveal.js. For example, to add precisely positioned graphical elements on top of a background photo, or to add a fullscreen slide show within one slide.
+
+## Installation
+
+Copy the file `plugin.js` into a subfolder of the plugin folder of your Reveal.js installation, i.e. `plugin/fullscreen`, and copy the file `fullscreen.css` into the `dist` subfolder of your Reveal.js installation. Load the plugin as shown below.
+
+```html
+<link rel="stylesheet" href="dist/fullscreen.css">
+<script src="plugin/fullscreen/plugin.js"></script>
+
+<script>
+    Reveal.initialize({
+        // ...
+        plugins: [ RevealFullscreen ],
+        // ...
+    });
+</script>
+```
+
+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
+<section data-background-image="https://wallpapercave.com/wp/hd9yFNT.jpg" data-background-size="cover">
+  <img class="fragment fullscreen cover" src="https://wallpapercave.com/wp/wp3162046.jpg">
+  <img class="fragment fullscreen cover" src="https://wallpapercave.com/wp/wp3987071.jpg">
+</section>
+```
+
+## License
+
+Copyright (C) 2021, Roland Schmehl

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 + '% )';
+    }
+	}
+
+};