wizard-view.html

<link rel="import" href="../polymer/polymer.html">

<!--
`<wizard-view>` allows you to advance through multiple screens/views. It has
minimal styles applied for functional purposes (show and hide).

To define its steps use the `<wizard-step>` elements inside of `<wizard-view>`.
If you want to trigger the next view by tapping an element in
`<wizard-step>`, assign it the `proceed-trigger` class.

Example:

    <wizard-view>

      <wizard-step active>
        <span>First step</span>
        <a href="#" class="proceed-trigger">Next</a>
      </wizard-step>

      <wizard-step>Second step</wizard-step>

    </wizard-view>

@element wizard-view
@blurb Element providing solution to [...].
@status [...]
@homepage http://zinkkrysty.github.io/wizard-view/components/wizard-view/
-->
<polymer-element name="wizard-step" attributes="active completed">
  <template>
    <style>
      :host {
        display: none;
      }
      :host([active]) {
        display: block;
      }
    </style>
    <content></content>
  </template>

  <script>
    Polymer({
      /**
      * Determines which step is the active one
      *
      * @attribute active
      * @type boolean
      * @default false
      */
      active: false,
      completed: false,

      domReady: function(){
        this.proceedTrigger = this.querySelector('.proceed-trigger');
        var parent = this;
        if(this.proceedTrigger) {
          this.proceedTrigger.onclick = function(){
            parent.proceed();
          };
        }
      },

      proceed: function(){
        this.completed = true;
        this.fire('wizard-step-done');
      },

      activeChanged: function(){
        // Sets the attribute on the element to follow the property (useful for styling)
        if(this.active)
          this.setAttribute('active', '')
        else
          this.removeAttribute('active');
      }
    });
  </script>
</polymer-element>


<polymer-element name="wizard-view">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <div class="steps" on-wizard-step-done="{{proceed}}">
      <content select="wizard-step"></content>
    </div>
  </template>

  <script>
    Polymer({

      ready: function() {
        this.steps = this.querySelectorAll('wizard-step');
      },

      proceed: function() {
        this.changeActiveStep();
      },

      changeActiveStep: function() {
        var currentActiveStep = this.querySelector('wizard-step[active]');
        currentActiveStep.active = null;
        var nextStep = currentActiveStep.nextElementSibling;
        if(nextStep) {
          nextStep.active = true;
        }
      },
    });
  </script>
</polymer-element>