diff options
| -rw-r--r-- | LICENSE | 2 | ||||
| -rw-r--r-- | README.md | 20 | ||||
| -rw-r--r-- | css/reveal.css | 18 | ||||
| -rw-r--r-- | css/reveal.scss | 2 | ||||
| -rw-r--r-- | gruntfile.js | 2 | ||||
| -rw-r--r-- | js/reveal.js | 13 | ||||
| -rw-r--r-- | test/test.js | 16 |
7 files changed, 50 insertions, 23 deletions
@@ -1,4 +1,4 @@ -Copyright (C) 2019 Hakim El Hattab, http://hakim.se, and reveal.js contributors +Copyright (C) 2020 Hakim El Hattab, http://hakim.se, and reveal.js contributors Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal @@ -1,6 +1,6 @@ # reveal.js [](https://travis-ci.org/hakimel/reveal.js) <a href="https://slides.com?ref=github"><img src="https://s3.amazonaws.com/static.slid.es/images/slides-github-banner-320x40.png?1" alt="Slides" width="160" height="20"></a> -A framework for easily creating beautiful presentations using HTML. [Check out the live demo](http://revealjs.com/). +A framework for easily creating beautiful presentations using HTML. [Check out the live demo](https://revealjs.com/). reveal.js comes with a broad range of features including [nested slides](https://github.com/hakimel/reveal.js#markup), [Markdown contents](https://github.com/hakimel/reveal.js#markdown), [PDF export](https://github.com/hakimel/reveal.js#pdf-export), [speaker notes](https://github.com/hakimel/reveal.js#speaker-notes) and a [JavaScript API](https://github.com/hakimel/reveal.js#api). There's also a fully featured visual editor and platform for sharing reveal.js presentations at [slides.com](https://slides.com?ref=github). @@ -87,7 +87,7 @@ The core of reveal.js is very easy to install. You'll simply need to download a Some reveal.js features, like external Markdown and speaker notes, require that presentations run from a local web server. The following instructions will set up such a server as well as all of the development tasks needed to make edits to the reveal.js source code. -1. Install [Node.js](http://nodejs.org/) (4.0.0 or later) +1. Install [Node.js](https://nodejs.org/) (4.0.0 or later) 1. Clone the reveal.js repository ```sh @@ -550,7 +550,7 @@ Slides can be nested within other slides to create vertical stacks (see [Markup] <img src="https://static.slid.es/support/reveal.js-vertical-slides.gif" width="450"> #### Navigation Mode -You can finetune the reveal.js navigation behavior by using the `navigationMode` config option. Note that these options are only useful for presnetations that use a mix of horizontal and vertical slides. The following navigation modes are available: +You can fine tune the reveal.js navigation behavior by using the `navigationMode` config option. Note that these options are only useful for presentations that use a mix of horizontal and vertical slides. The following navigation modes are available: | Value | Description | | :--------------------------- | :---------- | @@ -806,7 +806,7 @@ Embeds a web page as a slide background that covers 100% of the reveal.js width </section> ``` -Iframes are lazy-loaded when they become visible. If you'd like to preload iframes aehad of time, you can append a `data-preload` attribute to the slide `<section>`. You can also enable preloading globally for all iframes using the `preloadIframes` configuration option. +Iframes are lazy-loaded when they become visible. If you'd like to preload iframes ahead of time, you can append a `data-preload` attribute to the slide `<section>`. You can also enable preloading globally for all iframes using the `preloadIframes` configuration option. #### Background Transitions @@ -1287,7 +1287,7 @@ Then: Plugins should register themselves with reveal.js by calling `Reveal.registerPlugin( 'myPluginID', MyPlugin )`. Registered plugin instances can optionally expose an "init" function that reveal.js will call to initialize them. -When reveal.js is booted up via `Reveal.initialize()`, it will go through all registered plugins and invoke their "init" methods. If the "init" method returns a Promise, reveal.js will wait for that promise to be fulfilled before finshing the startup sequence and firing the [ready](#ready-event) event. Here's an example of a plugin that does some asynchronous work before reveal.js can proceed: +When reveal.js is booted up via `Reveal.initialize()`, it will go through all registered plugins and invoke their "init" methods. If the "init" method returns a Promise, reveal.js will wait for that promise to be fulfilled before finishing the startup sequence and firing the [ready](#ready-event) event. Here's an example of a plugin that does some asynchronous work before reveal.js can proceed: ```javascript let MyPlugin = { @@ -1298,7 +1298,7 @@ Reveal.addEventListener( 'ready', () => console.log( 'Three seconds later...' ) Reveal.initialize(); ``` -Note that reveal.js will *not* wait for init Promise fullfillment if the plugin is loaded as an [async dependency](#dependencies). If the plugin's init method does _not_ return a Promise, the plugin is considered ready right away and will not hold up the reveal.js startup sequence. +Note that reveal.js will *not* wait for init Promise fulfillment if the plugin is loaded as an [async dependency](#dependencies). If the plugin's init method does _not_ return a Promise, the plugin is considered ready right away and will not hold up the reveal.js startup sequence. ### Retrieving Plugins @@ -1354,7 +1354,7 @@ Reveal.initialize({ #### Client presentation -Served from a publicly accessible static file server. Examples include: GitHub Pages, Amazon S3, Dreamhost, Akamai, etc. The more reliable, the better. Your audience can then access the client presentation via `http://example.com/path/to/presentation/client/index.html`, with the configuration below causing them to connect to the socket.io server as clients. +Served from a publicly accessible static file server. Examples include: GitHub Pages, Amazon S3, Dreamhost, Akamai, etc. The more reliable, the better. Your audience can then access the client presentation via `https://example.com/path/to/presentation/client/index.html`, with the configuration below causing them to connect to the socket.io server as clients. Example configuration: @@ -1388,7 +1388,7 @@ Server that receives the `slideChanged` events from the master presentation and Or you can use the socket.io server at [https://reveal-js-multiplex-ccjbegmaii.now.sh/](https://reveal-js-multiplex-ccjbegmaii.now.sh/). -You'll need to generate a unique secret and token pair for your master and client presentations. To do so, visit `http://example.com/token`, where `http://example.com` is the location of your socket.io server. Or if you're going to use the socket.io server at [https://reveal-js-multiplex-ccjbegmaii.now.sh/](https://reveal-js-multiplex-ccjbegmaii.now.sh/), visit [https://reveal-js-multiplex-ccjbegmaii.now.sh/token](https://reveal-js-multiplex-ccjbegmaii.now.sh/token). +You'll need to generate a unique secret and token pair for your master and client presentations. To do so, visit `https://example.com/token`, where `https://example.com` is the location of your socket.io server. Or if you're going to use the socket.io server at [https://reveal-js-multiplex-ccjbegmaii.now.sh/](https://reveal-js-multiplex-ccjbegmaii.now.sh/), visit [https://reveal-js-multiplex-ccjbegmaii.now.sh/token](https://reveal-js-multiplex-ccjbegmaii.now.sh/token). You are very welcome to point your presentations at the Socket.io server running at [https://reveal-js-multiplex-ccjbegmaii.now.sh/](https://reveal-js-multiplex-ccjbegmaii.now.sh/), but availability and stability are not guaranteed. @@ -1451,7 +1451,7 @@ Reveal.initialize({ If you want to display math equations in your presentation you can easily do so by including this plugin. The plugin is a very thin wrapper around the [MathJax](http://www.mathjax.org/) library. To use it you'll need to include it as a reveal.js dependency, [find our more about dependencies here](#dependencies). -The plugin defaults to using [LaTeX](http://en.wikipedia.org/wiki/LaTeX) but that can be adjusted through the `math` configuration object. Note that MathJax is loaded from a remote server. If you want to use it offline you'll need to download a copy of the library and adjust the `mathjax` configuration value. +The plugin defaults to using [LaTeX](https://en.wikipedia.org/wiki/LaTeX) but that can be adjusted through the `math` configuration object. Note that MathJax is loaded from a remote server. If you want to use it offline you'll need to download a copy of the library and adjust the `mathjax` configuration value. Below is an example of how the plugin can be configured. If you don't intend to change these values you do not need to include the `math` config object at all. @@ -1485,4 +1485,4 @@ If you want to include math inside of a presentation written in Markdown you nee MIT licensed -Copyright (C) 2019 Hakim El Hattab, http://hakim.se +Copyright (C) 2020 Hakim El Hattab, http://hakim.se diff --git a/css/reveal.css b/css/reveal.css index fb47296..0ca77e7 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -3,7 +3,7 @@ * http://revealjs.com * MIT licensed * - * Copyright (C) 2019 Hakim El Hattab, http://hakim.se + * Copyright (C) 2020 Hakim El Hattab, http://hakim.se */ /********************************************* * GLOBAL STYLES @@ -77,29 +77,29 @@ body { text-decoration: line-through; } .reveal .slides section .fragment.fade-up { - -webkit-transform: translate(0, 20%); - transform: translate(0, 20%); } + -webkit-transform: translate(0, 40px); + transform: translate(0, 40px); } .reveal .slides section .fragment.fade-up.visible { -webkit-transform: translate(0, 0); transform: translate(0, 0); } .reveal .slides section .fragment.fade-down { - -webkit-transform: translate(0, -20%); - transform: translate(0, -20%); } + -webkit-transform: translate(0, -40px); + transform: translate(0, -40px); } .reveal .slides section .fragment.fade-down.visible { -webkit-transform: translate(0, 0); transform: translate(0, 0); } .reveal .slides section .fragment.fade-right { - -webkit-transform: translate(-20%, 0); - transform: translate(-20%, 0); } + -webkit-transform: translate(-40px, 0); + transform: translate(-40px, 0); } .reveal .slides section .fragment.fade-right.visible { -webkit-transform: translate(0, 0); transform: translate(0, 0); } .reveal .slides section .fragment.fade-left { - -webkit-transform: translate(20%, 0); - transform: translate(20%, 0); } + -webkit-transform: translate(40px, 0); + transform: translate(40px, 0); } .reveal .slides section .fragment.fade-left.visible { -webkit-transform: translate(0, 0); transform: translate(0, 0); } diff --git a/css/reveal.scss b/css/reveal.scss index 176c736..ab11f32 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -3,7 +3,7 @@ * http://revealjs.com * MIT licensed * - * Copyright (C) 2019 Hakim El Hattab, http://hakim.se + * Copyright (C) 2020 Hakim El Hattab, http://hakim.se */ diff --git a/gruntfile.js b/gruntfile.js index 7e35753..acf34b6 100644 --- a/gruntfile.js +++ b/gruntfile.js @@ -19,7 +19,7 @@ module.exports = grunt => { ' * http://revealjs.com\n' + ' * MIT licensed\n' + ' *\n' + - ' * Copyright (C) 2019 Hakim El Hattab, http://hakim.se\n' + + ' * Copyright (C) 2020 Hakim El Hattab, http://hakim.se\n' + ' */' }, diff --git a/js/reveal.js b/js/reveal.js index fce3dbc..56719cc 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -3,7 +3,7 @@ * http://revealjs.com * MIT licensed * - * Copyright (C) 2019 Hakim El Hattab, http://hakim.se + * Copyright (C) 2020 Hakim El Hattab, http://hakim.se */ (function( root, factory ) { if( typeof define === 'function' && define.amd ) { @@ -4751,6 +4751,8 @@ if( fragments.length ) { + var maxIndex = 0; + if( typeof index !== 'number' ) { var currentFragment = sortFragments( currentSlide.querySelectorAll( '.fragment.visible' ) ).pop(); if( currentFragment ) { @@ -4764,6 +4766,8 @@ i = parseInt( el.getAttribute( 'data-fragment-index' ), 10 ); } + maxIndex = Math.max( maxIndex, i ); + // Visible fragments if( i <= index ) { if( !el.classList.contains( 'visible' ) ) changedFragments.shown.push( el ); @@ -4787,6 +4791,13 @@ } ); + // Write the current fragment index to the slide <section>. + // This can be used by end users to apply styles based on + // the current fragment index. + index = typeof index === 'number' ? index : -1; + index = Math.max( Math.min( index, maxIndex ), -1 ); + currentSlide.setAttribute( 'data-fragment', index ); + } } diff --git a/test/test.js b/test/test.js index 2738403..14bb690 100644 --- a/test/test.js +++ b/test/test.js @@ -250,6 +250,22 @@ Reveal.addEventListener( 'ready', function() { assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 1 }, 'Reveal.slide( 2, 0, 1 )' ); }); + QUnit.test( 'data-fragment is set on slide <section>', function( assert ) { + Reveal.slide( 2, 0, -1 ); + assert.deepEqual( Reveal.getCurrentSlide().getAttribute( 'data-fragment' ), '-1' ); + + Reveal.slide( 2, 0, 2 ); + assert.deepEqual( Reveal.getCurrentSlide().getAttribute( 'data-fragment' ), '2' ); + + Reveal.slide( 2, 0, 0 ); + assert.deepEqual( Reveal.getCurrentSlide().getAttribute( 'data-fragment' ), '0' ); + + var fragmentSlide = Reveal.getCurrentSlide(); + + Reveal.slide( 3, 0 ); + assert.deepEqual( fragmentSlide.getAttribute( 'data-fragment' ), '0', 'data-fragment persists when jumping to another slide' ); + }); + QUnit.test( 'Hiding all fragments', function( assert ) { var fragmentSlide = document.querySelector( '#fragment-slides>section:nth-child(1)' ); |