templates/document.html.slim in asciidoctor-revealjs-3.1.0 vs templates/document.html.slim in asciidoctor-revealjs-4.0.0
- old
+ new
@@ -1,9 +1,13 @@
doctype 5
html lang=(attr :lang, 'en' unless attr? :nolang)
head
meta charset="utf-8"
+ meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui"
+
+ title=(doctitle sanitize: true, use_fallback: true)
+
- if RUBY_ENGINE == 'opal' && JAVASCRIPT_PLATFORM == 'node'
- revealjsdir = (attr :revealjsdir, 'node_modules/reveal.js')
- else
- revealjsdir = (attr :revealjsdir, 'reveal.js')
- unless (asset_uri_scheme = (attr 'asset-uri-scheme', 'https')).empty?
@@ -11,21 +15,21 @@
- cdn_base = %(#{asset_uri_scheme}//cdnjs.cloudflare.com/ajax/libs)
- [:description, :keywords, :author, :copyright].each do |key|
- if attr? key
meta name=key content=(attr key)
- linkcss = (attr? 'linkcss')
- title=(doctitle sanitize: true, use_fallback: true)
- meta content="yes" name="apple-mobile-web-app-capable"
- meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"
- meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" name="viewport"
- link href="#{revealjsdir}/css/reveal.css" rel="stylesheet"
+ link rel="stylesheet" href="#{revealjsdir}/css/reset.css"
+ link rel="stylesheet" href="#{revealjsdir}/css/reveal.css"
+
/ Default theme required even when using custom theme
- if attr? :revealjs_customtheme
link rel='stylesheet' href=(attr :revealjs_customtheme) id='theme'
- else
link rel='stylesheet' href='#{revealjsdir}/css/theme/#{attr 'revealjs_theme', 'black'}.css' id='theme'
- include asciidoctor_revealjs.css.slim
+ /! This CSS is generated by the Asciidoctor reveal.js converter to further integrate AsciiDoc's existing semantic with reveal.js
+ style type="text/css"
+ include asciidoctor-compatibility.css
- if attr? :icons, 'font'
/ iconfont-remote is implicitly set by Asciidoctor core. See https://github.com/asciidoctor/asciidoctor.org/issues/361
- if attr? 'iconfont-remote'
link rel='stylesheet' href=(attr 'iconfont-cdn', %(#{cdn_base}/font-awesome/5.12.0-1/css/all.min.css))
link rel='stylesheet' href=(attr 'iconfont-cdn', %(#{cdn_base}/font-awesome/5.12.0-1/css/v4-shims.min.css))
@@ -51,72 +55,52 @@
script src='#{cdn_base}/mathjax/2.4.0/MathJax.js?config=TeX-MML-AM_HTMLorMML'
- syntax_hl = self.syntax_highlighter
- if syntax_hl && (syntax_hl.docinfo? :head)
=syntax_hl.docinfo :head, self, cdn_base_url: cdn_base, linkcss: linkcss, self_closing_tag_slash: '/'
- / If the query includes 'print-pdf', use the PDF print sheet
+
+ /! Printing and PDF exports
javascript:
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? "#{revealjsdir}/css/print/pdf.css" : "#{revealjsdir}/css/print/paper.css";
document.getElementsByTagName( 'head' )[0].appendChild( link );
- /[if lt IE 9]
- <script src="#{revealjsdir}/lib/js/html5shiv.js"></script>
- - unless (docinfo_content = docinfo :header, '.html').empty?
- =docinfo_content
+
- if attr? :customcss
link rel='stylesheet' href=((customcss = attr :customcss).empty? ? 'asciidoctor-revealjs.css' : customcss)
+ - unless (_docinfo = docinfo :head, '-revealjs.html').empty?
+ =_docinfo
body
.reveal
/ Any section element inside of this container is displayed as a slide
.slides
- - unless notitle || !has_header?
- - bg_image = (attr? 'title-slide-background-image') ? (image_uri(attr 'title-slide-background-image')) : nil
- - bg_video = (attr? 'title-slide-background-video') ? (media_uri(attr 'title-slide-background-video')) : nil
- section.title(class = role
- data-state='title'
- data-transition=(attr 'title-slide-transition')
- data-transition-speed=(attr 'title-slide-transition-speed')
- data-background=(attr 'title-slide-background')
- data-background-size=(attr 'title-slide-background-size')
- data-background-image=bg_image
- data-background-video=bg_video
- data-background-video-loop=(attr 'title-slide-background-video-loop')
- data-background-video-muted=(attr 'title-slide-background-video-muted')
- data-background-opacity=(attr "background-opacity")
- data-background-iframe=(attr 'title-slide-background-iframe')
- data-background-color=(attr 'title-slide-background-color')
- data-background-repeat=(attr 'title-slide-background-repeat')
- data-background-position=(attr 'title-slide-background-position')
- data-background-transition=(attr 'title-slide-background-transition'))
- - if (_title_obj = doctitle partition: true, use_fallback: true).subtitle?
- h1=slice_text _title_obj.title, (_slice = header.option? :slice)
- h2=slice_text _title_obj.subtitle, _slice
- - else
- h1=@header.title
- - preamble = @document.find_by context: :preamble
- - unless preamble.nil? or preamble.length == 0
- div.preamble=preamble.pop.content
- - unless author.nil?
- p.author: small=author
- =content
- script src="#{revealjsdir}/lib/js/head.min.js"
+ - unless noheader
+ - unless (_docinfo = docinfo :header, '-revealjs.html').empty?
+ = _docinfo
+ - if header?
+ include title_slide.html.slim
+ = content
+ - unless (_docinfo = docinfo :footer, '-revealjs.html').empty?
+ = _docinfo
script src="#{revealjsdir}/js/reveal.js"
+ / Supports easy AsciiDoc syntax for background color
javascript:
Array.prototype.slice.call(document.querySelectorAll('.slides section')).forEach(function(slide) {
if (slide.getAttribute('data-background-color')) return;
// user needs to explicitly say he wants CSS color to override otherwise we might break custom css or theme (#226)
if (!(slide.classList.contains('canvas') || slide.classList.contains('background'))) return;
var bgColor = getComputedStyle(slide).backgroundColor;
if (bgColor !== 'rgba(0, 0, 0, 0)' && bgColor !== 'transparent') {
slide.setAttribute('data-background-color', bgColor);
slide.style.backgroundColor = 'transparent';
}
- })
+ });
- // See https://github.com/hakimel/reveal.js#configuration for a full list of configuration options
+ // More info about config & dependencies:
+ // - https://github.com/hakimel/reveal.js#configuration
+ // - https://github.com/hakimel/reveal.js#dependencies
Reveal.initialize({
// Display presentation control arrows
controls: #{to_boolean(attr 'revealjs_controls', true)},
// Help the user learn the controls by providing hints, for example by
// bouncing the down arrow when they first encounter a vertical slide
@@ -130,11 +114,14 @@
progress: #{to_boolean(attr 'revealjs_progress', true)},
// Display the page number of the current slide
slideNumber: #{to_valid_slidenumber(attr 'revealjs_slidenumber', false)},
// Control which views the slide number displays on
showSlideNumber: '#{attr 'revealjs_showslidenumber', 'all'}',
- // Push each slide change to the browser history
+ // Add the current slide number to the URL hash so that reloading the
+ // page/copying the URL will return you to the same slide
+ hash: #{to_boolean(attr 'revealjs_hash', false)},
+ // Push each slide change to the browser history. Implies `hash: true`
history: #{to_boolean(attr 'revealjs_history', false)},
// Enable keyboard shortcuts for navigation
keyboard: #{to_boolean(attr 'revealjs_keyboard', true)},
// Enable the slide overview mode
overview: #{to_boolean(attr 'revealjs_overview', true)},
@@ -144,10 +131,12 @@
touch: #{to_boolean(attr 'revealjs_touch', true)},
// Loop the presentation
loop: #{to_boolean(attr 'revealjs_loop', false)},
// Change the presentation direction to be RTL
rtl: #{to_boolean(attr 'revealjs_rtl', false)},
+ // See https://github.com/hakimel/reveal.js/#navigation-mode
+ navigationMode: '#{attr 'revealjs_navigationmode', 'default'}',
// Randomizes the order of slides each time the presentation loads
shuffle: #{to_boolean(attr 'revealjs_shuffle', false)},
// Turns fragments on and off globally
fragments: #{to_boolean(attr 'revealjs_fragments', true)},
// Flags whether to include the current fragment in the URL,
@@ -164,10 +153,16 @@
// Global override for autolaying embedded media (video/audio/iframe)
// - 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
autoPlayMedia: #{attr 'revealjs_autoplaymedia', 'null'},
+ // 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
+ preloadIframes: #{attr 'revealjs_preloadiframes', 'null'},
// Number of milliseconds between automatically proceeding to the
// next slide, disabled when set to 0, this value can be overwritten
// by using a data-autoslide attribute on your slides
autoSlide: #{attr 'revealjs_autoslide', 0},
// Stop auto-sliding after user input
@@ -176,12 +171,27 @@
autoSlideMethod: #{attr 'revealjs_autoslidemethod', 'Reveal.navigateNext'},
// Specify the average time in seconds that you think you will spend
// presenting each slide. This is used to show a pacing timer in the
// speaker view
defaultTiming: #{attr 'revealjs_defaulttiming', 120},
+ // 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
+ totalTime: #{attr 'revealjs_totaltime', 0},
+ // 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
+ minimumTimePerSlide: #{attr 'revealjs_minimumtimeperslide', 0},
// Enable slide navigation via mouse wheel
mouseWheel: #{to_boolean(attr 'revealjs_mousewheel', false)},
+ // Hide cursor if inactive
+ hideInactiveCursor: #{to_boolean(attr 'revealjs_hideinactivecursor', true)},
+ // Time before the cursor is hidden (in ms)
+ hideCursorTime: #{attr 'revealjs_hidecursortime', 5000},
// Hides the address bar on mobile devices
hideAddressBar: #{to_boolean(attr 'revealjs_hideaddressbar', true)},
// Opens links in an iframe preview overlay
// Add `data-preview-link` and `data-preview-link="false"` to customise each link
// individually
@@ -192,10 +202,14 @@
transitionSpeed: '#{attr 'revealjs_transitionspeed', 'default'}',
// Transition style for full page slide backgrounds (e.g., none, fade, slide, convex, concave, zoom)
backgroundTransition: '#{attr 'revealjs_backgroundtransition', 'fade'}',
// Number of slides away from the current that are visible
viewDistance: #{attr 'revealjs_viewdistance', 3},
+ // 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.
+ mobileViewDistance: #{attr 'revealjs_mobileviewdistance', 3},
// Parallax background image (e.g., "'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'")
parallaxBackgroundImage: '#{attr 'revealjs_parallaxbackgroundimage', ''}',
// Parallax background size in CSS syntax (e.g., "2100px 900px")
parallaxBackgroundSize: '#{attr 'revealjs_parallaxbackgroundsize', ''}',
// Number of pixels to move the parallax background per slide
@@ -225,22 +239,19 @@
// For slides that do not fit on a page, max number of pages
pdfMaxPagesPerSlide: #{attr 'revealjs_pdfmaxpagesperslide', 1},
// Optional libraries used to extend on reveal.js
dependencies: [
- { src: '#{revealjsdir}/lib/js/classList.js', condition: function() { return !document.body.classList; } },
- #{(document.attr? 'source-highlighter', 'highlightjs') ? "{ src: '#{revealjsdir}/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }," : nil}
- #{(attr? 'revealjs_plugin_zoom', 'disabled') ? "" : "{ src: '#{revealjsdir}/plugin/zoom-js/zoom.js', async: true }," }
- #{(attr? 'revealjs_plugin_notes', 'disabled') ? "" : "{ src: '#{revealjsdir}/plugin/notes/notes.js', async: true }," }
- #{(attr? 'revealjs_plugin_marked', 'enabled') ? "{ src: '#{revealjsdir}/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }," : "" }
- #{(attr? 'revealjs_plugin_markdown', 'enabled') ? "{ src: '#{revealjsdir}/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }," : "" }
- #{(attr? 'revealjs_plugin_pdf', 'enabled') ? "{ src: '#{revealjsdir}/plugin/print-pdf/print-pdf.js', async: true }," : "" }
- #{(attr? 'revealjs_plugins') ? File.read(attr('revealjs_plugins', '')) : ""}
+ #{revealjs_dependencies(document, self, revealjsdir)}
],
#{(attr? 'revealjs_plugins_configuration') ? File.read(attr('revealjs_plugins_configuration', '')) : ""}
});
+ / Workaround the "Only direct descendants of a slide section can be stretched" limitation in reveal.js
+ / https://github.com/hakimel/reveal.js/issues/2584
+ include stretch_nested_elements.js.slim
+
- if syntax_hl && (syntax_hl.docinfo? :footer)
=syntax_hl.docinfo :footer, self, cdn_base_url: cdn_base, linkcss: linkcss, self_closing_tag_slash: '/'
- unless (docinfo_content = (docinfo :footer, '.html')).empty?
=docinfo_content