Comments (3)
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
andauto-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.
from slipshow.
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.
from slipshow.
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!
from slipshow.
Related Issues (20)
- Engine: wrong computed size on subslips
- Make sure compiled presentations are standalone HOT 2
- Allow to include video or large file
- Have a way to move relatively positioned items WYSIWYG
- Add a ascii layout
- Allow to use tailwindcss or tachyon for easy css customization
- Compiler: better port support for `--serve`
- Support for pre-recorded handwritten content
- Add support for tikz HOT 1
- Add support for mermaid
- Have feature parity on all distributions of slipshow
- scroll doesn't work on Mobile HOT 2
- Have a github action to compile and publish a presentation on github pages
- Getting started issue - How to separate different slides HOT 3
- feat: allows users to find the source markdown within the rendered html file HOT 1
- Binary release file got CPU arch wrong (says x86_64, but it's actually arm) HOT 6
- Can you provide the uncompiled raw markdown file for the beginners HOT 8
- Unix.EOPNOTSUPP on arm64 HOT 2
- figure overlays HOT 1
- Some invalid syntax crashes the compiler
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from slipshow.