Template Question

[sa-mm]

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:

$.jmpress('template', 'right', {
  children: function(i, child, children) {
    return {x: i * 2000};
  }
});

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?):

$.jmpress('template', 'down', {
  children: function(i, child, children) {
    return {x: i, y: i * 2000};
  }
});

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":

right right right right right right
       down               down
       down               down
       down

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.

[sa-mm]

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.