ninegrid2 6.897.0 → 6.899.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.
- package/dist/bundle.cjs.js +65 -83
- package/dist/bundle.esm.js +65 -83
- package/dist/etc/nxDialog.js +67 -85
- package/package.json +1 -1
- package/src/etc/nxDialog.js +67 -85
package/dist/bundle.cjs.js
CHANGED
|
@@ -119326,109 +119326,91 @@ class nxDialog extends HTMLElement
|
|
|
119326
119326
|
|
|
119327
119327
|
const v = this.innerHTML;
|
|
119328
119328
|
const cssFile = this.getAttribute("css-file");
|
|
119329
|
-
|
|
119330
|
-
// ninegrid.getCustomPath에서 이미 "nxDialog.css"를 가져오는 로직이 있으므로
|
|
119331
|
-
// 이 부분을 간소화할 수 있습니다.
|
|
119332
|
-
// 여기서는 현재 코드를 최대한 유지하면서 fadeIn/fadeOut만 추가합니다.
|
|
119333
|
-
const customFile1 = cssFile ? `@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/${cssFile}";` : "";
|
|
119329
|
+
const customFile1 = cssFile ? `@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/${cssFile}";`: "";
|
|
119334
119330
|
const customFile2 = cssFile ? ninegrid.getCustomPath(this, cssFile) : "";
|
|
119335
119331
|
|
|
119332
|
+
//console.log(ninegrid.getCustomPath(this,"nxDialog.css"));
|
|
119333
|
+
|
|
119336
119334
|
this.innerHTML = `
|
|
119337
|
-
|
|
119338
|
-
|
|
119339
|
-
|
|
119340
|
-
|
|
119341
|
-
|
|
119342
|
-
|
|
119343
|
-
|
|
119344
|
-
|
|
119345
|
-
|
|
119346
|
-
|
|
119347
|
-
|
|
119348
|
-
|
|
119349
|
-
|
|
119350
|
-
|
|
119351
|
-
|
|
119352
|
-
|
|
119353
|
-
|
|
119354
|
-
|
|
119355
|
-
|
|
119356
|
-
|
|
119357
|
-
|
|
119358
|
-
|
|
119359
|
-
|
|
119360
|
-
|
|
119361
|
-
|
|
119362
|
-
|
|
119363
|
-
|
|
119364
|
-
|
|
119365
|
-
|
|
119366
|
-
|
|
119367
|
-
|
|
119368
|
-
|
|
119369
|
-
|
|
119370
|
-
|
|
119371
|
-
|
|
119372
|
-
|
|
119335
|
+
<style>
|
|
119336
|
+
@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxDialog.css";
|
|
119337
|
+
${ninegrid.getCustomPath(this,"nxDialog.css") || ""}
|
|
119338
|
+
${customFile1 || ""}
|
|
119339
|
+
${customFile2 || ""}
|
|
119340
|
+
</style>
|
|
119341
|
+
|
|
119342
|
+
<dialog>
|
|
119343
|
+
<div class="head">
|
|
119344
|
+
<div class="rect1"></div>
|
|
119345
|
+
<div class="rect2"></div>
|
|
119346
|
+
<div class="rect3"></div>
|
|
119347
|
+
<ng-sphere class="icon" end-fill="#666" size="8"></ng-sphere>
|
|
119348
|
+
<span class="title"></span>
|
|
119349
|
+
<span class="sub-title"></span>
|
|
119350
|
+
<buttons>
|
|
119351
|
+
<ng-sphere class="apply" start-fill="#cc6" end-fill="#660" size="16" title="apply"></ng-sphere>
|
|
119352
|
+
<ng-sphere class="reset" start-fill="#99f" end-fill="#00f" size="16" title="reset"></ng-sphere>
|
|
119353
|
+
<ng-sphere class="close" start-fill="#f99" end-fill="#f00" size="16" title="close"></ng-sphere>
|
|
119354
|
+
</buttons>
|
|
119355
|
+
</div>
|
|
119356
|
+
<div class="contents">
|
|
119357
|
+
<div class="left">
|
|
119358
|
+
<span>가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하</span>
|
|
119359
|
+
</div>
|
|
119360
|
+
<div class="body">
|
|
119361
|
+
${v}
|
|
119362
|
+
</div>
|
|
119363
|
+
<div class="close2">
|
|
119364
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
119365
|
+
<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"/>
|
|
119366
|
+
</svg>
|
|
119367
|
+
</div>
|
|
119368
|
+
</div>
|
|
119369
|
+
</dialog>
|
|
119370
|
+
`;
|
|
119371
|
+
|
|
119372
|
+
//this.#owner = this.getRootNode().host.closest("nine-grid");
|
|
119373
119373
|
|
|
119374
119374
|
$(".title", this).html("Details");
|
|
119375
|
+
|
|
119375
119376
|
this.#init();
|
|
119376
119377
|
};
|
|
119377
119378
|
|
|
119378
|
-
// showModal 메서드 수정
|
|
119379
119379
|
showModal = () => {
|
|
119380
|
-
|
|
119381
|
-
|
|
119382
|
-
// 다이얼로그가 열릴 때 ':host(.fade)' CSS 클래스를 추가합니다.
|
|
119383
|
-
// ':host'는 커스텀 엘리먼트 자체(nx-dialog)를 의미합니다.
|
|
119384
|
-
this.classList.add('fade');
|
|
119385
|
-
|
|
119386
|
-
// 애니메이션이 끝나고 나서 showModal을 호출하도록 setTimeout을 사용할 수도 있지만,
|
|
119387
|
-
// CSS 애니메이션은 자동으로 시작되므로 이 방식이 더 간단합니다.
|
|
119388
|
-
dialogElement.showModal();
|
|
119380
|
+
this.querySelector('dialog').showModal();
|
|
119389
119381
|
};
|
|
119390
119382
|
|
|
119391
|
-
// close 메서드 수정
|
|
119392
119383
|
close = () => {
|
|
119393
|
-
|
|
119384
|
+
$(".head", this) .off('mousedown', this.#onMouseDown);
|
|
119385
|
+
$(".head", this) .off('touchstart', this.#onTouchStart);
|
|
119386
|
+
$(document) .off('mouseup', this.#onMouseUp);
|
|
119387
|
+
$(document) .off('touchend', this.#onTouchEnd);
|
|
119388
|
+
$(document) .off('mousemove', this.#onMouseMove);
|
|
119389
|
+
$(document) .off("touchmove", this.#onTouchMove);
|
|
119394
119390
|
|
|
119395
|
-
|
|
119396
|
-
dialogElement.classList.add("out");
|
|
119397
|
-
|
|
119398
|
-
// CSS 애니메이션 지속 시간 (1000ms = 1초) 후에 dialog.close()를 호출하여 실제로 닫습니다.
|
|
119399
|
-
// 이는 CSS의 fadeOut 애니메이션 지속 시간과 일치해야 합니다.
|
|
119400
|
-
// nxDialog.css의 @keyframes fadeOut { ... } 에 명시된 animation-duration을 확인하세요.
|
|
119401
|
-
// 현재 CSS에는 dialog.out에 대한 animation-duration이 없으므로, 명시적으로 1초를 가정합니다.
|
|
119402
|
-
// 만약 다른 애니메이션 (.run, .moveUp 등)과 동시에 사용된다면 이 부분은 더 복잡해질 수 있습니다.
|
|
119403
|
-
setTimeout(() => {
|
|
119404
|
-
// 이벤트 리스너 제거는 dialog가 완전히 닫힌 후에 하는 것이 안전합니다.
|
|
119405
|
-
// 그렇지 않으면 애니메이션 도중 클릭 등이 작동하지 않을 수 있습니다.
|
|
119406
|
-
$(".head", this) .off('mousedown', this.#onMouseDown);
|
|
119407
|
-
$(".head", this) .off('touchstart', this.#onTouchStart);
|
|
119408
|
-
$(document) .off('mouseup', this.#onMouseUp);
|
|
119409
|
-
$(document) .off('touchend', this.#onTouchEnd);
|
|
119410
|
-
$(document) .off('mousemove', this.#onMouseMove);
|
|
119411
|
-
$(document) .off("touchmove", this.#onTouchMove);
|
|
119412
|
-
|
|
119413
|
-
dialogElement.close();
|
|
119414
|
-
// 다이얼로그가 닫힌 후에는 애니메이션 클래스를 제거하여 다음 번에 열릴 때
|
|
119415
|
-
// 다시 애니메이션이 적용될 수 있도록 합니다.
|
|
119416
|
-
dialogElement.classList.remove("out");
|
|
119417
|
-
this.classList.remove('fade'); // 호스트 요소에서도 'fade' 클래스 제거
|
|
119418
|
-
}, 1000); // fadeOut 애니메이션 지속 시간에 맞춥니다 (현재 CSS에서 1초로 정의됨)
|
|
119391
|
+
this.querySelector('dialog').close();
|
|
119419
119392
|
};
|
|
119420
119393
|
|
|
119421
119394
|
#init = () => {
|
|
119422
|
-
|
|
119395
|
+
/**
|
|
119396
|
+
$(".close,.close2", this).on("click", e => {
|
|
119397
|
+
ninegrid.j.querySelectorAll('dialog', this).addClass("out");
|
|
119398
|
+
setTimeout(() => { this.close(); }, 300);
|
|
119399
|
+
}); */
|
|
119400
|
+
|
|
119401
|
+
$(".close", this).on("click", e => {
|
|
119402
|
+
ninegrid.j.querySelectorAll('dialog', this).addClass("out");
|
|
119403
|
+
setTimeout(() => { this.close(); }, 300);
|
|
119404
|
+
});
|
|
119405
|
+
|
|
119423
119406
|
$(".close,.close2", this).on("click", e => {
|
|
119424
|
-
// 이전에 여기에 있던 'dialog.out' 클래스 추가 로직은 이제 close() 메서드 안으로 들어갑니다.
|
|
119425
119407
|
this.close();
|
|
119426
119408
|
});
|
|
119427
119409
|
|
|
119428
|
-
$(".head", this)
|
|
119429
|
-
$(".head", this)
|
|
119430
|
-
$(document)
|
|
119431
|
-
$(document)
|
|
119410
|
+
$(".head", this) .on('mousedown', this.#onMouseDown);
|
|
119411
|
+
$(".head", this) .on('touchstart', this.#onTouchStart);
|
|
119412
|
+
$(document) .on('mouseup', this.#onMouseUp);
|
|
119413
|
+
$(document) .on('touchend', this.#onTouchEnd);
|
|
119432
119414
|
};
|
|
119433
119415
|
|
|
119434
119416
|
|
package/dist/bundle.esm.js
CHANGED
|
@@ -119322,109 +119322,91 @@ class nxDialog extends HTMLElement
|
|
|
119322
119322
|
|
|
119323
119323
|
const v = this.innerHTML;
|
|
119324
119324
|
const cssFile = this.getAttribute("css-file");
|
|
119325
|
-
|
|
119326
|
-
// ninegrid.getCustomPath에서 이미 "nxDialog.css"를 가져오는 로직이 있으므로
|
|
119327
|
-
// 이 부분을 간소화할 수 있습니다.
|
|
119328
|
-
// 여기서는 현재 코드를 최대한 유지하면서 fadeIn/fadeOut만 추가합니다.
|
|
119329
|
-
const customFile1 = cssFile ? `@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/${cssFile}";` : "";
|
|
119325
|
+
const customFile1 = cssFile ? `@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/${cssFile}";`: "";
|
|
119330
119326
|
const customFile2 = cssFile ? ninegrid.getCustomPath(this, cssFile) : "";
|
|
119331
119327
|
|
|
119328
|
+
//console.log(ninegrid.getCustomPath(this,"nxDialog.css"));
|
|
119329
|
+
|
|
119332
119330
|
this.innerHTML = `
|
|
119333
|
-
|
|
119334
|
-
|
|
119335
|
-
|
|
119336
|
-
|
|
119337
|
-
|
|
119338
|
-
|
|
119339
|
-
|
|
119340
|
-
|
|
119341
|
-
|
|
119342
|
-
|
|
119343
|
-
|
|
119344
|
-
|
|
119345
|
-
|
|
119346
|
-
|
|
119347
|
-
|
|
119348
|
-
|
|
119349
|
-
|
|
119350
|
-
|
|
119351
|
-
|
|
119352
|
-
|
|
119353
|
-
|
|
119354
|
-
|
|
119355
|
-
|
|
119356
|
-
|
|
119357
|
-
|
|
119358
|
-
|
|
119359
|
-
|
|
119360
|
-
|
|
119361
|
-
|
|
119362
|
-
|
|
119363
|
-
|
|
119364
|
-
|
|
119365
|
-
|
|
119366
|
-
|
|
119367
|
-
|
|
119368
|
-
|
|
119331
|
+
<style>
|
|
119332
|
+
@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxDialog.css";
|
|
119333
|
+
${ninegrid.getCustomPath(this,"nxDialog.css") || ""}
|
|
119334
|
+
${customFile1 || ""}
|
|
119335
|
+
${customFile2 || ""}
|
|
119336
|
+
</style>
|
|
119337
|
+
|
|
119338
|
+
<dialog>
|
|
119339
|
+
<div class="head">
|
|
119340
|
+
<div class="rect1"></div>
|
|
119341
|
+
<div class="rect2"></div>
|
|
119342
|
+
<div class="rect3"></div>
|
|
119343
|
+
<ng-sphere class="icon" end-fill="#666" size="8"></ng-sphere>
|
|
119344
|
+
<span class="title"></span>
|
|
119345
|
+
<span class="sub-title"></span>
|
|
119346
|
+
<buttons>
|
|
119347
|
+
<ng-sphere class="apply" start-fill="#cc6" end-fill="#660" size="16" title="apply"></ng-sphere>
|
|
119348
|
+
<ng-sphere class="reset" start-fill="#99f" end-fill="#00f" size="16" title="reset"></ng-sphere>
|
|
119349
|
+
<ng-sphere class="close" start-fill="#f99" end-fill="#f00" size="16" title="close"></ng-sphere>
|
|
119350
|
+
</buttons>
|
|
119351
|
+
</div>
|
|
119352
|
+
<div class="contents">
|
|
119353
|
+
<div class="left">
|
|
119354
|
+
<span>가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하</span>
|
|
119355
|
+
</div>
|
|
119356
|
+
<div class="body">
|
|
119357
|
+
${v}
|
|
119358
|
+
</div>
|
|
119359
|
+
<div class="close2">
|
|
119360
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
119361
|
+
<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"/>
|
|
119362
|
+
</svg>
|
|
119363
|
+
</div>
|
|
119364
|
+
</div>
|
|
119365
|
+
</dialog>
|
|
119366
|
+
`;
|
|
119367
|
+
|
|
119368
|
+
//this.#owner = this.getRootNode().host.closest("nine-grid");
|
|
119369
119369
|
|
|
119370
119370
|
$(".title", this).html("Details");
|
|
119371
|
+
|
|
119371
119372
|
this.#init();
|
|
119372
119373
|
};
|
|
119373
119374
|
|
|
119374
|
-
// showModal 메서드 수정
|
|
119375
119375
|
showModal = () => {
|
|
119376
|
-
|
|
119377
|
-
|
|
119378
|
-
// 다이얼로그가 열릴 때 ':host(.fade)' CSS 클래스를 추가합니다.
|
|
119379
|
-
// ':host'는 커스텀 엘리먼트 자체(nx-dialog)를 의미합니다.
|
|
119380
|
-
this.classList.add('fade');
|
|
119381
|
-
|
|
119382
|
-
// 애니메이션이 끝나고 나서 showModal을 호출하도록 setTimeout을 사용할 수도 있지만,
|
|
119383
|
-
// CSS 애니메이션은 자동으로 시작되므로 이 방식이 더 간단합니다.
|
|
119384
|
-
dialogElement.showModal();
|
|
119376
|
+
this.querySelector('dialog').showModal();
|
|
119385
119377
|
};
|
|
119386
119378
|
|
|
119387
|
-
// close 메서드 수정
|
|
119388
119379
|
close = () => {
|
|
119389
|
-
|
|
119380
|
+
$(".head", this) .off('mousedown', this.#onMouseDown);
|
|
119381
|
+
$(".head", this) .off('touchstart', this.#onTouchStart);
|
|
119382
|
+
$(document) .off('mouseup', this.#onMouseUp);
|
|
119383
|
+
$(document) .off('touchend', this.#onTouchEnd);
|
|
119384
|
+
$(document) .off('mousemove', this.#onMouseMove);
|
|
119385
|
+
$(document) .off("touchmove", this.#onTouchMove);
|
|
119390
119386
|
|
|
119391
|
-
|
|
119392
|
-
dialogElement.classList.add("out");
|
|
119393
|
-
|
|
119394
|
-
// CSS 애니메이션 지속 시간 (1000ms = 1초) 후에 dialog.close()를 호출하여 실제로 닫습니다.
|
|
119395
|
-
// 이는 CSS의 fadeOut 애니메이션 지속 시간과 일치해야 합니다.
|
|
119396
|
-
// nxDialog.css의 @keyframes fadeOut { ... } 에 명시된 animation-duration을 확인하세요.
|
|
119397
|
-
// 현재 CSS에는 dialog.out에 대한 animation-duration이 없으므로, 명시적으로 1초를 가정합니다.
|
|
119398
|
-
// 만약 다른 애니메이션 (.run, .moveUp 등)과 동시에 사용된다면 이 부분은 더 복잡해질 수 있습니다.
|
|
119399
|
-
setTimeout(() => {
|
|
119400
|
-
// 이벤트 리스너 제거는 dialog가 완전히 닫힌 후에 하는 것이 안전합니다.
|
|
119401
|
-
// 그렇지 않으면 애니메이션 도중 클릭 등이 작동하지 않을 수 있습니다.
|
|
119402
|
-
$(".head", this) .off('mousedown', this.#onMouseDown);
|
|
119403
|
-
$(".head", this) .off('touchstart', this.#onTouchStart);
|
|
119404
|
-
$(document) .off('mouseup', this.#onMouseUp);
|
|
119405
|
-
$(document) .off('touchend', this.#onTouchEnd);
|
|
119406
|
-
$(document) .off('mousemove', this.#onMouseMove);
|
|
119407
|
-
$(document) .off("touchmove", this.#onTouchMove);
|
|
119408
|
-
|
|
119409
|
-
dialogElement.close();
|
|
119410
|
-
// 다이얼로그가 닫힌 후에는 애니메이션 클래스를 제거하여 다음 번에 열릴 때
|
|
119411
|
-
// 다시 애니메이션이 적용될 수 있도록 합니다.
|
|
119412
|
-
dialogElement.classList.remove("out");
|
|
119413
|
-
this.classList.remove('fade'); // 호스트 요소에서도 'fade' 클래스 제거
|
|
119414
|
-
}, 1000); // fadeOut 애니메이션 지속 시간에 맞춥니다 (현재 CSS에서 1초로 정의됨)
|
|
119387
|
+
this.querySelector('dialog').close();
|
|
119415
119388
|
};
|
|
119416
119389
|
|
|
119417
119390
|
#init = () => {
|
|
119418
|
-
|
|
119391
|
+
/**
|
|
119392
|
+
$(".close,.close2", this).on("click", e => {
|
|
119393
|
+
ninegrid.j.querySelectorAll('dialog', this).addClass("out");
|
|
119394
|
+
setTimeout(() => { this.close(); }, 300);
|
|
119395
|
+
}); */
|
|
119396
|
+
|
|
119397
|
+
$(".close", this).on("click", e => {
|
|
119398
|
+
ninegrid.j.querySelectorAll('dialog', this).addClass("out");
|
|
119399
|
+
setTimeout(() => { this.close(); }, 300);
|
|
119400
|
+
});
|
|
119401
|
+
|
|
119419
119402
|
$(".close,.close2", this).on("click", e => {
|
|
119420
|
-
// 이전에 여기에 있던 'dialog.out' 클래스 추가 로직은 이제 close() 메서드 안으로 들어갑니다.
|
|
119421
119403
|
this.close();
|
|
119422
119404
|
});
|
|
119423
119405
|
|
|
119424
|
-
$(".head", this)
|
|
119425
|
-
$(".head", this)
|
|
119426
|
-
$(document)
|
|
119427
|
-
$(document)
|
|
119406
|
+
$(".head", this) .on('mousedown', this.#onMouseDown);
|
|
119407
|
+
$(".head", this) .on('touchstart', this.#onTouchStart);
|
|
119408
|
+
$(document) .on('mouseup', this.#onMouseUp);
|
|
119409
|
+
$(document) .on('touchend', this.#onTouchEnd);
|
|
119428
119410
|
};
|
|
119429
119411
|
|
|
119430
119412
|
|
package/dist/etc/nxDialog.js
CHANGED
|
@@ -13,109 +13,91 @@ class nxDialog extends HTMLElement
|
|
|
13
13
|
|
|
14
14
|
const v = this.innerHTML;
|
|
15
15
|
const cssFile = this.getAttribute("css-file");
|
|
16
|
-
|
|
17
|
-
// ninegrid.getCustomPath에서 이미 "nxDialog.css"를 가져오는 로직이 있으므로
|
|
18
|
-
// 이 부분을 간소화할 수 있습니다.
|
|
19
|
-
// 여기서는 현재 코드를 최대한 유지하면서 fadeIn/fadeOut만 추가합니다.
|
|
20
|
-
const customFile1 = cssFile ? `@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/${cssFile}";` : "";
|
|
16
|
+
const customFile1 = cssFile ? `@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/${cssFile}";`: "";
|
|
21
17
|
const customFile2 = cssFile ? ninegrid.getCustomPath(this, cssFile) : "";
|
|
22
18
|
|
|
19
|
+
//console.log(ninegrid.getCustomPath(this,"nxDialog.css"));
|
|
20
|
+
|
|
23
21
|
this.innerHTML = `
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
22
|
+
<style>
|
|
23
|
+
@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxDialog.css";
|
|
24
|
+
${ninegrid.getCustomPath(this,"nxDialog.css") || ""}
|
|
25
|
+
${customFile1 || ""}
|
|
26
|
+
${customFile2 || ""}
|
|
27
|
+
</style>
|
|
28
|
+
|
|
29
|
+
<dialog>
|
|
30
|
+
<div class="head">
|
|
31
|
+
<div class="rect1"></div>
|
|
32
|
+
<div class="rect2"></div>
|
|
33
|
+
<div class="rect3"></div>
|
|
34
|
+
<ng-sphere class="icon" end-fill="#666" size="8"></ng-sphere>
|
|
35
|
+
<span class="title"></span>
|
|
36
|
+
<span class="sub-title"></span>
|
|
37
|
+
<buttons>
|
|
38
|
+
<ng-sphere class="apply" start-fill="#cc6" end-fill="#660" size="16" title="apply"></ng-sphere>
|
|
39
|
+
<ng-sphere class="reset" start-fill="#99f" end-fill="#00f" size="16" title="reset"></ng-sphere>
|
|
40
|
+
<ng-sphere class="close" start-fill="#f99" end-fill="#f00" size="16" title="close"></ng-sphere>
|
|
41
|
+
</buttons>
|
|
42
|
+
</div>
|
|
43
|
+
<div class="contents">
|
|
44
|
+
<div class="left">
|
|
45
|
+
<span>가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하</span>
|
|
46
|
+
</div>
|
|
47
|
+
<div class="body">
|
|
48
|
+
${v}
|
|
49
|
+
</div>
|
|
50
|
+
<div class="close2">
|
|
51
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
52
|
+
<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"/>
|
|
53
|
+
</svg>
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
56
|
+
</dialog>
|
|
57
|
+
`;
|
|
58
|
+
|
|
59
|
+
//this.#owner = this.getRootNode().host.closest("nine-grid");
|
|
60
60
|
|
|
61
61
|
$(".title", this).html("Details");
|
|
62
|
+
|
|
62
63
|
this.#init();
|
|
63
64
|
};
|
|
64
65
|
|
|
65
|
-
// showModal 메서드 수정
|
|
66
66
|
showModal = () => {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
// 다이얼로그가 열릴 때 ':host(.fade)' CSS 클래스를 추가합니다.
|
|
70
|
-
// ':host'는 커스텀 엘리먼트 자체(nx-dialog)를 의미합니다.
|
|
71
|
-
this.classList.add('fade');
|
|
72
|
-
|
|
73
|
-
// 애니메이션이 끝나고 나서 showModal을 호출하도록 setTimeout을 사용할 수도 있지만,
|
|
74
|
-
// CSS 애니메이션은 자동으로 시작되므로 이 방식이 더 간단합니다.
|
|
75
|
-
dialogElement.showModal();
|
|
67
|
+
this.querySelector('dialog').showModal();
|
|
76
68
|
};
|
|
77
69
|
|
|
78
|
-
// close 메서드 수정
|
|
79
70
|
close = () => {
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
// 현재 CSS에는 dialog.out에 대한 animation-duration이 없으므로, 명시적으로 1초를 가정합니다.
|
|
89
|
-
// 만약 다른 애니메이션 (.run, .moveUp 등)과 동시에 사용된다면 이 부분은 더 복잡해질 수 있습니다.
|
|
90
|
-
setTimeout(() => {
|
|
91
|
-
// 이벤트 리스너 제거는 dialog가 완전히 닫힌 후에 하는 것이 안전합니다.
|
|
92
|
-
// 그렇지 않으면 애니메이션 도중 클릭 등이 작동하지 않을 수 있습니다.
|
|
93
|
-
$(".head", this) .off('mousedown', this.#onMouseDown);
|
|
94
|
-
$(".head", this) .off('touchstart', this.#onTouchStart);
|
|
95
|
-
$(document) .off('mouseup', this.#onMouseUp);
|
|
96
|
-
$(document) .off('touchend', this.#onTouchEnd);
|
|
97
|
-
$(document) .off('mousemove', this.#onMouseMove);
|
|
98
|
-
$(document) .off("touchmove", this.#onTouchMove);
|
|
99
|
-
|
|
100
|
-
dialogElement.close();
|
|
101
|
-
// 다이얼로그가 닫힌 후에는 애니메이션 클래스를 제거하여 다음 번에 열릴 때
|
|
102
|
-
// 다시 애니메이션이 적용될 수 있도록 합니다.
|
|
103
|
-
dialogElement.classList.remove("out");
|
|
104
|
-
this.classList.remove('fade'); // 호스트 요소에서도 'fade' 클래스 제거
|
|
105
|
-
}, 1000); // fadeOut 애니메이션 지속 시간에 맞춥니다 (현재 CSS에서 1초로 정의됨)
|
|
71
|
+
$(".head", this) .off('mousedown', this.#onMouseDown);
|
|
72
|
+
$(".head", this) .off('touchstart', this.#onTouchStart);
|
|
73
|
+
$(document) .off('mouseup', this.#onMouseUp);
|
|
74
|
+
$(document) .off('touchend', this.#onTouchEnd);
|
|
75
|
+
$(document) .off('mousemove', this.#onMouseMove);
|
|
76
|
+
$(document) .off("touchmove", this.#onTouchMove);
|
|
77
|
+
|
|
78
|
+
this.querySelector('dialog').close();
|
|
106
79
|
};
|
|
107
80
|
|
|
108
81
|
#init = () => {
|
|
109
|
-
|
|
82
|
+
/**
|
|
83
|
+
$(".close,.close2", this).on("click", e => {
|
|
84
|
+
ninegrid.j.querySelectorAll('dialog', this).addClass("out");
|
|
85
|
+
setTimeout(() => { this.close(); }, 300);
|
|
86
|
+
}); */
|
|
87
|
+
|
|
88
|
+
$(".close", this).on("click", e => {
|
|
89
|
+
ninegrid.j.querySelectorAll('dialog', this).addClass("out");
|
|
90
|
+
setTimeout(() => { this.close(); }, 300);
|
|
91
|
+
});
|
|
92
|
+
|
|
110
93
|
$(".close,.close2", this).on("click", e => {
|
|
111
|
-
// 이전에 여기에 있던 'dialog.out' 클래스 추가 로직은 이제 close() 메서드 안으로 들어갑니다.
|
|
112
94
|
this.close();
|
|
113
95
|
});
|
|
114
96
|
|
|
115
|
-
$(".head", this)
|
|
116
|
-
$(".head", this)
|
|
117
|
-
$(document)
|
|
118
|
-
$(document)
|
|
97
|
+
$(".head", this) .on('mousedown', this.#onMouseDown);
|
|
98
|
+
$(".head", this) .on('touchstart', this.#onTouchStart);
|
|
99
|
+
$(document) .on('mouseup', this.#onMouseUp);
|
|
100
|
+
$(document) .on('touchend', this.#onTouchEnd);
|
|
119
101
|
};
|
|
120
102
|
|
|
121
103
|
|
|
@@ -164,4 +146,4 @@ class nxDialog extends HTMLElement
|
|
|
164
146
|
};
|
|
165
147
|
}
|
|
166
148
|
|
|
167
|
-
customElements.define("nx-dialog", nxDialog);
|
|
149
|
+
customElements.define("nx-dialog", nxDialog);
|
package/package.json
CHANGED
package/src/etc/nxDialog.js
CHANGED
|
@@ -13,109 +13,91 @@ class nxDialog extends HTMLElement
|
|
|
13
13
|
|
|
14
14
|
const v = this.innerHTML;
|
|
15
15
|
const cssFile = this.getAttribute("css-file");
|
|
16
|
-
|
|
17
|
-
// ninegrid.getCustomPath에서 이미 "nxDialog.css"를 가져오는 로직이 있으므로
|
|
18
|
-
// 이 부분을 간소화할 수 있습니다.
|
|
19
|
-
// 여기서는 현재 코드를 최대한 유지하면서 fadeIn/fadeOut만 추가합니다.
|
|
20
|
-
const customFile1 = cssFile ? `@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/${cssFile}";` : "";
|
|
16
|
+
const customFile1 = cssFile ? `@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/${cssFile}";`: "";
|
|
21
17
|
const customFile2 = cssFile ? ninegrid.getCustomPath(this, cssFile) : "";
|
|
22
18
|
|
|
19
|
+
//console.log(ninegrid.getCustomPath(this,"nxDialog.css"));
|
|
20
|
+
|
|
23
21
|
this.innerHTML = `
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
22
|
+
<style>
|
|
23
|
+
@import "https://cdn.jsdelivr.net/npm/ninegrid@${ninegrid.version}/dist/css/nxDialog.css";
|
|
24
|
+
${ninegrid.getCustomPath(this,"nxDialog.css") || ""}
|
|
25
|
+
${customFile1 || ""}
|
|
26
|
+
${customFile2 || ""}
|
|
27
|
+
</style>
|
|
28
|
+
|
|
29
|
+
<dialog>
|
|
30
|
+
<div class="head">
|
|
31
|
+
<div class="rect1"></div>
|
|
32
|
+
<div class="rect2"></div>
|
|
33
|
+
<div class="rect3"></div>
|
|
34
|
+
<ng-sphere class="icon" end-fill="#666" size="8"></ng-sphere>
|
|
35
|
+
<span class="title"></span>
|
|
36
|
+
<span class="sub-title"></span>
|
|
37
|
+
<buttons>
|
|
38
|
+
<ng-sphere class="apply" start-fill="#cc6" end-fill="#660" size="16" title="apply"></ng-sphere>
|
|
39
|
+
<ng-sphere class="reset" start-fill="#99f" end-fill="#00f" size="16" title="reset"></ng-sphere>
|
|
40
|
+
<ng-sphere class="close" start-fill="#f99" end-fill="#f00" size="16" title="close"></ng-sphere>
|
|
41
|
+
</buttons>
|
|
42
|
+
</div>
|
|
43
|
+
<div class="contents">
|
|
44
|
+
<div class="left">
|
|
45
|
+
<span>가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하</span>
|
|
46
|
+
</div>
|
|
47
|
+
<div class="body">
|
|
48
|
+
${v}
|
|
49
|
+
</div>
|
|
50
|
+
<div class="close2">
|
|
51
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
52
|
+
<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"/>
|
|
53
|
+
</svg>
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
56
|
+
</dialog>
|
|
57
|
+
`;
|
|
58
|
+
|
|
59
|
+
//this.#owner = this.getRootNode().host.closest("nine-grid");
|
|
60
60
|
|
|
61
61
|
$(".title", this).html("Details");
|
|
62
|
+
|
|
62
63
|
this.#init();
|
|
63
64
|
};
|
|
64
65
|
|
|
65
|
-
// showModal 메서드 수정
|
|
66
66
|
showModal = () => {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
// 다이얼로그가 열릴 때 ':host(.fade)' CSS 클래스를 추가합니다.
|
|
70
|
-
// ':host'는 커스텀 엘리먼트 자체(nx-dialog)를 의미합니다.
|
|
71
|
-
this.classList.add('fade');
|
|
72
|
-
|
|
73
|
-
// 애니메이션이 끝나고 나서 showModal을 호출하도록 setTimeout을 사용할 수도 있지만,
|
|
74
|
-
// CSS 애니메이션은 자동으로 시작되므로 이 방식이 더 간단합니다.
|
|
75
|
-
dialogElement.showModal();
|
|
67
|
+
this.querySelector('dialog').showModal();
|
|
76
68
|
};
|
|
77
69
|
|
|
78
|
-
// close 메서드 수정
|
|
79
70
|
close = () => {
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
// 현재 CSS에는 dialog.out에 대한 animation-duration이 없으므로, 명시적으로 1초를 가정합니다.
|
|
89
|
-
// 만약 다른 애니메이션 (.run, .moveUp 등)과 동시에 사용된다면 이 부분은 더 복잡해질 수 있습니다.
|
|
90
|
-
setTimeout(() => {
|
|
91
|
-
// 이벤트 리스너 제거는 dialog가 완전히 닫힌 후에 하는 것이 안전합니다.
|
|
92
|
-
// 그렇지 않으면 애니메이션 도중 클릭 등이 작동하지 않을 수 있습니다.
|
|
93
|
-
$(".head", this) .off('mousedown', this.#onMouseDown);
|
|
94
|
-
$(".head", this) .off('touchstart', this.#onTouchStart);
|
|
95
|
-
$(document) .off('mouseup', this.#onMouseUp);
|
|
96
|
-
$(document) .off('touchend', this.#onTouchEnd);
|
|
97
|
-
$(document) .off('mousemove', this.#onMouseMove);
|
|
98
|
-
$(document) .off("touchmove", this.#onTouchMove);
|
|
99
|
-
|
|
100
|
-
dialogElement.close();
|
|
101
|
-
// 다이얼로그가 닫힌 후에는 애니메이션 클래스를 제거하여 다음 번에 열릴 때
|
|
102
|
-
// 다시 애니메이션이 적용될 수 있도록 합니다.
|
|
103
|
-
dialogElement.classList.remove("out");
|
|
104
|
-
this.classList.remove('fade'); // 호스트 요소에서도 'fade' 클래스 제거
|
|
105
|
-
}, 1000); // fadeOut 애니메이션 지속 시간에 맞춥니다 (현재 CSS에서 1초로 정의됨)
|
|
71
|
+
$(".head", this) .off('mousedown', this.#onMouseDown);
|
|
72
|
+
$(".head", this) .off('touchstart', this.#onTouchStart);
|
|
73
|
+
$(document) .off('mouseup', this.#onMouseUp);
|
|
74
|
+
$(document) .off('touchend', this.#onTouchEnd);
|
|
75
|
+
$(document) .off('mousemove', this.#onMouseMove);
|
|
76
|
+
$(document) .off("touchmove", this.#onTouchMove);
|
|
77
|
+
|
|
78
|
+
this.querySelector('dialog').close();
|
|
106
79
|
};
|
|
107
80
|
|
|
108
81
|
#init = () => {
|
|
109
|
-
|
|
82
|
+
/**
|
|
83
|
+
$(".close,.close2", this).on("click", e => {
|
|
84
|
+
ninegrid.j.querySelectorAll('dialog', this).addClass("out");
|
|
85
|
+
setTimeout(() => { this.close(); }, 300);
|
|
86
|
+
}); */
|
|
87
|
+
|
|
88
|
+
$(".close", this).on("click", e => {
|
|
89
|
+
ninegrid.j.querySelectorAll('dialog', this).addClass("out");
|
|
90
|
+
setTimeout(() => { this.close(); }, 300);
|
|
91
|
+
});
|
|
92
|
+
|
|
110
93
|
$(".close,.close2", this).on("click", e => {
|
|
111
|
-
// 이전에 여기에 있던 'dialog.out' 클래스 추가 로직은 이제 close() 메서드 안으로 들어갑니다.
|
|
112
94
|
this.close();
|
|
113
95
|
});
|
|
114
96
|
|
|
115
|
-
$(".head", this)
|
|
116
|
-
$(".head", this)
|
|
117
|
-
$(document)
|
|
118
|
-
$(document)
|
|
97
|
+
$(".head", this) .on('mousedown', this.#onMouseDown);
|
|
98
|
+
$(".head", this) .on('touchstart', this.#onTouchStart);
|
|
99
|
+
$(document) .on('mouseup', this.#onMouseUp);
|
|
100
|
+
$(document) .on('touchend', this.#onTouchEnd);
|
|
119
101
|
};
|
|
120
102
|
|
|
121
103
|
|
|
@@ -164,4 +146,4 @@ class nxDialog extends HTMLElement
|
|
|
164
146
|
};
|
|
165
147
|
}
|
|
166
148
|
|
|
167
|
-
customElements.define("nx-dialog", nxDialog);
|
|
149
|
+
customElements.define("nx-dialog", nxDialog);
|