mtz-wizard.html

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

<!--
`mtz-wizard`
Maintains a curated list of steps for use in the stepper and manages selected state of the steps, provides convenience
methods for navigation and `wizard-form` interactions, is responsible for rendering the currently active step.

@demo demo/index.html
-->
<dom-module id="mtz-wizard">
  <template>
    <iron-pages
      id="selector"
      attr-for-selected="[[attrForSelected]]"
      selectable="[[selectable]]"
      selected-attribute="[[selectedAttribute]]"
      selected-class="[[selectedClass]]"
      selected-item="{{selectedItem}}"
      selected="{{selected}}"
      items="{{steps}}">
      <slot></slot>
    </iron-pages>
  </template>

  <script>
    Polymer({
      is: 'mtz-wizard',
      properties: {
        /* Determines if this wizard is active or not, used to attach/detach the steps from the DOM for data reset */
        active: {
          type: Boolean,
          value: false,
          reflectToAttribute: true,
        },
        /* The attribute to use to match the selection key against */
        attrForSelected: {
          type: String,
          value: 'name',
        },
        /* Set to true when on the first step in the wizard */
        onFirstStep: {
          type: Boolean,
          value: false,
          readOnly: true,
          notify: true,
        },
        /* Set to true when on the last step in the wizard */
        onLastStep: {
          type: Boolean,
          value: false,
          readOnly: true,
          notify: true,
        },
        /* This is a CSS selector string. If this is set, only items that match the CSS selector are selectable. */
        selectable: {
          type: String,
          value: '[wizard-step],.wizard-step',
        },
        /* The currently selected step, null if no step is selected */
        selected: {
          type: String,
          value: null,
          notify: true,
        },
        /* The attribute to set on elements when selected */
        selectedAttribute: {
          type: String,
          value: 'active',
        },
        /* The class to set on elements when selected. */
        selectedClass: String,
        /* The currently selected item */
        selectedItem: {
          type: Object,
          notify: true,
          observer: '__selectedItemChanged',
        },
        /* The Set of HTMLElements that make up the steps */
        steps: {
          type: Array,
          notify: true,
        },
      },
      observers: [
        '__setDefaultSelection(steps, attrForSelected)',
      ],
      /**
       * Fetches the model from all steps that have a form with a dirty model, returns as a map of step name to model.
       *
       * @param {HTMLElement[]} [steps = this.steps]
       * @param {String} [attr = this.attrForSelected]
       * @return {Object}
       */
      getFormData(steps = this.steps, attr = this.attrForSelected) {
        const data = (steps || []).reduce((model, step) => {
          if (step.form && step.dirty)
            model[step.getAttribute(attr)] = step.form.serializeForm();
          return model;
        }, {});
        return data;
      },
      /**
       * Changes the currently active step to the next step in the array of steps, loops from end to beginning.
       */
      next() {
        if (!this.onLastStep)
          this.$.selector.selectNext();
      },
      /**
       * Changes the currently active step to the previous step in the array of steps, loops from beginning to end.
       */
      previous() {
        if (!this.onFirstStep)
          this.$.selector.selectPrevious();
      },
      /**
       * Runs the reset logic on every step that has a form bound to it.
       *
       * @param {HTMLElement[]} [steps = this.steps]
       */
      reset(steps = this.steps) {
        (steps || []).forEach((step) => {
          if (step.reset) step.reset();
        });
      },
      /**
       * Selects the step at the given key.
       *
       * @param {String} key - the key to selecte the step based on
       * @return {HTMLElement}
       */
      select(key) {
        this.$.selector.select(key);
        return this.selectedItem;
      },
      /**
       * Selects the step at the given index.
       *
       * @param {Number} index
       * @return {HTMLElement}
       */
      selectIndex(index) {
        this.$.selector.selectIndex(index);
        return this.selectedItem;
      },
      /**
       * Runs the validation logic on all steps with a form bound to them.
       *
       * @param {HTMLElement[]} [steps = this.steps]
       * @return {Promise} - resolves with a Boolean that says if the wizard is valid or not
       */
      validate(steps = this.steps) {
        return Promise.all((steps || []).
          map((step) => {
            return Promise.resolve(!step.validate || step.validate());
          })).
          then((promises) => {
            return promises.every(Boolean);
          }).
          catch(() => {
            return false;
          });
      },
      /**
       * Sets the fallback selection as the first item.
       * @private
       *
       * @param {HTMLElement[]} steps
       * @param {String} attr - the attrForSelected property
       */
      __setDefaultSelection(steps, attr) {
        if (!this.selected && attr && steps && steps.length > 0) {
          this.set('selected', steps[0].getAttribute(attr));
        }
      },
      /**
       * Runs when selected item is changed, used to set onFirstStep and onLastStep.
       * @private
       *
       * @param {Object} item - the selected item
       */
      __selectedItemChanged(item) {
        const index = item ? this.$.selector.indexOf(item) : null;
        this._setOnFirstStep(index === 0);
        this._setOnLastStep(index === this.steps.length - 1);
      },
    });
  </script>
</dom-module>