From 561c3ff4437ed334cbce66e279d17a3b11be7c38 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab <hakim.elhattab@gmail.com> Date: Thu, 16 Apr 2020 16:04:26 +0200 Subject: [PATCH] update presentation examples move to root @ /examples --- .../examples => examples}/assets/beeping.txt | 0 .../examples => examples}/assets/beeping.wav | Bin {test/examples => examples}/assets/image1.png | Bin {test/examples => examples}/assets/image2.png | Bin {test/examples => examples}/auto-animate.html | 15 ++-- {test/examples => examples}/barebones.html | 4 +- {test/examples => examples}/math.html | 8 +-- examples/media.html | 56 +++++++++++++++ examples/multiple-instances.html | 53 ++++++++++++++ .../slide-backgrounds.html | 6 +- .../slide-transitions.html | 6 +- test/examples/embedded-media.html | 50 ------------- test/examples/multiple-instances.html | 66 ------------------ 13 files changed, 127 insertions(+), 137 deletions(-) rename {test/examples => examples}/assets/beeping.txt (100%) rename {test/examples => examples}/assets/beeping.wav (100%) rename {test/examples => examples}/assets/image1.png (100%) rename {test/examples => examples}/assets/image2.png (100%) rename {test/examples => examples}/auto-animate.html (95%) rename {test/examples => examples}/barebones.html (84%) rename {test/examples => examples}/math.html (95%) create mode 100644 examples/media.html create mode 100644 examples/multiple-instances.html rename {test/examples => examples}/slide-backgrounds.html (95%) rename {test/examples => examples}/slide-transitions.html (90%) delete mode 100644 test/examples/embedded-media.html delete mode 100644 test/examples/multiple-instances.html diff --git a/test/examples/assets/beeping.txt b/examples/assets/beeping.txt similarity index 100% rename from test/examples/assets/beeping.txt rename to examples/assets/beeping.txt diff --git a/test/examples/assets/beeping.wav b/examples/assets/beeping.wav similarity index 100% rename from test/examples/assets/beeping.wav rename to examples/assets/beeping.wav diff --git a/test/examples/assets/image1.png b/examples/assets/image1.png similarity index 100% rename from test/examples/assets/image1.png rename to examples/assets/image1.png diff --git a/test/examples/assets/image2.png b/examples/assets/image2.png similarity index 100% rename from test/examples/assets/image2.png rename to examples/assets/image2.png diff --git a/test/examples/auto-animate.html b/examples/auto-animate.html similarity index 95% rename from test/examples/auto-animate.html rename to examples/auto-animate.html index 066536fb..0ebf3cc0 100644 --- a/test/examples/auto-animate.html +++ b/examples/auto-animate.html @@ -8,9 +8,9 @@ <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/black.css" id="theme"> - <link rel="stylesheet" href="../../lib/css/monokai.css"> + <link rel="stylesheet" href="../dist/reveal.css"> + <link rel="stylesheet" href="../dist/theme/black.css" id="theme"> + <link rel="stylesheet" href="../lib/css/monokai.css"> </head> <body> @@ -162,15 +162,12 @@ </div> - <script src="../../dist/reveal.min.js"></script> + <script src="../dist/reveal.min.js"></script> + <script src="../dist/plugin/highlight.js"></script> <script> Reveal.initialize({ center: true, - hash: true, - - dependencies: [ - { src: '../../dist/plugin/highlight.js', async: true } - ] + hash: true }); </script> diff --git a/test/examples/barebones.html b/examples/barebones.html similarity index 84% rename from test/examples/barebones.html rename to examples/barebones.html index f4e9da00..28a4ea02 100644 --- a/test/examples/barebones.html +++ b/examples/barebones.html @@ -6,7 +6,7 @@ <title>reveal.js - Barebones</title> - <link rel="stylesheet" href="../../dist/reveal.css"> + <link rel="stylesheet" href="../dist/reveal.css"> </head> <body> @@ -29,7 +29,7 @@ </div> - <script src="../../dist/reveal.min.js"></script> + <script src="../dist/reveal.min.js"></script> <script> Reveal.initialize(); </script> diff --git a/test/examples/math.html b/examples/math.html similarity index 95% rename from test/examples/math.html rename to examples/math.html index bba4ab16..643bb6f7 100644 --- a/test/examples/math.html +++ b/examples/math.html @@ -8,8 +8,8 @@ <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/night.css" id="theme"> + <link rel="stylesheet" href="../dist/reveal.css"> + <link rel="stylesheet" href="../dist/theme/night.css" id="theme"> </head> <body> @@ -175,7 +175,7 @@ </div> - <script src="../../dist/reveal.min.js"></script> + <script src="../dist/reveal.min.js"></script> <script> Reveal.initialize({ history: true, @@ -193,7 +193,7 @@ }, dependencies: [ - { src: '../../dist/plugin/math.js', async: true } + { src: '../dist/plugin/math.js', async: true } ] }); </script> diff --git a/examples/media.html b/examples/media.html new file mode 100644 index 00000000..8a982bcb --- /dev/null +++ b/examples/media.html @@ -0,0 +1,56 @@ +<!doctype html> +<html lang="en"> + + <head> + <meta charset="utf-8"> + + <title>reveal.js - Video, Audio and Iframes</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 class="reveal"> + + <div class="slides"> + + <section> + <h2>Examples of embedded Video, Audio and Iframes</h2> + </section> + + <section> + <h2>Iframe</h2> + <iframe data-autoplay width="700" height="540" src="https://slides.com/news/auto-animate/embed" frameborder="0"></iframe> + </section> + + <section data-background-iframe="https://www.youtube.com/embed/h1_nyI3z8gI" data-background-interactive> + <h2 style="color: #fff;">Iframe Background</h2> + </section> + + <section> + <h2>Auto-playing audio</h2> + <audio src="assets/beeping.wav" data-autoplay></audio> + </section> + + <section> + <h2>Audio with controls</h2> + <audio src="assets/beeping.wav" controls></audio> + </section> + + </div> + + </div> + + <script src="../dist/reveal.min.js"></script> + <script> + Reveal.initialize({ + transition: 'linear' + }); + </script> + + </body> +</html> diff --git a/examples/multiple-instances.html b/examples/multiple-instances.html new file mode 100644 index 00000000..9cf535a9 --- /dev/null +++ b/examples/multiple-instances.html @@ -0,0 +1,53 @@ +<!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 style="background: #ddd;"> + + <div style="display: flex; flex-direction: row;"> + <div class="reveal deck1" style="width: 100%; height: 50vh; margin: 10px;"> + <div class="slides"> + <section>Deck 1, Slide 1</section> + <section>Deck 1, Slide 2</section> + </div> + </div> + + <div class="reveal deck2" style="width: 100%; height: 50vh; margin: 10px;"> + <div class="slides"> + <section>Deck 2, Slide 1</section> + <section>Deck 2, Slide 2</section> + </div> + </div> + </div> + + <script src="../dist/reveal.min.js"></script> + <script> + + let r1 = new Reveal( document.querySelector( '.deck1' ), { + embedded: true, + keyboard: false + } ); + r1.initialize(); + + let r2 = new Reveal( document.querySelector( '.deck2' ), { + embedded: true, + keyboard: false + } ); + r2.initialize().then( () => { + r2.slide(1); + } ); + + </script> + + </body> +</html> diff --git a/test/examples/slide-backgrounds.html b/examples/slide-backgrounds.html similarity index 95% rename from test/examples/slide-backgrounds.html rename to examples/slide-backgrounds.html index 0add50e4..81075c8b 100644 --- a/test/examples/slide-backgrounds.html +++ b/examples/slide-backgrounds.html @@ -8,8 +8,8 @@ <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/serif.css" id="theme"> + <link rel="stylesheet" href="../dist/reveal.css"> + <link rel="stylesheet" href="../dist/theme/serif.css" id="theme"> <style type="text/css" media="screen"> .slides section.has-dark-background, .slides section.has-dark-background h2 { @@ -122,7 +122,7 @@ </div> - <script src="../../dist/reveal.min.js"></script> + <script src="../dist/reveal.min.js"></script> <script> // Full list of configuration options available here: diff --git a/test/examples/slide-transitions.html b/examples/slide-transitions.html similarity index 90% rename from test/examples/slide-transitions.html rename to examples/slide-transitions.html index 252b8854..8f928a6a 100644 --- a/test/examples/slide-transitions.html +++ b/examples/slide-transitions.html @@ -6,8 +6,8 @@ <title>reveal.js - Slide Transitions</title> - <link rel="stylesheet" href="../../dist/reveal.css"> - <link rel="stylesheet" href="../../dist/theme/white.css" id="theme"> + <link rel="stylesheet" href="../dist/reveal.css"> + <link rel="stylesheet" href="../dist/theme/white.css" id="theme"> <style type="text/css" media="screen"> .slides section.has-dark-background, .slides section.has-dark-background h3 { @@ -81,7 +81,7 @@ </div> - <script src="../../dist/reveal.min.js"></script> + <script src="../dist/reveal.min.js"></script> <script> Reveal.initialize({ center: true, diff --git a/test/examples/embedded-media.html b/test/examples/embedded-media.html deleted file mode 100644 index 3c55c0ef..00000000 --- a/test/examples/embedded-media.html +++ /dev/null @@ -1,50 +0,0 @@ -<!doctype html> -<html lang="en"> - - <head> - <meta charset="utf-8"> - - <title>reveal.js - Embedded Media</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 class="reveal"> - - <div class="slides"> - - <section> - <h2>Embedded Media Test</h2> - </section> - - <section> - <iframe data-autoplay width="420" height="345" src="http://www.youtube.com/embed/l3RQZ4mcr1c"></iframe> - </section> - - <section> - <h2>Empty Slide</h2> - </section> - - <section> - <h2>Auto-playing audio</h2> - <audio src="assets/beeping.wav" data-autoplay></audio> - </section> - - </div> - - </div> - - <script src="../../dist/reveal.min.js"></script> - <script> - Reveal.initialize({ - transition: 'linear' - }); - </script> - - </body> -</html> diff --git a/test/examples/multiple-instances.html b/test/examples/multiple-instances.html deleted file mode 100644 index a3c27b5a..00000000 --- a/test/examples/multiple-instances.html +++ /dev/null @@ -1,66 +0,0 @@ -<!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 style="background: #ddd;"> - - <div style="display: flex; flex-direction: row;"> - <div class="reveal deck1" style="width: 100%; height: 50vh; margin: 10px;"> - <div class="slides"> - <section data-markdown> - <script type="text/template"> - ## Slide attributes - </script> - </section> - <section>1.2</section> - <section>1.3</section> - </div> - </div> - - <div class="reveal deck2" style="width: 100%; height: 50vh; margin: 10px;"> - <div class="slides"> - <section data-markdown> - <script type="text/template"> - ## Slide attributes - </script> - </section> - <section>2.2</section> - <section>2.3</section> - </div> - </div> - </div> - - <script type="module"> - - import Reveal from '../../js/reveal.js'; - import Markdown from '../../plugin/markdown/markdown.js'; - - let r1 = new Reveal( document.querySelector( '.deck1' ), { - embedded: true, - keyboard: false - } ); - r1.initialize().then( () => { - - let r2 = new Reveal( document.querySelector( '.deck2' ), { - embedded: true, - keyboard: false, - dependencies: [ Markdown ] - } ); - r2.initialize(); - - } ); - - </script> - - </body> -</html> -- GitLab