I'd like to show the number of the currently selected page and number of all pages in iron-pages (e.g. "page 1 of 100").
Getting the former is easy as you can look for the selected-changed event. For the latter I have no idea how to get it. I was considering getting the number of child elements in iron-pages, but that doesn't seem to be reliable.
What you can do is make sure every page has a corresponding number as attribute. You can get the number of pages by evaluating child elements (ignoring the fallback page).
A working example:
<!DOCTYPE html>
<html>
<head>
<base href="//polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="iron-pages/iron-pages.html">
<dom-module id="example-component">
<template>
<style>
:host {
display: block
}
</style>
<input value="{{pageName::input}}" placeholder="Type a page name here.">
<iron-pages id="ironPages" selected="[[pageName]]" attr-for-selected="page-number" fallback-selection="fallback">
<div page-number="1">One</div>
<div page-number="2">Two</div>
<div page-number="3">Three</div>
<div page-number="fallback">
Change pages by typing '1', '2', or '3' in the input above.
</div>
</iron-pages>
<div id="pageNumbering">Page [[currentPage]] of [[totalPages]]</div>
</template>
<script>
class ExampleComponent extends Polymer.Element {
static get is() {
return 'example-component';
}
static get properties() {
return {
currentPage: {
type: Number,
value: 0,
},
totalPages: {
type: Number,
value: 0,
}
};
}
connectedCallback() {
super.connectedCallback();
// fallback doesn't count
this.totalPages = this.$.ironPages.children.length - 1;
this.addEventListener('iron-select', this._onPageChanged);
}
_onPageChanged() {
let currentPage = this.$.ironPages.selectedItem.getAttribute('page-number');
if (currentPage == "fallback") {
this.$.pageNumbering.hidden = true;
}
if (currentPage <= this.totalPages) {
currentPage = parseInt(currentPage);
this.set('currentPage', currentPage);
this.$.pageNumbering.hidden = false;
}
}
}
customElements.define(ExampleComponent.is, ExampleComponent);
</script>
</dom-module>
</head>
<body>
<example-component></example-component>
</body>
</html>