미디어위키:Gadget-quickpage.js 문서 원본 보기

/* ▣ QuickEdit “문서 생성 및 편집” 가젯 ▣ */
mw.loader.using(
  ['oojs-ui-core', 'oojs-ui.styles.icons-interactions', 'mediawiki.util'],
  function () {

    /* ────────── Ⅰ. CSS 스타일 (기존 디자인 유지) ────────── */
    // 기존 사전 모듈과 스타일을 공유하거나, 중복 방지를 위해 ID 체크 후 삽입
    if (!document.getElementById('quick-edit-style')) {
      mw.util.addCSS(`
        .quick-edit-container .oo-ui-inputWidget-input,  .quick-edit-container .oo-ui-buttonElement-button {
            background: var(--bg) !important;
            color: var(--text) !important;
            border: 1px solid var(--border) !important;
            height: 36px !important;
        }
        .oo-ui-inputWidget-input {
            border-radius: 0.5rem 0 0 0.5rem !important;
            padding-left: 11px !important;
        }
        .oo-ui-buttonElement-button {
            border-radius: 0 0.5rem 0.5rem 0 !important;
            padding-top: 6px;
            padding-bottom: 6px;
        }
        .dict-card {
            padding: 20px; /* 하단 패딩 조정 */
            border: 1px solid var(--border) !important;
            border-radius: 0.8rem;
            background: var(--altbg);
            margin-bottom: 1em;
            margin: 1em 0 0.5em !important;
        }
      `).id = 'quick-edit-style';
    }

    /* ────────── Ⅱ. 페이지 로드 시 UI 주입 ────────── */
    mw.hook('wikipage.content').add(function ($content) {
      $content.find('.quick-edit-container').each(function () {
        var $box = $(this);
        if ($box.children().length) return; // 이미 UI가 생성되었으면 중단

        // Lua에서 전달한 data 속성 값 가져오기
        var placeholderText = $box.attr('data-placeholder') || '문서 제목...';
        var labelText       = $box.attr('data-label') || '이동';

        /* 1) 입력창 + 버튼 생성 (OOUI) */
        var input  = new OO.ui.TextInputWidget({ 
            placeholder: placeholderText, 
            icons: ['article'] // 문서 아이콘
        });
        var button = new OO.ui.ButtonWidget({ 
            label: labelText, 
            icon: 'edit', 
            flags: ['progressive'] 
        });
        
        // 레이아웃 구성 (Input 옆에 Button)
        var field  = new OO.ui.ActionFieldLayout(input, button, {align: 'top'});
        
        // 컨테이너에 추가
        $box.append(field.$element);

        /* 2) 실행 로직: 편집 URL로 이동 */
        function goEdit() {
            var title = input.getValue().trim();
            if (!title) return; // 빈 값일 경우 무시

            // 미디어위키 유틸리티를 사용해 올바른 URL 생성
            // 예: /index.php?title=제목&action=edit
            var editUrl = mw.util.getUrl(title, { action: 'edit' });
            
            // 페이지 이동
            window.location.href = editUrl;
        }

        // 클릭 및 엔터 키 이벤트 연결
        button.on('click', goEdit);
        input.on('enter', goEdit);
      });
    });
  }
);