/
index.js
77 lines (66 loc) · 2.57 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
$(document).ready(function () {
'use strict';
var AcmePages = {
controller: function (props) {
var pager = new window.pageSlicer.PageSlicer(typeof props.itemsOnPage === 'undefined' ? {} : {
itemsOnPage: props.itemsOnPage,
}, props.items);
var zoomer = new window.pageSlicer.ItemZoomer({}, window.pageSlicer.Range(pager.count()));
window.zoomer = zoomer;
function handleInput(ev) {
var value = ev.target.value;
if (!pager.isValid(value)) {
return;
}
pager.go(Number(value));
}
return {
handleInput: handleInput,
pager: pager,
zoomer: zoomer,
};
},
view: function (ctrl, props) {
var pager = ctrl.pager;
var count = pager.count();
var state = pager.state;
var btn = 'button.acme-btn.acme-btn--pages-';
var formControl = 'input.acme-form-control.acme-form-control--pages.acme-form-control--pages-';
return (
m('.acme-pages', [
m('p', 'count: ' + count),
m('p', 'slice: ' + pager.slice()),
m('p', [
m(btn + 'first', { disabled: state === -count, onclick: pager.goFirst }, 'goFirst'),
m(btn + 'prev', { disabled: state === 0 || state === -count, onclick: pager.goPrev }, 'goPrev'),
m(formControl + 'state', { max: count - 1, min: -count, oninput: ctrl.handleInput, type: 'number', value: state }),
m(btn + 'next', { disabled: state === -1 || state === count - 1, onclick: pager.goNext }, 'goNext'),
m(btn + 'last', { disabled: state === count - 1, onclick: pager.goLast }, 'goLast'),
]),
m('p', [
m(btn + 'minus-one', { disabled: state === -1, onclick: pager.goMinusOne }, 'goMinusOne'),
m(btn + 'zero', { disabled: state === 0, onclick: pager.goZero }, 'goZero'),
]),
m('p', [
ctrl.zoomer.zoom(state >= 0 ? state : count + state).map(function (x) {
if (x === null) return m(btn + 'spacer', '...');
if (state < 0) x -= count;
return m(btn + x, { disabled: state === x, onclick: pager.go.bind(null, x) }, x);
}),
]),
])
);
},
};
var array = 'abcdefghijklmnopqrstuvwxyz'.split('');
var dataSource = window.pageSlicer.Range(1024 * 1024 * 1024 * 1024);
m.mount(document.getElementById('app'), {
view: function () {
return m('div', [
m(AcmePages, { items: array, itemsOnPage: 5 }),
m('hr'),
m(AcmePages, { items: dataSource }),
]);
},
});
});