Reputation: 1135

iron-pages: Page Changed Event

Is there any event that can be captured by a web component when the page is changed, or even a lifecycle callback?

I tried using the attached callback but it doesn't being fired again..

Upvotes: 4

Answers (2)

tony19

Reputation: 138266

From the parent element of <iron-pages>, you could observe changes to <iron-pages>.selected to monitor the page index/name:

<head>
  <base href="https://polygit.org/polymer+1.9.3/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-button/paper-button.html">
  <link rel="import" href="iron-pages/iron-pages.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <iron-pages id="pages" selected="{{selected}}">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
      </iron-pages>
      <paper-button on-tap="_prev">Prev</paper-button>
      <paper-button on-tap="_next">Next</paper-button>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-foo',
          properties : {
            selected: {
              type: Number,
              value: 0,
              observer: '_selectedChanged'
            }
          },
          _selectedChanged: function(newPage, oldPage) {
            console.log('<iron-pages>.selected', 'new', newPage, 'old', oldPage);
          },
          _prev: function() {
            this.$.pages.selectPrevious();
          },
          _next: function() {
            this.$.pages.selectNext();
          }
        });
      });
    </script>
  </dom-module>
</body>

^codepen

Or you could setup an event listener for the <iron-pages>.iron-select and <iron-pages>.iron-deselect events in order to watch the selected and deselected elements.

<head>
  <base href="https://polygit.org/polymer+1.9.3/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-button/paper-button.html">
  <link rel="import" href="iron-pages/iron-pages.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <iron-pages id="pages" selected="0"
                  on-iron-select="_pageSelected"
                  on-iron-deselect="_pageDeselected">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
      </iron-pages>
      <paper-button on-tap="_prev">Prev</paper-button>
      <paper-button on-tap="_next">Next</paper-button>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-foo',
          _pageSelected: function(e) {
            var page = e.detail.item;
            console.log('page selected', page);
          },
          _pageDeselected: function(e) {
            var page = e.detail.item;
            console.log('page deselected', page);
          },
          _prev: function() {
            this.$.pages.selectPrevious();
          },
          _next: function() {
            this.$.pages.selectNext();
          }
        });
      });
    </script>
  </dom-module>
</body>

^codepen

Or you could configure <iron-pages>.selectedAttribute so that it sets an attribute on the newly and previously selected pages, which you could observe from within the page itself. When the page selection changes, the previously selected page's attribute is set to false, and the newly selected to true.

<head>
  <base href="https://polygit.org/polymer+1.9.3/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-button/paper-button.html">
  <link rel="import" href="iron-pages/iron-pages.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <iron-pages id="pages" selected="0" selected-attribute="selected">
        <x-page data-name="p1">One</x-page>
        <x-page data-name="p2">Two</x-page>
        <x-page data-name="p3">Three</x-page>
      </iron-pages>
      <paper-button on-tap="_prev">Prev</paper-button>
      <paper-button on-tap="_next">Next</paper-button>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-foo',
          _prev: function() {
            this.$.pages.selectPrevious();
          },
          _next: function() {
            this.$.pages.selectNext();
          }
        });
      });
    </script>
  </dom-module>
  
  <dom-module id="x-page">
    <template>
      <content id="content"></content>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-page',
          properties: {
            selected: {
              type: Boolean,
              value: false,
              observer: '_selectedChanged'
            }
          },
          _selectedChanged: function(selected) {
            console.log('<x-page>.sel', this.dataset.name, selected);
          }
        });
      });
    </script>
  </dom-module>
</body>

^codepen

Upvotes: 9

codeMonkey

Reputation: 4815

Yes there's the 'iron-select' event. You can create a listener on an element and have it listen for this event.

'iron-activate' is triggered right before the item changes, if you prefer.

Here's the link to all the iron-pages events: https://elements.polymer-project.org/elements/iron-pages#event-iron-activate

Upvotes: 2

iron-pages: Page Changed Event

Answers (2)

Related Questions