paper-swipeable-pages.html

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

<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../iron-swipeable-pages/iron-swipeable-pages.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../dom-repeat-n/dom-repeat-n.html">

<link rel="import" href="./paper-swipeable-pages-icons.html">

<!--
`<paper-swipeable-pages>` manages a set of pages and and provides the ability to switch
between them by swiping gesture. In addition to the basic `iron-*` counterpart, it
provides by default navigation arrows and dots position indicator.

Example:

    <paper-swipeable-pages>
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
    </paper-swipeable-pages>

Additionnally, you can specify the following properties regarding the sensitivity of the swipe,
the transition used, and the possibility of cycling. For more details, see below.

It could be a good idea to disable text selection on any of the children that you
want to be swiped:

    .swipe {
      -moz-user-select: none;
      -ms-user-select: none;
      -webkit-user-select: none;
      user-select: none;
      cursor: default;
    }

### Styling

The following custom properties / mixins are available for styling:

Custom property | Description | Default
----------------|-------------|----------
`--paper-swipeable-pages-arrows` | Mixin applied to the arrow icon-button. | `{}`
`--paper-swipeable-pages-indicator` | Mixin applied to the indicator. | `{}`
`--paper-swipeable-pages-indicator-selected` | Mixin applied to the indicator when selected. | `{}`

@demo demo/index.html
@hero hero.svg
-->

<dom-module id="paper-swipeable-pages">
  <style>
    :host {
      display: block;
    }
    #page_selector {
      position: fixed;
      width: 100%;
      bottom: 5vh;
      @apply --layout-horizontal;
      @apply --layout-center-center;
    }
    .page-indicator {
      opacity: 0.35;
      fill: var(--light-primary-color);
      margin: 5vw;
      width: 30px;
      height: 30px;
      @apply --paper-swipeable-pages-indicator;
      -webkit-transition: opacity 3s;
      transition: opacity 3s;
    }
    .page-indicator[selected] {
      opacity: 1;
      @apply --paper-swipeable-pages-indicator-selected;
    }
    paper-icon-button {
      width: 8vw;
      max-width: 60px;
      height: 8vw;
      max-height: 60px;
      margin: 0;
      padding: 0;
      position: absolute;
      top: calc(50% - 4vw);
      color: var(--light-primary-color);
      opacity: 0.85;
      @apply --paper-swipeable-pages-arrows;
    }
    .left {
      left: 0;
    }
    .right {
      right: 0;
    }
  </style>

  <template>
    <iron-swipeable-pages id="isp" selected="{{_selected}}" no-cycle>
      <content></content>
    </iron-swipeable-pages>
    <template is="dom-if" if="[[!noIndicator]]">
      <div id="page-selector">
        <template is="dom-repeat-n" count="[[_pageCount]]">
          <svg class="page-indicator" selected$="{{_computeSelected(_selected, index)}}">
            <circle cx="15" cy="15" r="15"/>
          </svg>
        </template>
      </div>
    </template>
    <template is="dom-if" if="[[!noArrow]]">
      <paper-icon-button
        class="left"
        icon="paper-swipeable-pages-icons:arrow-back"
        on-tap="_selectPreviousPage">
      </paper-icon-button>
      <paper-icon-button
        class="right"
        icon="paper-swipeable-pages-icons:arrow-forward"
        on-tap="_selectNextPage">
      </paper-icon-button>      
    </template>
  </template>

  <script>
    (function() {
      Polymer({
        is: 'paper-swipeable-pages',

        properties: {
          _selected: {
            type: Number,
            value: 0,
          },
          _pageCount: {
            type: Number,
            value: 0,
          },
          /**
           * Hides the arrows.
           */
          noArrow: {
            type: Boolean,
            value: false
          },
          /**
           * Hides the page indicators.
           */
          noIndicator: {
            type: Boolean,
            value: false
          },
        },

        listeners: {
          'track': '_onTrack'
        },

        // Element Lifecycle
        attached: function() {
          this._pageCount = this.$.isp.items.length;
        },

        // Element behavior
        _onTrack: function(event) {
          var track = event.detail;

          if (track.state === 'start') {
            var pageSelections = Polymer.dom(this.$.page_selector).children;
            pageSelections.forEach(function(pageSelection, index) {
              if (this._selected == index) {
                pageSelection.style.opacity = '1';
              } else {
                pageSelection.style.opacity = '0.35';
              }
            }, this);
          }
        },

        _computeSelected: function(selected, index) {
          this.debounce("selectionDone", function() {
            var pageSelections = Polymer.dom(this.$.page_selector).children;
            pageSelections.forEach(function(pageSelection) {
              pageSelection.style.opacity = '0';
            });
          }, 2000);
          return selected == index;
        }
      });
    }());
  </script>
</dom-module>