install menu and attribution plugins, update amical.html to use

plugin/attribution/README.md

@@ -0,0 +1,42 @@
+# Attribution plugin
+
+This is a small Reveal.js plugin for displaying attribution texts in an unobtrusive way, 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 attribution text can be styled via CSS, can include links, etc.
+
+## 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 `attribution.css` into the `dist` subfolder of your Reveal.js installation. Load the plugin as shown below.
+
+```html
+<link rel="stylesheet" href="dist/attribution.css">
+<script src="plugin/attribution/plugin.js"></script>
+
+<script>
+    Reveal.initialize({
+        // ...
+        plugins: [ RevealAttribution ],
+        // ...
+    });
+</script>
+```
+
+Alternatively to loading the CSS styles as a separate file, you can add the content of file `attribution.css` directly to your local cases file (typically in folders `dist` or `dist/theme`).
+
+Note that the plugin automatically wraps `<span class="content">` and `</span>` around the attribution text, which is necessary for reactivating pointer events on the attribution text.
+
+## Usage
+
+Add an attribution to your slide.
+
+```html
+<span class="attribution">Photo courtesy of <a href="https://www.britishmuseum.org">British Museum</a></span>
+```
+
+## Known issues
+
+- [Issue #2](): On Chromium, the attribution text is not properly placed at the right border of the display. Works fine on Chrome and Firefox.
+
+## License
+
+Copyright (C) 2021, Roland Schmehl

plugin/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 = "<span class='content'>" + content + "</span>";
+      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)';
+    }
+  }
+
+};