Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Link elements to substep #719

Open
mdre opened this issue Feb 18, 2019 · 5 comments
Open

Link elements to substep #719

mdre opened this issue Feb 18, 2019 · 5 comments

Comments

@mdre
Copy link

mdre commented Feb 18, 2019

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
Copy link
Member

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
Copy link
Author

mdre commented Feb 21, 2019

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
Copy link
Member

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
Copy link
Author

mdre commented Feb 21, 2019

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

@janishutz
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants