Linking to hidden subtrees or conditional display of subtrees

[karahi]

Linking to hidden subtrees or conditional display of subtrees

[panglesd]

Thanks for your feedback! I'm glad someone find this project useful. I would love to have it known more widely...

About your questions, there is no "built-in" keyword that achieve what you want, but you can still do it quite easily using javascript and the slip engine (I'll give an example for each one : links and conditionallity, but of course you can mix them to better suit what you want).

One of my main design difficulty was the table of content. It requires to compute in advance the number of steps taken in each slip, and their order. However, as it is possible to modify the presentation during the presentation, the table of content might become wrong. I was thus facing the following question: should I make it easy to modify the presentation order (but then spoiling the table of content)? Or should I make it something you do "by hand", making the table of content less easily spoiled?
I decided that most often, it is better to have a good table of content.

• Links: the function to add a slip to the slip stack should look like this (provided you called your engine "engine" in let engine = Slipshow.startSlipshow();):

function goto(id) {
	 let elem = document.querySelector("#"+id);              // get the element with id "id"
	 let slip = new Slipshow.Slip(elem, "", [], engine, {}); // create a slip with this element
	 engine.gotoSlip(slip);                                  // move the window to see the slip
	 engine.push(slip);                       // add the slip to the stack of slips of the engine
	 engine.next();                                          // start the slip
}

Then, you can add buttons to add a slip to the stack like this:

<input type="button" onclick='goto("id-of-detailed-slip")' value="See details"></input>    

One thing to know is that when you come back from the added slip, you will end up where you were +1 step! There is an example of how to deal with this here

• Conditionality: before starting the presentation, you can modify which slip will be entered by adding or removing the immediate-enter and auto-enter attributes:

if(showing_details) {
      document.querySelectorAll(".detailed").forEach((elem) => {
         elem.setAttribute("auto-enter", "");
      })
}
let engine = Slipshow.startSlipshow();

Here is an example of a way to use this. Note that instead of modifying the attributes, you can also explicitely decide which slips will be showed and in which order, using slip.setAction, as explained here.

• Finally, what I usually use during a presentation if I want to skip a slip: if you press "Shift+Right" key, instead of moving of one step, it moves forward until it changes slip: either entering a new, or leaving the slip. So, i enter the slip and immediately press Shift+Right to go through it. Then if I want to come back to it, I use the table of content. An example can be found here.

I hope I answered your questions! Let me know if you think these solutions are sufficiently good for you, or if you think I should extend slipshow to make them more straightforward.

[karahi]

Thanks for the response, which was very helpful. I figured I'd be able to do links/conditionality/both with some js utility methods, but it was hard to figure out how - on the readthedocs site for slipshow, the methods are just listed without giving any description of the method parameters or return types (or what they do). Some methods that you have mentioned above aren't listed at all (engine.gotoSlip, engine.push, engine.next for example). I think documenting those would be most useful for other people who might want to help you extend it!

In any case, I think being able to just use a css selector for conditionality works well for the moment.

[panglesd]

Thanks for your feedback! Although it is still not very precise and well-documented, I added some explanations on the functions in the readthedocs site, as well as the missing functions.
Lastly, I also added a function enter to the engine which does exactly gotoSlip, push, and next. You might want to use it!

I also wanted to warn you about something: I did a mistake, and I did not add the version number in the cdn in the tutorial.
If you do not download a local version, you should always link to a specific version to avoid having your presentation broken due to a major version change.
In practice, you should replace https://cdn.jsdelivr.net/gh/panglesd/slipshow@gh-pages/ with https://cdn.jsdelivr.net/npm/[email protected]/dist/.
I do not plan to make retro-incompatible changes, but I do plan to reformate the code, and you never know which changes will be needed...

I'll close the issue shortly!