Extending Doctales reveal.js plugin

Goal: Support even more Reveal features and target a CSS grid theme

Presented by

Lief Erickson

www.intuitivestack.io

Extend a plugin and target a Reveal theme

DOCTALES logo

MyPlanet logo
© 2022 Intuitive Stack. All rights reserved.

Bits and pieces of plugin.xml

Doctales plugin.xml
<feature extension="dita.conductor.transtype.check" value="reveal"/>
<transtype name="reveal" extends="html5" desc="Web Slides">
  <!-- Many parameters -->
</transtype>
Intuitive Stack 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>
© 2022 Intuitive Stack. All rights reserved.

Adding CSS grid to make blocks move all nice and stuff

CSS

.grid-wrapper {
  display: grid;
}
    
Reveal.js initialization script

<script type="text/javascript">      
  Reveal.initialize({
  display: 'grid',
  <-- Other settings -->
  } );  
  $( document ).ready(function() {});
</script>  
    

Problem solved! And my work is done here.

© 2022 Intuitive Stack. All rights reserved.

Slides are fixed but viewports can scroll forever

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

CSS

overflow: auto !important;      
    

For better or worse. Use wisely.

© 2022 Intuitive Stack. All rights reserved.

RNG

slide.rng
<include href="urn:intuitivestack:dita:rng:revealDataAttDomain.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>
slideMod.rng
<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>
© 2022 Intuitive Stack. All rights reserved.

Backgrounds

DITA

<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>     
    
© 2022 Intuitive Stack. All rights reserved.

Architecture itself can not make a more equitable world... but we can contribute with specific actions.


Mariam Kamara

© 2022 Intuitive Stack. All rights reserved.

Background video

 

© 2022 Intuitive Stack. All rights reserved.

Background iframe with live interaction

 

© 2022 Intuitive Stack. All rights reserved.
© 2022 Intuitive Stack. All rights reserved.

Positioning through CSS

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;
  }
}      
    
© 2022 Intuitive Stack. All rights reserved.

Code samples with line numbers and highlights


<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>
    
© 2022 Intuitive Stack. All rights reserved.

Use 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>
© 2022 Intuitive Stack. All rights reserved.

Find this presentation at

intuitivestack.io/presentations/2022/dita-ot-day

© 2022 Intuitive Stack. All rights reserved.
© 2022 Intuitive Stack. All rights reserved.

Questions?

 

© 2022 Intuitive Stack. All rights reserved.