feat(ui): add namesPerLine setting to builder
- 구분자 설정 카드에 '한 줄 N개' 입력란 추가 - 0 = 제한 없음 (기존 동작 유지) - N > 0 이면 이름을 N개씩 줄 분할, 카테고리 prefix는 첫 줄에만 - localStorage 저장/복원 포함 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -266,6 +266,13 @@ input,textarea,button{font-family:inherit}
|
|||||||
<div class="marks-wrap" id="marksList"></div>
|
<div class="marks-wrap" id="marksList"></div>
|
||||||
<button class="btn-add-mark" onclick="addMark()">+ 레벨</button>
|
<button class="btn-add-mark" onclick="addMark()">+ 레벨</button>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="config-row">
|
||||||
|
<span class="config-lbl">한 줄</span>
|
||||||
|
<input id="cfgNpl" type="number" min="0" step="1"
|
||||||
|
style="width:56px;text-align:center;font-size:13px;border:1px solid var(--border);border-radius:6px;padding:3px 6px;background:var(--surface)"
|
||||||
|
value="0" oninput="syncConfig()">
|
||||||
|
<span style="font-size:12px;color:var(--muted)">개 <span style="font-size:11px">(0 = 제한 없음)</span></span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 문서 제목 -->
|
<!-- 문서 제목 -->
|
||||||
@@ -319,7 +326,7 @@ input,textarea,button{font-family:inherit}
|
|||||||
// 상태
|
// 상태
|
||||||
// ════════════════════════════════════════════════════════════
|
// ════════════════════════════════════════════════════════════
|
||||||
let S = {
|
let S = {
|
||||||
cfg: { titleMark:'✅', marks:['🔹','🔸'] },
|
cfg: { titleMark:'✅', marks:['🔹','🔸'], namesPerLine:0 },
|
||||||
title: '예시 양식',
|
title: '예시 양식',
|
||||||
sections: [
|
sections: [
|
||||||
{ id:id(), lv:1, name:'1번 항목',
|
{ id:id(), lv:1, name:'1번 항목',
|
||||||
@@ -352,6 +359,7 @@ function load(){
|
|||||||
// ════════════════════════════════════════════════════════════
|
// ════════════════════════════════════════════════════════════
|
||||||
function syncConfig(){
|
function syncConfig(){
|
||||||
S.cfg.titleMark = document.getElementById('cfgTitle').value || '✅';
|
S.cfg.titleMark = document.getElementById('cfgTitle').value || '✅';
|
||||||
|
S.cfg.namesPerLine = Math.max(0, parseInt(document.getElementById('cfgNpl').value)||0);
|
||||||
document.getElementById('titleMarkBadge').textContent = S.cfg.titleMark;
|
document.getElementById('titleMarkBadge').textContent = S.cfg.titleMark;
|
||||||
renderMarks();
|
renderMarks();
|
||||||
renderSections();
|
renderSections();
|
||||||
@@ -513,6 +521,7 @@ function renderSections(){
|
|||||||
renderMarks();
|
renderMarks();
|
||||||
document.getElementById('titleMarkBadge').textContent = S.cfg.titleMark;
|
document.getElementById('titleMarkBadge').textContent = S.cfg.titleMark;
|
||||||
document.getElementById('cfgTitle').value = S.cfg.titleMark;
|
document.getElementById('cfgTitle').value = S.cfg.titleMark;
|
||||||
|
document.getElementById('cfgNpl').value = S.cfg.namesPerLine ?? 0;
|
||||||
document.getElementById('docTitle').value = S.title;
|
document.getElementById('docTitle').value = S.title;
|
||||||
document.getElementById('secList').innerHTML = S.sections.map((s,i)=>renderSec(s,i,S.sections.length)).join('');
|
document.getElementById('secList').innerHTML = S.sections.map((s,i)=>renderSec(s,i,S.sections.length)).join('');
|
||||||
}
|
}
|
||||||
@@ -537,7 +546,13 @@ function toText(){
|
|||||||
const ns=parseNames(g.names);
|
const ns=parseNames(g.names);
|
||||||
if(!ns.length) continue;
|
if(!ns.length) continue;
|
||||||
const pre=g.cat.trim()?`(${g.cat.trim()}) `:'';
|
const pre=g.cat.trim()?`(${g.cat.trim()}) `:'';
|
||||||
|
const npl=S.cfg.namesPerLine;
|
||||||
|
if(npl>0){
|
||||||
|
for(let i=0;i<ns.length;i+=npl)
|
||||||
|
lines.push((i===0?pre:'')+ns.slice(i,i+npl).join(' '));
|
||||||
|
} else {
|
||||||
lines.push(pre+ns.join(' '));
|
lines.push(pre+ns.join(' '));
|
||||||
|
}
|
||||||
lines.push('');
|
lines.push('');
|
||||||
}
|
}
|
||||||
for(const c of sec.children) renderSec(c);
|
for(const c of sec.children) renderSec(c);
|
||||||
|
|||||||
Reference in New Issue
Block a user