@schukai/monster 4.137.4 → 4.137.6
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/package.json +1 -1
- package/source/components/datatable/pagination.mjs +206 -41
- package/source/components/form/button-bar.mjs +122 -26
- package/source/components/form/context-error.mjs +1 -1
- package/source/components/form/sheet.mjs +83 -7
- package/source/components/layout/slider.mjs +146 -47
- package/source/components/navigation/site-navigation.mjs +223 -63
- package/source/types/version.mjs +1 -1
- package/test/cases/components/datatable/pagination.mjs +11 -0
- package/test/cases/components/form/button-bar.mjs +89 -0
- package/test/cases/components/form/sheet.mjs +126 -0
- package/test/cases/components/layout/slider.mjs +165 -0
- package/test/cases/components/navigation/site-navigation.mjs +104 -0
- package/test/cases/monster.mjs +1 -1
- package/test/web/import.js +5 -0
- package/test/web/test.html +2 -2
- package/test/web/tests.js +13128 -5889
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
import * as chai from "chai";
|
|
2
|
+
import { initJSDOM } from "../../../util/jsdom.mjs";
|
|
3
|
+
import { ResizeObserverMock } from "../../../util/resize-observer.mjs";
|
|
4
|
+
|
|
5
|
+
const expect = chai.expect;
|
|
6
|
+
|
|
7
|
+
describe("Slider", function () {
|
|
8
|
+
let Slider;
|
|
9
|
+
|
|
10
|
+
before(function (done) {
|
|
11
|
+
initJSDOM()
|
|
12
|
+
.then(() => {
|
|
13
|
+
import("../../../../source/components/layout/slider.mjs")
|
|
14
|
+
.then((m) => {
|
|
15
|
+
Slider = m.Slider;
|
|
16
|
+
done();
|
|
17
|
+
})
|
|
18
|
+
.catch((e) => done(e));
|
|
19
|
+
})
|
|
20
|
+
.catch((e) => done(e));
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
afterEach(() => {
|
|
24
|
+
document.getElementById("mocks").innerHTML = "";
|
|
25
|
+
});
|
|
26
|
+
|
|
27
|
+
it("should register monster-slider", function () {
|
|
28
|
+
expect(document.createElement("monster-slider")).to.be.instanceof(Slider);
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
it("should coalesce resize updates and skip unchanged sizes", function () {
|
|
32
|
+
const OriginalResizeObserver = window.ResizeObserver;
|
|
33
|
+
const originalGlobalResizeObserver = globalThis.ResizeObserver;
|
|
34
|
+
const originalRequestAnimationFrame = window.requestAnimationFrame;
|
|
35
|
+
const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
|
|
36
|
+
|
|
37
|
+
class TrackingResizeObserver extends ResizeObserverMock {
|
|
38
|
+
static instances = [];
|
|
39
|
+
|
|
40
|
+
constructor(callback) {
|
|
41
|
+
super(callback);
|
|
42
|
+
TrackingResizeObserver.instances.push(this);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
const scheduledCallbacks = [];
|
|
47
|
+
|
|
48
|
+
try {
|
|
49
|
+
window.ResizeObserver = TrackingResizeObserver;
|
|
50
|
+
globalThis.ResizeObserver = TrackingResizeObserver;
|
|
51
|
+
window.requestAnimationFrame = (callback) => {
|
|
52
|
+
scheduledCallbacks.push(callback);
|
|
53
|
+
return scheduledCallbacks.length;
|
|
54
|
+
};
|
|
55
|
+
window.cancelAnimationFrame = () => {};
|
|
56
|
+
globalThis.requestAnimationFrame = window.requestAnimationFrame;
|
|
57
|
+
|
|
58
|
+
const mocks = document.getElementById("mocks");
|
|
59
|
+
const slider = document.createElement("monster-slider");
|
|
60
|
+
slider.setOption("features.autoPlay", false);
|
|
61
|
+
slider.setOption("features.thumbnails", false);
|
|
62
|
+
mocks.appendChild(slider);
|
|
63
|
+
|
|
64
|
+
const sliderElement = slider.shadowRoot.querySelector(
|
|
65
|
+
"[data-monster-role='slider']",
|
|
66
|
+
);
|
|
67
|
+
const resizeObserver = TrackingResizeObserver.instances.find((observer) =>
|
|
68
|
+
observer.elements.includes(sliderElement),
|
|
69
|
+
);
|
|
70
|
+
expect(resizeObserver).to.exist;
|
|
71
|
+
|
|
72
|
+
let resizeEvents = 0;
|
|
73
|
+
slider.addEventListener("monster-slider-resized", () => {
|
|
74
|
+
resizeEvents += 1;
|
|
75
|
+
});
|
|
76
|
+
|
|
77
|
+
resizeObserver.triggerResize([
|
|
78
|
+
{ contentRect: { width: 320, height: 120 } },
|
|
79
|
+
]);
|
|
80
|
+
resizeObserver.triggerResize([
|
|
81
|
+
{ contentRect: { width: 640, height: 120 } },
|
|
82
|
+
]);
|
|
83
|
+
|
|
84
|
+
expect(scheduledCallbacks).to.have.length(1);
|
|
85
|
+
scheduledCallbacks.shift()();
|
|
86
|
+
expect(resizeEvents).to.equal(1);
|
|
87
|
+
|
|
88
|
+
resizeObserver.triggerResize([
|
|
89
|
+
{ contentRect: { width: 640, height: 120 } },
|
|
90
|
+
]);
|
|
91
|
+
expect(scheduledCallbacks).to.have.length(0);
|
|
92
|
+
expect(resizeEvents).to.equal(1);
|
|
93
|
+
} finally {
|
|
94
|
+
window.ResizeObserver = OriginalResizeObserver;
|
|
95
|
+
globalThis.ResizeObserver = originalGlobalResizeObserver;
|
|
96
|
+
window.requestAnimationFrame = originalRequestAnimationFrame;
|
|
97
|
+
globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
|
|
98
|
+
}
|
|
99
|
+
});
|
|
100
|
+
|
|
101
|
+
it("should coalesce drag updates to the latest move per frame", function () {
|
|
102
|
+
const originalRequestAnimationFrame = window.requestAnimationFrame;
|
|
103
|
+
const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
|
|
104
|
+
|
|
105
|
+
const scheduledCallbacks = [];
|
|
106
|
+
|
|
107
|
+
try {
|
|
108
|
+
window.requestAnimationFrame = (callback) => {
|
|
109
|
+
scheduledCallbacks.push(callback);
|
|
110
|
+
return scheduledCallbacks.length;
|
|
111
|
+
};
|
|
112
|
+
window.cancelAnimationFrame = () => {};
|
|
113
|
+
globalThis.requestAnimationFrame = window.requestAnimationFrame;
|
|
114
|
+
|
|
115
|
+
const mocks = document.getElementById("mocks");
|
|
116
|
+
const slider = document.createElement("monster-slider");
|
|
117
|
+
slider.setOption("features.autoPlay", false);
|
|
118
|
+
mocks.appendChild(slider);
|
|
119
|
+
|
|
120
|
+
for (let i = 0; i < 3; i += 1) {
|
|
121
|
+
const slide = document.createElement("div");
|
|
122
|
+
Object.defineProperty(slide, "offsetWidth", {
|
|
123
|
+
configurable: true,
|
|
124
|
+
value: 100,
|
|
125
|
+
});
|
|
126
|
+
slide.textContent = `Slide ${i + 1}`;
|
|
127
|
+
slider.appendChild(slide);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
const sliderElement = slider.shadowRoot.querySelector(
|
|
131
|
+
"[data-monster-role='slider']",
|
|
132
|
+
);
|
|
133
|
+
Object.defineProperty(sliderElement, "offsetWidth", {
|
|
134
|
+
configurable: true,
|
|
135
|
+
value: 300,
|
|
136
|
+
});
|
|
137
|
+
slider.moveTo(0);
|
|
138
|
+
|
|
139
|
+
const createMouseEvent = (type, pageX) => {
|
|
140
|
+
const event = new window.MouseEvent(type, {
|
|
141
|
+
bubbles: true,
|
|
142
|
+
clientX: pageX,
|
|
143
|
+
});
|
|
144
|
+
Object.defineProperty(event, "pageX", {
|
|
145
|
+
configurable: true,
|
|
146
|
+
value: pageX,
|
|
147
|
+
});
|
|
148
|
+
return event;
|
|
149
|
+
};
|
|
150
|
+
|
|
151
|
+
sliderElement.dispatchEvent(createMouseEvent("mousedown", 10));
|
|
152
|
+
document.body.dispatchEvent(createMouseEvent("mousemove", 20));
|
|
153
|
+
document.body.dispatchEvent(createMouseEvent("mousemove", 55));
|
|
154
|
+
|
|
155
|
+
expect(scheduledCallbacks).to.have.length(1);
|
|
156
|
+
scheduledCallbacks.shift()();
|
|
157
|
+
expect(sliderElement.style.transform).to.contain("45px");
|
|
158
|
+
|
|
159
|
+
document.body.dispatchEvent(createMouseEvent("mouseup", 55));
|
|
160
|
+
} finally {
|
|
161
|
+
window.requestAnimationFrame = originalRequestAnimationFrame;
|
|
162
|
+
globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
|
|
163
|
+
}
|
|
164
|
+
});
|
|
165
|
+
});
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
import * as chai from "chai";
|
|
2
|
+
import { initJSDOM } from "../../../util/jsdom.mjs";
|
|
3
|
+
import { ResizeObserverMock } from "../../../util/resize-observer.mjs";
|
|
4
|
+
|
|
5
|
+
const expect = chai.expect;
|
|
6
|
+
|
|
7
|
+
describe("SiteNavigation", function () {
|
|
8
|
+
let SiteNavigation;
|
|
9
|
+
|
|
10
|
+
before(function (done) {
|
|
11
|
+
initJSDOM()
|
|
12
|
+
.then(() => {
|
|
13
|
+
import("../../../../source/components/navigation/site-navigation.mjs")
|
|
14
|
+
.then((m) => {
|
|
15
|
+
SiteNavigation = m.SiteNavigation;
|
|
16
|
+
done();
|
|
17
|
+
})
|
|
18
|
+
.catch((e) => done(e));
|
|
19
|
+
})
|
|
20
|
+
.catch((e) => done(e));
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
afterEach(() => {
|
|
24
|
+
document.getElementById("mocks").innerHTML = "";
|
|
25
|
+
});
|
|
26
|
+
|
|
27
|
+
it("should register monster-site-navigation", function () {
|
|
28
|
+
expect(document.createElement("monster-site-navigation")).to.be.instanceof(
|
|
29
|
+
SiteNavigation,
|
|
30
|
+
);
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
it("should coalesce resize layout updates", function (done) {
|
|
34
|
+
const OriginalResizeObserver = window.ResizeObserver;
|
|
35
|
+
const originalGlobalResizeObserver = globalThis.ResizeObserver;
|
|
36
|
+
const originalRequestAnimationFrame = window.requestAnimationFrame;
|
|
37
|
+
const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
|
|
38
|
+
|
|
39
|
+
class TrackingResizeObserver extends ResizeObserverMock {
|
|
40
|
+
static instances = [];
|
|
41
|
+
|
|
42
|
+
constructor(callback) {
|
|
43
|
+
super(callback);
|
|
44
|
+
TrackingResizeObserver.instances.push(this);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
const scheduledCallbacks = [];
|
|
49
|
+
|
|
50
|
+
try {
|
|
51
|
+
window.ResizeObserver = TrackingResizeObserver;
|
|
52
|
+
globalThis.ResizeObserver = TrackingResizeObserver;
|
|
53
|
+
window.requestAnimationFrame = (callback) => {
|
|
54
|
+
scheduledCallbacks.push(callback);
|
|
55
|
+
return scheduledCallbacks.length;
|
|
56
|
+
};
|
|
57
|
+
globalThis.requestAnimationFrame = window.requestAnimationFrame;
|
|
58
|
+
|
|
59
|
+
const mocks = document.getElementById("mocks");
|
|
60
|
+
mocks.innerHTML = `
|
|
61
|
+
<monster-site-navigation id="nav">
|
|
62
|
+
<ul>
|
|
63
|
+
<li><a href="#one">One</a></li>
|
|
64
|
+
<li><a href="#two">Two</a></li>
|
|
65
|
+
</ul>
|
|
66
|
+
</monster-site-navigation>
|
|
67
|
+
`;
|
|
68
|
+
|
|
69
|
+
const nav = document.getElementById("nav");
|
|
70
|
+
const resizeObserver = TrackingResizeObserver.instances.find((observer) =>
|
|
71
|
+
observer.elements.includes(nav),
|
|
72
|
+
);
|
|
73
|
+
expect(resizeObserver).to.exist;
|
|
74
|
+
|
|
75
|
+
while (scheduledCallbacks.length > 0) {
|
|
76
|
+
scheduledCallbacks.shift()();
|
|
77
|
+
}
|
|
78
|
+
resizeObserver.triggerResize([]);
|
|
79
|
+
resizeObserver.triggerResize([]);
|
|
80
|
+
|
|
81
|
+
setTimeout(() => {
|
|
82
|
+
try {
|
|
83
|
+
expect(scheduledCallbacks.length).to.equal(1);
|
|
84
|
+
scheduledCallbacks.shift()();
|
|
85
|
+
done();
|
|
86
|
+
} catch (e) {
|
|
87
|
+
done(e);
|
|
88
|
+
} finally {
|
|
89
|
+
window.ResizeObserver = OriginalResizeObserver;
|
|
90
|
+
globalThis.ResizeObserver = originalGlobalResizeObserver;
|
|
91
|
+
window.requestAnimationFrame = originalRequestAnimationFrame;
|
|
92
|
+
globalThis.requestAnimationFrame =
|
|
93
|
+
originalGlobalRequestAnimationFrame;
|
|
94
|
+
}
|
|
95
|
+
}, 260);
|
|
96
|
+
} catch (e) {
|
|
97
|
+
window.ResizeObserver = OriginalResizeObserver;
|
|
98
|
+
globalThis.ResizeObserver = originalGlobalResizeObserver;
|
|
99
|
+
window.requestAnimationFrame = originalRequestAnimationFrame;
|
|
100
|
+
globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
|
|
101
|
+
done(e);
|
|
102
|
+
}
|
|
103
|
+
});
|
|
104
|
+
});
|
package/test/cases/monster.mjs
CHANGED
package/test/web/import.js
CHANGED
|
@@ -3,6 +3,7 @@ import "./prepare.js";
|
|
|
3
3
|
import "../cases/components/layout/tabs.mjs";
|
|
4
4
|
import "../cases/components/layout/slit-panel.mjs";
|
|
5
5
|
import "../cases/components/layout/panel.mjs";
|
|
6
|
+
import "../cases/components/layout/slider.mjs";
|
|
6
7
|
import "../cases/components/content/viewer.mjs";
|
|
7
8
|
import "../cases/components/content/image-editor.mjs";
|
|
8
9
|
import "../cases/components/form/buy-box.mjs";
|
|
@@ -14,7 +15,9 @@ import "../cases/components/form/state-button.mjs";
|
|
|
14
15
|
import "../cases/components/form/select.mjs";
|
|
15
16
|
import "../cases/components/form/login.mjs";
|
|
16
17
|
import "../cases/components/form/confirm-button.mjs";
|
|
18
|
+
import "../cases/components/form/sheet.mjs";
|
|
17
19
|
import "../cases/components/form/context-error.mjs";
|
|
20
|
+
import "../cases/components/form/choice-cards.mjs";
|
|
18
21
|
import "../cases/components/form/form.mjs";
|
|
19
22
|
import "../cases/components/form/tree-select.mjs";
|
|
20
23
|
import "../cases/components/form/popper-button.mjs";
|
|
@@ -32,6 +35,8 @@ import "../cases/components/host/details.mjs";
|
|
|
32
35
|
import "../cases/components/datatable/drag-scroll.mjs";
|
|
33
36
|
import "../cases/components/datatable/writeback-sanitizer.mjs";
|
|
34
37
|
import "../cases/components/datatable/pagination.mjs";
|
|
38
|
+
import "../cases/components/navigation/table-of-content.mjs";
|
|
39
|
+
import "../cases/components/navigation/site-navigation.mjs";
|
|
35
40
|
import "../cases/text/formatter.mjs";
|
|
36
41
|
import "../cases/text/generate-range-comparison-expression.mjs";
|
|
37
42
|
import "../cases/text/util.mjs";
|
package/test/web/test.html
CHANGED
|
@@ -9,8 +9,8 @@
|
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
|
11
11
|
<div id="headline" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
|
|
12
|
-
<h1 style='margin-bottom: 0.1em;'>Monster 4.
|
|
13
|
-
<div id="lastupdate" style='font-size:0.7em'>last update
|
|
12
|
+
<h1 style='margin-bottom: 0.1em;'>Monster 4.137.5</h1>
|
|
13
|
+
<div id="lastupdate" style='font-size:0.7em'>last update Mon May 25 11:56:58 CEST 2026</div>
|
|
14
14
|
</div>
|
|
15
15
|
<div id="mocha-errors"
|
|
16
16
|
style="color: red;font-weight: bold;display: flex;align-items: center;justify-content: center;flex-direction: column;margin:20px;"></div>
|