2016-11-02 20:54:04 -04:00
|
|
|
/* global Vue, gl */
|
|
|
|
/* eslint-disable no-param-reassign */
|
|
|
|
|
|
|
|
((gl) => {
|
|
|
|
gl.VueGlPagination = Vue.extend({
|
|
|
|
props: [
|
|
|
|
'changepage',
|
2016-11-03 00:41:51 -04:00
|
|
|
'count',
|
2016-11-03 13:20:15 -04:00
|
|
|
'pagenum',
|
2016-11-02 20:54:04 -04:00
|
|
|
],
|
2016-11-07 16:16:57 -05:00
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
nslice: +this.pagenum,
|
|
|
|
};
|
|
|
|
},
|
2016-11-03 13:20:15 -04:00
|
|
|
methods: {
|
|
|
|
pagenumberstatus(n) {
|
2016-11-03 13:42:12 -04:00
|
|
|
if (n - 1 === +this.pagenum) return 'active';
|
2016-11-03 13:20:15 -04:00
|
|
|
return '';
|
|
|
|
},
|
2016-11-06 13:17:18 -05:00
|
|
|
prevstatus() {
|
|
|
|
if (+this.pagenum > 1) return '';
|
|
|
|
return 'prev disabled';
|
|
|
|
},
|
2016-11-03 13:20:15 -04:00
|
|
|
},
|
2016-11-03 00:41:51 -04:00
|
|
|
computed: {
|
2016-11-07 16:16:57 -05:00
|
|
|
dynamicpage() {
|
|
|
|
const section = [...Array(this.upcount).keys()];
|
|
|
|
section.shift();
|
|
|
|
this.nslice = +this.pagenum;
|
|
|
|
this.endcount = +this.pagenum + 5;
|
2016-11-07 16:43:11 -05:00
|
|
|
if (+this.pagenum + 5 <= this.last) {
|
|
|
|
return section.slice(+this.pagenum, +this.pagenum + 5);
|
|
|
|
}
|
|
|
|
if (+this.pagenum + 5 > this.last) {
|
|
|
|
return section.slice(this.last - 5, this.last);
|
|
|
|
}
|
2016-11-07 16:16:57 -05:00
|
|
|
},
|
2016-11-06 15:35:29 -05:00
|
|
|
paginationsection() {
|
|
|
|
if (this.last < 6 && this.pagenum < 6) {
|
|
|
|
const pageArray = [...Array(6).keys()];
|
|
|
|
pageArray.shift();
|
|
|
|
return pageArray.slice(0, this.upcount);
|
|
|
|
}
|
2016-11-07 16:16:57 -05:00
|
|
|
return this.dynamicpage;
|
2016-11-06 15:35:29 -05:00
|
|
|
},
|
2016-11-03 13:34:18 -04:00
|
|
|
last() {
|
2016-11-03 17:38:51 -04:00
|
|
|
return Math.ceil(+this.count / 5);
|
2016-11-03 13:34:18 -04:00
|
|
|
},
|
2016-11-03 13:20:15 -04:00
|
|
|
upcount() {
|
|
|
|
return +this.last + 1;
|
|
|
|
},
|
2016-11-06 15:35:29 -05:00
|
|
|
endspread() {
|
2016-11-07 16:43:11 -05:00
|
|
|
if (+this.pagenum < this.last) return true;
|
2016-11-06 15:56:08 -05:00
|
|
|
return false;
|
2016-11-06 15:35:29 -05:00
|
|
|
},
|
|
|
|
begspread() {
|
|
|
|
if (+this.pagenum > 5 && +this.pagenum < this.last) return true;
|
2016-11-06 15:56:08 -05:00
|
|
|
return false;
|
2016-11-03 13:20:15 -04:00
|
|
|
},
|
2016-11-03 00:41:51 -04:00
|
|
|
},
|
2016-11-02 20:54:04 -04:00
|
|
|
template: `
|
|
|
|
<div class="gl-pagination">
|
2016-11-06 15:35:29 -05:00
|
|
|
<ul class="pagination clearfix" v-for='n in paginationsection'>
|
2016-11-07 16:43:11 -05:00
|
|
|
<li
|
|
|
|
:class='prevstatus(n)'
|
|
|
|
v-if='n - 1 === 1 || n - 1 === nslice || n - 1 === this.last - 5'
|
|
|
|
>
|
2016-11-06 13:17:18 -05:00
|
|
|
<span @click='changepage($event, {where: pagenum - 1})'>Prev</span>
|
2016-11-02 20:54:04 -04:00
|
|
|
</li>
|
2016-11-07 16:43:11 -05:00
|
|
|
<li v-if='n - 1 === last && upcount > 4 && begspread'>
|
|
|
|
<span class="gap">…</span>
|
|
|
|
</li>
|
2016-11-06 15:35:29 -05:00
|
|
|
<li :class='pagenumberstatus(n)' v-if='n >= 2'>
|
2016-11-06 13:17:18 -05:00
|
|
|
<span @click='changepage($event)'>{{(n - 1)}}</span>
|
2016-11-02 20:54:04 -04:00
|
|
|
</li>
|
2016-11-07 16:43:11 -05:00
|
|
|
<li v-if='(n === upcount || n === endcount) && +pagenum + 5 !== last'>
|
2016-11-03 13:42:12 -04:00
|
|
|
<span class="gap">…</span>
|
2016-11-03 13:32:22 -04:00
|
|
|
</li>
|
2016-11-06 16:00:36 -05:00
|
|
|
<li
|
|
|
|
class="next"
|
|
|
|
v-if='(n === upcount || n === endcount) && pagenum !== last'
|
|
|
|
>
|
2016-11-07 16:16:57 -05:00
|
|
|
<span @click='changepage($event,{where: +pagenum+1})'>Next</span>
|
2016-11-02 20:54:04 -04:00
|
|
|
</li>
|
2016-11-06 16:00:36 -05:00
|
|
|
<li
|
|
|
|
class="last"
|
2016-11-07 16:16:57 -05:00
|
|
|
v-if='(n === upcount || n === endcount) && +pagenum !== last'
|
2016-11-06 16:00:36 -05:00
|
|
|
>
|
2016-11-06 15:35:29 -05:00
|
|
|
<span @click='changepage($event, {where: last})'>Last »</span>
|
2016-11-02 20:54:04 -04:00
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
`,
|
|
|
|
});
|
|
|
|
})(window.gl || (window.gl = {}));
|