From 280d75c91c1b6e501c7b94d9bc54a5f649dc6c50 Mon Sep 17 00:00:00 2001
From: kfitz <3170201+kfitz@users.noreply.github.com>
Date: Thu, 22 Jun 2023 17:17:31 -0400
Subject: [PATCH] install fullscreen; update amical.html to use

---
 amical.html                 |  2 ++
 dist/fullscreen.css         |  9 +++++
 plugin/fullscreen/README.md | 39 +++++++++++++++++++++
 plugin/fullscreen/plugin.js | 68 +++++++++++++++++++++++++++++++++++++
 4 files changed, 118 insertions(+)
 create mode 100644 dist/fullscreen.css
 create mode 100644 plugin/fullscreen/README.md
 create mode 100644 plugin/fullscreen/plugin.js

diff --git a/amical.html b/amical.html
index 9e4dd3ac..48f10a41 100644
--- a/amical.html
+++ b/amical.html
@@ -10,6 +10,7 @@
 		<link rel="stylesheet" href="dist/reveal.css">
 		<link rel="stylesheet" href="dist/theme/kfitz.css" id="theme">
         <link rel="stylesheet" href="dist/attribution.css">
+        <link rel="stylesheet" href="dist/fullscreen.css">
 
 		<!-- If the query includes 'print-pdf', include the PDF print sheet -->
 		<script>
@@ -45,6 +46,7 @@
 		<script src="plugin/highlight/highlight.js"></script>
         <script src="plugin/menu/menu.js"></script>
         <script src="plugin/attribution/plugin.js"></script>
+        <script src="plugin/fullscreen/plugin.js"></script>
 		<script>
 		// More info about initialization & config:
 		// - https://revealjs.com/initialization/
diff --git a/dist/fullscreen.css b/dist/fullscreen.css
new file mode 100644
index 00000000..c7e89cef
--- /dev/null
+++ b/dist/fullscreen.css
@@ -0,0 +1,9 @@
+/* Fullscreen images in cover of contain mode */
+.reveal img.fullscreen {
+  position: absolute;
+  top: 50%;
+  bottom: auto;
+  left: 50%;
+  right: auto;
+  transform: translate( -50%, -50% ) scale( 100% );
+}
diff --git a/plugin/fullscreen/README.md b/plugin/fullscreen/README.md
new file mode 100644
index 00000000..64daa6e4
--- /dev/null
+++ b/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
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 + '% )';
+    }
+	}
+
+};