asciidoctor-revealjs 4.1.0 → 5.0.0.rc1

data/asciidoctor-revealjs.gemspec

@@ -31,8 +31,6 @@ Gem::Specification.new do |s|
   s.require_paths = ['lib']
 
   s.add_runtime_dependency 'asciidoctor', ['>= 2.0.0', '< 3.0.0']
-  s.add_runtime_dependency 'thread_safe', '~> 0.3.5'
-  s.add_runtime_dependency 'concurrent-ruby', '~> 1.0'
 
   s.add_development_dependency 'rake', '~> 13.0.0'
   s.add_development_dependency 'asciidoctor-doctest', '= 2.0.0.beta.7'

data/examples/auto-animate-code.adoc

@@ -0,0 +1,47 @@
+= Auto-Animate code
+:source-highlighter: highlight.js
+
+++++
+<style>
+.reveal pre {
+  overflow: hidden;
+}
+.reveal pre code {
+  overflow: hidden;
+}
+.reveal pre code table {
+  overflow: hidden;
+}
+</style>
+<section data-auto-animate>
+  <pre data-id="code-animation"><code class="language-js" data-trim data-line-numbers>
+    let planets = [
+      { name: 'mars', diameter: 6779 },
+    ]
+  </code></pre>
+</section>
+<section data-auto-animate>
+  <pre data-id="code-animation"><code class="language-js" data-trim data-line-numbers>
+    let planets = [
+      { name: 'mars', diameter: 6779 },
+      { name: 'earth', diameter: 12742 },
+      { name: 'jupiter', diameter: 139820 }
+    ]
+  </code></pre>
+</section>
+<section data-auto-animate>
+  <pre data-id="code-animation"><code class="language-js" data-trim data-line-numbers>
+    let circumferenceReducer = ( c, planet ) => {
+      return c + planet.diameter * Math.PI;
+    }
+
+    let planets = [
+      { name: 'mars', diameter: 6779 },
+      { name: 'earth', diameter: 12742 },
+      { name: 'jupiter', diameter: 139820 }
+    ]
+
+    let c = planets.reduce( circumferenceReducer, 0 )
+  </code></pre>
+</section>
+++++

data/examples/auto-animate.adoc

