95 lines
2.8 KiB
HTML
95 lines
2.8 KiB
HTML
<!-- Components -->
|
|
<link rel="import" href="../polymer/polymer.html">
|
|
<link rel="import" href="../iron-icons/iron-icons.html">
|
|
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
|
|
<link rel="import" href="../paper-button/paper-button.html">
|
|
<link rel="import" href="../strolch-wc-styles/strolch-wc-styles.html">
|
|
|
|
<link rel="import" href="strolch-wc-paging-behavior.html">
|
|
|
|
<dom-module id="strolch-wc-paging">
|
|
|
|
<template>
|
|
|
|
<!-- Style -->
|
|
<style is="custom-style" include="strolch-wc-styles">
|
|
:host {
|
|
display: block;
|
|
}
|
|
|
|
.pager {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-evenly;
|
|
}
|
|
</style>
|
|
|
|
<!-- Content -->
|
|
<div class="pager">
|
|
|
|
<template is="dom-if" if="[[hasContent]]">
|
|
<div class="left">
|
|
<content></content>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="center">
|
|
<paper-icon-button icon="first-page" on-tap="_toFirstPage"></paper-icon-button>
|
|
<paper-icon-button icon="chevron-left" on-tap="_toPreviousPage"></paper-icon-button>
|
|
<span>[[dataObj.offset]] to [[_getEnd(dataObj)]] of [[dataObj.size]]<template is="dom-if"
|
|
if="[[isNonZero(dataObj.dataSetSize)]]"> ([[dataObj.dataSetSize]])</template></span>
|
|
<paper-icon-button icon="chevron-right" on-tap="_toNextPage"></paper-icon-button>
|
|
<paper-icon-button icon="last-page" on-tap="_toLastPage"></paper-icon-button>
|
|
</div>
|
|
|
|
<template is="dom-if" if="[[showSetLimit]]">
|
|
<div class="right">
|
|
<paper-button on-tap="_setLimit">10</paper-button>
|
|
<paper-button on-tap="_setLimit">50</paper-button>
|
|
<paper-button on-tap="_setLimit">100</paper-button>
|
|
</div>
|
|
</template>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
Polymer({
|
|
is: "strolch-wc-paging",
|
|
|
|
<!-- Behaviors -->
|
|
behaviors: [
|
|
StrolchPagingBehavior
|
|
],
|
|
|
|
<!-- Properties -->
|
|
properties: {
|
|
hasContent: {
|
|
type: Boolean,
|
|
value: false
|
|
},
|
|
showSetLimit: {
|
|
type: Boolean,
|
|
value: false
|
|
}
|
|
},
|
|
|
|
<!-- Observers -->
|
|
|
|
|
|
<!-- Listeners -->
|
|
listeners: {},
|
|
|
|
<!-- Function -->
|
|
ready: function () {
|
|
|
|
},
|
|
|
|
isNonZero: function (number) {
|
|
return number > 0;
|
|
}
|
|
});
|
|
</script>
|
|
</dom-module>
|