Dialog Templates (appendix)

ibsheet-dialog.js 플러그인 다이얼로그는 HTML/CSS를 dlgTemplates/ 폴더의 템플릿 파일로 제공합니다.
이 문서는 템플릿 파일의 배포와 커스터마이징 방법을 설명합니다.

개요

showFindDialog, showEditDialog, showDownloadDialog 등 플러그인 다이얼로그는 ibsheet-dialog.js 안에 HTML/CSS가 하드코딩되어 있었습니다.
ibsheet-dialog 1.0.46 버전부터 이 하드코딩을 걷어내고, dlgTemplates/ 폴더의 HTML/CSS 파일로 제공하도록 변경되었습니다.
템플릿 파일을 직접 수정하면 다이얼로그의 구조와 디자인을 커스터마이징할 수 있습니다.

배포 (필수)

ibsheet-dialog.js와 dlgTemplates/ 폴더를 함께 배포해야 합니다.
템플릿 파일을 찾지 못하면 해당 다이얼로그가 정상적으로 열리지 않습니다.

하위 호환: 1.0.46 미만 버전은 HTML/CSS가 스크립트 파일에 포함되어 있어 dlgTemplates/ 폴더 없이도 동작합니다.
1.0.46 이상으로 올릴 때는 dlgTemplates/ 폴더를 함께 배포해야 하며, 빠뜨리면 다이얼로그가 열리지 않습니다.

템플릿 경로 설정

ibsheet-dialog.js와 dlgTemplates/를 같은 폴더에 두면 별도 설정 없이 동작합니다(스크립트 위치를 기준으로 자동 감지).
폴더 위치가 다르면 DialogTemplatePath로 경로를 지정할 수 있습니다.

템플릿 폴더 경로는 아래 순서로 결정됩니다.

1. IBSheet.CommonOptions.Cfg.DialogTemplatePath — IBSheet.CommonOptions의 Cfg에 설정
2. IBSheet.DialogTemplatePath — 전역에 직접 설정
3. DialogTemplatePath가 없으면 ibsheet-dialog.js 스크립트가 위치한 경로의 dlgTemplates/ 폴더에서 자동 감지

// IBSheet.CommonOptions.Cfg 에 지정 (스크립트와 다른 위치를 가리킴)
IBSheet.CommonOptions = {
  Cfg: {
    DialogTemplatePath: "/assets/custom/dialogTemplates/"
  }
};

// 또는 전역에 직접 지정
IBSheet.DialogTemplatePath = "/assets/custom/dialogTemplates/";

커스터마이징

각 다이얼로그는 HTML 파일과 CSS 파일 한 쌍으로 구성됩니다. 파일을 직접 수정해 구조와 디자인을 변경할 수 있습니다.

• HTML: <!-- [SECTION] --> … <!-- [/SECTION] --> 형식의 섹션(예: HEAD, BODY)으로 구성됩니다. 클래스, 스타일, 배치는 자유롭게 변경할 수 있으나 각 템플릿 파일 주석의 "필수 요소" id는 그대로 유지해야 동작합니다.
• {{placeholder}}: 다이얼로그를 만들 때 자동으로 치환되는 값입니다(예: {{sheetId}}, {{prefix}}, {{lang_FindNext}}). 각 템플릿 파일 상단 주석에 사용 가능한 placeholder가 정리되어 있습니다.
• CSS: 해당 다이얼로그의 스타일을 정의합니다. {{prefix}}는 시트의 테마 접두사(Style (cfg) 또는 setTheme (method)로 결정)에 따라 치환됩니다. 설정하지 않으면 기본 테마(css/default/main.css)의 접두사 IB가 사용됩니다.

각 템플릿 파일 상단 주석에 사용 가능한 placeholder, 필수 요소 id, 섹션 구성이 정리되어 있으니 자세한 내용은 해당 주석을 참고하세요.

템플릿 파일

dlgTemplates/ 폴더에는 다이얼로그별 HTML/CSS 파일이 있습니다.