`;
const wrapper = container.querySelector('.sharp-toggle-wrapper');
const checkbox = container.querySelector('.sharp-toggle');
const slider = container.querySelector('#sharp-slider');
const label = container.querySelector('#sharp-intensity-label');
const select = container.querySelector('#sharp-filter-select');
// 초기 상태 반영
checkbox.checked = this.enabled;
wrapper.setAttribute('aria-checked', String(this.enabled));
slider.value = this.intensity;
label.textContent = `(${this.intensity.toFixed(1)}x 배)`;
select.value = this.mode;
// 컨테이너 클릭 시: 토글만 예외, 나머지 클릭은 전파 차단
container.addEventListener('click', e => {
if (
e.target.closest('.sharp-toggle-wrapper') ||
e.target.closest('.pzp-ui-toggle__handle')
) {
return;
}
if (
e.target.closest('#sharp-slider') ||
e.target.closest('#sharp-filter-select') ||
e.target.closest('option')
) {
e.stopPropagation();
return;
}
e.stopPropagation();
}, { capture: true });
// 토글 클릭 & 키보드
wrapper.addEventListener('click', e => {
e.stopPropagation();
this.toggle();
}, { capture: true });
wrapper.addEventListener('keydown', e => {
if (['Enter', ' '].includes(e.key)) {
e.preventDefault();
this.toggle();
}
});
// 슬라이더 이벤트(전파 차단 / 입력 처리)
['mousedown', 'pointerdown', 'touchstart'].forEach(evt => {
slider.addEventListener(evt, e => e.stopPropagation(), { capture: true });
});
slider.addEventListener('input', e => {
const v = parseFloat(e.target.value);
this.setIntensity(v);
this.drawTestPattern();
});
slider.addEventListener('keydown', e => {
if (!this.enabled) return;
let v = this.intensity;
if (['ArrowRight', 'ArrowUp'].includes(e.key)) {
v = Math.min(v + 0.1, 3);
} else if (['ArrowLeft', 'ArrowDown'].includes(e.key)) {
v = Math.max(v - 0.1, 1);
} else {
return;
}
e.preventDefault();
this.setIntensity(v);
slider.value = v;
this.drawTestPattern();
});
// 드롭다운 이벤트: mousedown/pointerdown/mouseup 단계에서 전파만 차단
['mousedown', 'pointerdown', 'mouseup'].forEach(evt => {
select.addEventListener(evt, e => e.stopPropagation(), { capture: true });
});
select.addEventListener('change', e => {
const newMode = e.target.value;
this.setMode(newMode);
this.drawTestPattern();
const canvas = document.getElementById('sharp-test-canvas');
const img = document.getElementById('sharp-example-image');
const flip = this.mode === 'natural' ? FILTER_ID_NATURAL : FILTER_ID_DEFAULT;
if (canvas) canvas.style.filter = `url(#${flip})`;
if (img) img.style.filter = `url(#${flip})`;
});
this.registerControls({ wrapper, checkbox, slider, label, select });
this.drawTestPattern();
}
observeMenus() {
const root = document.querySelector('.pzp-pc') || document.body;
const initMenu = document.querySelector(MENU_SELECTOR);
if (initMenu) this.addMenuControls(initMenu);
new MutationObserver(ms => {
for (const m of ms) {
for (const n of m.addedNodes) {
if (!(n instanceof HTMLElement)) continue;
const menu = n.matches(MENU_SELECTOR) ? n : n.querySelector(MENU_SELECTOR);
if (menu) this.addMenuControls(menu);
}
}
}).observe(root, { childList: true, subtree: true });
}
}
const sharpness = new SharpnessFilter();
await sharpness.init();
sharpness.observeMenus();
// SPA 네비게이션 감지 (pushState/replaceState/popstate)
(() => {
let last = location.href;
const onChange = async () => {
if (location.href === last) return;
last = location.href;
if (isLivePage()) {
await sharpness.init();
}
};
['pushState', 'replaceState'].forEach(m => {
const orig = history[m];
history[m] = function (...a) {
const r = orig.apply(this, a);
window.dispatchEvent(new Event('locationchange'));
return r;
};
});
window.addEventListener('popstate', () => window.dispatchEvent(new Event('locationchange')));
window.addEventListener('locationchange', onChange);
})();
})();
