reveal.js-appearance 1.0.7 → 1.1.1

package/CHANGELOG.md

@@ -0,0 +1,55 @@
+# Changelog
+
+
+## [1.1.1] - 2021-11-27
+### Added
+- Added a new `autoappear` mode, for use in cases where adding animation classes is too much of a hassle, like inside Markdown.
+- Started keeping the changelog.
+
+
+
+## [1.1.0] - 2021-09-03
+### Added
+- Added Github corner badge
+
+### Changed
+- Changed readme
+
+
+
+## [1.0.9] - 2021-06-30
+### Changed
+- Fixed a bug where '=' was '=='.
+
+
+
+## [1.0.8] - 2021-06-27
+### Added
+- Choose an event at which Appearance launches its animations
+
+### Changed
+- Appearance now shows the complete slides from the overview
+
+
+
+## [1.0.7] - 2020-06-28
+### Changed
+- Clearing timeouts that are in past slides. This solves 'hanging' Appearance items if you slide back and forth.
+
+
+
+## [1.0.6] - 2020-06-28
+### Changed
+- Fix bug that hid Appearance items in PDF exports.
+
+
+
+## [1.0.5] - 2020-05-20
+### Added
+- Added compatibility with the new Reveal.js 4 that changes the way plugins work.
+
+
+
+## [1.0.4] - 2020-05-20
+### Added
+- The 1.0.4 release is compatible with Reveal.js 3. Reveal versions lower than 4 have no "slidetransitionend" event, so this release also has the Transit.js plugin included (see https://github.com/Martinomagnifico/reveal.js-transit for more information).

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Martijn De Jongh (Martino)
+Copyright (c) 2021 Martijn De Jongh (Martino)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,8 +1,10 @@
 # Appearance
 
+[![Version](https://img.shields.io/npm/v/reveal.js-appearance)](#) [![Downloads](https://img.shields.io/npm/dt/reveal.js-appearance)](https://github.com/Martinomagnifico/reveal.js-appearance/archive/refs/heads/master.zip)
+
 A plugin for [Reveal.js](https://revealjs.com) 4 that adds appearance effects to elements.
 
-[![Screenshot](screenshot.png)](https://martinomagnifico.github.io/reveal.js-appearance/demo.html)
+[![Screenshot](https://martinomagnifico.github.io/reveal.js-appearance/screenshot.png)](https://martinomagnifico.github.io/reveal.js-appearance/demo.html)
 
 In Powerpoint you can make slides with items that appear automatically with effects. This plugin for Reveal.js tries to achieve the same result. It's easy to set up. It uses Animate.css by Daniel Eden for the animations, with some changes in a separate CSS file to allow for a non-animated state. 
 
@@ -10,13 +12,11 @@ In Powerpoint you can make slides with items that appear automatically with effe
 
 We do not want the animations to start during the slide transition, so we wait for the slide transition to end. Then the animations will start automatically if the HTML is set up to use Appearance.
 
+Version 1.1.1 adds an `autoappear` mode for use in cases where adding animation classes is too much of a hassle, like inside Markdown.
 
 
-## Installation
-
-The Appearance plugin has been rewritten for Reveal.js version 4.
 
-If you want to use Appearance with an older version of Reveal, use the [1.0.4 version](https://github.com/Martinomagnifico/reveal.js-appearance/releases).
+## Installation
 
 ### Regular installation
 
@@ -26,7 +26,7 @@ Copy the appearance folder to the plugins folder of the reveal.js folder, like t
 
 This plugin is published to, and can be installed from, npm.
 
-```javascript
+```console
 npm install reveal.js-appearance
 ```
 The Appearance plugin folder can then be referenced from `node_modules/reveal.js-appearance/plugin/appearance`
@@ -37,8 +37,6 @@ The Appearance plugin folder can then be referenced from `node_modules/reveal.js
 
 ### JavaScript
 
-
-
 There are two JavaScript files for Appearance, a regular one, `appearance.js`, and a module one, `appearance.esm.js`. You only need one of them:
 
 #### Regular 
@@ -77,7 +75,7 @@ You now need to add TWO stylesheets to your presentation.
 * The second file is included with Appearance. It adds to the first stylesheet to allow for a non-animated state.
 
 ```html
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
 <link rel="stylesheet" href="plugin/appearance/appearance.css">
 ```
 
@@ -94,6 +92,23 @@ It is easy to set up your HTML structure for Appearance:
 	<li class="animated bounceInLeft">It adds some attention.</li>
 </ul>
 ```
+When you are working with Markdown, this can be a chore so if you do not want to add all these classes, you can set the option `autoappear` to `true` (see Configuration below) and let Appearance do the heavy work. You do not need to add any markup and it will stay like this:
+
+```html
+<ul>
+	<li>Add it to any text element</li>
+	<li>Like list items, or headers.</li>
+	<li>It adds some attention.</li>
+</ul>
+```
+or this:
+
+```markdown
+* Add it to any text element
+* Like list items, or headers.
+* It adds some attention.
+
+```
 
 
 ## Configuration
@@ -104,20 +119,57 @@ There are a few options that you can change from the Reveal.js options. The valu
 Reveal.initialize({
 	// ...
 	appearance: {
-		// The baseclass uses the baseclass from Animate.css. Change it if you like
 		baseclass: 'animated',
-		// Use a specific class for the visible state.
 		visibleclass: 'in',
-		// Change this if you want to see the shown elements if you go back
 		hideagain: true,
-		// Base time between appearances
-		delay: 300
-		
+		delay: 300,
+		appearevent: 'slidetransitionend',
+		autoappear: false,
+		autoelements: false
 	},
 	plugins: [ Appearance ]
 });
 ```
 
+* **`baseclass`**: The baseclass uses the baseclass from Animate.css. Change it if you like. 
+* **`visibleclass`**: Use a specific class for the visible state. 
+* **`hideagain`**: Change this (true/false) if you want to see the shown elements if you go back.
+* **`delay`**: Base time in ms between appearances.
+* **`appearevent`**: Use a specific event at which Appearance starts.
+* **`autoappear`**: Use this when you do not want to add classes to each item that you want to appear, and just let Appearance add animation classes to (all of) the provided elements in the presentation. See "Using 'autoappear'" mode below.
+* **`autoelements`**: These are the elements that `autoappear` will target. Each element has a selector and an animation class. If `autoappear` is off, the elements will still get animation if the section contains a `data-autoappear` attribute.
+
+
+### Changing the 'appearevent'
+When you navigate from slide to slide, you can set transition effects in Reveal. These effects take some time. That's why, by default, Appearance only starts when the slide transition has ended. 
+
+There are cases however, where  there is hardly any transition, for example, when going from an autoanimate slide to another. Reveal then suppresses the user-set transition to a short opacity change. Starting *together with* the transition might then be nicer. You can use any of the following events:
+
+* *slidetransitionend* (default, Appearance will start animating elements after the transition)
+* *slidechanged* (Appearance will start together with the transition)
+* *auto* (Appearance will start together with the transition, but only on autoanimate slides, other slides will use *slidetransitionend*) 
+
+These same event triggers can be set through the data-attribute `data-appearevent`. 
+
+When using Appearance inside an autoanimate slide, and changing the appearevent to `slidechanged` or `auto`, keep in mind that Reveal transforms opacity for all non-autoanimate items, while Appearance does the same on most of the effects. To avoid strange behaviour, wrap these Appearance items in a parent. For example, a list of animated bullet points works well, because the animated class is on the children, not the parent. Separate headings or other elements do not have that, so should be wrapped.
+
+
+### Using 'autoappear' mode
+Sometimes (for example with Markdown), adding classes to elements is a chore. Appearance can automatically add animation classes to specific elements in the presentation.
+
+With the option `autoappear` set to `true`, ALL elements in the presentation that have a certain selector will get an animation. These selectors and the animations can be set in the configuration options like this: 
+
+```javascript
+autoelements: {
+	'ul li': 'fadeInLeft',
+	'ol li': 'fadeInRight'
+}
+```
+You can add any selector and animation class to this object.
+
+With the option `autoappear` set to `false`, the above still works, but only on a data-attribute basis. ONLY elements in the presentation that are inside sections or fragments with a data-attribute of `data-autoappear` will be animated automatically. 
+
+
 
 ## Now change it
 
@@ -129,6 +181,7 @@ It is easy to change the effects for Appearance. Here's how to change the delay
 <img class="animated fadeInDown" data-src="3.jpg" data-delay="120">
 ```
 or the speed of each animation, using the tempo classes from Animate.css:
+
 ```html
 <img class="animated fadeInDown slower" data-src="1.jpg">
 <img class="animated fadeInDown slow" data-src="2.jpg">
@@ -145,4 +198,4 @@ And if you want to show off what you made with it, please do :-)
 ## License
 MIT licensed
 
-Copyright (C) 2020 Martijn De Jongh (Martino)
+Copyright (C) 2021 Martijn De Jongh (Martino)

package/css/demo.css

@@ -9,3 +9,13 @@
 
 .backgrounds {
   background: #1a1626; }
+
+a.github-corner {
+  position: absolute;
+  z-index: 1;
+  width: clamp(50px, 8vmax, 80px);
+  line-height: 0;
+  color: rgba(255, 255, 255, 0.5); }
+
+a.github-corner:hover {
+  color: white; }

package/demo.html

@@ -8,23 +8,26 @@
     <meta name="author" content="Martinomagnifico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js/dist/reset.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js/dist/reveal.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js/dist/theme/black.css">
+    <link rel="stylesheet" href="../dist/reset.css">
+    <link rel="stylesheet" href="../dist/reveal.css">
+    <link rel="stylesheet" href="../dist/theme/black.css">
     <link rel="stylesheet" href="css/demo.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
     <link rel="stylesheet" href="plugin/appearance/appearance.css">
 </head>
 
 <body>
-    <div class="reveal">
+    <div class="reveal"><a class="github-corner" href="https://github.com/Martinomagnifico/reveal.js-appearance" target="blank" title="View source on GitHub">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 55">
+                <path fill="currentColor" d="M27.5 11.2a16.3 16.3 0 0 0-5.1 31.7c.8.2 1.1-.3 1.1-.7v-2.8c-4.5 1-5.5-2.2-5.5-2.2-.7-1.9-1.8-2.4-1.8-2.4-1.5-1 .1-1 .1-1 1.6.1 2.5 1.7 2.5 1.7 1.5 2.5 3.8 1.8 4.7 1.4.2-1 .6-1.8 1-2.2-3.5-.4-7.3-1.8-7.3-8 0-1.8.6-3.3 1.6-4.4-.1-.5-.7-2.1.2-4.4 0 0 1.4-.4 4.5 1.7a15.6 15.6 0 0 1 8.1 0c3.1-2 4.5-1.7 4.5-1.7.9 2.3.3 4 .2 4.4 1 1 1.6 2.6 1.6 4.3 0 6.3-3.8 7.7-7.4 8 .6.6 1.1 1.6 1.1 3v4.6c0 .4.3.9 1.1.7a16.3 16.3 0 0 0-5.2-31.7"></path>
+            </svg></a>
         <div class="slides">
             <section class="center">
                 <h1 class="animated flipInX slow">Appearance</h1>
                 <h3 class="animated flipInX slow" data-delay="700">for Reveal.js</h3>
             </section>
-            <section class="center"><small>In Powerpoint you can make slides with items that appear automatically with effects. This plugin for Reveal.js tries to achieve the same result. It's easy to set up. It uses Animate.css by Daniel Eden for the animations, with some changes in a separate CSS file to allow for a non-animated state. </small><br><br><small>We do not want the animations to start during the slide transition, so we wait for the slide transition to end. Reveal versions lower than 4 have no "slidetransitionend" event, so we need the Transit.js plugin that handles that.</small>
-                <p>Let's check out what appearance.js does:</p>
+            <section class="center"><small>In Powerpoint you can make slides with items that appear automatically with effects. Appearance is a plugin for Reveal.js that does the same. </small><small>Appearance is easy to set up. It uses Animate.css by Daniel Eden for the animations, with some changes in a separate CSS file to allow for a non-animated state. </small>
+                <p>Let's check out what Appearance does:</p>
             </section>
             <section class="center">
                 <h3>Let text appear</h3>
@@ -70,9 +73,32 @@
                         <div class="padded"><img class="animated fadeInDown" data-src="img/5.jpg"></div>
                     </div>
                 </section>
+                <section class="center" data-auto-animate>
+                    <h3>Change when Appearance starts</h3>
+                </section>
+                <section class="center" data-auto-animate data-appearevent="auto">
+                    <h3>Change when Appearance starts</h3>
+                    <div>
+                        <p class="animated fadeInUp">You can use any of the following events:</p>
+                    </div>
+                    <ul>
+                        <li class="animated fadeInLeft"><em>slidetransitionend</em> (default, after the transition)</li>
+                        <li class="animated fadeInLeft"><em>slidechanged</em> (with the transition)</li>
+                        <li class="animated fadeInLeft"><em>auto</em> (with transition, on autoanimate slides)</li>
+                    </ul>
+                    <div><br><small class="animated fadeInUp">This can also be set per-slide with data-attributes.</small></div>
+                </section>
+            </section>
+            <section class="center" data-transition="convex-in fade-out" data-autoappear>
+                <h3>Autoappear mode</h3><small>Sometimes (for example with Markdown), adding classes to elements is a chore. Appearance can automatically add animation classes to specific elements in the presentation (with the option <code>autoappear</code>) or per slide (with <code>data-autoappear</code>).</small>
+                <ul>
+                    <li>This is list item 1</li>
+                    <li>This is list item 2</li>
+                    <li>This is list item 3</li>
+                </ul>
             </section>
             <section class="center" data-transition="convex-in fade-out">
-                <h3>Additional animations:</h3>
+                <h3>Additional animations</h3>
                 <ul>
                     <li class="animated skidLeft" data-delay="300">Appear with .skidLeft</li>
                     <li class="animated skidLeftBig" data-delay="1000">Appear with .skidLeftBig</li>
@@ -85,14 +111,14 @@
             <section class="center" data-transition="fade-in">
                 <h3>Thanks</h3>
                 <ul>
-                    <li class="animated bounceInLeft">Hakim El Hattab for <a href="https://revealjs.com" target="_blank">Reveal.js</a></li>
-                    <li class="animated bounceInLeft">Daniel Eden for <a href="https://daneden.github.io/animate.css/" target="_blank">Animate.css</a></li>
-                    <li class="animated bounceInLeft">David Marby &amp; Nijiko Yonskai for <a href="https://picsum.photos" target="_blank">picsum.photos</a></li>
+                    <li class="animated fadeInLeft">Hakim El Hattab for <a href="https://revealjs.com" target="_blank">Reveal.js</a></li>
+                    <li class="animated fadeInLeft">Daniel Eden for <a href="https://daneden.github.io/animate.css/" target="_blank">Animate.css</a></li>
+                    <li class="animated fadeInLeft">David Marby &amp; Nijiko Yonskai for <a href="https://picsum.photos" target="_blank">picsum.photos</a></li>
                 </ul>
             </section>
         </div>
     </div>
-    <script src="https://cdn.jsdelivr.net/npm/reveal.js/dist/reveal.js"></script>
+    <script src="../dist/reveal.js"></script>
     <script src="plugin/appearance/appearance.js"></script>
     <script>
         Reveal.initialize({
@@ -102,7 +128,14 @@
                 baseclass: "animated",
                 visibleclass: "in",
                 hideagain: true,
-                delay: 300
+                delay: 300,
+                appearevent: "slidetransitionend",
+                debug: true,
+                autoappear: false,
+                autoelements: {
+                    "ul li": "fadeInLeft",
+                    "ol li": "fadeInLeftRight"
+                }
             },
             plugins: [
                 Appearance

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "reveal.js-appearance",
-    "version": "1.0.7",
-    "description": "A plugin for Reveal.js 4 that adds appearance effects to elements",
+    "version": "1.1.1",
+    "description": "A plugin for Reveal.js that adds appearance effects to elements",
     "keywords": "reveal, reveal.js, reveal-plugin, plugin, text effects",
     "homepage": "https://github.com/Martinomagnifico/reveal.js-appearance",
     "repository": {
@@ -12,5 +12,5 @@
         "reveal.js": "^4.0"
     },
     "author": "Martijn De Jongh",
-    "license": "MIT, Copyright (C) 2020 Martijn De Jongh"
+    "license": "MIT, Copyright (C) 2021 Martijn De Jongh"
 }