Dynamically Prevent Page Turn to Next Page

Using JavaScript with Hype
#1

My HypeDocument loads in data for x number of scenes. Users can page turn between the scenes. I need to dynamically prevent, with Javascript, the user from swiping to the next scene if there is no data. I can handle all the dynamic parts of it; I’m just stuck on how to prevent the user from page turning to the next page if there is no data. Is there some Javascript that can temporarily interrupt the ability of the user to page turn - or even some workaround? Obviously they’ll still be able to swipe but I’d like to interrupt the built in function that shows the next page loading as they page turn.

How to make a page turn transition to next scene only available once certain conditions are met?
#2

The simple Answer is yes.

But you have not supplied any info or example of how you are getting the data or code that is used for dynamic page turns…

–

You just need to check if the data exists or defined. So where you have page turns/scene change on swipe you need to run javascript.

In the Javascript you check if the data exists. If it does use the Hype Javascript API to change scene.

Any example project we supply without the above info I mention or example from you will likely be confused by us implementing and simple data store and scene control.

i.e

swipTerminate.hype.zip (28.9 KB)

1 Like
#5

After some guidance from @jonathan and some code from the Hype Extension project by @MarkHunte, you can disable the scene swipe action on a specific scene by running this function ‘On Scene Load’:

sceneElement.style.setProperty("pointer-events", "none", "important"); on the scene element, so the full code would be:

    var sceneElement;
    //-- get current scene
    var hypeContainer = document.getElementById(hypeDocument.documentId());
    var sceneArray = hypeContainer.getElementsByClassName("HYPE_scene");
    for (i = 0; i < sceneArray.length; i++) {
        if (sceneArray[i].style.display === "block") sceneElement = sceneArray[i];    
    }
    
    sceneElement.style.setProperty("pointer-events", "none", "important");
2 Likes
#6

There is an one liner also from the Hype Extension project to find the current scene. This does the same with less code for efficiency.

var sceneElement = document.querySelector('#'+ hypeDocument.documentId()+' > .HYPE_scene[style*="block"]');
sceneElement.style.setProperty("pointer-events", "none", "important");
2 Likes
#7

That seems to work. Thank you. Does Hype hide and show scenes and that’s how you can get the current scene by seeing which one is displayed?

#8

Please delete this comment if this is not OK and I’ll re-post in the beta. But this doesn’t seem to work with Page Turner swipe actions.

#9

Yup, @MaxZieb’s code above looks for all scenes, and filters the one visible Hype scene that is set to display:block

#10

The solution from @MarkHunte is more elegant and can potentially do more. Using a function as proxy for scene changes. Blocking pointer events actually blocks all interactions with elements in a scene if I am not miss taken. Even if this might be the solution in this case please also look at Dynamically Prevent Page Turn to Next Page