참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.
- 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
- 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
- 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
/* ▣ Dictionary “검색 전용” 가젯 ▣
- 표 없이: 검색 → 결과 카드 or “없음” 메시지
- 단어(키)에 들어 있는 위키문법을 실제로 렌더링
-------------------------------------------------- */
mw.loader.using(
['oojs-ui-core', 'oojs-ui.styles.icons-interactions', 'mediawiki.api'],
function () {
/* ────────── Ⅰ. 사전 JSON 로드 ────────── */
var jsonNode = document.getElementById('dictionary-json');
if (!jsonNode) return; // 사전 없는 페이지
var dictRaw = JSON.parse(jsonNode.textContent);
var dict = {}; // 소문자 키 → {rawKey, def}
Object.keys(dictRaw).forEach(function (k) {
dict[k.toLowerCase()] = { raw: k, def: dictRaw[k] };
});
/* ────────── Ⅱ. CSS 삽입(1회) ────────── */
if (!document.getElementById('dict-card-style')) {
mw.util.addCSS(`
.oo-ui-inputWidget-input, .oo-ui-buttonElement-button {
background: light-dark(#fff, rgb(30,30,30)) !important;
color: var(--text) !important;
border: 1px solid light-dark(#ccc, #555) !important;
height: 36px !important;
}
.oo-ui-inputWidget-input { border-radius: 5px 0 0 5px !important; }
.oo-ui-buttonElement-button { border-radius: 0 5px 5px 0 !important; padding: 6px 12px; }
.dict-card { padding: 0 16px 8px; border: 1px solid light-dark(#ccc, #555);
border-radius: 8px; background: light-dark(#f9f9f9, hsl(200,5%,17%)); }
.dict-card .def { padding: 4px 0 8px; }
.dict-none { padding: 8px; color: light-dark(#d33, hsl(0,71%,75%)); }
`).id = 'dict-card-style';
}
/* ────────── Ⅲ. 위키텍스트 → HTML 파서 헬퍼 ────────── */
var api = new mw.Api();
function parseWikitext(wikitext) {
return api.get({
action: 'parse',
format: 'json',
contentmodel: 'wikitext',
prop: 'text',
text: wikitext,
disablelimitreport: 1,
disableeditsection: 1,
pst: 0, wrapshtml: 1 // 빠른 결과용 옵션들
}).then(function (data) {
return (data.parse && data.parse.text) ? data.parse.text['*'] : mw.html.escape(wikitext);
});
}
/* ────────── Ⅳ. 페이지 로드 때 UI 주입 ────────── */
mw.hook('wikipage.content').add(function ($content) {
$content.find('.dictionary-container').each(function () {
var $box = $(this);
if ($box.children().length) return; // 이미 UI가 있음
/* 1) 검색창 + 버튼 */
var input = new OO.ui.TextInputWidget({ placeholder: '단어 입력…', icons:['search'] });
var button = new OO.ui.ButtonWidget({ label:'검색', icon:'search', flags:['progressive'] });
var field = new OO.ui.ActionFieldLayout(input, button, {align:'top'})
.$element.css('margin-bottom','10px');
/* 2) 결과 영역 */
var $result = $('<div class="dict-result"></div>');
$box.append(field, $result);
/* 3) 검색 실행 */
function run() {
var q = input.getValue().trim();
var keyL = q.toLowerCase();
if (!q) { $result.empty(); return; }
if (dict.hasOwnProperty(keyL)) {
var entry = dict[keyL]; // { raw, def }
/* (1) 단어(키) 위키텍스트 파싱 → HTML */
parseWikitext(entry.raw).done(function (htmlKey) {
$result.html(
'<div class="dict-card">' +
'<div class="term">' + htmlKey + '</div>' +
'<div class="def">' + mw.html.escape(entry.def) + '</div>' +
'</div>'
);
}).fail(function () { // 파싱 실패 시 안전 출력
$result.html(
'<div class="dict-card">' +
'<div class="term">' + mw.html.escape(entry.raw) + '</div>' +
'<div class="def">' + mw.html.escape(entry.def) + '</div>' +
'</div>'
);
});
} else {
$result.html('<div class="dict-none">해당 단어가 없습니다.</div>');
}
}
button.on('click', run);
input.on('enter', run);
});
});
}
);