bespokejs / bespoke-scale

Responsive Slide Scaling for Bespoke.js
MIT License
8 stars 7 forks source link

Add class to scale parent of active slide #10

Open mojavelinux opened 9 years ago

mojavelinux commented 9 years ago

Adding a CSS transform to an element creates a new stacking group for z-index values (see http://philipwalton.com/articles/what-no-one-told-you-about-z-index/). As a consequence, when the scale transform is added to the scale parent element, the stacking order of slides can no longer be controlled using existing CSS classes. This affects plugins that need to control the stacking order of slides such as bespoke-overview.

The scale plugin should respond to the activate event and add a CSS class to the scale parent element that corresponds to the current active slide. That way, a z-index can be assigned to the parent element to force the current slide to the top of the visible stack.

I propose the name of the CSS class to be bespoke-scale-active, though I'm open to other ideas.

Example:

<article class="bespoke-parent">
  <div class="bespoke-scale-parent" style="transform: scale(...)">
    <section class="bespoke-slide bespoke-inactive ...">
      <h1>Slide 1</h1>
    </section>
  </div>
  <div class="bespoke-scale-parent bespoke-scale-active" style="transform: scale(...)">
    <section class="bespoke-slide bespoke-active">
      <h2>Slide 2</h2>
    </section>
  </div>
</article>

I'm unsure if we should also do the bespoke-scale-inactive or the bespoke-scale-before/after classes, but we at least need to know which one of the scale parent elements corresponds to the active slide.

Note that this only applies when the transform strategy is used.