ninegrid2 6.670.0 → 6.672.0

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.
Files changed (5) hide show
  1. package/dist/bundle.cjs.js +34 -26
  2. package/dist/bundle.esm.js +34 -26
  3. package/dist/nx/nxSplitter.js +34 -26
  4. package/package.json +1 -1
  5. package/src/nx/nxSplitter.js +34 -26
package/dist/bundle.cjs.js CHANGED
@@ -121068,43 +121068,51 @@ class nxSplitter extends HTMLElement {
121068
121068
  };
121069
121069
 
121070
121070
  #startDrag = (e) => {
121071
- console.log(e);
121072
-
121073
- const mode = this.#mode;
121071
+ //const mode = this.#mode;
121074
121072
  const dragBar = document.createElement("div");
121075
- dragBar.className = "nx-drag-bar";
121076
- dragBar.style.position = "fixed";
121077
- dragBar.style.zIndex = "9999";
121078
- dragBar.style.pointerEvents = "none";
121079
- dragBar.style.background = "#666";
121080
- dragBar.style.opacity = "0.6";
121081
-
121082
- // 방향별 초기 위치 설정
121073
+ dragBar.className = `nx-splitter-drag-bar-${this.#mode}`;
121074
+ if (this.mode === "h") {
121075
+ dragBar.style.left = `${e.offsetX}px`;
121076
+ } else {
121077
+ dragBar.style.top = `${e.offsetY}px`;
121078
+ }
121079
+
121080
+ // 스타일 지정
121081
+ /**
121082
+ Object.assign(dragBar.style, {
121083
+ position: "absolute",
121084
+ zIndex: "999",
121085
+ background: "#666",
121086
+ opacity: "0.6",
121087
+ pointerEvents: "none"
121088
+ });
121089
+
121090
+ // 방향별 위치 설정
121083
121091
  if (mode === "h") {
121084
121092
  dragBar.style.top = "0";
121093
+ dragBar.style.left = `${e.offsetX}px`;
121085
121094
  dragBar.style.width = "1px";
121086
- dragBar.style.height = "100vh";
121087
- dragBar.style.left = `${e.clientX}px`;
121095
+ dragBar.style.height = "100%";
121088
121096
  } else {
121089
121097
  dragBar.style.left = "0";
121090
- dragBar.style.width = "100vw";
121098
+ dragBar.style.top = `${e.offsetY}px`;
121091
121099
  dragBar.style.height = "1px";
121092
- dragBar.style.top = `${e.clientY}px`;
121093
- }
121100
+ dragBar.style.width = "100%";
121101
+ } */
121094
121102
 
121095
- document.body.appendChild(dragBar);
121103
+ // 👇 부모 노드 기준으로 삽입
121104
+ const parent = this.getRootNode().host || this.parentElement;
121105
+ parent.appendChild(dragBar);
121096
121106
 