@@ -0,0 +1,351 @@
+= Auto-Animate
+:source-highlighter: highlight.js
+:revealjsdir: ../reveal.js
+:revealjs_hash: true
+
+++++
+<style>
+.highlight {
+    color: gold;
+}
+</style>
+++++
+
+== Description
+
+[.small%hardbreaks]
+_reveal.js_ can automatically animate elements across slides.
+Use `[%auto-animate]` on two (or more) adjacent sections:
+
+[source,asciidoc]
+----
+[%auto-animate]
+== Title
+
+This is a paragraph.
+
+[%auto-animate]
+== Title
+
+This is a paragraph.
+
+This is another paragraph.
+----
+
+[%auto-animate]
+== Title
+
+This is a paragraph.
+
+[%auto-animate]
+== Title
+
+This is a paragraph.
+
+This is another paragraph.
+
+[%auto-animate]
+== !
+
+Matched element will be animated automatically!
+
+[%auto-animate]
+== !
+
+[.highlight]
+Matched element will be animated automatically!
+
+And move to the right position!
+
+[%hardbreaks]
+⬆️
+⬆️
+⬆️
+
+== Source Blocks
+
+reveal.js supports animation between code blocks.
+To enable this feature, all source blocks must have the same `data-id` value.
+
+IMPORTANT: This feature is only supported when using Highlight.js as syntax highlighter and when the option `%linenums` is present.
+
+== Source Blocks
+
+Here's a simple example:
+
+[source.stretch%linenums,asciidoc]
+-----
+[%auto-animate]
+== !
+
+[source%linenums,js,data-id=hello]
+----
+console.log('Hello')
+----
+
+[%auto-animate]
+== !
+
+[source%linenums,js,data-id=hello]
+----
+console.log('Hello')
+console.log('Bonjour')
+----
+-----
+
+[%auto-animate]
+== !
+
+[source%linenums,js,data-id=hello]
+----
+console.log('Hello')
+----
+
+[%auto-animate]
+== !
+
+[source%linenums,js,data-id=hello]
+----
+console.log('Hello')
+console.log('Bonjour')
+----
+
+== Source Blocks
+
+And here's a more complex example...
+
+[%auto-animate]
+== !
+
+[source%linenums,js,data-id=planets]
+----
+let planets = [
+  { name: 'mars', diameter: 6779 },
+]
+----
+
+[%auto-animate]
+== !
+
+[source%linenums,js,data-id=planets]
+----
+let planets = [
+  { name: 'mars', diameter: 6779 },
+  { name: 'earth', diameter: 12742 },
+  { name: 'jupiter', diameter: 139820 }
+]
+----
+
+[%auto-animate]
+== !
+
+[source%linenums,js,data-id=planets]
+----
+let circumferenceReducer = ( c, planet ) => {
+  return c + planet.diameter * Math.PI;
+}
+
+let planets = [
+  { name: 'mars', diameter: 6779 },
+  { name: 'earth', diameter: 12742 },
+  { name: 'jupiter', diameter: 139820 }
+]
+
+let c = planets.reduce( circumferenceReducer, 0 )
+----
+
+[%auto-animate]
+== Easing
+
+[%hardbreaks.small]
+The attribute `auto-animate-easing` is used to control the speed of the transition.
+You can use any value supported by https://developer.mozilla.org/fr/docs/Web/CSS/transition-timing-function[transition-timing-function].
+
+For instance:
+[source,asciidoc]
+----
+[%auto-animate,auto-animate-easing="ease-in-out"]
+== Easing In Out
+----
+
+[%auto-animate,auto-animate-easing="ease-in-out"]
+== Easing In Out
+
+🏓 Ping?
+
+[%auto-animate,auto-animate-easing="ease-in-out"]
+== Easing In Out
+
+🏓 Ping?
+
+Pong! 🏓
+
+[%auto-animate,auto-animate-easing="ease-in-out"]
+== Easing In Out
+
+🏓 Ping?
+
+Pong! 🏓
+
+🏓 Ping?
+
+[%auto-animate,auto-animate-easing="ease-in-out"]
+== Easing In Out
+
+🏓 Ping?
+
+Pong! 🏓
+
+🏓 Ping?
+
+Pong! 🏓
+
+== Unmatched
+
+[.small]
+Determines whether elements with no matching `auto-animate` target should fade in.
+Set to `false` to make them appear instantly.
+
+For instance:
+
+[source,asciidoc]
+----
+[%auto-animate,auto-animate-unmatched=false]
+== Unmatched
+
+Introduction. (matched)
+
+[%auto-animate,auto-animate-unmatched=false]
+== Unmatched
+
+Introduction. (matched)
+
+This will be shown instantly ⚡ (unmatched)
+----
+
+[%auto-animate,auto-animate-unmatched=false]
+== Unmatched
+
+Introduction. (matched)
+
+[%auto-animate,auto-animate-unmatched=false]
+== Unmatched
+
+Introduction. (matched)
+
+This will be shown instantly ⚡ (unmatched)
+
+== Duration
+
+Animation duration in seconds.
+
+For instance:
+[source,asciidoc]
+----
+[%auto-animate,auto-animate-duration=5]
+== Duration
+----
+
+[%auto-animate,auto-animate-duration=5]
+== Duration
+
+This animation...
+
+[%auto-animate,auto-animate-duration=5]
+== Duration
+
+This animation...
+
+...will take 5 seconds! ⌚
+
+[%auto-animate]
+== Delay
+
+[.small]
+Animation delay in seconds (can only be set for specific elements, not at the slide level)
+
+For instance:
+[source,asciidoc]
+----
+[%auto-animate]
+== Lift Off
+
+Final countdown...
+
+[%auto-animate]
+== Lift Off
+
+Final countdown...
+
+[data-auto-animate-delay=1]
+3,
+[data-auto-animate-delay=2]
+2,
+[data-auto-animate-delay=3]
+1...
+[data-auto-animate-delay=4]
+Lift off! 🚀
+----
+
+[%auto-animate]
+== Lift Off
+
+Final countdown...
+
+[%auto-animate]
+== Lift Off
+
+Final countdown...
+
+[data-auto-animate-delay=1]
+3,
+[data-auto-animate-delay=2]
+2,
+[data-auto-animate-delay=3]
+1...
+[data-auto-animate-delay=4]
+Lift off! 🚀
+
+== Id and Restart
+
+When you want separate groups of auto-animated slides right next to each other you can use the `auto-animate-id` and `auto-animate-restart` attributes.
+
+== Id and Restart
+
+Two adjacent slides will only auto-animate if they have the same id or if both don't have one.
+
+== Id and Restart
+
+`auto-animate-restart` will prevent auto-animate between the previous slide even if they have the same id but _not_ between it and the next slide.
+
+[%auto-animate]
+== !
+
+First Item
+
+[%auto-animate]
+== !
+
+First Item
+
+Second Item
+
+[%auto-animate%auto-animate-restart]
+== !
+
+First Item
+
+Second Item
+
+Third Item (restart)
+
+[%auto-animate]
+== !
+
+First Item
+
+Second Item
+
+Third Item (restart)
+
+Fourth Item

data/examples/favicon.adoc

@@ -0,0 +1,13 @@
+// .favicon
+// Include default favicon (`./favicon.ico`)
+// :include: //head/link[@rel="icon"]
+// :header_footer:
+= Favicon
+:favicon:
+
+// .favicon-by-path
+// Include favicon by path
+// :include: //head/link[@rel="icon"]
+// :header_footer:
+= Favicon by Path
+:favicon: img/favicon.png

data/examples/mathjax-cdn.adoc

@@ -4,7 +4,7 @@
 // :header_footer:
 = MathJax
 :stem:
-:revealjsdir: https://cdn.jsdelivr.net/npm/reveal.js@3.9.2
+:revealjsdir: https://cdn.jsdelivr.net/npm/reveal.js@4.1.1
 :mathjaxdir: https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/
 
 == Math Equation

data/examples/mathjax.adoc

@@ -4,7 +4,7 @@
 // :header_footer:
 = MathJax
 :stem:
-:revealjsdir: https://cdn.jsdelivr.net/npm/reveal.js@3.9.2
+:revealjsdir: https://cdn.jsdelivr.net/npm/reveal.js@4.1.2
 
 == Math Equation
 

data/examples/revealjs-custom-theme.adoc

@@ -3,7 +3,7 @@
 // :header_footer:
 = Use a Custom reveal.js Theme
 // please note that in this specific case it would be better to use :revealjs_theme: beige
-:revealjs_customtheme: reveal.js/css/theme/beige.css
+:revealjs_customtheme: reveal.js/dist/theme/beige.css
 
 == Beige is the New Black