Pageable-content element based on core-list

st-pageabe-element.html

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

<link href="../bower_components/core-list/core-list.html" rel="import"/>

<link href="st-ajax.html" rel="import" />
<link href="st-globals.html" rel="import" />
<link href="st-pagination.html" rel="import" />

<polymer-element name="st-pageable-content" extends="core-list" attributes="urlTemplate appUrlTemplate dataname currentPage">
	<template>
		
		<shadow></shadow>
		
		<st-pagination id="pager" on-st-pagination-changed="{{pageChanged}}"></st-pagination>

		<st-globals id="globals"></st-globals>

		<st-ajax dst="{{currentPageUrl}}"
		         id="ajax"
		         ticket="{{$.globals.authentication.authTicket}}"
		         method="GET"
		         on-core-response="{{_ajaxResponse}}"
		         on-core-error="{{_ajaxError}}"
		         on-core-complete="{{_ajaxComplete}}"
		         on-st-ajax-start="{{_ajaxStart}}">
		</st-ajax>

	</template>
	<script>
		Polymer({
			created: function() {
				//template pro url adresu na které budou prováděny požadavky
				this.url = "";

				//vegenerovaná url adresa aktuální stránky
				this.currentPageUrl = "";

				//url template pro stránkování v aplikaci
				this.appUrlTemplate = "";
			},

			currentPageChanged: function (oldValue, newValue) {
				if (newValue === "") {
					this.currentPage = 1;
					return;
				}
				this.$.pager.currentPage = this.currentPage - 1;
				this.generateCurrentPageUrl();
				this.$.ajax.go();
			},

			//vygeneruje url adresu pr aktuální stránku
			generateCurrentPageUrl: function () {
				var template = this.urlTemplate;
				this.currentPageUrl = template.replace("{page}", this.$.pager.currentPage + 1);
			},

			//událost na změnu stránku
			pageChanged: function (e) {
				var template = this.appUrlTemplate;
				var desiredUrl = template.replace("{page}", e.detail.page + 1);
				this.$.globals.routing.go(desiredUrl);
			},

			//znovu načte obsah 
			reloadContent: function() {
				this.$.pager.currentPage = this.currentPage - 1;
				this.generateCurrentPageUrl();
				this.$.ajax.go();
			},

			//úspěšná odpověď od serveru
			_ajaxResponse: function (e) {
				switch (e.detail.xhr.status) {
					case 200:
						if (e.detail.response._embedded == null || e.detail.response._embedded[this.dataname] == undefined) {
							console.log("Cílová data neexistují");
							this.data = [];
							this.$.pager.pageCount = 0;
							this.$.pager.pageSize = 0;
							this.$.pager.rangeSize = 0;
						} else {
							this.$.pager.pageCount = e.detail.response.PageCount;
							this.$.pager.pageSize = e.detail.response.PageSize;

							if (this.$.pager.pageCount > 3) {
								this.$.pager.rangeSize = 3;
							} else {
								this.$.pager.rangeSize = this.$.pager.pageCount;
							}

							this.data = e.detail.response._embedded[this.dataname];
						}
						break;
					default:
						console.log("Chyba při příjmání dat");
				}
			},

			//request skončíl s chybou
			_ajaxError: function (e) {
				switch(e.detail.xhr.status) {
					case 400:
						//stránka mimo rozsah
						console.log("Stránka mimo rozsah");
						this.data = [];
						this.$.pager.pageCount = 0;
						this.$.pager.pageSize = 0;
						this.$.pager.rangeSize = 0;
						break;
					case 401:
						//uživatel není přihlášen ==> odhlásíme a přesměrujeme ho
						this.$.globals.authentication.logout();
						this.$.globals.routing.goHome();
						console.log("Uživatel není přihlášen");
						break;
					default:
						console.log("Chyba při příjmání dat");
						break;
				}
			},

			//dokončení requestu
			_ajaxComplete: function (e) {
				this.$.globals.progressbar.stop();
			},

			_ajaxStart: function(e) {
				this.$.globals.progressbar.start();
			}
		});

	</script>

</polymer-element>

st-pagination.html

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

<link href="../bower_components/core-media-query/core-media-query.html" rel="import" />

<link href="../bower_components/paper-button/paper-button.html" rel="import" />

