Reveal.js 3.8.0 to 3.9.2 support (#301)

* Added new Reveal.js 3.8 and 3.9.0 options * New syntax-highlight example with reveal.js features including step-by-step highlight * Highlight.js changes for reveal.js 3.8.0: Including default template change * Added all features from Asciidoctor syntax highlight manual to examples * Aligned document template with latest reveal.js index.html * Support for the previewLinks and data-preview-link reveal.js feature * Added window attribute support on links on images at the same time * Unified project name * Added upgrade notes to CHANGELOG * Added reveal.js compatibility matrix to README * More... Monster squash commit because many individual commits were failing tests
asciidoctor · Feb 8, 2020 · 4a34a50 · 4a34a50
1 parent 2d892f6
commit 4a34a50
Show file tree

Hide file tree

Showing 39 changed files with 1,557 additions and 180 deletions.
diff --git a/.gitignore b/.gitignore
@@ -11,7 +11,7 @@
 node_modules/
 npm-debug.log
 build/
-/dist/main.js
+/dist/
 /asciidoctor-reveal.js-*.tgz
 
 # ruby stuff

diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -10,6 +10,9 @@ For a detailed view of what has changed, refer to the {uri-repo}/commits/master[
 == <master> (<unreleased)
 
 Upgrade considerations::
+  * Due to an upstream change in reveal.js 3.8.0, this back-end no longer supports earlier reveal.js versions.
+    We added a compatibility matrix with reveal.js at the end of the README.
+    See {uri-issue}301[#301] for details.
   * Using the attribute `background-opacity` to alter the opacity of the title slide no longer works.
     When the opacity feature was introduced we forgot to align with the other title slide attributes.
     The feature was introduced in 3.0.0 and the bug stayed in 3.1.0.
@@ -19,12 +22,18 @@ Upgrade considerations::
     We were previously injecting `docinfo-header.html` somewhere in the HTML `<head>`.
     Now, `docinfo-revealjs.html` goes last into the HTML `<head>`, `docinfo-header-revealjs.html` goes right before the first slide `<section>` and `docinfo-footer-revealjs.html` goes right after the last slide `<section>`.
     The new documentation is available https://github.com/asciidoctor/asciidoctor-reveal.js#supplemental-content-with-docinfo[here] and the related tickets are {uri-issue}198[#198] and {uri-issue}324[#324].
+  * Default highlight.js theme is monokai. This follows a reveal.js change.
 
 Enhancements::
   * Built-in slim templates can now be overridden with `--template-dir` or `-T` ({uri-issue}177[#177], {uri-issue}318[#318])
   * Documentation improvements ({uri-issue}322[#322])
 
 Compliance::
+  * New reveal.js 3.8.0 and 3.9.0 features supported
+  ** Line numbers on source code blocks using Asciidoctor's `linenums` attribute
+  ** Specific lines and step-by-step code highlights using Asciidoctor's `highlight` attribute
+  ** reveal.js `data-preview` on links and images with link can be activated by using the `preview` and `link_preview` Asciidoctor attributes respectively
+  ** New configuration options: `hash`, `navigationMode`, `shuffle`, `preloadIframes`, `totalTime`, `minimumTimePerSlide`, `hideInactiveCursor`, `hideCursorTime`, `previewLinks` (`data-preview-link`) and `mobileViewDistance` ({uri-issue}301[#301])
   * Added support for the `sectnums` AsciiDoc attribute ({uri-issue}185[#185], {uri-issue}317[#317])
   * Aligned our `docinfo` support to Asciidoctor Bespoke ({uri-issue}198[#198], {uri-issue}324[#324])
   * `background-opacity` title slide attribute renamed to `title-slide-background-opacity` ({uri-issue}323[#323], {uri-issue}325[#325])

diff --git a/README.adoc b/README.adoc
@@ -531,7 +531,7 @@ To override that behavior use the `width` and `height` named attributes.
 === Syntax highlighting
 
 Reveal.js is well integrated with https://highlightjs.org/[highlight.js] for syntax highlighting.
-Asciidoctor-reveal.js supports that.
+Asciidoctor reveal.js supports that.
 You can activate highlight.js syntax highlighting (disabled by default) by setting the `source-highlighter` document attribute as follows:
 
 [source, asciidoc]
@@ -595,7 +595,7 @@ Here is {uri-revealjs-gh}#markup[the relevant reveal.js
 documentation] on that topic.
 
 
-=== Asciidoctor-reveal.js specific roles
+=== Asciidoctor reveal.js specific roles
 
 Roles are usually applied with the following syntax where the `important-text` CSS class would be applied to the slide title in the generated HTML:
 
@@ -630,6 +630,17 @@ Here is a list of supported roles:
 right:: Will apply a `float: right` style to the affected block
 
 
+=== Asciidoctor reveal.js specific attributes
+
+==== iFrame Preview Overlay
+
+The reveal.js feature activated by a global `previewLinks: true` configuration or by adding the `data-preview-link` HTML attribute to `<a>` tags can be activated by using special AsciiDoc attributes.
+
+On links use the `preview=true` attribute, on images use the `link_preview=true` attribute and globally you can set `:revealjs_previewlinks:` attribute.
+
+See <<examples/links.adoc#,links.adoc>> and <<examples/links-preview.adoc#,links-preview.adoc>> for examples.
+
+
 === Title slide customization
 
 The title slide is customized via Asciidoc attributes.
@@ -873,9 +884,13 @@ all:: show on all views (default)
 speaker:: only show slide numbers on speaker notes view
 print:: only show slide numbers when printing to PDF
 
+|:revealjs_hash:
+|true, *false*
+|Add the current slide number to the URL hash so that reloading the page/copying the URL will return you to the same slide
+
 |:revealjs_history:
 |true, *false*
-|Push each slide change to the browser history.
+|Push each slide change to the browser history. Implies `hash: true`
 
 |:revealjs_keyboard:
 |*true*, false
@@ -901,6 +916,14 @@ print:: only show slide numbers when printing to PDF
 |true, *false*
 |Change the presentation direction to be RTL.
 
+|:revealjs_navigationMode:
+|*default*, linear, grid
+|See https://github.com/hakimel/reveal.js/#navigation-mode for details
+
+|:revealjs_shuffle:
+|true, *false*
+|Randomizes the order of slides each time the presentation loads
+
 |:revealjs_fragments:
 |*true*, false
 |Turns fragments on and off globally.
@@ -929,6 +952,14 @@ null:: Media will only autoplay if data-autoplay is present
 true:: All media will autoplay, regardless of individual setting
 false:: No media will autoplay, regardless of individual setting
 
+|:revealjs_preloadIframes:
+|*null*, true, false
+a|Global override for preloading lazy-loaded iframes
+
+null:: Iframes with `data-src` AND `data-preload` will be loaded when within the `viewDistance`, iframes with only `data-src` will be loaded when visible
+true:: All iframes with `data-src` will be loaded when within the `viewDistance`
+false:: All iframes with `data-src` will be loaded only when visible
+
 |:revealjs_autoSlide:
 |<integer>
 |Delay in milliseconds between automatically proceeding to the next slide.
@@ -949,18 +980,39 @@ This value can be overwritten by using a `data-autoslide` attribute on your slid
 This is used to show a pacing timer in the speaker view.
 Defaults to *120*
 
+|:revealjs_totalTime:
+|<integer>
+|Specify the total time in seconds that is available to present.
+If this is set to a nonzero value, the pacing timer will work out the time available for each slide, instead of using the defaultTiming value.
+Defaults to *0*
+
+|:revealjs_minimumTimePerSlide:
+|<integer>
+|Specify the minimum amount of time you want to allot to each slide, if using the totalTime calculation method.
+If the automated time allocation causes slide pacing to fall below this threshold, then you will see an alert in the speaker notes window.
+Defaults to *0*.
+
 |:revealjs_mouseWheel:
 |true, *false*
 |Enable slide navigation via mouse wheel.
 
+|:revealjs_hideInactiveCursor:
+|*true*, false
+|Hide cursor if inactive
+
+|:revealjs_hideCursorTime:
+|<integer>
+|Time before the cursor is hidden (in ms).
+Defaults to *5000*.
+
 |:revealjs_hideAddressBar:
 |*true*, false
 |Hides the address bar on mobile devices.
 
 |:revealjs_previewLinks:
 |true, *false*
 |Opens links in an iframe preview overlay.
-Add `data-preview-link` and `data-preview-link="false"` to customise each link individually
+Add the `preview=true` attribute on links or `link_preview=true` attribute on images to customize each link individually.
 
 |:revealjs_transition:
 |none, fade, *slide*, convex, concave, zoom
@@ -976,7 +1028,14 @@ Add `data-preview-link` and `data-preview-link="false"` to customise each link i
 
 |:revealjs_viewDistance:
 |<integer>
-|Number of slides away from the current that are visible. Default: 3
+|Number of slides away from the current that are visible.
+Default: *3*.
+
+|:revealjs_mobileViewDistance:
+|<integer>
+|Number of slides away from the current that are visible on mobile devices.
+It is advisable to set this to a lower number than viewDistance in order to save resources.
+Default *3*.
 
 |:revealjs_parallaxBackgroundImage:
 |<file\|URL>
@@ -1096,6 +1155,28 @@ If you need more details about our dependencies check out Asciidoctor dependenci
 * With Ruby / Bundler: https://github.com/asciidoctor/asciidoctor/tree/v2.0.10#requirements[Asciidoctor] 2.0.10
 * With JavaScript (Node.js) / NPM: https://github.com/asciidoctor/asciidoctor.js/blob/v2.0.3/packages/core/package.json[Asciidoctor.js] 2.0.3
 
+
+[[revealjs-compatibility-matrix]]
+== reveal.js Compatibility Matrix
+
+We try as much as possible to be compatible with a broad range of reveal.js versions.
+However, changes made by that project sometimes forces us to drop compatibility with older reveal.js releases.
+This table tracks this compatibility.
+
+|===
+|Asciidoctor reveal.js version |reveal.js version
+
+|4.x
+|3.9 - 3.8
+
+|3.x, 2.x, 1.x
+|3.7 - 3.0
+
+|Unversioned releases
+|2.x
+|===
+
+
 [[asciidoctorjs-compatibility-matrix]]
 == Asciidoctor.js Compatibility Matrix
 

diff --git a/Rakefile b/Rakefile
@@ -18,8 +18,7 @@ end
 namespace :build do
   desc 'Compile Slim templates and generate converter.rb'
   task :converter => 'clean' do
-    # NOTE: using mode :fast by default due to a bug in ruby-beautify under Ruby 2.5
-    #       https://github.com/erniebrodeur/ruby-beautify/issues/45
+    # NOTE: use :pretty if you want to debug the generated code
     build_converter :fast
   end
 

diff --git a/examples/fragments.adoc b/examples/fragments.adoc
@@ -0,0 +1,32 @@
+// .revealjs-features
+// This example tests some of reveal.js' fragments features
+// :include: //body/script | //div[@class="slides"]
+// :header_footer:
+= Fragments
+:revealjs_history: true
+:revealjs_fragmentInURL: true
+:customcss: fragments.css
+
+== Fragments
+
+[%step]
+* Fragments
+* Are a reveal.js feature
+* Very familiar to Powerpoint users
+
+== Fragments in URL
+
+[%step]
+* With reveal.js 3.6
+* Fragments
+* Can now be displayed in URLs
+
+== Using data-fragment
+
+[%step]
+* You can now
+* Do
+* Fancy
+* CSS Things
+* With Fragments
+* See `fragments.css`
diff --git a/examples/fragments.css b/examples/fragments.css
@@ -0,0 +1,18 @@
+@import 'https://fonts.googleapis.com/css?family=Baloo+Bhai';
+
+section[data-fragment="2"] p {
+    font-family: 'Baloo Bhai', cursive;
+}
+
+section[data-fragment="3"] p {
+  color: black;
+  flex: 1;
+  font-size: 2em;
+  line-height: 1.2;
+  text-decoration: none;
+  background-image: linear-gradient(to right, yellow 0, yellow 100%);
+  background-position: 0 -0.1em;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  transition: background .5s;
+}
diff --git a/examples/history-hash.adoc b/examples/history-hash.adoc
@@ -0,0 +1,19 @@
+// .hash
+// Enables reveal.js hash feature which is good to reload in-progress slides and doesn't push to browser history.
+// :include: //body/script | //div[@class="slides"]
+// :header_footer:
+= No History
+:backend: revealjs
+:revealjs_hash: true
+
+== First slide
+
+This Deck
+
+== Second slide
+
+You can reload anytime
+
+== Third slide
+
+Yet browser history is not spammed
diff --git a/examples/history.adoc b/examples/history.adoc
@@ -1,5 +1,5 @@
 // .history
-// Enables Reveal.JS' browser history feature
+// Enables reveal.js' browser history feature
 // :include: //body/script | //div[@class="slides"]
 // :header_footer:
 = History
@@ -8,12 +8,12 @@
 
 == First slide
 
-Uno
+This
 
 == Second slide
 
-Dos
+Pushes
 
 == Third slide
 
-Tres
+To Browser History Stack
diff --git a/examples/links-preview.adoc b/examples/links-preview.adoc
@@ -0,0 +1,32 @@
+// .links-with-preview
+// Demonstration of reveal.js global data-preview-link feature
+// :include: //div[@class="slides"] | //body/*[last()]
+// :header_footer:
+= Links With Preview Tests
+:revealjs_previewlinks: True
+:imagesdir: images/
+
+== Set Globally
+
+https://en.wikipedia.org/wiki/February_4[Here's a link]
+
+== Disabled Locally
+
+https://en.wikipedia.org/wiki/February_4[Link One, preview=false]
+
+https://en.wikipedia.org/wiki/February_4[Link Two, preview=0]
+
+https://en.wikipedia.org/wiki/February_4[Link Three, preview=False]
+
+== Image block with a Link
+
+image::70s.jpg[link="https://montrehack.ca/"]
+
+== Image block with a Link Disabled Locally
+
+image::70s.jpg[link="https://montrehack.ca/", link_preview=false]
+
+== Inlined Images
+
+image:70s.jpg[link="https://montrehack.ca/", width=200px]
+image:70s.jpg[link="https://montrehack.ca/", width=200px, link_preview=false]
diff --git a/examples/links.adoc b/examples/links.adoc
@@ -0,0 +1,39 @@
+// .links
+// Demonstration of reveal.js and AsciiDoc links
+// :include: //div[@class="slides"]
+// :header_footer:
+= Links
+:imagesdir: images/
+
+== Regular
+
+https://en.wikipedia.org/wiki/February_4[Link]
+
+https://en.wikipedia.org/wiki/February_4[In new Window, window="_blank"]
+
+https://en.wikipedia.org/wiki/February_4[In new Window (alternate syntax)^]
+
+
+== With iFrame Preview Overlay
+
+https://en.wikipedia.org/wiki/February_4[Link One, preview=true]
+
+https://en.wikipedia.org/wiki/February_4[Link Two, preview=1]
+
+https://en.wikipedia.org/wiki/February_4[Link Three, preview=True]
+
+
+== Image Block with a Link
+
+image::70s.jpg[link="https://montrehack.ca/", window="_blank"]
+
+
+== Image Block with a Link With iFrame Preview
+
+image::70s.jpg[link="https://montrehack.ca/", link_preview=true]
+
+
+== Inlined Images
+
+image:70s.jpg[link="https://montrehack.ca/", width=200px]
+image:70s.jpg[link="https://montrehack.ca/", width=200px, link_preview=true]