diff options
| author | Hakim El Hattab <hakim.elhattab@gmail.com> | 2020-04-06 11:22:54 +0200 |
|---|---|---|
| committer | Hakim El Hattab <hakim.elhattab@gmail.com> | 2020-04-06 11:22:54 +0200 |
| commit | f26fc20b550a3ae67138845c09f07ffc93193092 (patch) | |
| tree | 12977055974c8edc18d55948587a8ed461eef3c8 | |
| parent | 9ebf6249e7b287c9f12e8c828be26f8ed01309ba (diff) | |
| download | fosdem-2021-minimalism-presentation-f26fc20b550a3ae67138845c09f07ffc93193092.tar fosdem-2021-minimalism-presentation-f26fc20b550a3ae67138845c09f07ffc93193092.tar.gz | |
test and examples for multiple reveal.js instances on one page
| -rw-r--r-- | dist/reveal.css | 2 | ||||
| -rw-r--r-- | gulpfile.js | 2 | ||||
| -rw-r--r-- | test/examples/embedded-media.html | 2 | ||||
| -rw-r--r-- | test/examples/multiple-instances.html | 52 | ||||
| -rw-r--r-- | test/test-multiple-instances.html | 71 |
5 files changed, 127 insertions, 2 deletions
diff --git a/dist/reveal.css b/dist/reveal.css index 323abee..3de8365 100644 --- a/dist/reveal.css +++ b/dist/reveal.css @@ -1,5 +1,5 @@ /*! -* reveal.js 4.0.0-dev (Wed Mar 18 2020) +* reveal.js 4.0.0-dev (Mon Apr 06 2020) * https://revealjs.com * MIT licensed * diff --git a/gulpfile.js b/gulpfile.js index ac1429d..04b9ebe 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -149,6 +149,8 @@ gulp.task('serve', () => { gulp.watch(['js/**'], gulp.series('js', 'test')) + gulp.watch(['test/*.html'], gulp.series('test')) + gulp.watch([ 'css/theme/source/*.{sass,scss}', 'css/theme/template/*.{sass,scss}', diff --git a/test/examples/embedded-media.html b/test/examples/embedded-media.html index 9ef35b8..f83405f 100644 --- a/test/examples/embedded-media.html +++ b/test/examples/embedded-media.html @@ -9,7 +9,7 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link rel="stylesheet" href="../../dist/reveal.css"> - <link rel="stylesheet" href="../../dist/theme/default.css" id="theme"> + <link rel="stylesheet" href="../../dist/theme/white.css" id="theme"> </head> <body> diff --git a/test/examples/multiple-instances.html b/test/examples/multiple-instances.html new file mode 100644 index 0000000..4a5e69a --- /dev/null +++ b/test/examples/multiple-instances.html @@ -0,0 +1,52 @@ +<!doctype html> +<html lang="en"> + + <head> + <meta charset="utf-8"> + + <title>reveal.js - Multiple Instances</title> + + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> + + <link rel="stylesheet" href="../../dist/reveal.css"> + <link rel="stylesheet" href="../../dist/theme/white.css" id="theme"> + </head> + + <body> + + <div style="display: flex; flex-direction: row;"> + <div class="deck1" style="width: 100%; height: 50vh; padding: 10px;"> + <div class="reveal"> + <div class="slides"> + <section>1.1</section> + <section>1.2</section> + <section>1.3</section> + </div> + </div> + </div> + + <div class="deck2" style="width: 100%; height: 50vh; padding: 10px;"> + <div class="reveal"> + <div class="slides"> + <section>2.1</section> + <section>2.2</section> + <section>2.3</section> + </div> + </div> + </div> + </div> + + <script src="../../dist/reveal.min.js"></script> + + <script> + + let r1 = new Reveal( document.querySelector( '.deck1 .reveal' ) ); + r1.initialize(); + + let r2 = new Reveal( document.querySelector( '.deck2 .reveal' ) ); + r2.initialize(); + + </script> + + </body> +</html> diff --git a/test/test-multiple-instances.html b/test/test-multiple-instances.html new file mode 100644 index 0000000..49ff1da --- /dev/null +++ b/test/test-multiple-instances.html @@ -0,0 +1,71 @@ +<!doctype html> +<html lang="en"> + + <head> + <meta charset="utf-8"> + + <title>reveal.js - Test Iframes</title> + + <link rel="stylesheet" href="../dist/reveal.css"> + <link rel="stylesheet" href="qunit-2.5.0.css"> + <script src="qunit-2.5.0.js"></script> + </head> + + <body style="overflow: auto;"> + + <div id="qunit"></div> + <div id="qunit-fixture"></div> + + <div class="deck1"> + <div class="reveal" style="display: none;"> + <div class="slides"> + <section>1.1</section> + <section>1.2</section> + <section>1.3</section> + </div> + </div> + </div> + + <div class="deck2"> + <div class="reveal" style="display: none;"> + <div class="slides"> + <section>2.1</section> + <section>2.2</section> + <section>2.3</section> + </div> + </div> + </div> + + <script src="../dist/reveal.min.js"></script> + <script> + + QUnit.module( 'Multiple reveal.js instances' ); + + let r1 = new Reveal( document.querySelector( '.deck1 .reveal' ), { + embedded: true + } ); + r1.initialize(); + + let r2 = new Reveal( document.querySelector( '.deck2 .reveal' ), { + embedded: true + } ); + r2.initialize(); + + QUnit.test( 'Can make independent changes', function( assert ) { + + r1.slide(1); + r2.slide(2); + assert.strictEqual( r1.getCurrentSlide().textContent, '1.2' ); + assert.strictEqual( r2.getCurrentSlide().textContent, '2.3' ); + + r2.toggleOverview( true ); + assert.strictEqual( r1.isOverview(), false ); + assert.strictEqual( r2.isOverview(), true ); + r2.toggleOverview( false ); + + }); + + </script> + + </body> +</html> |