Extending Doctales reveal.js plugin
Goal: Support even more Reveal features and target a CSS grid theme
Goal: Support even more Reveal features and target a CSS grid theme
Presented by
Lief Erickson
www.intuitivestack.io
plugin.xmlplugin.xml<feature extension="dita.conductor.transtype.check" value="reveal"/>
<transtype name="reveal" extends="html5" desc="Web Slides">
<!-- Many parameters -->
</transtype>
plugin.xml<feature extension="dita.conductor.transtype.check" value="slides"/>
<transtype name="slides" extends="reveal" desc="Intuitive Stack Presentations">
<!-- Just a couple of parameters -->
</transtype>
.grid-wrapper {
display: grid;
}
<script type="text/javascript">
Reveal.initialize({
display: 'grid',
<-- Other settings -->
} );
$( document ).ready(function() {});
</script>
Problem solved! And my work is done here.
Sometimes you have a lot to say or and image to add

Web browsers don't have a fix page size
Just a viewport
How big is a viewport?
With overflow it never ends
overflow: auto !important;
For better or worse. Use wisely.
<include href="urn:intuitivestack:dita:rng:revealDataAttDomain.rng"/>
<optional>
<attribute name="data-ln-start-from">
<a:documentation>You can offset the line number if you want to showcase a
excerpt of a longer set of code (e.g., 7). Value must be an integer.
https://revealjs.com/code/</a:documentation>
<choice>
<data type="integer"></data>
</choice>
</attribute>
</optional>
<define name="slide.block">
<a:documentation>Elements common to slide body-like contexts</a:documentation>
<choice>
<ref name="dl"/>
<!-- Edit for length -->
<ref name="prolog"/>
<!-- Edit for length -->
</choice>
</define>
<define name="slide.content">
<ref name="title"/>
<optional>
<ref name="prolog"/>
</optional>
<!-- Edit for length -->
</define>
<prolog>
<data name="data-background">path/to/image.jpg</data>
</prolog>
<xsl:variable name="varDataElem"
select="descendant::*[contains(@class, ' topic/data')][starts-with(./@name, 'data-')]"/>
<xsl:template name="data-attributes">
<xsl:for-each select="./@*[starts-with(name(), 'data-')]">
<xsl:variable name="varDataAtt" select="."/>
<xsl:attribute name="{local-name($varDataAtt)}">
<xsl:value-of select="$varDataAtt"/>
</xsl:attribute>
</xsl:for-each>
</xsl:template>
Architecture itself can not make a more equitable world... but we can contribute with specific actions.
Mariam Kamara
<param name="args.reveal.footer" type="string" >
<val default="true">© 2022 Intuitive Stack. All rights reserved.</val>
<val>© 2022 Intuitive Stack. Confidential.</val>
<val> </val>
</param>
<xsl:param name="args.reveal.footer"/>
<footer class="footer"><xsl:value-of select="$args.reveal.footer"/></footer>
text-align: center;
text-align: end;
text-align: left;
<p outputclass="fragment text-align-center"><codeph>text-align: center;</codeph></p>
<p outputclass="fragment text-align-end"><codeph>text-align: end;</codeph></p>
<p outputclass="fragment text-align-left"><codeph>text-align: left;</codeph></p>
$aligns: (
center,
end,
inherit,
initial,
justify,
left,
revert,
right,
start,
unset,
-webkit-auto,
-webkit-center,
-webkit-left,
-webkit-match-parent,
-webkit-right
);
@each $align in $aligns {
.text-align-#{$align} {
text-align: $align;
}
}
<codeblock data-auto-animate-duration="1.0" data-ln-start-from="1" data-line-numbers="1|2-9|11-14" data-trim="">
$aligns: (
center,
end,
inherit,
:
:
-webkit-right
);
@each $align in $aligns {
.text-align-#{$align} {
text-align: $align;
}
}
</codeblock>
xsl:call-template to simplify templates<xsl:template match="*" mode="chapterBody">
<!--<body onload="removeDisposableSections()">-->
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<!-- Already put xml:lang on <html>; do not copy to body with commonattributes -->
<xsl:apply-templates select="*[contains(@class, ' ditaot-d/ditaval-startprop ')]/@outputclass" mode="add-ditaval-style"/>
<!--output parent or first "topic" tag's outputclass as class -->
<xsl:if test="@outputclass">
<xsl:attribute name="class">
<xsl:value-of select="@outputclass" />
</xsl:attribute>
</xsl:if>
<xsl:if test="self::dita">
<xsl:if test="*[contains(@class, ' topic/topic ')][1]/@outputclass">
<xsl:attribute name="class">
<xsl:value-of select="*[contains(@class, ' topic/topic ')][1]/@outputclass" />
</xsl:attribute>
</xsl:if>
</xsl:if>
<xsl:apply-templates select="." mode="addAttributesToBody"/>
<xsl:value-of select="$newline"/>
<xsl:apply-templates select="*[contains(@class, ' ditaot-d/ditaval-startprop ')]" mode="out-of-line"/>
<xsl:variable name="bodyContent">
<xsl:apply-templates/>
</xsl:variable>
<!-- Post-process all the topic container elements and generate proper sections for them -->
<xsl:for-each select="$bodyContent/*">
<xsl:choose>
<xsl:when test="count(.//topicContainer) > 0">
<!-- We need to bring all slides to the top level -->
<xsl:variable name="allSlidesAsFirstLevel">
<!-- The slide which contains other slides, copied to output but ignoring sub-slides -->
<section>
<xsl:apply-templates mode="all-but-topicContainer"/>
</section>
<!-- For each subslide, copy to output but ignore sub-slides -->
<xsl:for-each select=".//topicContainer">
<section>
<xsl:apply-templates mode="all-but-topicContainer"/>
</section>
</xsl:for-each>
</xsl:variable>
<xsl:choose>
<xsl:when test="$args.reveal.generate.vertical.slides = 'true'">
<!-- Generate vertical slides, so wrap in a <section> element -->
<section>
<xsl:copy-of select="$allSlidesAsFirstLevel"/>
</section>
</xsl:when>
<xsl:otherwise>
<!-- No vertical slides generation -->
<xsl:copy-of select="$allSlidesAsFirstLevel"/>
</xsl:otherwise>
</xsl:choose>
</xsl:when>
<xsl:otherwise>
<section>
<xsl:apply-templates mode="all-but-topicContainer"/>
</section>
</xsl:otherwise>
</xsl:choose>
</xsl:for-each>
<xsl:apply-templates select="*[contains(@class, ' ditaot-d/ditaval-endprop ')]" mode="out-of-line"/>
</div>
</div>
<script src="dist/reveal.js"><!----></script>
<script src="plugin/notes/notes.js"><!----></script>
<script src="plugin/markdown/markdown.js"><!----></script>
<script src="plugin/highlight/highlight.js"><!----></script>
<script type="text/javascript">
<!--
Full list of configuration options available here:
https://github.com/hakimel/reveal.js#configuration
-->
// More info about initialization and config:
// - https://revealjs.com/initialization/
// - https://revealjs.com/config/
Reveal.initialize({
// parallaxBackgroundHorizontal: null,
// parallaxBackgroundImage: '<xsl:value-of select="$args.reveal.parallaxbackgroundimage"/>',
// parallaxBackgroundSize: '<xsl:value-of select="$args.reveal.parallaxbackgroundsize"/>',
// parallaxBackgroundVertical: null,
autoSlide: <xsl:value-of select="$args.reveal.autoslide"/>,
autoSlideStoppable: <xsl:value-of select="$args.reveal.autoslidestoppable"/>,
backgroundTransition: '<xsl:value-of select="$args.reveal.backgroundtransition"/>',
center: <xsl:value-of select="$args.reveal.center"/>,
controls: <xsl:value-of select="$args.reveal.controls"/>,
controlsLayout: '<xsl:value-of select="$args.reveal.controlsLayout"/>',
embedded: <xsl:value-of select="$args.reveal.embedded"/>,
fragments: <xsl:value-of select="$args.reveal.fragments"/>,
hash: true,
height: <xsl:value-of select="$args.reveal.height"/>,
hideAddressBar: <xsl:value-of select="$args.reveal.hideaddressbar"/>,
history: <xsl:value-of select="$args.reveal.hideaddressbar"/>,
keyboard: <xsl:value-of select="$args.reveal.keyboard"/>,
loop: <xsl:value-of select="$args.reveal.loop"/>,
margin: <xsl:value-of select="$args.reveal.margin"/>,
maxScale: <xsl:value-of select="$args.reveal.maxScale"/>,
minScale: <xsl:value-of select="$args.reveal.minScale"/>,
mouseWheel: <xsl:value-of select="$args.reveal.mousewheel"/>,
overview: <xsl:value-of select="$args.reveal.overview"/>,
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ],
previewLinks: <xsl:value-of select="$args.reveal.previewlinks"/>,
progress: <xsl:value-of select="$args.reveal.progress"/>,
rtl: <xsl:value-of select="$args.reveal.rtl"/>,
slideNumber: <xsl:value-of select="$args.reveal.slidenumber"/>,
touch: <xsl:value-of select="$args.reveal.touch"/>,
transition: '<xsl:value-of select="$args.reveal.transition"/>',
transitionSpeed: '<xsl:value-of select="$args.reveal.transitionspeed"/>',
viewDistance: <xsl:value-of select="$args.reveal.viewdistance"/>,
width: <xsl:value-of select="$args.reveal.width"/>
});
Reveal.addEventListener( 'slidechanged', function( event ) {
zoomSection();
} );
$( document ).ready(function() {});
</script>
</body>
</xsl:template>
<xsl:template match="*" mode="chapterBody">
<!--<body onload="removeDisposableSections()">-->
<body>
<div class="reveal pattern--stream">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<!-- Already put xml:lang on <html>; do not copy to body with commonattributes -->
<xsl:apply-templates select="*[contains(@class, ' ditaot-d/ditaval-startprop ')]/@outputclass" mode="add-ditaval-style"/>
<!--output parent or first "topic" tag's outputclass as class -->
<xsl:apply-templates select="." mode="addAttributesToBody"/>
<xsl:value-of select="$newline"/>
<xsl:apply-templates select="*[contains(@class, ' ditaot-d/ditaval-startprop ')]" mode="out-of-line"/>
<xsl:variable name="bodyContent">
<xsl:apply-templates/>
</xsl:variable>
<!-- Post-process all the topic container elements and generate proper sections for them -->
<xsl:call-template name="bodyContent">
<xsl:with-param name="bodyContent" select="$bodyContent"/>
<xsl:with-param name="args.reveal.generate.vertical.slides" select="$args.reveal.generate.vertical.slides"/>
</xsl:call-template>
<xsl:apply-templates select="*[contains(@class, ' ditaot-d/ditaval-endprop ')]" mode="out-of-line"/>
</div>
</div>
<xsl:value-of select="$newline"/>
<xsl:call-template name="scripts"/>
</body>
</xsl:template>
intuitivestack.io/presentations/2022/dita-ot-day