Linking to hidden subtrees or conditional display of subtrees

[karahi]

Is there any way to have event handlers on elements within a slip, that can then trigger moving to another slide? (long winded way of saying ‘link’).

Or is there a way to conditionally hide/show a slip?

The motivation is if one had a presentation that is intended for audiences of different levels of prior knowledge.

Re: links - one might have a subslip-tree (slip-subtree?) that is too detailed for the main body of (one version of) the presentation. So in the flow of the main talk, those overly-detailed subtrees would not be traversed. However maybe its likely you’ll have to return to it in the Q+A at the end. In this case, links to these subtrees would be useful to have in the end slip. Or if someone were to pose a relevant query during the presentation, an inline link from the parent slip of the overly-detailed subtree.

Re: conditionality - one could have a single presentation where the slip hierarchy goes into increasing levels of detail on the presentation topic. But conditionality allows for ‘lower-resolution’ versions of the same presentation, by setting a depth parameter (‘only go into this sliptree to nesting_level=X’) somewhere (presumably in Javascript).

They’re obviously related issues (an event handler that conditionally shows the subtree is equivalent to a link to the subtree), hence combining them into a single issue. Basically something like Milanote or ‘Workflowy-for-slides’, where you can expand/collapse subtrees.

Kudos on the whole project though, its really great to have an OSS multiply-nested presentation lib. I’m surprised its not more known more widely..

[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/slipshow@0.0.17/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!