feat: 화면설명 소제목 스크롤·강조 + 글씨크기 메뉴 확대 + 드로어 개선
- screenHelp 앵커(?hl=)로 '이 화면 설명' 클릭 시 해당 소제목으로 스크롤·강조, 재오픈 시 재강조(postMessage) - 글씨 크기(A−/A+)가 상단 대메뉴·좌측 사이드바까지 확대, 관리자 페이지에도 조절 기능 추가 - 화면 설명 드로어 양방향 리사이즈(좁히기 가능) + 기본 너비 2배 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -44,6 +44,9 @@ $searchQ = (string) (service('request')->getGet('q') ?? '');
|
||||
.manual-prose tbody tr:nth-child(even) td { background: #f9fafb; }
|
||||
.manual-prose hr { margin: 1.6rem 0; border: 0; border-top: 1px solid #e5e7eb; }
|
||||
.manual-toc a.active { background: #1a2b4b; color: #fff; font-weight: 700; }
|
||||
/* "이 화면 설명"으로 들어왔을 때 해당 소제목 강조 */
|
||||
.manual-prose h2.hl-flash, .manual-prose h3.hl-flash { background: #fef9c3; box-shadow: -6px 0 0 #fef9c3, 6px 0 0 #fef9c3; border-radius: 4px; animation: hlFlash 2.6s ease-out 1; }
|
||||
@keyframes hlFlash { 0%, 45% { background: #fde047; box-shadow: -6px 0 0 #fde047, 6px 0 0 #fde047; } 100% { background: transparent; box-shadow: -6px 0 0 transparent, 6px 0 0 transparent; } }
|
||||
@media print {
|
||||
.manual-toc, .manual-actions, .manual-nav { display: none !important; }
|
||||
.manual-layout { display: block !important; }
|
||||
@@ -108,6 +111,35 @@ $searchQ = (string) (service('request')->getGet('q') ?? '');
|
||||
var SEARCH_URL = location.origin + <?= json_encode((string) parse_url(base_url('bag/manual/search'), PHP_URL_PATH), JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT) ?>;
|
||||
var BASE = location.origin + <?= json_encode((string) parse_url(base_url('bag/manual/'), PHP_URL_PATH), JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT) ?>;
|
||||
var Q0 = <?= json_encode($searchQ, JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS) ?>;
|
||||
// "이 화면 설명"으로 들어온 경우: 해당 소제목으로 스크롤 + 강조.
|
||||
// 드로어를 껐다 다시 켜도(같은 URL이라 iframe 재로드 안 됨) 부모가 보낸 메시지로 다시 강조한다.
|
||||
var hlFlashTimer = null;
|
||||
function runHl() {
|
||||
var hl = '';
|
||||
try { hl = new URLSearchParams(location.search).get('hl') || ''; } catch (e) {}
|
||||
hl = hl.trim();
|
||||
if (!hl) return;
|
||||
var norm = function (s) { return String(s || '').replace(/\s+/g, ' ').trim().toLowerCase(); };
|
||||
var needle = norm(hl);
|
||||
var prose = document.querySelector('.manual-prose');
|
||||
if (!prose) return;
|
||||
var heads = prose.querySelectorAll('h2, h3'), target = null;
|
||||
for (var i = 0; i < heads.length; i++) {
|
||||
if (norm(heads[i].textContent).indexOf(needle) >= 0) { target = heads[i]; break; }
|
||||
}
|
||||
if (!target) return;
|
||||
clearTimeout(hlFlashTimer);
|
||||
target.classList.remove('hl-flash');
|
||||
void target.offsetWidth; // 리플로우 → 애니메이션 재시작
|
||||
target.classList.add('hl-flash');
|
||||
try { target.scrollIntoView({ block: 'start', behavior: 'smooth' }); } catch (e) { target.scrollIntoView(); }
|
||||
hlFlashTimer = setTimeout(function () { target.classList.remove('hl-flash'); }, 2700);
|
||||
}
|
||||
runHl();
|
||||
window.addEventListener('message', function (e) {
|
||||
if (e.origin !== location.origin) return;
|
||||
if (e.data && e.data.type === 'manual-hl') runHl();
|
||||
});
|
||||
var input = document.getElementById('manualSearchInput');
|
||||
var box = document.getElementById('manualSearchResults');
|
||||
|
||||
|
||||
Reference in New Issue
Block a user