@simplysm/core-browser 14.0.96 → 14.0.97
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/dist/extensions/element-ext.d.ts.map +1 -1
- package/dist/extensions/element-ext.js +53 -50
- package/dist/extensions/element-ext.js.map +1 -1
- package/dist/extensions/html-element-ext.js +51 -48
- package/dist/extensions/html-element-ext.js.map +1 -1
- package/package.json +2 -2
- package/src/extensions/element-ext.ts +60 -55
- package/src/extensions/html-element-ext.ts +61 -58
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"element-ext.d.ts","sourceRoot":"","sources":["../../src/extensions/element-ext.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,eAAe;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,mBAAmB;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,mBAAmB;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,YAAY;IACZ,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,OAAO;QACf;;;;;WAKG;QACH,OAAO,CAAC,GAAG,SAAS,OAAO,GAAG,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,GAAG,EAAE,CAAC;QAEhE;;;;;WAKG;QACH,SAAS,CAAC,GAAG,SAAS,OAAO,GAAG,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,GAAG,GAAG,SAAS,CAAC;QAE5E;;;;;WAKG;QACH,YAAY,CAAC,GAAG,SAAS,OAAO,EAAE,KAAK,EAAE,GAAG,GAAG,GAAG,CAAC;QAEnD;;;;WAIG;QACH,UAAU,IAAI,OAAO,EAAE,CAAC;QAExB;;;;WAIG;QACH,kBAAkB,IAAI,WAAW,GAAG,SAAS,CAAC;QAE9C;;;;WAIG;QACH,sBAAsB,IAAI,WAAW,GAAG,SAAS,CAAC;QAElD;;;;WAIG;QACH,eAAe,IAAI,OAAO,CAAC;QAE3B;;;;;;;WAOG;QACH,SAAS,IAAI,OAAO,CAAC;KACtB;CACF;
|
|
1
|
+
{"version":3,"file":"element-ext.d.ts","sourceRoot":"","sources":["../../src/extensions/element-ext.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,eAAe;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,mBAAmB;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,mBAAmB;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,YAAY;IACZ,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,OAAO;QACf;;;;;WAKG;QACH,OAAO,CAAC,GAAG,SAAS,OAAO,GAAG,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,GAAG,EAAE,CAAC;QAEhE;;;;;WAKG;QACH,SAAS,CAAC,GAAG,SAAS,OAAO,GAAG,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,GAAG,GAAG,SAAS,CAAC;QAE5E;;;;;WAKG;QACH,YAAY,CAAC,GAAG,SAAS,OAAO,EAAE,KAAK,EAAE,GAAG,GAAG,GAAG,CAAC;QAEnD;;;;WAIG;QACH,UAAU,IAAI,OAAO,EAAE,CAAC;QAExB;;;;WAIG;QACH,kBAAkB,IAAI,WAAW,GAAG,SAAS,CAAC;QAE9C;;;;WAIG;QACH,sBAAsB,IAAI,WAAW,GAAG,SAAS,CAAC;QAElD;;;;WAIG;QACH,eAAe,IAAI,OAAO,CAAC;QAE3B;;;;;;;WAOG;QACH,SAAS,IAAI,OAAO,CAAC;KACtB;CACF;AAuED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI,CAYvD;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI,CAa1D;AAED;;;;;;GAMG;AACH,wBAAsB,SAAS,CAAC,GAAG,EAAE,OAAO,EAAE,EAAE,OAAO,GAAE,MAAa,GAAG,OAAO,CAAC,aAAa,EAAE,CAAC,CAoDhG"}
|
|
@@ -1,57 +1,60 @@
|
|
|
1
1
|
import { isTabbable } from "tabbable";
|
|
2
2
|
import { TimeoutError } from "@simplysm/core-common";
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
cursor
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
};
|
|
27
|
-
Element.prototype.findTabbableParent = function () {
|
|
28
|
-
let parentEl = this.parentElement;
|
|
29
|
-
while (parentEl != null) {
|
|
30
|
-
if (isTabbable(parentEl)) {
|
|
31
|
-
return parentEl;
|
|
3
|
+
// SSR(프리렌더) 가드: 서버(node)에는 Element 전역이 없음 — 브라우저에서만 prototype 확장
|
|
4
|
+
if (typeof Element !== "undefined") {
|
|
5
|
+
Element.prototype.findAll = function (selector) {
|
|
6
|
+
const trimmed = selector.trim();
|
|
7
|
+
if (trimmed === "")
|
|
8
|
+
return [];
|
|
9
|
+
return Array.from(this.querySelectorAll(trimmed));
|
|
10
|
+
};
|
|
11
|
+
Element.prototype.findFirst = function (selector) {
|
|
12
|
+
const trimmed = selector.trim();
|
|
13
|
+
if (trimmed === "")
|
|
14
|
+
return undefined;
|
|
15
|
+
return this.querySelector(trimmed) ?? undefined;
|
|
16
|
+
};
|
|
17
|
+
Element.prototype.prependChild = function (child) {
|
|
18
|
+
return this.insertBefore(child, this.firstElementChild);
|
|
19
|
+
};
|
|
20
|
+
Element.prototype.getParents = function () {
|
|
21
|
+
const result = [];
|
|
22
|
+
let cursor = this.parentNode;
|
|
23
|
+
while (cursor != null && cursor instanceof Element) {
|
|
24
|
+
result.push(cursor);
|
|
25
|
+
cursor = cursor.parentNode;
|
|
32
26
|
}
|
|
33
|
-
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
return node;
|
|
27
|
+
return result;
|
|
28
|
+
};
|
|
29
|
+
Element.prototype.findTabbableParent = function () {
|
|
30
|
+
let parentEl = this.parentElement;
|
|
31
|
+
while (parentEl != null) {
|
|
32
|
+
if (isTabbable(parentEl)) {
|
|
33
|
+
return parentEl;
|
|
34
|
+
}
|
|
35
|
+
parentEl = parentEl.parentElement;
|
|
43
36
|
}
|
|
44
|
-
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
}
|
|
37
|
+
return undefined;
|
|
38
|
+
};
|
|
39
|
+
Element.prototype.findFirstTabbableChild = function () {
|
|
40
|
+
const walker = document.createTreeWalker(this, NodeFilter.SHOW_ELEMENT);
|
|
41
|
+
let node = walker.nextNode();
|
|
42
|
+
while (node != null) {
|
|
43
|
+
if (node instanceof HTMLElement && isTabbable(node)) {
|
|
44
|
+
return node;
|
|
45
|
+
}
|
|
46
|
+
node = walker.nextNode();
|
|
47
|
+
}
|
|
48
|
+
return undefined;
|
|
49
|
+
};
|
|
50
|
+
Element.prototype.isOffsetElement = function () {
|
|
51
|
+
return ["relative", "absolute", "fixed", "sticky"].includes(getComputedStyle(this).position);
|
|
52
|
+
};
|
|
53
|
+
Element.prototype.isVisible = function () {
|
|
54
|
+
const style = getComputedStyle(this);
|
|
55
|
+
return (this.getClientRects().length > 0 && style.visibility !== "hidden" && style.opacity !== "0");
|
|
56
|
+
};
|
|
57
|
+
}
|
|
55
58
|
// ============================================================================
|
|
56
59
|
// 정적 함수 (이벤트 핸들러 또는 다중 요소용)
|
|
57
60
|
// ============================================================================
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"element-ext.js","sourceRoot":"","sources":["../../src/extensions/element-ext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAoFrD,OAAO,CAAC,SAAS,CAAC,OAAO,GAAG,UAAyC,QAAgB;
|
|
1
|
+
{"version":3,"file":"element-ext.js","sourceRoot":"","sources":["../../src/extensions/element-ext.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,53 +1,56 @@
|
|
|
1
1
|
import { ArgumentError } from "@simplysm/core-common";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
const parentEl = typeof parent === "string" ? this.closest(parent) : parent;
|
|
9
|
-
if (!(parentEl instanceof HTMLElement)) {
|
|
10
|
-
throw new ArgumentError({ parent });
|
|
11
|
-
}
|
|
12
|
-
const elementRect = this.getBoundingClientRect();
|
|
13
|
-
const parentRect = parentEl.getBoundingClientRect();
|
|
14
|
-
const relativeOffset = {
|
|
15
|
-
top: elementRect.top - parentRect.top + (parentEl.scrollTop || 0),
|
|
16
|
-
left: elementRect.left - parentRect.left + (parentEl.scrollLeft || 0),
|
|
2
|
+
// SSR(프리렌더) 가드: 서버(node)에는 HTMLElement 전역이 없음 — 브라우저에서만 prototype 확장
|
|
3
|
+
if (typeof HTMLElement !== "undefined") {
|
|
4
|
+
HTMLElement.prototype.repaint = function () {
|
|
5
|
+
// offsetHeight에 접근하면 브라우저에서 강제 동기 레이아웃이 트리거되어,
|
|
6
|
+
// 현재 레이아웃의 스타일 변경이 즉시 적용되고 리페인트가 발생합니다.
|
|
7
|
+
void this.offsetHeight;
|
|
17
8
|
};
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
const
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
9
|
+
HTMLElement.prototype.getRelativeOffset = function (parent) {
|
|
10
|
+
const parentEl = typeof parent === "string" ? this.closest(parent) : parent;
|
|
11
|
+
if (!(parentEl instanceof HTMLElement)) {
|
|
12
|
+
throw new ArgumentError({ parent });
|
|
13
|
+
}
|
|
14
|
+
const elementRect = this.getBoundingClientRect();
|
|
15
|
+
const parentRect = parentEl.getBoundingClientRect();
|
|
16
|
+
const relativeOffset = {
|
|
17
|
+
top: elementRect.top - parentRect.top + (parentEl.scrollTop || 0),
|
|
18
|
+
left: elementRect.left - parentRect.left + (parentEl.scrollLeft || 0),
|
|
19
|
+
};
|
|
20
|
+
let currentEl = this.parentElement;
|
|
21
|
+
while (currentEl != null && currentEl !== parentEl) {
|
|
22
|
+
const style = getComputedStyle(currentEl);
|
|
23
|
+
relativeOffset.top += parseFloat(style.borderTopWidth) || 0;
|
|
24
|
+
relativeOffset.left += parseFloat(style.borderLeftWidth) || 0;
|
|
25
|
+
currentEl = currentEl.parentElement;
|
|
26
|
+
}
|
|
27
|
+
const elTransform = getComputedStyle(this).transform;
|
|
28
|
+
const parentTransform = getComputedStyle(parentEl).transform;
|
|
29
|
+
if (elTransform !== "none" || parentTransform !== "none") {
|
|
30
|
+
const elementMatrix = new DOMMatrix(elTransform);
|
|
31
|
+
const parentMatrix = new DOMMatrix(parentTransform);
|
|
32
|
+
if (!elementMatrix.isIdentity || !parentMatrix.isIdentity) {
|
|
33
|
+
const transformedPoint = parentMatrix
|
|
34
|
+
.inverse()
|
|
35
|
+
.multiply(elementMatrix)
|
|
36
|
+
.transformPoint(new DOMPoint(relativeOffset.left, relativeOffset.top));
|
|
37
|
+
relativeOffset.left = transformedPoint.x;
|
|
38
|
+
relativeOffset.top = transformedPoint.y;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
return relativeOffset;
|
|
42
|
+
};
|
|
43
|
+
HTMLElement.prototype.scrollIntoViewIfNeeded = function (target, offset = { top: 0, left: 0 }) {
|
|
44
|
+
const scroll = {
|
|
45
|
+
top: this.scrollTop,
|
|
46
|
+
left: this.scrollLeft,
|
|
47
|
+
};
|
|
48
|
+
if (target.top - scroll.top < offset.top) {
|
|
49
|
+
this.scrollTop = target.top - offset.top;
|
|
50
|
+
}
|
|
51
|
+
if (target.left - scroll.left < offset.left) {
|
|
52
|
+
this.scrollLeft = target.left - offset.left;
|
|
37
53
|
}
|
|
38
|
-
}
|
|
39
|
-
return relativeOffset;
|
|
40
|
-
};
|
|
41
|
-
HTMLElement.prototype.scrollIntoViewIfNeeded = function (target, offset = { top: 0, left: 0 }) {
|
|
42
|
-
const scroll = {
|
|
43
|
-
top: this.scrollTop,
|
|
44
|
-
left: this.scrollLeft,
|
|
45
54
|
};
|
|
46
|
-
|
|
47
|
-
this.scrollTop = target.top - offset.top;
|
|
48
|
-
}
|
|
49
|
-
if (target.left - scroll.left < offset.left) {
|
|
50
|
-
this.scrollLeft = target.left - offset.left;
|
|
51
|
-
}
|
|
52
|
-
};
|
|
55
|
+
}
|
|
53
56
|
//# sourceMappingURL=html-element-ext.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"html-element-ext.js","sourceRoot":"","sources":["../../src/extensions/html-element-ext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAiDtD,WAAW,CAAC,SAAS,CAAC,OAAO,GAAG;
|
|
1
|
+
{"version":3,"file":"html-element-ext.js","sourceRoot":"","sources":["../../src/extensions/html-element-ext.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@simplysm/core-browser",
|
|
3
|
-
"version": "14.0.
|
|
3
|
+
"version": "14.0.97",
|
|
4
4
|
"description": "심플리즘 패키지 - 코어 (browser)",
|
|
5
5
|
"author": "심플리즘",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -27,6 +27,6 @@
|
|
|
27
27
|
"dependencies": {
|
|
28
28
|
"sanitize-filename": "^1.6.4",
|
|
29
29
|
"tabbable": "^6.4.0",
|
|
30
|
-
"@simplysm/core-common": "14.0.
|
|
30
|
+
"@simplysm/core-common": "14.0.97"
|
|
31
31
|
}
|
|
32
32
|
}
|
|
@@ -83,65 +83,70 @@ declare global {
|
|
|
83
83
|
}
|
|
84
84
|
}
|
|
85
85
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
cursor
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
};
|
|
113
|
-
|
|
114
|
-
Element.prototype.findTabbableParent = function (): HTMLElement | undefined {
|
|
115
|
-
let parentEl = this.parentElement;
|
|
116
|
-
while (parentEl != null) {
|
|
117
|
-
if (isTabbable(parentEl)) {
|
|
118
|
-
return parentEl;
|
|
86
|
+
// SSR(프리렌더) 가드: 서버(node)에는 Element 전역이 없음 — 브라우저에서만 prototype 확장
|
|
87
|
+
if (typeof Element !== "undefined") {
|
|
88
|
+
Element.prototype.findAll = function <TEl extends Element = Element>(selector: string): TEl[] {
|
|
89
|
+
const trimmed = selector.trim();
|
|
90
|
+
if (trimmed === "") return [];
|
|
91
|
+
return Array.from(this.querySelectorAll<TEl>(trimmed));
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
Element.prototype.findFirst = function <TEl extends Element = Element>(
|
|
95
|
+
selector: string,
|
|
96
|
+
): TEl | undefined {
|
|
97
|
+
const trimmed = selector.trim();
|
|
98
|
+
if (trimmed === "") return undefined;
|
|
99
|
+
return this.querySelector<TEl>(trimmed) ?? undefined;
|
|
100
|
+
};
|
|
101
|
+
|
|
102
|
+
Element.prototype.prependChild = function <TEl extends Element>(child: TEl): TEl {
|
|
103
|
+
return this.insertBefore(child, this.firstElementChild);
|
|
104
|
+
};
|
|
105
|
+
|
|
106
|
+
Element.prototype.getParents = function (): Element[] {
|
|
107
|
+
const result: Element[] = [];
|
|
108
|
+
let cursor = this.parentNode;
|
|
109
|
+
while (cursor != null && cursor instanceof Element) {
|
|
110
|
+
result.push(cursor);
|
|
111
|
+
cursor = cursor.parentNode;
|
|
119
112
|
}
|
|
120
|
-
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
return node;
|
|
113
|
+
return result;
|
|
114
|
+
};
|
|
115
|
+
|
|
116
|
+
Element.prototype.findTabbableParent = function (): HTMLElement | undefined {
|
|
117
|
+
let parentEl = this.parentElement;
|
|
118
|
+
while (parentEl != null) {
|
|
119
|
+
if (isTabbable(parentEl)) {
|
|
120
|
+
return parentEl;
|
|
121
|
+
}
|
|
122
|
+
parentEl = parentEl.parentElement;
|
|
131
123
|
}
|
|
132
|
-
|
|
133
|
-
}
|
|
134
|
-
return undefined;
|
|
135
|
-
};
|
|
124
|
+
return undefined;
|
|
125
|
+
};
|
|
136
126
|
|
|
137
|
-
Element.prototype.
|
|
138
|
-
|
|
139
|
-
|
|
127
|
+
Element.prototype.findFirstTabbableChild = function (): HTMLElement | undefined {
|
|
128
|
+
const walker = document.createTreeWalker(this, NodeFilter.SHOW_ELEMENT);
|
|
129
|
+
let node = walker.nextNode();
|
|
130
|
+
while (node != null) {
|
|
131
|
+
if (node instanceof HTMLElement && isTabbable(node)) {
|
|
132
|
+
return node;
|
|
133
|
+
}
|
|
134
|
+
node = walker.nextNode();
|
|
135
|
+
}
|
|
136
|
+
return undefined;
|
|
137
|
+
};
|
|
140
138
|
|
|
141
|
-
Element.prototype.
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
139
|
+
Element.prototype.isOffsetElement = function (): boolean {
|
|
140
|
+
return ["relative", "absolute", "fixed", "sticky"].includes(getComputedStyle(this).position);
|
|
141
|
+
};
|
|
142
|
+
|
|
143
|
+
Element.prototype.isVisible = function (): boolean {
|
|
144
|
+
const style = getComputedStyle(this);
|
|
145
|
+
return (
|
|
146
|
+
this.getClientRects().length > 0 && style.visibility !== "hidden" && style.opacity !== "0"
|
|
147
|
+
);
|
|
148
|
+
};
|
|
149
|
+
}
|
|
145
150
|
|
|
146
151
|
// ============================================================================
|
|
147
152
|
// 정적 함수 (이벤트 핸들러 또는 다중 요소용)
|
|
@@ -47,72 +47,75 @@ declare global {
|
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
49
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
HTMLElement.prototype.getRelativeOffset = function (parent: HTMLElement | string): {
|
|
57
|
-
top: number;
|
|
58
|
-
left: number;
|
|
59
|
-
} {
|
|
60
|
-
const parentEl = typeof parent === "string" ? this.closest(parent) : parent;
|
|
61
|
-
|
|
62
|
-
if (!(parentEl instanceof HTMLElement)) {
|
|
63
|
-
throw new ArgumentError({ parent });
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
const elementRect = this.getBoundingClientRect();
|
|
67
|
-
const parentRect = parentEl.getBoundingClientRect();
|
|
68
|
-
|
|
69
|
-
const relativeOffset = {
|
|
70
|
-
top: elementRect.top - parentRect.top + (parentEl.scrollTop || 0),
|
|
71
|
-
left: elementRect.left - parentRect.left + (parentEl.scrollLeft || 0),
|
|
50
|
+
// SSR(프리렌더) 가드: 서버(node)에는 HTMLElement 전역이 없음 — 브라우저에서만 prototype 확장
|
|
51
|
+
if (typeof HTMLElement !== "undefined") {
|
|
52
|
+
HTMLElement.prototype.repaint = function (): void {
|
|
53
|
+
// offsetHeight에 접근하면 브라우저에서 강제 동기 레이아웃이 트리거되어,
|
|
54
|
+
// 현재 레이아웃의 스타일 변경이 즉시 적용되고 리페인트가 발생합니다.
|
|
55
|
+
void this.offsetHeight;
|
|
72
56
|
};
|
|
73
57
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
currentEl = currentEl.parentElement;
|
|
80
|
-
}
|
|
58
|
+
HTMLElement.prototype.getRelativeOffset = function (parent: HTMLElement | string): {
|
|
59
|
+
top: number;
|
|
60
|
+
left: number;
|
|
61
|
+
} {
|
|
62
|
+
const parentEl = typeof parent === "string" ? this.closest(parent) : parent;
|
|
81
63
|
|
|
82
|
-
|
|
83
|
-
|
|
64
|
+
if (!(parentEl instanceof HTMLElement)) {
|
|
65
|
+
throw new ArgumentError({ parent });
|
|
66
|
+
}
|
|
84
67
|
|
|
85
|
-
|
|
86
|
-
const
|
|
87
|
-
const parentMatrix = new DOMMatrix(parentTransform);
|
|
68
|
+
const elementRect = this.getBoundingClientRect();
|
|
69
|
+
const parentRect = parentEl.getBoundingClientRect();
|
|
88
70
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
.transformPoint(new DOMPoint(relativeOffset.left, relativeOffset.top));
|
|
71
|
+
const relativeOffset = {
|
|
72
|
+
top: elementRect.top - parentRect.top + (parentEl.scrollTop || 0),
|
|
73
|
+
left: elementRect.left - parentRect.left + (parentEl.scrollLeft || 0),
|
|
74
|
+
};
|
|
94
75
|
|
|
95
|
-
|
|
96
|
-
|
|
76
|
+
let currentEl = this.parentElement;
|
|
77
|
+
while (currentEl != null && currentEl !== parentEl) {
|
|
78
|
+
const style = getComputedStyle(currentEl);
|
|
79
|
+
relativeOffset.top += parseFloat(style.borderTopWidth) || 0;
|
|
80
|
+
relativeOffset.left += parseFloat(style.borderLeftWidth) || 0;
|
|
81
|
+
currentEl = currentEl.parentElement;
|
|
97
82
|
}
|
|
98
|
-
}
|
|
99
83
|
|
|
100
|
-
|
|
101
|
-
|
|
84
|
+
const elTransform = getComputedStyle(this).transform;
|
|
85
|
+
const parentTransform = getComputedStyle(parentEl).transform;
|
|
86
|
+
|
|
87
|
+
if (elTransform !== "none" || parentTransform !== "none") {
|
|
88
|
+
const elementMatrix = new DOMMatrix(elTransform);
|
|
89
|
+
const parentMatrix = new DOMMatrix(parentTransform);
|
|
90
|
+
|
|
91
|
+
if (!elementMatrix.isIdentity || !parentMatrix.isIdentity) {
|
|
92
|
+
const transformedPoint = parentMatrix
|
|
93
|
+
.inverse()
|
|
94
|
+
.multiply(elementMatrix)
|
|
95
|
+
.transformPoint(new DOMPoint(relativeOffset.left, relativeOffset.top));
|
|
102
96
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
left: this.scrollLeft,
|
|
97
|
+
relativeOffset.left = transformedPoint.x;
|
|
98
|
+
relativeOffset.top = transformedPoint.y;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
return relativeOffset;
|
|
110
103
|
};
|
|
111
104
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
105
|
+
HTMLElement.prototype.scrollIntoViewIfNeeded = function (
|
|
106
|
+
target: { top: number; left: number },
|
|
107
|
+
offset: { top: number; left: number } = { top: 0, left: 0 },
|
|
108
|
+
): void {
|
|
109
|
+
const scroll = {
|
|
110
|
+
top: this.scrollTop,
|
|
111
|
+
left: this.scrollLeft,
|
|
112
|
+
};
|
|
113
|
+
|
|
114
|
+
if (target.top - scroll.top < offset.top) {
|
|
115
|
+
this.scrollTop = target.top - offset.top;
|
|
116
|
+
}
|
|
117
|
+
if (target.left - scroll.left < offset.left) {
|
|
118
|
+
this.scrollLeft = target.left - offset.left;
|
|
119
|
+
}
|
|
120
|
+
};
|
|
121
|
+
}
|