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