Link elements to substep

[mdre]

Hi.

It would be interesting to have a way to link an HTML Element to a specific step so it is shown when a specific step is shown.
I have hacked the code in this way:

   var showSubstepIfAny = function( step ) {
        var substeps = step.querySelectorAll( ".substep" );
        var visible = step.querySelectorAll( ".substep-visible" );
        if ( substeps.length > 0 ) {
            if ( visible.length < substeps.length ) {
                var el = substeps[ visible.length ];
                el.classList.add( "substep-visible" );
                var ssid = el.getAttribute("substepId");
                var linkedSS = step.querySelectorAll("[substeplinkedid='"+ssid+"']");
                for(var lnkSS of linkedSS) {
                    lnkSS.classList.add( "linkedVisible" );
                }
                return el;
            }
            // return showSubstep( substeps, visible );
        }
    };


    var hideSubstepIfAny = function( step ) {
        var substeps = step.querySelectorAll( ".substep" );
        var visible = step.querySelectorAll( ".substep-visible" );
        var lnkVisibled = step.querySelectorAll( ".linkedVisible" );
        if ( substeps.length > 0 ) {
            for (var lnkV of lnkVisibled) {
                lnkV.classList.remove( "linkedVisible" );
            }
            return hideSubstep( visible );

        }
    };

and added this class to the CSS:

#impress .step .substepLinked {
    opacity: 0;
}

#impress .step .substepLinked.linkedVisible {
    opacity: 1;
    transition: opacity 2s;
}

So now, I can have this type of step config:

<div id="escritorio" class="step bgimg bgimg6" data-x="2000" data-y="4000" data-z="500" data-rotate-y="-45"  data-scale="1">
        <div class="logo logoPosition"></div>
        <div class="bgWhite" style="width: 100%; height: 75%; text-align:center;" >
            <div class="titleText">El Escritorio de Analalisis Digital</div>
            <div style="height: 50px;"></div>
            <div class="smallText" style="display: inline-block; width:100%; text-align:left;">
                <p style="padding-left: 20px;">
                    Principales características:
                </p>
                <ul style="list-style-type:disc; padding-left: 40px;">
                    <li class="substep" substepId="causas">Acceso directo a las Causas</li>
                    <li class="substep" substepId="agenda">Agenda compartida de la Unidad Fiscal.</li>
                    <li class="substep" substepId="stats">Alertas.</li>
                    <li substepLinkedId="stats" class="substepLinked">Indicadores y Estadísticas.</li>
                </ul>
            </div>
        </div>
        <img substepLinkedId="causas" class="substepLinked" style="position: absolute; top: 250px; right: 250px; margin: 10px; width: 250px; height: 180px;" src="images/escritorio_causas.jpg"></img>
        <img substepLinkedId="agenda" class="substepLinked" style="position: absolute; top: 325px; right: 175px; margin: 10px; width: 250px; height: 180px;" src="images/escritorio_agenda.jpg"></img>
        <img substepLinkedId="stats" class="substepLinked" style="position: absolute; top: 400px; right: 100px; margin: 10px; width: 250px; height: 180px;" src="images/escritorio_estadisticas.jpg"></img>
    </div>

In this way, the <img> are shown when their corresponding substep is shown.

[henrikingo]

It's a good suggestion. For a proper implementation I believe it would be perfectly possible to do the same without introducing new CSS classes, just edit existing code to set substep-visible based on the link.

Note also #720 which is a similar request for autoplay.

Both share the challenge that impress.js already uses the entire location.hash for pointing to the step id, and it's not clear to me that we can ever add to it in a backward compatible way, but maybe we could. A new hash format could be step=step-N&substep=ssid&autoplay=off . We could autodetect this new format by presence of = in the hash. (And & of course, but note that it may not be present if there's just one parameter.) Even this isn't entirely fool proof, because apparently HTML 5 now allows any character as element id. Otoh using = and & in the id isn't that wise, so we could assume most impress.js authors didn't do that.

[mdre]

Hi!.

I find handy the use of a separate CSS class so I can add a different timer/effect to the images. Just a second after the subsptep is shown, but any alternative will be useful.

offtopic: Yesterday I was able to successfully use my first presentation made with impress.js!

[henrikingo]

I find handy the use of a separate CSS class so I can add a different timer/effect to the images. Just a second after the subsptep is shown, but any alternative will be useful.

That's great if you like it that way. For a general solution I think simpler is better though.

offtopic: Yesterday I was able to successfully use my first presentation made with impress.js!

Great! Congratulations!

If it's available online, would you like to link to it here? I would love to see what your code looks like in practice.

[mdre]

I'm not sure I can share it online because of the licenses of the images, but I uploaded to Dropbox. Download it from presentation.
Includes a modified version of the impress.js with the patch to substep's links

[simplePCBuilding]

I don't think this is necessary, but I'll think about it again