Simple Layer Revealer (Version 1)

CleanShot 2021-03-04 at 14.22.54

  • Uses the class Layer to identify all layer to hide.
  • Uses the class LayerYourName to identify the layer.
  • Uses the class Default to identify the layer to initially reveal.
  • Uses the additional attribute data-show-layer set to YourName to define a button or rectangle to act like a button for revealing.

Update: added touch support.

Download:
LayerRevealer.hype.zip (32,5 KB)

5 Likes

Nice idea to use this for a questionnaire by @h_classen so here we go:

This version introduces some extra class names that can be used as follows:

  • HideAfterChoice all layer, groups or symbols tagged with this class name are hidden after a choice or hidden immediately when revisiting a scene with a choice.

  • ShowAfterChoice all layer, groups or symbols tagged with this class name are hidden/shown immediately when visiting a scene depending on if a previous choice was made and immediately show if after a choice.

Previous choices are stored and checked against hypeDocument.customData based on the scene name, so make sure to name your scenes differently. Just set hypeDocument.customData = {} to purge previous choices if you need that feature.

LayerRevealer_Questionnaire_Edition.hype.zip (68,0 KB)

Use the initial post for simple setups. This one allows for more complex stuff.

4 Likes

very nice :slight_smile:

1 Like

Great, almost what I can use.

In LayerRevealer.hype I noticed that lines 10 and 11 obviously have no meaning.(triggerCustomBehaviorNamed('LayerMagic') does not exist.

How can I create the function of the class name "ShowAfterChoice" in the example LayerRevealer_Questionnaire_Edition.hype, if I don't have a "next" button, but swipe to get to the next scene?

  • This is a behavior called on every click an you can subscribe to trigger something. Sidenote: I renamed that to "LayerRevealer", though. It is optional.
  • There is also a behavior fired when clicked called "LayerOPTIONNAME" (OPTIONNAME being your String declared in data-show-layer that can trigger some animation. It is optional.

Just create a JavaScript function to push to next or previous scenes instead of linking them directly. That way you can "gate" the swipe by checking if a choice was made.

var previous_choice = hypeDocument.customData[hypeDocument.currentSceneName()+'_choice'];
if (previous_choice) {
	switch (event.type){
		case "HypeSwipeLeftAction":
			hypeDocument.showNextScene(hypeDocument.kSceneTransitionPushLeftToRight, 1.1);
			break;

		case "HypeSwipeRightAction":
			hypeDocument.showPreviousScene(hypeDocument.kSceneTransitionPushRightToLeft, 1.1);
			break;
	}
}

You need to duplicate that function for previous slides, and you could use the currently not defined else branch to notify the user that he should make a choice.
Updated: You only need one function for swipes as the event.type holds the direction.

1 Like

Oh, I will have I look into this

In the meantime, I have adapted "LeyerRevealer" to my needs. Unfortunately, it only works the first time you select a slide. You can then change the scenes, and the selection remains. But if you change the selection back again, it always remains on the highest selected (C or F).
I am not good with Java Script :frowning:

LayerRevealer_1.hype.zip (30.8 KB)

I am sorry but as I already made a version for questioners I would suggest using that. I won't be feasible to support your custom development in this thread.

Layer Revealer in its base version has no possibility to "remember" choices across scenes etc. This is just how Hype is built as it resets everything on scene changes. This also the reason a LayerRevealer Questionnaire Edition exist to start with.

1 Like

I see. Thanks anyway

Not looked at @MaxZieb 's LayerRevealer Questionnaire Edition.

And if he suggest you use that then that is probably the best thing to do.

But because I was just curios what he was using to declare the state in this one, which works for you going between scenes unless you changed it again I had a quick look at this.

Max uses a default class name to do this.
The reason this works once is because in this Simple Layer Revealer. It is not setup to change scene ( fully ). Therefore the default will be added to more than one layer. And the first one with the default class name will always be chosen.

The simple fix for this is to remove all default class names on the current scene's layers.
Then apply the default class name to the current selection.

if (previous_choice) {
	
	//-- remove previous class
	baseElm.querySelectorAll('.Layer').forEach(function(elm){
		
		 elm.classList.remove('Default');
		});
		
		// Reveal layer by default if isprevious choice
		
		baseElm.querySelector('.Layer'+previous_choice).classList.add('Default');
		} 

LayerRevealer_1.hype 2.zip (42.1 KB)

But like max says....

1 Like

I´m thrilled.

I find the default thing interesting. How should one know this if one has not learned to name and remove default first.

This is exactly what I need. I will use this script against your recommendations. It already won't put anyone in danger....

Thanks a lot.

Love this forum.

1 Like

If you do a search for Javascript tutorial on the forums search or/and web search you will find links for learning Javascript. You need to learn the basics and then explore to be able to read and use it.

A post was split to a new topic: Simple Layer Revealer (Version 2)