121097
121107
  const onMove = e => {
121098
- console.log(e);
121099
- if (mode === "h") dragBar.style.left = `${e.clientX}px`;
121100
- else dragBar.style.top = `${e.clientY}px`;
121108
+ if (this.#mode === "h") dragBar.style.left = `${e.offsetX}px`;
121109
+ else dragBar.style.top = `${e.offsetY}px`;
121101
121110
  };
121102
121111
 
121103
- const onUp = (e) => {
121104
- console.log(e);
121112
+ const onUp = () => {
121105
121113
  window.removeEventListener("mousemove", onMove);
121106
121114
  window.removeEventListener("mouseup", onUp);
121107
- dragBar.remove();
121115
+ //dragBar.remove();
121108
121116
  };
121109
121117
 
121110
121118
  window.addEventListener("mousemove", onMove);
@@ -121128,9 +121136,9 @@ class nxSplitter extends HTMLElement {
121128
121136
  @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxSplitter.css";
121129
121137
  ${ninegrid.getCustomPath(this,"nxSplitter.css")}
121130
121138
  </style>
121131
-
121132
- ${gripTmpl}
121133
- `;
121139
+
121140
+ ${gripTmpl}
121141
+ `;
121134
121142
 
121135
121143
  this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
121136
121144
 
package/dist/bundle.esm.js CHANGED
@@ -121064,43 +121064,51 @@ class nxSplitter extends HTMLElement {
121064
121064
  };
121065
121065
 
121066
121066
  #startDrag = (e) => {
121067
- console.log(e);
121068
-
121069
- const mode = this.#mode;
121067
+ //const mode = this.#mode;
121070
121068
  const dragBar = document.createElement("div");
121071
- dragBar.className = "nx-drag-bar";
121072
- dragBar.style.position = "fixed";
121073
- dragBar.style.zIndex = "9999";
121074
- dragBar.style.pointerEvents = "none";
121075
- dragBar.style.background = "#666";
121076
- dragBar.style.opacity = "0.6";
121077
-
121078
- // 방향별 초기 위치 설정
121069
+ dragBar.className = `nx-splitter-drag-bar-${this.#mode}`;
121070
+ if (this.mode === "h") {
121071
+ dragBar.style.left = `${e.offsetX}px`;
121072
+ } else {
121073
+ dragBar.style.top = `${e.offsetY}px`;
121074
+ }
121075
+
121076
+ // 스타일 지정
121077
+ /**
121078
+ Object.assign(dragBar.style, {
121079
+ position: "absolute",
121080
+ zIndex: "999",
121081
+ background: "#666",
121082
+ opacity: "0.6",
121083
+ pointerEvents: "none"
121084
+ });
121085
+
121086
+ // 방향별 위치 설정
121079
121087
  if (mode === "h") {
121080
121088
  dragBar.style.top = "0";
121089
+ dragBar.style.left = `${e.offsetX}px`;
121081
121090
  dragBar.style.width = "1px";
121082
- dragBar.style.height = "100vh";
121083
- dragBar.style.left = `${e.clientX}px`;
121091
+ dragBar.style.height = "100%";
121084
121092
  } else {
121085
121093
  dragBar.style.left = "0";
121086
- dragBar.style.width = "100vw";
121094
+ dragBar.style.top = `${e.offsetY}px`;
121087
121095
  dragBar.style.height = "1px";
121088
- dragBar.style.top = `${e.clientY}px`;
121089
- }
121096
+ dragBar.style.width = "100%";
121097
+ } */
121090
121098
 
121091
- document.body.appendChild(dragBar);
121099
+ // 👇 부모 노드 기준으로 삽입
121100
+ const parent = this.getRootNode().host || this.parentElement;
121101
+ parent.appendChild(dragBar);
121092
121102
 
121093
121103
  const onMove = e => {
121094
- console.log(e);
121095
- if (mode === "h") dragBar.style.left = `${e.clientX}px`;
121096
- else dragBar.style.top = `${e.clientY}px`;
121104
+ if (this.#mode === "h") dragBar.style.left = `${e.offsetX}px`;
121105
+ else dragBar.style.top = `${e.offsetY}px`;
121097
121106
  };
121098
121107
 
121099
- const onUp = (e) => {
121100
- console.log(e);
121108
+ const onUp = () => {
121101
121109
  window.removeEventListener("mousemove", onMove);
121102
121110
  window.removeEventListener("mouseup", onUp);
121103
- dragBar.remove();
121111
+ //dragBar.remove();
121104
121112
  };
121105
121113
 
121106
121114
  window.addEventListener("mousemove", onMove);
@@ -121124,9 +121132,9 @@ class nxSplitter extends HTMLElement {
121124
121132
  @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxSplitter.css";
121125
121133
  ${ninegrid.getCustomPath(this,"nxSplitter.css")}
121126
121134
  </style>
121127
-
121128
- ${gripTmpl}
121129
- `;
121135
+
121136
+ ${gripTmpl}
121137
+ `;
121130
121138
 
121131
121139
  this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
121132
121140
 
package/dist/nx/nxSplitter.js CHANGED
@@ -23,43 +23,51 @@ class nxSplitter extends HTMLElement {
23
23
  };
24
24
 
25
25
  #startDrag = (e) => {
26
- console.log(e);
27
-
28
- const mode = this.#mode;
26
+ //const mode = this.#mode;
29
27
  const dragBar = document.createElement("div");
30
- dragBar.className = "nx-drag-bar";
31
- dragBar.style.position = "fixed";
32
- dragBar.style.zIndex = "9999";
33
- dragBar.style.pointerEvents = "none";
34
- dragBar.style.background = "#666";
35
- dragBar.style.opacity = "0.6";
36
-
37
- // 방향별 초기 위치 설정
28
+ dragBar.className = `nx-splitter-drag-bar-${this.#mode}`;
29
+ if (this.mode === "h") {
30
+ dragBar.style.left = `${e.offsetX}px`;
31
+ } else {
32
+ dragBar.style.top = `${e.offsetY}px`;
33
+ }
34
+
35
+ // 스타일 지정
36
+ /**
37
+ Object.assign(dragBar.style, {
38
+ position: "absolute",
39
+ zIndex: "999",
40
+ background: "#666",
41
+ opacity: "0.6",
42
+ pointerEvents: "none"
43
+ });
44
+
45
+ // 방향별 위치 설정
38
46
  if (mode === "h") {
39
47
  dragBar.style.top = "0";
48
+ dragBar.style.left = `${e.offsetX}px`;
40
49
  dragBar.style.width = "1px";
41
- dragBar.style.height = "100vh";
42
- dragBar.style.left = `${e.clientX}px`;
50
+ dragBar.style.height = "100%";
43
51
  } else {
44
52
  dragBar.style.left = "0";
45
- dragBar.style.width = "100vw";
53
+ dragBar.style.top = `${e.offsetY}px`;
46
54
  dragBar.style.height = "1px";
47
- dragBar.style.top = `${e.clientY}px`;
48
- }
55
+ dragBar.style.width = "100%";
56
+ } */
49
57
 
50
- document.body.appendChild(dragBar);
58
+ // 👇 부모 노드 기준으로 삽입
59
+ const parent = this.getRootNode().host || this.parentElement;
60
+ parent.appendChild(dragBar);
51
61
 
52
62
  const onMove = e => {
53
- console.log(e);
54
- if (mode === "h") dragBar.style.left = `${e.clientX}px`;
55
- else dragBar.style.top = `${e.clientY}px`;
63
+ if (this.#mode === "h") dragBar.style.left = `${e.offsetX}px`;
64
+ else dragBar.style.top = `${e.offsetY}px`;
56
65
  };
57
66
 
58
- const onUp = (e) => {
59
- console.log(e);
67
+ const onUp = () => {
60
68
  window.removeEventListener("mousemove", onMove);
61
69
  window.removeEventListener("mouseup", onUp);
62
- dragBar.remove();
70
+ //dragBar.remove();
63
71
  };
64
72
 
65
73
  window.addEventListener("mousemove", onMove);
@@ -83,9 +91,9 @@ class nxSplitter extends HTMLElement {
83
91
  @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxSplitter.css";
84
92
  ${ninegrid.getCustomPath(this,"nxSplitter.css")}
85
93
  </style>
86
-
87
- ${gripTmpl}
88
- `;
94
+
95
+ ${gripTmpl}
96
+ `;
89
97
 
90
98
  this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
91
99
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "ninegrid2",
3
3
  "type": "module",
4
- "version": "6.670.0",
4
+ "version": "6.672.0",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "exports": {
package/src/nx/nxSplitter.js CHANGED
@@ -23,43 +23,51 @@ class nxSplitter extends HTMLElement {
23
23
  };
24
24
 
25
25
  #startDrag = (e) => {
26
- console.log(e);
27
-
28
- const mode = this.#mode;
26
+ //const mode = this.#mode;
29
27
  const dragBar = document.createElement("div");
30
- dragBar.className = "nx-drag-bar";
31
- dragBar.style.position = "fixed";
32
- dragBar.style.zIndex = "9999";
33
- dragBar.style.pointerEvents = "none";
34
- dragBar.style.background = "#666";
35
- dragBar.style.opacity = "0.6";
36
-
37
- // 방향별 초기 위치 설정
28
+ dragBar.className = `nx-splitter-drag-bar-${this.#mode}`;
29
+ if (this.mode === "h") {
30
+ dragBar.style.left = `${e.offsetX}px`;
31
+ } else {
32
+ dragBar.style.top = `${e.offsetY}px`;
33
+ }
34
+
35
+ // 스타일 지정
36
+ /**
37
+ Object.assign(dragBar.style, {
38
+ position: "absolute",
39
+ zIndex: "999",
40
+ background: "#666",
41
+ opacity: "0.6",
42
+ pointerEvents: "none"
43
+ });
44
+
45
+ // 방향별 위치 설정
38
46
  if (mode === "h") {
39
47
  dragBar.style.top = "0";
48
+ dragBar.style.left = `${e.offsetX}px`;
40
49
  dragBar.style.width = "1px";
41
- dragBar.style.height = "100vh";
42
- dragBar.style.left = `${e.clientX}px`;
50
+ dragBar.style.height = "100%";
43
51
  } else {
44
52
  dragBar.style.left = "0";
45
- dragBar.style.width = "100vw";
53
+ dragBar.style.top = `${e.offsetY}px`;
46
54
  dragBar.style.height = "1px";
47
- dragBar.style.top = `${e.clientY}px`;
48
- }
55
+ dragBar.style.width = "100%";
56
+ } */
49
57
 
50
- document.body.appendChild(dragBar);
58
+ // 👇 부모 노드 기준으로 삽입
59
+ const parent = this.getRootNode().host || this.parentElement;
60
+ parent.appendChild(dragBar);
51
61
 
52
62
  const onMove = e => {
53
- console.log(e);
54
- if (mode === "h") dragBar.style.left = `${e.clientX}px`;
55
- else dragBar.style.top = `${e.clientY}px`;
63
+ if (this.#mode === "h") dragBar.style.left = `${e.offsetX}px`;
64
+ else dragBar.style.top = `${e.offsetY}px`;
56
65
  };
57
66
 
58
- const onUp = (e) => {
59
- console.log(e);
67
+ const onUp = () => {
60
68
  window.removeEventListener("mousemove", onMove);
61
69
  window.removeEventListener("mouseup", onUp);
62
- dragBar.remove();
70
+ //dragBar.remove();
63
71
  };
64
72
 
65
73
  window.addEventListener("mousemove", onMove);
@@ -83,9 +91,9 @@ class nxSplitter extends HTMLElement {
83
91
  @import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxSplitter.css";
84
92
  ${ninegrid.getCustomPath(this,"nxSplitter.css")}
85
93
  </style>
86
-
87
- ${gripTmpl}
88
- `;
94
+
95
+ ${gripTmpl}
96
+ `;
89
97
 
90
98
  this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
91
99