Merge branch 'master' of github.com:phdenzel/reveal.js

* 'master' of github.com:phdenzel/reveal.js:
  remove doppler
  fix merge error, closes hakimel#3277
  prevent extra \n at end of single notes hakimel#3010
  fix issue were auto-animate could interfere with inherited line-height
  fix issue with past/future vertical slides remaining visible in Safari 15.4 (closes hakimel#3164)
  update browserlist from '> 0.5%, IE 11, not dead' to '> 2%, not dead' hakimel#2985
  Add generated files
  Support multiple aside notes elements per slide

README.md

@@ -32,17 +32,6 @@ Hakim's open source work is supported by <a href="https://github.com/sponsors/ha
         </div>
       </a>
     </td>
-    <td align="center">
-      <a href="https://www.doppler.com/?utm_campaign=github_repo&utm_medium=referral&utm_content=revealjs&utm_source=github">
-        <div>
-          <img src="https://user-images.githubusercontent.com/629429/151510865-9fd454f1-fd8c-4df4-b227-a54b87313db4.png" width="290" alt="Doppler">
-        </div>
-        <b>All your environment variables, in one place</b>
-        <div>
-          <sub>Stop struggling with scattered API keys, hacking together home-brewed tools, and avoiding access controls. Keep your team and servers in sync with Doppler.</sup>
-        </div>
-      </a>
-    </td>
   </table>
 </div>
 

css/reveal.scss

@@ -723,6 +723,8 @@ $controlsArrowAngleActive: 36deg;
 
 .reveal .slides>section.past,
 .reveal .slides>section.future,
+.reveal .slides>section.past>section,
+.reveal .slides>section.future>section,
 .reveal .slides>section>section.past,
 .reveal .slides>section>section.future {
 	opacity: 0;

index.html

@@ -17,7 +17,15 @@
 		<div class="reveal">
 			<div class="slides">
 				<section>Slide 1</section>
-				<section>Slide 2</section>
+				<section>Slide 2
+						<aside class="notes">
+						<p>Some notes</p>
+						</aside>
+						<p>Some slide text</p>
+						<aside class="notes">
+						<p>and some more notes</p>
+					</aside>
+				</section>
 			</div>
 		</div>
 

js/controllers/autoanimate.js

@@ -399,7 +399,14 @@ export default class AutoAnimate {
 				value = { value: style.to, explicitValue: true };
 			}
 			else {
-				value = computedStyles[style.property];
+				// Use a unitless value for line-height so that it inherits properly
+				if( style.property === 'line-height' ) {
+					value = parseFloat( computedStyles['line-height'] ) / parseFloat( computedStyles['font-size'] );
+				}
+
+				if( isNaN(value) ) {
+					value = computedStyles[style.property];
+				}
 			}
 
 			if( value !== '' ) {
@@ -475,7 +482,6 @@ export default class AutoAnimate {
 		} );
 
 		pairs.forEach( pair => {
-
 			// Disable scale transformations on text nodes, we transition
 			// each individual text property instead
 			if( matches( pair.from, textNodes ) ) {

js/controllers/notes.js

@@ -1,5 +1,5 @@
 /**
- * Handles the showing and 
+ * Handles the showing of speaker notes
  */
 export default class Notes {
 
@@ -89,7 +89,7 @@ export default class Notes {
 	 * Retrieves the speaker notes from a slide. Notes can be
 	 * defined in two ways:
 	 * 1. As a data-notes attribute on the slide <section>
-	 * 2. As an <aside class="notes"> inside of the slide
+	 * 2. With <aside class="notes"> elements inside the slide
 	 *
 	 * @param {HTMLElement} [slide=currentSlide]
 	 * @return {(string|null)}
@@ -101,10 +101,10 @@ export default class Notes {
 			return slide.getAttribute( 'data-notes' );
 		}
 
-		// ... or using an <aside class="notes"> element
-		let notesElement = slide.querySelector( 'aside.notes' );
-		if( notesElement ) {
-			return notesElement.innerHTML;
+		// ... or using <aside class="notes"> elements
+		let notesElements = slide.querySelectorAll( 'aside.notes' );
+		if( notesElements ) {
+			return Array.from(notesElements).map( notesElement => notesElement.innerHTML ).join( '\n' );
 		}
 
 		return null;

package.json

@@ -58,7 +58,7 @@
     "sass": "^1.39.2",
     "yargs": "^15.1.0"
   },
-  "browserslist": "> 0.5%, IE 11, not dead",
+  "browserslist": "> 2%, not dead",
   "eslintConfig": {
     "env": {
       "browser": true,

plugin/notes/plugin.js

@@ -108,7 +108,7 @@ const Plugin = () => {
 	function post( event ) {
 
 		let slideElement = deck.getCurrentSlide(),
-			notesElement = slideElement.querySelector( 'aside.notes' ),
+			notesElements = slideElement.querySelectorAll( 'aside.notes' ),
 			fragmentElement = slideElement.querySelector( '.current-fragment' );
 
 		let messageData = {
@@ -130,21 +130,25 @@ const Plugin = () => {
 		if( fragmentElement ) {
 			let fragmentNotes = fragmentElement.querySelector( 'aside.notes' );
 			if( fragmentNotes ) {
-				notesElement = fragmentNotes;
+				messageData.notes = fragmentNotes.innerHTML;
+				messageData.markdown = typeof fragmentNotes.getAttribute( 'data-markdown' ) === 'string';
+
+				// Ignore other slide notes
+				notesElements = null;
 			}
 			else if( fragmentElement.hasAttribute( 'data-notes' ) ) {
 				messageData.notes = fragmentElement.getAttribute( 'data-notes' );
 				messageData.whitespace = 'pre-wrap';
 
 				// In case there are slide notes
-				notesElement = null;
+				notesElements = null;
 			}
 		}
 
 		// Look for notes defined in an aside element
-		if( notesElement ) {
-			messageData.notes = notesElement.innerHTML;
-			messageData.markdown = typeof notesElement.getAttribute( 'data-markdown' ) === 'string';
+		if( notesElements ) {
+			messageData.notes = Array.from(notesElements).map( notesElement => notesElement.innerHTML ).join( '\n' );
+			messageData.markdown = typeof notesElements[0].getAttribute( 'data-markdown' ) === 'string';
 		}
 
 		speakerWindow.postMessage( JSON.stringify( messageData ), '*' );