Open sa-mm opened 8 years ago
I've solved this in the following way:
<div id="jmpress" data-template="auto">
<div class="step" data-template="top">
<p>This is a first level step. Each new top level step is placed 2000 to the right.</p>
<div class="step">
<p>This is a second level step. Each new second level step is placed 2000 below the first level step it is nested in because it is a child of "top."</p>
</div>
</div>
<div class="step" data-template="top">
<p>Another first level step.</p>
<div class="step">
<p>Another second level step.</p>
</div>
</div>
</div>
I used the following templates to achieve this:
$.jmpress('template', 'auto', {
children: function(i, child, children) {
return {x: i * 2000};
}
});
And:
$.jmpress('template', 'top', {
children: function(i, child, children) {
return {
x: i,
y: 2000 + i * 2000
}
}
});
I'm not sure if this is the most useful way to achieve this. I'd be happy to hear from more experienced people.
Also, I can create a another step, nested inside the downward moving "second level" step, with the following inline attributes:
<div class="step" data-x="-500">
<p> This step will be placed 500 to the left of the second level step it's nested in. That is, the "data-x" inline attribute of the child of the child of class "top" is handled as if it were relative as opposed to the absolute positioning I had expected.</p>
</div>
It wasn't obvious to me that this sort of relative positioning would be possible. I guess when using the inline attributes, the templates are not completely ignored. jmpress splits the difference. (Maybe?)
I wanted mimic reveal.js' automatic positioning, and this allows me to do it with the added bonus that I can occasionally place a slide relative to its parent. That's nice.
I would like to create two templates. The first positions the step along the x axis relative to the previous step that used this template. It would be similar to this:
However, I think this needs to be applied to the parent element, and I'm not sure if that works for my purposes, given what I need for the second template.
The second template would position the step below the previous but at the same point along the x axis. So, something like this (maybe?):
So, I want to be able to control the positioning of the steps by citing the template. Suppose each "right" stands for a div with data-template="right":
Does that make sense? Is it possible? I know the templates I've given won't do it, but I was hoping this would help give you an idea of what I'm after.