ninegrid2 6.1207.0 → 6.1209.0

package/dist/bundle.cjs.js

@@ -119434,14 +119434,14 @@ class nxDialog extends HTMLElement
 
 		const v = this.innerHTML;
 		const cssFile = this.getAttribute("css-file");
-		const customFile1 = cssFile ? `@import "https://cdn.jsdelivr.net/npm/ninegrid2@${ninegrid.version}/dist/css/${cssFile}";`: "";
+		const customFile1 = cssFile ? `@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/${cssFile}";`: "";
 		const customFile2 = cssFile ? ninegrid.getCustomPath(this, cssFile) : "";
 
 		//console.log(ninegrid.getCustomPath(this,"nxDialog.css"));
 
 		this.innerHTML = `
 			<style>
-				@import "https://cdn.jsdelivr.net/npm/ninegrid2@${ninegrid.version}/dist/css/nxDialog.css";
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxDialog.css";
 				${ninegrid.getCustomPath(this,"nxDialog.css") || ""}
 				${customFile1 || ""}
 				${customFile2 || ""}
@@ -122253,6 +122253,146 @@ class nxButtons extends nxDiv {
 
 customElements.define("nx-buttons", nxButtons);
 
+class nxModal extends HTMLElement
+{
+	//#owner;
+	#shift;
+
+	constructor () {
+		super();
+	}
+
+	connectedCallback() {
+
+		const v = this.innerHTML;
+		const cssFile = this.getAttribute("css-file");
+		cssFile ? `@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/${cssFile}";`: "";
+		cssFile ? ninegrid.getCustomPath(this, cssFile) : "";
+
+		//console.log(ninegrid.getCustomPath(this,"nxDialog.css"));
+
+		this.innerHTML = `
+		
+			<div>
+				<div class="head">
+					<div class="rect1"></div>
+					<div class="rect2"></div>
+					<div class="rect3"></div>
+					<ng-sphere class="icon" end-fill="#666" size="8"></ng-sphere>
+					<span class="title"></span>
+					<span class="sub-title"></span>
+					<buttons>
+						<ng-sphere class="apply" start-fill="#cc6" end-fill="#660" size="16" title="apply"></ng-sphere>
+						<ng-sphere class="reset" start-fill="#99f" end-fill="#00f" size="16" title="reset"></ng-sphere>
+						<ng-sphere class="close" start-fill="#f99" end-fill="#f00" size="16" title="close"></ng-sphere>
+					</buttons>
+				</div>
+				<div class="contents">
+					<div class="left">
+						<span>가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하</span>
+					</div>
+					<div class="body">
+						${v}
+					</div>
+					<div class="close2">
+						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+							<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
+						</svg>
+					</div>
+				</div>
+			</div>
+		`;
+
+		//$(".title", this).html("Details");
+
+		//this.#init();
+	};
+
+	showModal = () => {
+		this.querySelector('dialog').showModal();
+	};
+
+	close = () => {
+		$(".head", this)	.off('mousedown',	this.#onMouseDown);
+		$(".head", this)	.off('touchstart',	this.#onTouchStart);
+		$(document)			.off('mouseup',		this.#onMouseUp);
+		$(document)			.off('touchend',	this.#onTouchEnd);
+		$(document)			.off('mousemove',	this.#onMouseMove);
+		$(document)			.off("touchmove",	this.#onTouchMove);
+
+		this.querySelector('dialog').close();
+	};
+
+	#init = () => {
+		/**
+		 $(".close,.close2", this).on("click", e => {
+		 ninegrid.j.querySelectorAll('dialog', this).addClass("out");
+		 setTimeout(() => { this.close(); }, 300);
+		 }); */
+
+		$(".close", this).on("click", e => {
+			ninegrid.j.querySelectorAll('dialog', this).addClass("out");
+			setTimeout(() => { this.close(); }, 300);
+		});
+
+		$(".close2", this).on("click", e => {
+			this.close();
+		});
+
+		$(".head", this)	.on('mousedown',	this.#onMouseDown);
+		$(".head", this)	.on('touchstart',	this.#onTouchStart);
+		$(document)			.on('mouseup',		this.#onMouseUp);
+		$(document)			.on('touchend',		this.#onTouchEnd);
+	};
+
+
+	#onMouseDown = e => {
+		if (e.target.closest("buttons")) return;
+		if (e.buttons != 1 || e.altKey || e.ctrlKey || e.shiftkey) return;
+
+		var rect = this.querySelector('dialog').getBoundingClientRect();
+
+		this.#shift = {
+			x : e.clientX - rect.x,
+			y : e.clientY - rect.y,
+		};
+
+		$(document).on('mousemove', this.#onMouseMove);
+	};
+
+
+	#onMouseMove = e => {
+		$(this.querySelector('dialog')).offset( { left : e.pageX - this.#shift.x, top : e.pageY - this.#shift.y });
+	};
+
+	#onMouseUp = e => {
+		$(document).off('mousemove', this.#onMouseMove);
+	};
+
+	#onTouchStart = e => {
+		if (e.target.closest("buttons")) return;
+
+		var rect = this.querySelector('dialog').getBoundingClientRect();
+
+		this.#shift = {
+			x : e.changedTouches[0].pageX - rect.x,
+			y : e.changedTouches[0].pageY - rect.y,
+		};
+
+		$(document).on("touchmove", this.#onTouchMove);
+	};
+
+	#onTouchMove = e => {
+		$(this.querySelector('dialog')).offset( { left : e.changedTouches[0].pageX - this.#shift.x, top : e.changedTouches[0].pageY - this.#shift.y });
+	};
+
+	#onTouchEnd = e => {
+		$(document).off('touchmove', this.#onTouchMove);
+	};
+}
+
+customElements.define("nx-modal", nxModal);
+
 class aiSettings extends HTMLElement
 {
 	constructor() {

package/dist/bundle.esm.js

@@ -119430,14 +119430,14 @@ class nxDialog extends HTMLElement
 
 		const v = this.innerHTML;
 		const cssFile = this.getAttribute("css-file");
-		const customFile1 = cssFile ? `@import "https://cdn.jsdelivr.net/npm/ninegrid2@${ninegrid.version}/dist/css/${cssFile}";`: "";
+		const customFile1 = cssFile ? `@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/${cssFile}";`: "";
 		const customFile2 = cssFile ? ninegrid.getCustomPath(this, cssFile) : "";
 
 		//console.log(ninegrid.getCustomPath(this,"nxDialog.css"));
 
 		this.innerHTML = `
 			<style>
-				@import "https://cdn.jsdelivr.net/npm/ninegrid2@${ninegrid.version}/dist/css/nxDialog.css";
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxDialog.css";
 				${ninegrid.getCustomPath(this,"nxDialog.css") || ""}
 				${customFile1 || ""}
 				${customFile2 || ""}
@@ -122249,6 +122249,146 @@ class nxButtons extends nxDiv {
 
 customElements.define("nx-buttons", nxButtons);
 
+class nxModal extends HTMLElement
+{
+	//#owner;
+	#shift;
+
+	constructor () {
+		super();
+	}
+
+	connectedCallback() {
+
+		const v = this.innerHTML;
+		const cssFile = this.getAttribute("css-file");
+		cssFile ? `@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/${cssFile}";`: "";
+		cssFile ? ninegrid.getCustomPath(this, cssFile) : "";
+
+		//console.log(ninegrid.getCustomPath(this,"nxDialog.css"));
+
+		this.innerHTML = `
+		
+			<div>
+				<div class="head">
+					<div class="rect1"></div>
+					<div class="rect2"></div>
+					<div class="rect3"></div>
+					<ng-sphere class="icon" end-fill="#666" size="8"></ng-sphere>
+					<span class="title"></span>
+					<span class="sub-title"></span>
+					<buttons>
+						<ng-sphere class="apply" start-fill="#cc6" end-fill="#660" size="16" title="apply"></ng-sphere>
+						<ng-sphere class="reset" start-fill="#99f" end-fill="#00f" size="16" title="reset"></ng-sphere>
+						<ng-sphere class="close" start-fill="#f99" end-fill="#f00" size="16" title="close"></ng-sphere>
+					</buttons>
+				</div>
+				<div class="contents">
+					<div class="left">
+						<span>가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하</span>
+					</div>
+					<div class="body">
+						${v}
+					</div>
+					<div class="close2">
+						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+							<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
+						</svg>
+					</div>
+				</div>
+			</div>
+		`;
+
+		//$(".title", this).html("Details");
+
+		//this.#init();
+	};
+
+	showModal = () => {
+		this.querySelector('dialog').showModal();
+	};
+
+	close = () => {
+		$(".head", this)	.off('mousedown',	this.#onMouseDown);
+		$(".head", this)	.off('touchstart',	this.#onTouchStart);
+		$(document)			.off('mouseup',		this.#onMouseUp);
+		$(document)			.off('touchend',	this.#onTouchEnd);
+		$(document)			.off('mousemove',	this.#onMouseMove);
+		$(document)			.off("touchmove",	this.#onTouchMove);
+
+		this.querySelector('dialog').close();
+	};
+
+	#init = () => {
+		/**
+		 $(".close,.close2", this).on("click", e => {
+		 ninegrid.j.querySelectorAll('dialog', this).addClass("out");
+		 setTimeout(() => { this.close(); }, 300);
+		 }); */
+
+		$(".close", this).on("click", e => {
+			ninegrid.j.querySelectorAll('dialog', this).addClass("out");
+			setTimeout(() => { this.close(); }, 300);
+		});
+
+		$(".close2", this).on("click", e => {
+			this.close();
+		});
+
+		$(".head", this)	.on('mousedown',	this.#onMouseDown);
+		$(".head", this)	.on('touchstart',	this.#onTouchStart);
+		$(document)			.on('mouseup',		this.#onMouseUp);
+		$(document)			.on('touchend',		this.#onTouchEnd);
+	};
+
+
+	#onMouseDown = e => {
+		if (e.target.closest("buttons")) return;
+		if (e.buttons != 1 || e.altKey || e.ctrlKey || e.shiftkey) return;
+
+		var rect = this.querySelector('dialog').getBoundingClientRect();
+
+		this.#shift = {
+			x : e.clientX - rect.x,
+			y : e.clientY - rect.y,
+		};
+
+		$(document).on('mousemove', this.#onMouseMove);
+	};
+
+
+	#onMouseMove = e => {
+		$(this.querySelector('dialog')).offset( { left : e.pageX - this.#shift.x, top : e.pageY - this.#shift.y });
+	};
+
+	#onMouseUp = e => {
+		$(document).off('mousemove', this.#onMouseMove);
+	};
+
+	#onTouchStart = e => {
+		if (e.target.closest("buttons")) return;
+
+		var rect = this.querySelector('dialog').getBoundingClientRect();
+
+		this.#shift = {
+			x : e.changedTouches[0].pageX - rect.x,
+			y : e.changedTouches[0].pageY - rect.y,
+		};
+
+		$(document).on("touchmove", this.#onTouchMove);
+	};
+
+	#onTouchMove = e => {
+		$(this.querySelector('dialog')).offset( { left : e.changedTouches[0].pageX - this.#shift.x, top : e.changedTouches[0].pageY - this.#shift.y });
+	};
+
+	#onTouchEnd = e => {
+		$(document).off('touchmove', this.#onTouchMove);
+	};
+}
+
+customElements.define("nx-modal", nxModal);
+
 class aiSettings extends HTMLElement
 {
 	constructor() {

package/dist/etc/nxDialog.js

@@ -13,14 +13,14 @@ class nxDialog extends HTMLElement
 
 		const v = this.innerHTML;
 		const cssFile = this.getAttribute("css-file");
-		const customFile1 = cssFile ? `@import "https://cdn.jsdelivr.net/npm/ninegrid2@${ninegrid.version}/dist/css/${cssFile}";`: "";
+		const customFile1 = cssFile ? `@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/${cssFile}";`: "";
 		const customFile2 = cssFile ? ninegrid.getCustomPath(this, cssFile) : "";
 
 		//console.log(ninegrid.getCustomPath(this,"nxDialog.css"));
 
 		this.innerHTML = `
 			<style>
-				@import "https://cdn.jsdelivr.net/npm/ninegrid2@${ninegrid.version}/dist/css/nxDialog.css";
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxDialog.css";
 				${ninegrid.getCustomPath(this,"nxDialog.css") || ""}
 				${customFile1 || ""}
 				${customFile2 || ""}

package/dist/index.js

@@ -111,6 +111,7 @@ import "./nx/nxLayout.js";
 import "./nx/nxLayout2.js";
 import "./nx/nxPanel.js";
 import "./nx/nxButtons.js";
+import "./nx/nxModal.js";
 
 import "./ai/aiSettings.js";
 import "./ai/aiMessage.js";

package/dist/nx/nxModal.js

@@ -0,0 +1,141 @@
+import ninegrid from "../index.js";
+
+class nxModal extends HTMLElement
+{
+	//#owner;
+	#shift;
+
+	constructor () {
+		super();
+	}
+
+	connectedCallback() {
+
+		const v = this.innerHTML;
+		const cssFile = this.getAttribute("css-file");
+		const customFile1 = cssFile ? `@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/${cssFile}";`: "";
+		const customFile2 = cssFile ? ninegrid.getCustomPath(this, cssFile) : "";
+
+		//console.log(ninegrid.getCustomPath(this,"nxDialog.css"));
+
+		this.innerHTML = `
+		
+			<div>
+				<div class="head">
+					<div class="rect1"></div>
+					<div class="rect2"></div>
+					<div class="rect3"></div>
+					<ng-sphere class="icon" end-fill="#666" size="8"></ng-sphere>
+					<span class="title"></span>
+					<span class="sub-title"></span>
+					<buttons>
+						<ng-sphere class="apply" start-fill="#cc6" end-fill="#660" size="16" title="apply"></ng-sphere>
+						<ng-sphere class="reset" start-fill="#99f" end-fill="#00f" size="16" title="reset"></ng-sphere>
+						<ng-sphere class="close" start-fill="#f99" end-fill="#f00" size="16" title="close"></ng-sphere>
+					</buttons>
+				</div>
+				<div class="contents">
+					<div class="left">
+						<span>가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하</span>
+					</div>
+					<div class="body">
+						${v}
+					</div>
+					<div class="close2">
+						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+							<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
+						</svg>
+					</div>
+				</div>
+			</div>
+		`;
+
+		//$(".title", this).html("Details");
+
+		//this.#init();
+	};
+
+	showModal = () => {
+		this.querySelector('dialog').showModal();
+	};
+
+	close = () => {
+		$(".head", this)	.off('mousedown',	this.#onMouseDown);
+		$(".head", this)	.off('touchstart',	this.#onTouchStart);
+		$(document)			.off('mouseup',		this.#onMouseUp);
+		$(document)			.off('touchend',	this.#onTouchEnd);
+		$(document)			.off('mousemove',	this.#onMouseMove);
+		$(document)			.off("touchmove",	this.#onTouchMove);
+
+		this.querySelector('dialog').close();
+	};
+
+	#init = () => {
+		/**
+		 $(".close,.close2", this).on("click", e => {
+		 ninegrid.j.querySelectorAll('dialog', this).addClass("out");
+		 setTimeout(() => { this.close(); }, 300);
+		 }); */
+
+		$(".close", this).on("click", e => {
+			ninegrid.j.querySelectorAll('dialog', this).addClass("out");
+			setTimeout(() => { this.close(); }, 300);
+		});
+
+		$(".close2", this).on("click", e => {
+			this.close();
+		});
+
+		$(".head", this)	.on('mousedown',	this.#onMouseDown);
+		$(".head", this)	.on('touchstart',	this.#onTouchStart);
+		$(document)			.on('mouseup',		this.#onMouseUp);
+		$(document)			.on('touchend',		this.#onTouchEnd);
+	};
+
+
+	#onMouseDown = e => {
+		if (e.target.closest("buttons")) return;
+		if (e.buttons != 1 || e.altKey || e.ctrlKey || e.shiftkey) return;
+
+		var rect = this.querySelector('dialog').getBoundingClientRect();
+
+		this.#shift = {
+			x : e.clientX - rect.x,
+			y : e.clientY - rect.y,
+		}
+
+		$(document).on('mousemove', this.#onMouseMove);
+	};
+
+
+	#onMouseMove = e => {
+		$(this.querySelector('dialog')).offset( { left : e.pageX - this.#shift.x, top : e.pageY - this.#shift.y });
+	};
+
+	#onMouseUp = e => {
+		$(document).off('mousemove', this.#onMouseMove);
+	};
+
+	#onTouchStart = e => {
+		if (e.target.closest("buttons")) return;
+
+		var rect = this.querySelector('dialog').getBoundingClientRect();
+
+		this.#shift = {
+			x : e.changedTouches[0].pageX - rect.x,
+			y : e.changedTouches[0].pageY - rect.y,
+		}
+
+		$(document).on("touchmove", this.#onTouchMove);
+	};
+
+	#onTouchMove = e => {
+		$(this.querySelector('dialog')).offset( { left : e.changedTouches[0].pageX - this.#shift.x, top : e.changedTouches[0].pageY - this.#shift.y });
+	};
+
+	#onTouchEnd = e => {
+		$(document).off('touchmove', this.#onTouchMove);
+	};
+}
+
+customElements.define("nx-modal", nxModal);

package/package.json

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

package/src/etc/nxDialog.js

@@ -13,14 +13,14 @@ class nxDialog extends HTMLElement
 
 		const v = this.innerHTML;
 		const cssFile = this.getAttribute("css-file");
-		const customFile1 = cssFile ? `@import "https://cdn.jsdelivr.net/npm/ninegrid2@${ninegrid.version}/dist/css/${cssFile}";`: "";
+		const customFile1 = cssFile ? `@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/${cssFile}";`: "";
 		const customFile2 = cssFile ? ninegrid.getCustomPath(this, cssFile) : "";
 
 		//console.log(ninegrid.getCustomPath(this,"nxDialog.css"));
 
 		this.innerHTML = `
 			<style>
-				@import "https://cdn.jsdelivr.net/npm/ninegrid2@${ninegrid.version}/dist/css/nxDialog.css";
+				@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxDialog.css";
 				${ninegrid.getCustomPath(this,"nxDialog.css") || ""}
 				${customFile1 || ""}
 				${customFile2 || ""}

package/src/index.js

@@ -111,6 +111,7 @@ import "./nx/nxLayout.js";
 import "./nx/nxLayout2.js";
 import "./nx/nxPanel.js";
 import "./nx/nxButtons.js";
+import "./nx/nxModal.js";
 
 import "./ai/aiSettings.js";
 import "./ai/aiMessage.js";

package/src/nx/nxModal.js

@@ -0,0 +1,141 @@
+import ninegrid from "../index.js";
+
+class nxModal extends HTMLElement
+{
+	//#owner;
+	#shift;
+
+	constructor () {
+		super();
+	}
+
+	connectedCallback() {
+
+		const v = this.innerHTML;
+		const cssFile = this.getAttribute("css-file");
+		const customFile1 = cssFile ? `@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/${cssFile}";`: "";
+		const customFile2 = cssFile ? ninegrid.getCustomPath(this, cssFile) : "";
+
+		//console.log(ninegrid.getCustomPath(this,"nxDialog.css"));
+
+		this.innerHTML = `
+		
+			<div>
+				<div class="head">
+					<div class="rect1"></div>
+					<div class="rect2"></div>
+					<div class="rect3"></div>
+					<ng-sphere class="icon" end-fill="#666" size="8"></ng-sphere>
+					<span class="title"></span>
+					<span class="sub-title"></span>
+					<buttons>
+						<ng-sphere class="apply" start-fill="#cc6" end-fill="#660" size="16" title="apply"></ng-sphere>
+						<ng-sphere class="reset" start-fill="#99f" end-fill="#00f" size="16" title="reset"></ng-sphere>
+						<ng-sphere class="close" start-fill="#f99" end-fill="#f00" size="16" title="close"></ng-sphere>
+					</buttons>
+				</div>
+				<div class="contents">
+					<div class="left">
+						<span>가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하</span>
+					</div>
+					<div class="body">
+						${v}
+					</div>
+					<div class="close2">
+						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+							<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
+						</svg>
+					</div>
+				</div>
+			</div>
+		`;
+
+		//$(".title", this).html("Details");
+
+		//this.#init();
+	};
+
+	showModal = () => {
+		this.querySelector('dialog').showModal();
+	};
+
+	close = () => {
+		$(".head", this)	.off('mousedown',	this.#onMouseDown);
+		$(".head", this)	.off('touchstart',	this.#onTouchStart);
+		$(document)			.off('mouseup',		this.#onMouseUp);
+		$(document)			.off('touchend',	this.#onTouchEnd);
+		$(document)			.off('mousemove',	this.#onMouseMove);
+		$(document)			.off("touchmove",	this.#onTouchMove);
+
+		this.querySelector('dialog').close();
+	};
+
+	#init = () => {
+		/**
+		 $(".close,.close2", this).on("click", e => {
+		 ninegrid.j.querySelectorAll('dialog', this).addClass("out");
+		 setTimeout(() => { this.close(); }, 300);
+		 }); */
+
+		$(".close", this).on("click", e => {
+			ninegrid.j.querySelectorAll('dialog', this).addClass("out");
+			setTimeout(() => { this.close(); }, 300);
+		});
+
+		$(".close2", this).on("click", e => {
+			this.close();
+		});
+
+		$(".head", this)	.on('mousedown',	this.#onMouseDown);
+		$(".head", this)	.on('touchstart',	this.#onTouchStart);
+		$(document)			.on('mouseup',		this.#onMouseUp);
+		$(document)			.on('touchend',		this.#onTouchEnd);
+	};
+
+
+	#onMouseDown = e => {
+		if (e.target.closest("buttons")) return;
+		if (e.buttons != 1 || e.altKey || e.ctrlKey || e.shiftkey) return;
+
+		var rect = this.querySelector('dialog').getBoundingClientRect();
+
+		this.#shift = {
+			x : e.clientX - rect.x,
+			y : e.clientY - rect.y,
+		}
+
+		$(document).on('mousemove', this.#onMouseMove);
+	};
+
+
+	#onMouseMove = e => {
+		$(this.querySelector('dialog')).offset( { left : e.pageX - this.#shift.x, top : e.pageY - this.#shift.y });
+	};
+
+	#onMouseUp = e => {
+		$(document).off('mousemove', this.#onMouseMove);
+	};
+
+	#onTouchStart = e => {
+		if (e.target.closest("buttons")) return;
+
+		var rect = this.querySelector('dialog').getBoundingClientRect();
+
+		this.#shift = {
+			x : e.changedTouches[0].pageX - rect.x,
+			y : e.changedTouches[0].pageY - rect.y,
+		}
+
+		$(document).on("touchmove", this.#onTouchMove);
+	};
+
+	#onTouchMove = e => {
+		$(this.querySelector('dialog')).offset( { left : e.changedTouches[0].pageX - this.#shift.x, top : e.changedTouches[0].pageY - this.#shift.y });
+	};
+
+	#onTouchEnd = e => {
+		$(document).off('touchmove', this.#onTouchMove);
+	};
+}
+
+customElements.define("nx-modal", nxModal);