Creation of the multistep (substeps) functionnality #215
Conversation
…single step (see example to see it working) As the rest of impress, this part only needs html+css skills. There is no need to add any javascript to use it.
We may now use :
document.addEventListener("impress:substepenter", myfunction);
document.addEventListener("impress:substepleave", myfunction);
and, to get the name of the substep :
var substep=event.target.getAttribute("data-active-substep");
|
There is a way to try this event handler : <script>
document.addEventListener("impress:substepenter", function (event) {
var substep=event.target.getAttribute("data-active-substep");
document.getElementById('events_debugger').innerHTML = 'Entering substep '+substep+'<br />'+document.getElementById('events_debugger').innerHTML;
});
document.addEventListener("impress:substepleave", function (event) {
var substep=event.target.getAttribute("data-active-substep");
document.getElementById('events_debugger').innerHTML = 'Leaving substep '+substep+'<br />'+document.getElementById('events_debugger').innerHTML;
});
document.addEventListener("impress:stepenter", function (event) {
var step = event.target.id;
document.getElementById('events_debugger').innerHTML = 'Entering step '+step+'<br />'+document.getElementById('events_debugger').innerHTML;
});
document.addEventListener("impress:stepleave", function (event) {
var step = event.target.id;
document.getElementById('events_debugger').innerHTML = 'Leaving step '+step+'<br />'+document.getElementById('events_debugger').innerHTML;
});
</script>
<div id="events_debugger"></div>and add some substeps (adding data-multistep="class_for_substep1 class_for_substep2 class_for_substep3" to any step, and go browse it. All events will be shown on the top left of the screen. |
| @@ -378,6 +378,39 @@ a:focus { | |||
| } | |||
|
|
|||
| /* | |||
| This step introduces substeps. | |||
| At first, it only has one line of text, but after 1 action, it adds one line and changes text color to red, and | |||
| after the second action, adds another line another line and changes the color to green. | |||
|
piranna: I'm not sure I really understood what you meant... Anyway, the way i've created it allows to use substeps with only CSS, only JS, or with both of them together. |
|
Mainly homogeneity of the API: having a "step" class, it make sense to have a "substep" class inside them, and look for the substeps searching for the substep classes inside a step class instead of define them explicitly as you did with the data-multistep. This will make API cleaner and easier to understand. |
|
But the action that is made is to add a class to the step, not to the substeps. We even may have no elements inside the step. Use cases are :
To do the same, we might think of setting a number for the value of data-multistep, and adding a class of substep_[num_of_the_substep] to the main step, but i don't see a real improvement here... I hope i've explained myself well, as english is not my mother language (as you might have noticed...). |
|
I understand you, but didn't finished to see it. Maybe I should do some experiments before... |
|
What's the status of this commit? steps = $$(".substep", activeStep);
steps.forEach( initStep );loop during stepenter to build the substeps. |
|
Hi @briceparent, in an effort to clear up older issues/PRs we are pinging back to know if you are still tracking this request. To give a little bit of context, recently a decision was made in the project to make the development more active and the first task is to clear up older issues like this one to see if the OP is still interested in keep it going. |
|
I think this is a basic functionality...
|
|
Hi @piranna, this is indeed a basic functionality and we will try to provide it as soon as possible. The initial plans for impress.js is that it becomes a core mechanism for 3D presentation-like use cases, so this feature might be implemented in a slightly different way in the future. The reason why I ask if the OP is still tracking this issue is to keep open only one issue related to this feature and close the duplicates 👍 |
|
Hello ! |
|
Here's how I solved it. Rather than load up a whole array of substeps on next step (in document order) On Fri, Feb 5, 2016 at 7:47 AM Brice PARENT notifications@github.com
|
|
Hi @briceparent thanks for the feedback! In this case we will close this issue in order to track this feature using other similar PRs/Issues. Thank you very much for your effort and for the response. We can reopen it later if you think it is necessary. |
This is the same as #190 , which I closed because the base commit was including irrelevant changes in the indentation.
Added the substeps / Multistep functionnality that allows to create changes in a single step. Better explained in the example file, between the "positioning-rotating-scaling" step and the "imagination" step.
It works in both ways (from start to end and from end to start) to enable the users to rewind the presentation.
As everything in impress.js, it doesn't require javascript skills, only HTML+CSS. Hope you'll enjoy it!