@hpcc-js/other 3.5.2 → 3.5.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +43 -43
- package/README.md +41 -41
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.umd.cjs +1 -1
- package/dist/index.umd.cjs.map +1 -1
- package/package.json +6 -6
- package/src/Audio.ts +86 -86
- package/src/AutoCompleteText.css +47 -47
- package/src/AutoCompleteText.ts +132 -132
- package/src/CalendarHeatMap.css +25 -25
- package/src/CalendarHeatMap.ts +250 -250
- package/src/Comms.ts +1083 -1083
- package/src/ESP.ts +451 -451
- package/src/HPCCBadge.ts +220 -220
- package/src/HeatMap.ts +150 -150
- package/src/Html.css +5 -5
- package/src/Html.ts +48 -48
- package/src/IconList.css +3 -3
- package/src/IconList.ts +86 -86
- package/src/Legend.css +104 -104
- package/src/Legend.ts +227 -227
- package/src/MorphText.css +10 -10
- package/src/MorphText.ts +109 -109
- package/src/NestedTable.ts +51 -51
- package/src/Opportunity.css +81 -81
- package/src/Opportunity.ts +500 -500
- package/src/Paginator.css +131 -131
- package/src/Paginator.ts +172 -172
- package/src/Persist.ts +151 -151
- package/src/PropertyEditor.css +179 -179
- package/src/PropertyEditor.ts +762 -762
- package/src/RadioCheckbox.css +5 -5
- package/src/RadioCheckbox.ts +130 -130
- package/src/Select.css +5 -5
- package/src/Select.ts +130 -130
- package/src/Table.css +106 -106
- package/src/Table.ts +1099 -1099
- package/src/ThemeEditor.css +230 -230
- package/src/ThemeEditor.ts +758 -758
- package/src/__package__.ts +3 -3
- package/src/index.ts +23 -23
package/src/Paginator.css
CHANGED
|
@@ -1,132 +1,132 @@
|
|
|
1
|
-
.other_Paginator {
|
|
2
|
-
display: block;
|
|
3
|
-
position: absolute;
|
|
4
|
-
white-space: nowrap;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
.other_Paginator .pagination {
|
|
8
|
-
display: inline-block;
|
|
9
|
-
white-space: nowrap;
|
|
10
|
-
margin: 0px;
|
|
11
|
-
padding: 0px;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.other_Paginator .pagination>li {
|
|
15
|
-
display: inline;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.other_Paginator input[type="number"].currentPageNumber {
|
|
19
|
-
border: 1px solid #ddd;
|
|
20
|
-
outline: 0 none;
|
|
21
|
-
position: relative;
|
|
22
|
-
width: 37px;
|
|
23
|
-
text-align: center;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.other_Paginator div.side {
|
|
27
|
-
padding-top: 5px;
|
|
28
|
-
padding-left: 8px;
|
|
29
|
-
vertical-align: top;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.other_Paginator span.side {
|
|
33
|
-
position: relative;
|
|
34
|
-
color: #337ab7;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.other_Paginator .pagination>li>a,
|
|
38
|
-
.other_Paginator .pagination>div,
|
|
39
|
-
.other_Paginator .pagination>li>span {
|
|
40
|
-
position: relative;
|
|
41
|
-
float: left;
|
|
42
|
-
padding: 6px 12px;
|
|
43
|
-
margin-left: -1px;
|
|
44
|
-
line-height: 1.42857143;
|
|
45
|
-
color: #337ab7;
|
|
46
|
-
text-decoration: none;
|
|
47
|
-
background-color: #fff;
|
|
48
|
-
border: 1px solid #ddd;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
.other_Paginator .pagination>li:first-child>a,
|
|
52
|
-
.other_Paginator .pagination>li:first-child>span {
|
|
53
|
-
margin-left: 0;
|
|
54
|
-
border-top-left-radius: 4px;
|
|
55
|
-
border-bottom-left-radius: 4px;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
.other_Paginator .pagination>li:last-child>a,
|
|
59
|
-
.other_Paginator .pagination>li:last-child>span {
|
|
60
|
-
border-top-right-radius: 4px;
|
|
61
|
-
border-bottom-right-radius: 4px;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
.other_Paginator .pagination>li>a:hover,
|
|
65
|
-
.other_Paginator .pagination>li>span:hover,
|
|
66
|
-
.other_Paginator .pagination>li>a:focus,
|
|
67
|
-
.other_Paginator .pagination>li>span:focus {
|
|
68
|
-
color: #23527c;
|
|
69
|
-
background-color: #eee;
|
|
70
|
-
border-color: #ddd;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
.other_Paginator .pagination>.active>a,
|
|
74
|
-
.other_Paginator .pagination>.active>span,
|
|
75
|
-
.other_Paginator .pagination>.active>a:hover,
|
|
76
|
-
.other_Paginator .pagination>.active>span:hover,
|
|
77
|
-
.other_Paginator .pagination>.active>a:focus,
|
|
78
|
-
.other_Paginator .pagination>.active>span:focus {
|
|
79
|
-
z-index: 2;
|
|
80
|
-
color: #fff;
|
|
81
|
-
cursor: default;
|
|
82
|
-
background-color: #337ab7;
|
|
83
|
-
border-color: #337ab7;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
.other_Paginator .pagination>.disabled>span,
|
|
87
|
-
.other_Paginator .pagination>.disabled>span:hover,
|
|
88
|
-
.other_Paginator .pagination>.disabled>span:focus,
|
|
89
|
-
.other_Paginator .pagination>.disabled>a,
|
|
90
|
-
.other_Paginator .pagination>.disabled>a:hover,
|
|
91
|
-
.other_Paginator .pagination>.disabled>a:focus {
|
|
92
|
-
color: #777;
|
|
93
|
-
cursor: not-allowed;
|
|
94
|
-
background-color: #fff;
|
|
95
|
-
border-color: #ddd;
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
.other_Paginator .pagination-lg>li>a,
|
|
99
|
-
.other_Paginator .pagination-lg>li>span {
|
|
100
|
-
padding: 10px 16px;
|
|
101
|
-
font-size: 18px;
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
.other_Paginator .pagination-lg>li:first-child>a,
|
|
105
|
-
.other_Paginator .pagination-lg>li:first-child>span {
|
|
106
|
-
border-top-left-radius: 6px;
|
|
107
|
-
border-bottom-left-radius: 6px;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
.other_Paginator .pagination-lg>li:last-child>a,
|
|
111
|
-
.other_Paginator .pagination-lg>li:last-child>span {
|
|
112
|
-
border-top-right-radius: 6px;
|
|
113
|
-
border-bottom-right-radius: 6px;
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
.other_Paginator .pagination-sm>li>a,
|
|
117
|
-
.other_Paginator .pagination-sm>li>span {
|
|
118
|
-
padding: 5px 10px;
|
|
119
|
-
font-size: 12px;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
.other_Paginator .pagination-sm>li:first-child>a,
|
|
123
|
-
.other_Paginator .pagination-sm>li:first-child>span {
|
|
124
|
-
border-top-left-radius: 3px;
|
|
125
|
-
border-bottom-left-radius: 3px;
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
.other_Paginator .pagination-sm>li:last-child>a,
|
|
129
|
-
.other_Paginator .pagination-sm>li:last-child>span {
|
|
130
|
-
border-top-right-radius: 3px;
|
|
131
|
-
border-bottom-right-radius: 3px;
|
|
1
|
+
.other_Paginator {
|
|
2
|
+
display: block;
|
|
3
|
+
position: absolute;
|
|
4
|
+
white-space: nowrap;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.other_Paginator .pagination {
|
|
8
|
+
display: inline-block;
|
|
9
|
+
white-space: nowrap;
|
|
10
|
+
margin: 0px;
|
|
11
|
+
padding: 0px;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.other_Paginator .pagination>li {
|
|
15
|
+
display: inline;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.other_Paginator input[type="number"].currentPageNumber {
|
|
19
|
+
border: 1px solid #ddd;
|
|
20
|
+
outline: 0 none;
|
|
21
|
+
position: relative;
|
|
22
|
+
width: 37px;
|
|
23
|
+
text-align: center;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.other_Paginator div.side {
|
|
27
|
+
padding-top: 5px;
|
|
28
|
+
padding-left: 8px;
|
|
29
|
+
vertical-align: top;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.other_Paginator span.side {
|
|
33
|
+
position: relative;
|
|
34
|
+
color: #337ab7;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.other_Paginator .pagination>li>a,
|
|
38
|
+
.other_Paginator .pagination>div,
|
|
39
|
+
.other_Paginator .pagination>li>span {
|
|
40
|
+
position: relative;
|
|
41
|
+
float: left;
|
|
42
|
+
padding: 6px 12px;
|
|
43
|
+
margin-left: -1px;
|
|
44
|
+
line-height: 1.42857143;
|
|
45
|
+
color: #337ab7;
|
|
46
|
+
text-decoration: none;
|
|
47
|
+
background-color: #fff;
|
|
48
|
+
border: 1px solid #ddd;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.other_Paginator .pagination>li:first-child>a,
|
|
52
|
+
.other_Paginator .pagination>li:first-child>span {
|
|
53
|
+
margin-left: 0;
|
|
54
|
+
border-top-left-radius: 4px;
|
|
55
|
+
border-bottom-left-radius: 4px;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.other_Paginator .pagination>li:last-child>a,
|
|
59
|
+
.other_Paginator .pagination>li:last-child>span {
|
|
60
|
+
border-top-right-radius: 4px;
|
|
61
|
+
border-bottom-right-radius: 4px;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.other_Paginator .pagination>li>a:hover,
|
|
65
|
+
.other_Paginator .pagination>li>span:hover,
|
|
66
|
+
.other_Paginator .pagination>li>a:focus,
|
|
67
|
+
.other_Paginator .pagination>li>span:focus {
|
|
68
|
+
color: #23527c;
|
|
69
|
+
background-color: #eee;
|
|
70
|
+
border-color: #ddd;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.other_Paginator .pagination>.active>a,
|
|
74
|
+
.other_Paginator .pagination>.active>span,
|
|
75
|
+
.other_Paginator .pagination>.active>a:hover,
|
|
76
|
+
.other_Paginator .pagination>.active>span:hover,
|
|
77
|
+
.other_Paginator .pagination>.active>a:focus,
|
|
78
|
+
.other_Paginator .pagination>.active>span:focus {
|
|
79
|
+
z-index: 2;
|
|
80
|
+
color: #fff;
|
|
81
|
+
cursor: default;
|
|
82
|
+
background-color: #337ab7;
|
|
83
|
+
border-color: #337ab7;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.other_Paginator .pagination>.disabled>span,
|
|
87
|
+
.other_Paginator .pagination>.disabled>span:hover,
|
|
88
|
+
.other_Paginator .pagination>.disabled>span:focus,
|
|
89
|
+
.other_Paginator .pagination>.disabled>a,
|
|
90
|
+
.other_Paginator .pagination>.disabled>a:hover,
|
|
91
|
+
.other_Paginator .pagination>.disabled>a:focus {
|
|
92
|
+
color: #777;
|
|
93
|
+
cursor: not-allowed;
|
|
94
|
+
background-color: #fff;
|
|
95
|
+
border-color: #ddd;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.other_Paginator .pagination-lg>li>a,
|
|
99
|
+
.other_Paginator .pagination-lg>li>span {
|
|
100
|
+
padding: 10px 16px;
|
|
101
|
+
font-size: 18px;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.other_Paginator .pagination-lg>li:first-child>a,
|
|
105
|
+
.other_Paginator .pagination-lg>li:first-child>span {
|
|
106
|
+
border-top-left-radius: 6px;
|
|
107
|
+
border-bottom-left-radius: 6px;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.other_Paginator .pagination-lg>li:last-child>a,
|
|
111
|
+
.other_Paginator .pagination-lg>li:last-child>span {
|
|
112
|
+
border-top-right-radius: 6px;
|
|
113
|
+
border-bottom-right-radius: 6px;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.other_Paginator .pagination-sm>li>a,
|
|
117
|
+
.other_Paginator .pagination-sm>li>span {
|
|
118
|
+
padding: 5px 10px;
|
|
119
|
+
font-size: 12px;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.other_Paginator .pagination-sm>li:first-child>a,
|
|
123
|
+
.other_Paginator .pagination-sm>li:first-child>span {
|
|
124
|
+
border-top-left-radius: 3px;
|
|
125
|
+
border-bottom-left-radius: 3px;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.other_Paginator .pagination-sm>li:last-child>a,
|
|
129
|
+
.other_Paginator .pagination-sm>li:last-child>span {
|
|
130
|
+
border-top-right-radius: 3px;
|
|
131
|
+
border-bottom-right-radius: 3px;
|
|
132
132
|
}
|
package/src/Paginator.ts
CHANGED
|
@@ -1,172 +1,172 @@
|
|
|
1
|
-
import { d3Event, HTMLWidget, select as d3Select } from "@hpcc-js/common";
|
|
2
|
-
|
|
3
|
-
import "../src/Paginator.css";
|
|
4
|
-
|
|
5
|
-
export class Paginator extends HTMLWidget {
|
|
6
|
-
_tNumPages;
|
|
7
|
-
_numList;
|
|
8
|
-
paginator;
|
|
9
|
-
side;
|
|
10
|
-
_onSelect;
|
|
11
|
-
|
|
12
|
-
constructor() {
|
|
13
|
-
super();
|
|
14
|
-
|
|
15
|
-
this._tag = "div";
|
|
16
|
-
|
|
17
|
-
this._tNumPages = 1; // np
|
|
18
|
-
|
|
19
|
-
this._numList = []; // pn
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
postUpdate(domNode, element) { }
|
|
23
|
-
|
|
24
|
-
enter(domNode, element) {
|
|
25
|
-
super.enter(domNode, element);
|
|
26
|
-
const context = this;
|
|
27
|
-
|
|
28
|
-
this.paginator = element.append("ul").attr("class", "paginator pagination pagination-sm");
|
|
29
|
-
this.side = element.append("div").attr("class", "paginator pagination side");
|
|
30
|
-
|
|
31
|
-
this.side.append("span")
|
|
32
|
-
.classed("side", true)
|
|
33
|
-
.text("Page ")
|
|
34
|
-
;
|
|
35
|
-
|
|
36
|
-
this.side.append("input")
|
|
37
|
-
.attr("type", "number")
|
|
38
|
-
.attr("class", "currentPageNumber")
|
|
39
|
-
.property("value", 1)
|
|
40
|
-
.attr("min", 1)
|
|
41
|
-
.on("change", function () {
|
|
42
|
-
context.pageNumber(this.value);
|
|
43
|
-
context._onSelect(this.value);
|
|
44
|
-
})
|
|
45
|
-
;
|
|
46
|
-
|
|
47
|
-
this.side.append("span")
|
|
48
|
-
.classed("side total", true)
|
|
49
|
-
.text(" of 1")
|
|
50
|
-
;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
update(domNode, element) {
|
|
54
|
-
const context = this;
|
|
55
|
-
element
|
|
56
|
-
.style("bottom", this.bottom() + "px")
|
|
57
|
-
.style("right", this.right() + "px")
|
|
58
|
-
;
|
|
59
|
-
|
|
60
|
-
this._tNumPages = Math.ceil(this.numItems() / this.itemsPerPage()) || 1;
|
|
61
|
-
|
|
62
|
-
if (this.pageNumber() > this._tNumPages) { this.pageNumber(1); }
|
|
63
|
-
|
|
64
|
-
this._numList = [];
|
|
65
|
-
if (this.numItems()) {
|
|
66
|
-
this._numList.push("first");
|
|
67
|
-
for (let x = -this.adjacentPages(); x <= this.adjacentPages(); x++) {
|
|
68
|
-
if (this.pageNumber() + x > 0 && this.pageNumber() + x <= this._tNumPages) {
|
|
69
|
-
this._numList.push(this.pageNumber() + x);
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
this._numList.push("last");
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
this.side.select(".total").text(" of " + this._tNumPages);
|
|
76
|
-
this.side.select(".currentPageNumber").property("value", this.pageNumber());
|
|
77
|
-
this.side.select(".currentPageNumber").attr("max", this._tNumPages);
|
|
78
|
-
|
|
79
|
-
const page = this.paginator.selectAll("li").data(this._numList, function (d) { return d; });
|
|
80
|
-
page
|
|
81
|
-
.enter()
|
|
82
|
-
.append(function (d) {
|
|
83
|
-
const li = document.createElement("li");
|
|
84
|
-
|
|
85
|
-
if (d !== context.pageNumber()) {
|
|
86
|
-
const a = document.createElement("a");
|
|
87
|
-
const linkText = document.createTextNode(d);
|
|
88
|
-
|
|
89
|
-
a.appendChild(linkText);
|
|
90
|
-
a.href = "#";
|
|
91
|
-
li.appendChild(a);
|
|
92
|
-
|
|
93
|
-
return li;
|
|
94
|
-
} else {
|
|
95
|
-
const span = document.createElement("span");
|
|
96
|
-
span.innerHTML = d;
|
|
97
|
-
|
|
98
|
-
li.appendChild(span);
|
|
99
|
-
|
|
100
|
-
return li;
|
|
101
|
-
}
|
|
102
|
-
})
|
|
103
|
-
.on("click", function (d, i) {
|
|
104
|
-
d3Event().preventDefault();
|
|
105
|
-
context.side.select(".currentPageNumber").property("value", context.pageNumber());
|
|
106
|
-
switch (d) {
|
|
107
|
-
case "first":
|
|
108
|
-
if (context.pageNumber() !== 1) {
|
|
109
|
-
context.pageNumber(1);
|
|
110
|
-
context._onSelect(1, "previous");
|
|
111
|
-
}
|
|
112
|
-
break;
|
|
113
|
-
case "last":
|
|
114
|
-
if (context.pageNumber() !== context._tNumPages) {
|
|
115
|
-
context.pageNumber(context._tNumPages);
|
|
116
|
-
context._onSelect(context._tNumPages, "previous");
|
|
117
|
-
}
|
|
118
|
-
break;
|
|
119
|
-
default:
|
|
120
|
-
context.pageNumber(d);
|
|
121
|
-
context._onSelect(d);
|
|
122
|
-
}
|
|
123
|
-
})
|
|
124
|
-
;
|
|
125
|
-
|
|
126
|
-
page.classed("active", function (e, j) { return e === context.pageNumber(); })
|
|
127
|
-
.select("a")
|
|
128
|
-
.text(function (d) { return d; })
|
|
129
|
-
;
|
|
130
|
-
|
|
131
|
-
page.exit().remove();
|
|
132
|
-
page.order();
|
|
133
|
-
|
|
134
|
-
if (this.numItems() === 0) {
|
|
135
|
-
d3Select(domNode).remove();
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
exit(domNode, element) {
|
|
140
|
-
super.exit(domNode, element);
|
|
141
|
-
}
|
|
142
|
-
}
|
|
143
|
-
Paginator.prototype._class += " other_Paginator";
|
|
144
|
-
|
|
145
|
-
export interface Paginator {
|
|
146
|
-
itemsPerPage(): number;
|
|
147
|
-
itemsPerPage(_: number): this;
|
|
148
|
-
itemsPerPage_exists(): boolean;
|
|
149
|
-
numItems(): number;
|
|
150
|
-
numItems(_: number): this;
|
|
151
|
-
numItems_exists(): boolean;
|
|
152
|
-
pageNumber(): number;
|
|
153
|
-
pageNumber(_: number): this;
|
|
154
|
-
pageNumber_exists(): boolean;
|
|
155
|
-
adjacentPages(): number;
|
|
156
|
-
adjacentPages(_: number): this;
|
|
157
|
-
adjacentPages_exists(): boolean
|
|
158
|
-
bottom(): number;
|
|
159
|
-
bottom(_: number): this;
|
|
160
|
-
bottom_exists(): boolean;
|
|
161
|
-
right(): number;
|
|
162
|
-
right(_: number): this;
|
|
163
|
-
right_exists(): boolean;
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
Paginator.prototype.publish("itemsPerPage", 2, "number", "Pagination items per page", null, { tags: ["Private"] });
|
|
167
|
-
|
|
168
|
-
Paginator.prototype.publish("numItems", 10, "number", "Pagination total number of items", null, { tags: ["Private"] });
|
|
169
|
-
Paginator.prototype.publish("pageNumber", 1, "number", "Pagination set or get the page number", null, { tags: ["Private"] });
|
|
170
|
-
Paginator.prototype.publish("adjacentPages", 2, "number", "Number of page indexes either side of current one", null, { tags: ["Private"] });
|
|
171
|
-
Paginator.prototype.publish("bottom", 20, "number", "Pagination bottom offset", null, { tags: ["Private"] });
|
|
172
|
-
Paginator.prototype.publish("right", 20, "number", "Pagination right offset", null, { tags: ["Private"] });
|
|
1
|
+
import { d3Event, HTMLWidget, select as d3Select } from "@hpcc-js/common";
|
|
2
|
+
|
|
3
|
+
import "../src/Paginator.css";
|
|
4
|
+
|
|
5
|
+
export class Paginator extends HTMLWidget {
|
|
6
|
+
_tNumPages;
|
|
7
|
+
_numList;
|
|
8
|
+
paginator;
|
|
9
|
+
side;
|
|
10
|
+
_onSelect;
|
|
11
|
+
|
|
12
|
+
constructor() {
|
|
13
|
+
super();
|
|
14
|
+
|
|
15
|
+
this._tag = "div";
|
|
16
|
+
|
|
17
|
+
this._tNumPages = 1; // np
|
|
18
|
+
|
|
19
|
+
this._numList = []; // pn
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
postUpdate(domNode, element) { }
|
|
23
|
+
|
|
24
|
+
enter(domNode, element) {
|
|
25
|
+
super.enter(domNode, element);
|
|
26
|
+
const context = this;
|
|
27
|
+
|
|
28
|
+
this.paginator = element.append("ul").attr("class", "paginator pagination pagination-sm");
|
|
29
|
+
this.side = element.append("div").attr("class", "paginator pagination side");
|
|
30
|
+
|
|
31
|
+
this.side.append("span")
|
|
32
|
+
.classed("side", true)
|
|
33
|
+
.text("Page ")
|
|
34
|
+
;
|
|
35
|
+
|
|
36
|
+
this.side.append("input")
|
|
37
|
+
.attr("type", "number")
|
|
38
|
+
.attr("class", "currentPageNumber")
|
|
39
|
+
.property("value", 1)
|
|
40
|
+
.attr("min", 1)
|
|
41
|
+
.on("change", function () {
|
|
42
|
+
context.pageNumber(this.value);
|
|
43
|
+
context._onSelect(this.value);
|
|
44
|
+
})
|
|
45
|
+
;
|
|
46
|
+
|
|
47
|
+
this.side.append("span")
|
|
48
|
+
.classed("side total", true)
|
|
49
|
+
.text(" of 1")
|
|
50
|
+
;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
update(domNode, element) {
|
|
54
|
+
const context = this;
|
|
55
|
+
element
|
|
56
|
+
.style("bottom", this.bottom() + "px")
|
|
57
|
+
.style("right", this.right() + "px")
|
|
58
|
+
;
|
|
59
|
+
|
|
60
|
+
this._tNumPages = Math.ceil(this.numItems() / this.itemsPerPage()) || 1;
|
|
61
|
+
|
|
62
|
+
if (this.pageNumber() > this._tNumPages) { this.pageNumber(1); }
|
|
63
|
+
|
|
64
|
+
this._numList = [];
|
|
65
|
+
if (this.numItems()) {
|
|
66
|
+
this._numList.push("first");
|
|
67
|
+
for (let x = -this.adjacentPages(); x <= this.adjacentPages(); x++) {
|
|
68
|
+
if (this.pageNumber() + x > 0 && this.pageNumber() + x <= this._tNumPages) {
|
|
69
|
+
this._numList.push(this.pageNumber() + x);
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
this._numList.push("last");
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
this.side.select(".total").text(" of " + this._tNumPages);
|
|
76
|
+
this.side.select(".currentPageNumber").property("value", this.pageNumber());
|
|
77
|
+
this.side.select(".currentPageNumber").attr("max", this._tNumPages);
|
|
78
|
+
|
|
79
|
+
const page = this.paginator.selectAll("li").data(this._numList, function (d) { return d; });
|
|
80
|
+
page
|
|
81
|
+
.enter()
|
|
82
|
+
.append(function (d) {
|
|
83
|
+
const li = document.createElement("li");
|
|
84
|
+
|
|
85
|
+
if (d !== context.pageNumber()) {
|
|
86
|
+
const a = document.createElement("a");
|
|
87
|
+
const linkText = document.createTextNode(d);
|
|
88
|
+
|
|
89
|
+
a.appendChild(linkText);
|
|
90
|
+
a.href = "#";
|
|
91
|
+
li.appendChild(a);
|
|
92
|
+
|
|
93
|
+
return li;
|
|
94
|
+
} else {
|
|
95
|
+
const span = document.createElement("span");
|
|
96
|
+
span.innerHTML = d;
|
|
97
|
+
|
|
98
|
+
li.appendChild(span);
|
|
99
|
+
|
|
100
|
+
return li;
|
|
101
|
+
}
|
|
102
|
+
})
|
|
103
|
+
.on("click", function (d, i) {
|
|
104
|
+
d3Event().preventDefault();
|
|
105
|
+
context.side.select(".currentPageNumber").property("value", context.pageNumber());
|
|
106
|
+
switch (d) {
|
|
107
|
+
case "first":
|
|
108
|
+
if (context.pageNumber() !== 1) {
|
|
109
|
+
context.pageNumber(1);
|
|
110
|
+
context._onSelect(1, "previous");
|
|
111
|
+
}
|
|
112
|
+
break;
|
|
113
|
+
case "last":
|
|
114
|
+
if (context.pageNumber() !== context._tNumPages) {
|
|
115
|
+
context.pageNumber(context._tNumPages);
|
|
116
|
+
context._onSelect(context._tNumPages, "previous");
|
|
117
|
+
}
|
|
118
|
+
break;
|
|
119
|
+
default:
|
|
120
|
+
context.pageNumber(d);
|
|
121
|
+
context._onSelect(d);
|
|
122
|
+
}
|
|
123
|
+
})
|
|
124
|
+
;
|
|
125
|
+
|
|
126
|
+
page.classed("active", function (e, j) { return e === context.pageNumber(); })
|
|
127
|
+
.select("a")
|
|
128
|
+
.text(function (d) { return d; })
|
|
129
|
+
;
|
|
130
|
+
|
|
131
|
+
page.exit().remove();
|
|
132
|
+
page.order();
|
|
133
|
+
|
|
134
|
+
if (this.numItems() === 0) {
|
|
135
|
+
d3Select(domNode).remove();
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
exit(domNode, element) {
|
|
140
|
+
super.exit(domNode, element);
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
Paginator.prototype._class += " other_Paginator";
|
|
144
|
+
|
|
145
|
+
export interface Paginator {
|
|
146
|
+
itemsPerPage(): number;
|
|
147
|
+
itemsPerPage(_: number): this;
|
|
148
|
+
itemsPerPage_exists(): boolean;
|
|
149
|
+
numItems(): number;
|
|
150
|
+
numItems(_: number): this;
|
|
151
|
+
numItems_exists(): boolean;
|
|
152
|
+
pageNumber(): number;
|
|
153
|
+
pageNumber(_: number): this;
|
|
154
|
+
pageNumber_exists(): boolean;
|
|
155
|
+
adjacentPages(): number;
|
|
156
|
+
adjacentPages(_: number): this;
|
|
157
|
+
adjacentPages_exists(): boolean
|
|
158
|
+
bottom(): number;
|
|
159
|
+
bottom(_: number): this;
|
|
160
|
+
bottom_exists(): boolean;
|
|
161
|
+
right(): number;
|
|
162
|
+
right(_: number): this;
|
|
163
|
+
right_exists(): boolean;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
Paginator.prototype.publish("itemsPerPage", 2, "number", "Pagination items per page", null, { tags: ["Private"] });
|
|
167
|
+
|
|
168
|
+
Paginator.prototype.publish("numItems", 10, "number", "Pagination total number of items", null, { tags: ["Private"] });
|
|
169
|
+
Paginator.prototype.publish("pageNumber", 1, "number", "Pagination set or get the page number", null, { tags: ["Private"] });
|
|
170
|
+
Paginator.prototype.publish("adjacentPages", 2, "number", "Number of page indexes either side of current one", null, { tags: ["Private"] });
|
|
171
|
+
Paginator.prototype.publish("bottom", 20, "number", "Pagination bottom offset", null, { tags: ["Private"] });
|
|
172
|
+
Paginator.prototype.publish("right", 20, "number", "Pagination right offset", null, { tags: ["Private"] });
|