<polymer-element name="st-pagination" attributes="pageCount currentPage rangeSize">
	<template>
		<style>
			:host {
				position: relative;
				text-align: center;
				display: block;
			}

			ul {
				-webkit-padding-start: 0;
			}

			li {
				display: inline;
				line-height: 20px;
			}

				li paper-button[disabled] {
					background-color: #eaeaea;
				}

				li paper-button {
					color: white;
					background: #1ba1e2;
					font-size: 1em;
					text-transform: uppercase;
					min-width: 3em;
				}

				li.active paper-button {
					background: #E73347;
				}
		</style>

		<core-media-query query="max-width: 720px" querymatches="{{phoneScreen}}"></core-media-query>

		<ul>
			<li><paper-button hidden?="{{phoneScreen}}" disabled?="{{currentPage === 0 ? 'disabled' : ''}}" on-click="{{firstPage}}" raisedbutton><<</paper-button></li>

			<li class="">
				<paper-button hidden?="{{phoneScreen}}" disabled?="{{currentPage === 0 ? 'disabled' : ''}}" on-click="{{prevPage}}" raisedbutton><</paper-button>
			</li>

			<template repeat="{{n in range}}">
				<li class="{{n == currentPage ? 'active' : ''}}" data-item="{{n}}" on-click="{{setPage}}">
					<paper-button raisedbutton>{{n+1}}</paper-button>
				</li>
			</template>

			<li>
				<paper-button hidden?="{{phoneScreen}}" disabled?="{{(currentPage === pageCount - 1) || (pageCount === 0) ? 'disabled' : ''}}" on-click="{{nextPage}}" raisedbutton>></paper-button>
			</li>

			<li><paper-button hidden?="{{phoneScreen}}" disabled?="{{(currentPage === pageCount - 1) || (pageCount === 0) ? 'disabled' : ''}}" on-click="{{lastPage}}" raisedbutton>>></paper-buttonhidden?></li>
		</ul>
	</template>
	<script>
		Polymer({
			ready: function () {
			},

			pageCount: 0, //počet stránek
			currentPage: 0, //číslo aktuální stárnky
			rangeSize: 0, //počet stránek k zobrazení na tlačítkách
			currentRange: [], //aktuální rozsah stránek na tlačítkách

			//událost na změnu atributu pageCount
			pageCountChanged: function (oldValue, newValue) {
				this.calculateRange();
			},
			//událost na změnu atributu rangeSize
			rangeSizeChanged: function (oldValue, newValue) {
				this.calculateRange();
			},

			//změněná stránka
			setCurrentPage: function (page) {
				if (page == this.currentPage) {
					return;
				}
				this.currentPage = page;
				this.calculateRange();
				this.fire("st-pagination-changed", {
					page: this.currentPage
				});
			},

			//přepočítá rozsah čísel k zobrazení na tlačítkách
			calculateRange: function () {
				var paginations = [];
				var start = this.currentPage;

				if (start !== 0) {
					start--;
				}
				if (start > this.pageCount - this.rangeSize) {
					start = this.pageCount - this.rangeSize;
				}

				for (var i = start; i < start + this.rangeSize; i++) {
					paginations.push(i);
				}

				this.range = paginations;
			},

			//jít na první stránku
			firstPage: function () {
				this.setCurrentPage(0);
			},

			//jít na poslední stránku
			lastPage: function () {
				this.setCurrentPage(this.pageCount - 1);
			},

			//jít na N stránku
			setPage: function (e, d, t) {
				this.setCurrentPage(parseInt(t.dataset.item, 10));
			},

			//jít na předchozí stránku
			prevPage: function () {
				if (this.currentPage > 0) {
					this.setCurrentPage(this.currentPage - 1);
				}
			},

			//jít na další stránku
			nextPage: function () {
				if (this.currentPage < this.pageCount) {
					this.setCurrentPage(this.currentPage + 1);
				}
			}
		});
	</script>
</polymer-element>

Usage.html

<st-pageable-content id="pageableContent"
		urltemplate="/Episodes/Page-{page}" appurltemplate="/serials/{page}" currentpage="{{currentPage}}" dataname="episode"
		data="{{data}}" width="400" height="170" grid on-core-activate="{{selectView}}">

	<template>
		<st-episode-tile data="{{model}}"></st-episode-tile>
	</template>

</st-pageable-content>

👍 except for the !importantcss 😄

!important in that one case was not need. So I removed it. Thx