@hpcc-js/other 3.5.4 → 3.5.5

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/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"] });