ninegrid2 6.916.0 → 6.918.0

package/dist/bundle.cjs.js

@@ -121655,9 +121655,19 @@ class nxTitle extends HTMLElement {
 	}
 
 	connectedCallback() {
-		this.#init();
+		if (document.readyState === 'loading') { // DOM이 아직 로딩 중이면
+			document.addEventListener('DOMContentLoaded', this.#init);
+		} else { // DOM이 이미 로드 완료되었으면 즉시 실행
+			this.#init();
+		}
+	}
+
+	// 컴포넌트가 DOM에서 제거될 때 이벤트 리스너를 정리
+	disconnectedCallback() {
+		document.removeEventListener('DOMContentLoaded', this.#init);
 	}
 
+
 	#init = () => {
 		this.#generateBreadcrumb(); // 빵 부스러기 데이터 생성 및 최종 렌더링 트리거
 		this.#renderer(); // 초기 렌더링 (빵 부스러기 데이터는 아직 없음)

package/dist/bundle.esm.js

@@ -121651,9 +121651,19 @@ class nxTitle extends HTMLElement {
 	}
 
 	connectedCallback() {
-		this.#init();
+		if (document.readyState === 'loading') { // DOM이 아직 로딩 중이면
+			document.addEventListener('DOMContentLoaded', this.#init);
+		} else { // DOM이 이미 로드 완료되었으면 즉시 실행
+			this.#init();
+		}
+	}
+
+	// 컴포넌트가 DOM에서 제거될 때 이벤트 리스너를 정리
+	disconnectedCallback() {
+		document.removeEventListener('DOMContentLoaded', this.#init);
 	}
 
+
 	#init = () => {
 		this.#generateBreadcrumb(); // 빵 부스러기 데이터 생성 및 최종 렌더링 트리거
 		this.#renderer(); // 초기 렌더링 (빵 부스러기 데이터는 아직 없음)

package/dist/nx/nxTitle.js

@@ -10,9 +10,19 @@ class nxTitle extends HTMLElement {
 	}
 
 	connectedCallback() {
-		this.#init();
+		if (document.readyState === 'loading') { // DOM이 아직 로딩 중이면
+			document.addEventListener('DOMContentLoaded', this.#init);
+		} else { // DOM이 이미 로드 완료되었으면 즉시 실행
+			this.#init();
+		}
+	}
+
+	// 컴포넌트가 DOM에서 제거될 때 이벤트 리스너를 정리
+	disconnectedCallback() {
+		document.removeEventListener('DOMContentLoaded', this.#init);
 	}
 
+
 	#init = () => {
 		this.#generateBreadcrumb(); // 빵 부스러기 데이터 생성 및 최종 렌더링 트리거
 		this.#renderer(); // 초기 렌더링 (빵 부스러기 데이터는 아직 없음)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ninegrid2",
   "type": "module",
-  "version": "6.916.0",
+  "version": "6.918.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {

package/src/nx/nxTitle.js

@@ -10,9 +10,19 @@ class nxTitle extends HTMLElement {
 	}
 
 	connectedCallback() {
-		this.#init();
+		if (document.readyState === 'loading') { // DOM이 아직 로딩 중이면
+			document.addEventListener('DOMContentLoaded', this.#init);
+		} else { // DOM이 이미 로드 완료되었으면 즉시 실행
+			this.#init();
+		}
+	}
+
+	// 컴포넌트가 DOM에서 제거될 때 이벤트 리스너를 정리
+	disconnectedCallback() {
+		document.removeEventListener('DOMContentLoaded', this.#init);
 	}
 
+
 	#init = () => {
 		this.#generateBreadcrumb(); // 빵 부스러기 데이터 생성 및 최종 렌더링 트리거
 		this.#renderer(); // 초기 렌더링 (빵 부스러기 데이터는 아직 없음)

package/src/nx/nxSplitter.js.bak

@@ -1,388 +0,0 @@
-import ninegrid from "../index.js";
-
-class nxSplitter extends HTMLElement {
-	#mode;
-
-	constructor() {
-		super();
-		this.attachShadow({ mode: "open" });
-	}
-
-	connectedCallback() {
-		this.#init();
-	}
-
-	#detectMode = (el) => {
-		const prev = el.previousElementSibling;
-		const next = el.nextElementSibling;
-
-		const prevRect = prev?.getBoundingClientRect();
-		const nextRect = next?.getBoundingClientRect();
-
-		this.#mode = (!prevRect || !nextRect) || (Math.abs(prevRect.top - nextRect.top) < 5) ? "h" : "v";
-	};
-
-	#startDrag_BAK = (e) => {
-		e.preventDefault();
-		e.stopPropagation();
-
-		const splitterRect = this.getBoundingClientRect();
-		const isHorizontal = this.#mode === "h";
-
-		// 클릭 지점에서 스플리터 경계까지의 오프셋
-		const clickOffset = isHorizontal
-			? e.clientX - splitterRect.left
-			: e.clientY - splitterRect.top;
-
-		const dragBar = document.createElement("div");
-		dragBar.className = `nx-splitter-drag-bar-${this.#mode}`;
-		Object.assign(dragBar.style, {
-			position: "absolute",
-			zIndex: "999",
-			background: "#666",
-			opacity: "0.6",
-			pointerEvents: "none"
-		});
-
-		const root = this.getRootNode({ composed: true });
-		// parent는 스플리터의 직접적인 컨테이너 (flex 컨테이너 역할)
-		const parent = root instanceof ShadowRoot ? root.host : this.parentElement;
-
-		const prev = this.previousElementSibling;
-		const next = this.nextElementSibling;
-
-		if (!parent || !prev || !next) {
-			console.warn("Spliter's parent or siblings not found.");
-			return;
-		}
-
-		const parentRect = parent.getBoundingClientRect();
-		const prevRect = prev.getBoundingClientRect();
-		const nextRect = next.getBoundingClientRect();
-
-		// dragBar의 초기 위치 설정 (parent 기준)
-		// padding을 고려하지 않고 parentRect를 기준으로 하는 것이 일반적이며,
-		// 스플리터 컨테이너의 flex-basis가 padding을 포함하는지 여부에 따라 조절.
-		// 여기서는 parent의 content-box 기준으로 relative 위치를 계산.
-		let initialPos;
-		if (isHorizontal) {
-			initialPos = e.clientX - parentRect.left;
-			dragBar.style.top = "0";
-			dragBar.style.left = `${initialPos}px`;
-			dragBar.style.width = "1px";
-			dragBar.style.height = "100%";
-		} else {
-			initialPos = e.clientY - parentRect.top;
-			dragBar.style.left = "0";
-			dragBar.style.top = `${initialPos}px`;
-			dragBar.style.height = "1px";
-			dragBar.style.width = "100%";
-		}
-
-		// Shadow DOM이 있다면 ShadowRoot에, 아니면 일반 DOM에 삽입
-		(parent.shadowRoot || parent).appendChild(dragBar);
-
-		// 드래그 가능한 범위 (부모 요소 내에서 이전/다음 엘리먼트의 실제 경계 기준)
-		const minLimit = isHorizontal ? prevRect.left : prevRect.top;
-		const maxLimit = isHorizontal ? nextRect.right : nextRect.bottom;
-
-		const onMove = moveEvent => {
-			const clientPos = isHorizontal ? moveEvent.clientX : moveEvent.clientY;
-			// 드래그 바가 부모 영역을 벗어나지 않도록 클램프
-			const clampedPos = Math.max(minLimit, Math.min(clientPos, maxLimit));
-
-			// 부모 기준으로 드래그 바의 상대 위치
-			const relativePos = clampedPos - parentRect[isHorizontal ? "left" : "top"];
-
-			if (isHorizontal) {
-				dragBar.style.left = `${relativePos}px`;
-			} else {
-				dragBar.style.top = `${relativePos}px`;
-			}
-		};
-
-		const onUp = upEvent => {
-			window.removeEventListener("mousemove", onMove);
-			window.removeEventListener("mouseup", onUp);
-			dragBar.remove();
-
-			// 최종 드래그 바의 위치를 기준으로 새 크기 계산
-			const finalDragBarPos = isHorizontal
-				? parseFloat(dragBar.style.left)
-				: parseFloat(dragBar.style.top);
-
-			// 이전 요소의 새로운 크기 (부모의 좌측/상단 경계부터 드래그 바까지)
-			const newPrevSize = finalDragBarPos;
-
-			// 다음 요소의 새로운 크기 (부모의 전체 크기에서 이전 요소 크기를 뺀 값)
-			const parentTotalSize = isHorizontal ? parentRect.width : parentRect.height;
-			const newNextSize = parentTotalSize - newPrevSize;
-
-			// 최소/최대 크기 제약 (예: 1px 미만으로 작아지지 않도록)
-			const MIN_PANEL_SIZE = 1; // 패널 최소 크기
-			let finalPrevSize = Math.max(MIN_PANEL_SIZE, newPrevSize);
-			let finalNextSize = Math.max(MIN_PANEL_SIZE, newNextSize);
-
-			// flex 레이아웃에 직접 width/height를 부여하는 대신 flex-basis를 사용하거나
-			// flex-grow 비율을 재조정하는 것이 일반적이나, 현재 flex: none; 으로 제어하는 방식을 유지한다면,
-			// 이와 같이 직접 style.width/height를 설정.
-			// 하지만 flex 컨테이너 내부에서는 flex-basis를 설정하는 것이 더 바람직합니다.
-			// 여기서는 기존 코드의 스타일 설정을 유지하면서 값을 정확히 계산.
-
-			// flex-grow 비율로 제어하는 경우
-			// const currentTotalFlex = parseFloat(getComputedStyle(prev).flexGrow || 0) + parseFloat(getComputedStyle(next).flexGrow || 0);
-			// prev.style.flexGrow = (newPrevSize / parentTotalSize) * currentTotalFlex;
-			// next.style.flexGrow = (newNextSize / parentTotalSize) * currentTotalFlex;
-
-			// 기존 flex 값을 저장하고 복원
-			const originalPrevFlex = prev.style.flex;
-			const originalNextFlex = next.style.flex;
-
-			// 드래그 중에는 flex를 "none"으로 설정하여 직접 크기 조절
-			prev.style.flex = "none";
-			next.style.flex = "none";
-
-			if (isHorizontal) {
-				prev.style.width = `${finalPrevSize}px`;
-				next.style.width = `${finalNextSize}px`;
-			} else {
-				prev.style.height = `${finalPrevSize}px`;
-				next.style.height = `${finalNextSize}px`;
-			}
-
-			// 작업 완료 후 원래 flex 값으로 복원
-			// 단, width/height가 설정된 경우 flex 속성이 다시 적용되면 겹칠 수 있으므로 주의 필요.
-			// 일반적으로 flex-basis를 사용하거나, width/height 설정 후 flex-grow/shrink를 기본값으로 돌리는 것을 고려.
-			prev.style.flex = originalPrevFlex;
-			next.style.flex = originalNextFlex;
-		};
-
-		window.addEventListener("mousemove", onMove);
-		window.addEventListener("mouseup", onUp);
-	};
-
-	#startDrag = (e) => {
-
-		e.preventDefault(); // 기본 drag/select 동작 제거
-		e.stopPropagation();
-
-		const splitterRect = this.getBoundingClientRect();
-		const clickOffset = this.#mode === "h"
-			? e.clientX - splitterRect.left
-			: e.clientY - splitterRect.top;
-
-		//const mode = this.#mode;
-		const dragBar = document.createElement("div");
-		dragBar.className = `nx-splitter-drag-bar-${this.#mode}`;
-
-		// 스타일 지정
-		Object.assign(dragBar.style, {
-			position: "absolute",
-			zIndex: "999",
-			background: "#666",
-			opacity: "0.6",
-			pointerEvents: "none"
-		});
-
-		const root = this.getRootNode({ composed: true });
-		const parent = root instanceof ShadowRoot ? root.host : this.parentElement || document.body;
-
-		//const parent = this.getRootNode().host || this.parentElement;
-		const prev = this.previousElementSibling;
-		const next = this.nextElementSibling;
-
-		if (!parent || !prev || !next) return;
-
-		const parentRect = parent.getBoundingClientRect();
-		const prevRect = prev.getBoundingClientRect();
-		const nextRect = next.getBoundingClientRect();
-
-		/**
-		const clientPos = this.#mode === "h" ? e.clientX : e.clientY;
-		const position = Math.max(min, Math.min(clientPos, max));
-		const relative = position - parent.getBoundingClientRect()[this.#mode === "h" ? "left" : "top"];
-		*/
-
-		const left = e.clientX - parentRect.left;
-		const top = e.clientY - parentRect.top;
-
-		console.log(left, top);
-
-		// 방향별 위치 설정
-		if (this.#mode === "h") {
-			dragBar.style.top = "0";
-			dragBar.style.left = `${left}px`;
-			dragBar.style.width = "1px";
-			dragBar.style.height = "100%";
-		} else {
-			dragBar.style.left = "0";
-			dragBar.style.top = `${top}px`;
-			dragBar.style.height = "1px";
-			dragBar.style.width = "100%";
-		}
-
-		// 👇 부모 노드 기준으로 삽입
-		(parent.shadowRoot || parent).appendChild(dragBar);
-
-		const min = this.#mode === "h" ? prevRect.left : prevRect.top;
-		const max = this.#mode === "h" ? nextRect.right : nextRect.bottom;
-
-		const onMove = e => {
-			const clientPos = this.#mode === "h" ? e.clientX : e.clientY;
-			const position = Math.max(min, Math.min(clientPos, max));
-
-			const relative = position - parent.getBoundingClientRect()[this.#mode === "h" ? "left" : "top"];
-
-			if (this.#mode === "h") {
-				dragBar.style.left = `${relative}px`;
-			} else {
-				dragBar.style.top = `${relative}px`;
-			}
-
-			console.log(relative);
-		};
-
-
-
-		const onUp = (e) => {
-
-			window.removeEventListener("mousemove", onMove);
-			window.removeEventListener("mouseup", onUp);
-			dragBar.remove();
-
-
-			// 기준: prev + next 너비 합계
-			const totalSize = this.#mode === "h"
-				? prev.offsetWidth + next.offsetWidth
-				: prev.offsetHeight + next.offsetHeight;
-
-			// prev 기준 상대 거리 (드래그 거리)
-
-			let delta = this.#mode === "h"
-				? e.clientX - prev.getBoundingClientRect().left - clickOffset
-				: e.clientY - prev.getBoundingClientRect().top - clickOffset;
-			//let delta = dragStartPos - prev.getBoundingClientRect()[this.#mode === "h" ? "left" : "top"];
-
-			const min = 1;
-			const max = totalSize - 1;
-			delta = Math.max(min, Math.min(delta, max));
-
-
-			const prev1 = prev.style.flex;
-			const prev2 = next.style.flex;
-			prev.style.flex = "none";
-			next.style.flex = "none";
-
-			console.log(delta, totalSize, clickOffset);
-
-			// 📌 사이즈 적용
-			if (this.#mode === "h") {
-				prev.style.width = `${delta}px`;
-				next.style.width = `${totalSize - delta}px`;
-			} else {
-				prev.style.height = `${delta}px`;
-				next.style.height = `${totalSize - delta}px`;
-			}
-
-			prev.style.flex = prev1;
-			next.style.flex = prev2;
-		};
-
-		window.addEventListener("mousemove", onMove);
-		window.addEventListener("mouseup", onUp);
-	};
-
-
-	#init = () => {
-		this.#detectMode(this);
-
-		this.classList.add(this.#mode);
-
-		const contents = this.innerHTML.trim();
-		const gripClass = `grip-${this.#mode}`;
-		const gripTmpl = (contents === "") ? `<div class="${gripClass}"></div>`: `<div class="${gripClass}"></div><div class="inner-container">${contents}</div><div class="${gripClass}"></div>`;
-
-		this.innerHTML = ""; // 기존 내부 HTML 제거
-		const htmlTmpl = document.createElement("template");
-		htmlTmpl.innerHTML = `
-			<style>
-				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxSplitter.css";
-				${ninegrid.getCustomPath(this,"nxSplitter.css")}
-			</style>
-			
-			${gripTmpl}
-		`;
-
-		this.shadowRoot.appendChild(htmlTmpl.content.cloneNode(true));
-
-		// grip 이벤트 바인딩
-		this.shadowRoot.querySelectorAll(".grip-h,.grip-v").forEach(el => {
-			el.addEventListener("mousedown", e => this.#startDrag(e));
-		});
-
-		this.#prepareLayout();
-
-		window.addEventListener("resize", () => this.#prepareLayout());
-	};
-
-	#isLastSplitter = () => {
-		const parent = this.parentElement;
-		if (!parent) return false;
-
-		const allSplitters = [...parent.querySelectorAll("nx-splitter")];
-		return allSplitters.at(-1) === this;
-	};
-
-	#getSiblingSizeSum = () => {
-		const parent = this.parentElement;
-		if (!parent) return 0;
-
-		const isHorizontal = this.#mode === "h";
-
-		return Array.from(parent.children).reduce((sum, el) => {
-			const size = isHorizontal ? el.offsetWidth : el.offsetHeight;
-			return sum + size;
-		}, 0);
-	};
-
-
-	#prepareLayout = () => {
-
-		const isHorizontal = this.#mode === "h";
-		const prev = this.previousElementSibling;
-		const next = this.nextElementSibling;
-		const parent = this.parentElement;
-		if (!prev || !next || !parent) return;
-
-		const currentTotal = this.#getSiblingSizeSum();
-		const nextTotal = isHorizontal
-			? parent.getBoundingClientRect().width
-			: parent.getBoundingClientRect().height;
-
-		// 현재 패널 크기 측정
-		const prevSize = isHorizontal ? prev.offsetWidth : prev.offsetHeight;
-		const nextSize = isHorizontal ? next.offsetWidth : next.offsetHeight;
-
-		// 현재 비율 계산
-		const newPrevSize = nextTotal * prevSize / currentTotal;
-		const newNextSize = nextTotal * nextSize / currentTotal;
-
-
-		if (isHorizontal) {
-			prev.style.width = `${newPrevSize}px`;
-
-			if (this.#isLastSplitter()) {
-				next.style.width = `${newNextSize}px`;
-			}
-		} else {
-			prev.style.height = `${newPrevSize}px`;
-
-			if (this.#isLastSplitter()) {
-				next.style.height = `${newNextSize}px`;
-			}
-		}
-	};
-
-}
-
-customElements.define("nx-splitter", nxSplitter);