57 번째 수정본 소스 보기 : UseModWiki소스수정/바로가기폼

내용출력
로그인[l]
수정할 수 없습니다: UseModWiki소스수정/바로가기폼 는 읽기 전용 페이지입니다.
<toc> 

== # 페이지 바로 가기 폼 ==
[[/GotoBar개선]]을 하면서 상단 메뉴바에 페이지 이름을 넣고 바로 이동할 수 있는 바로가기 폼을 추가하면서, 텍스트 필드에 문자열을 입력하면 그 문자열이 포함되어 있는 페이지 목록을 팝업 리스트로 보여준다.

예전부터 있었으면 하는 기능이었는데 스프링노트에 있는 게 너무 부러워서 침만 흘리다가, 스프링노트에 있는 건 <s>어려운 거 빼고;;;</s> 유즈모드에도 있어야지라는 의지로 완전 어설프게 구현 =.=;

용도는, 물론 자기가 원하는 페이지를 이동할 때 이름의 일부만 알아도 가능하게 하는 것도 있지만, 페이지를 편집할 때 다른 페이지 링크를 넣으려고 이름을 적어넣어야 하는데, 이름이 길면 헷갈리기도 하고 오타도 잘 나는 터라 복사해서 쓸 수 있게 하려는 것.

=== # 구현에 참고한 것들 ===
AJAX인지 뭔지를 알아야 하는 것 같던데, 웹에서 "AJAX 자동완성" 등으로 검색해보니 무슨 자바 servlet인가도 필요한 것 같고, 그건 J2EE를 설치해야 하는 것 같고 등등... =.=; 그러다가 [http://www.hanbitbook.co.kr/look.php?isbn=89-7914-310-9 Ajax 입문 : Asynchronous JavaScript + XML]에 있는 샘플챕터 PDF 파일과 예제소스 파일을 보니까 자바스크립트가 포함된 html과 php, perl 등을 사용해서 만든 간단한 샘플들이 있었다.

여기 있는 샘플 중에 자동 완성 샘플도 있었는데 (chap07 디렉토리), 이건 iframe이 나오질 않나 div는 세 겹으로 쌓이지 않나... 그리고 목록을 dl 리스트로 만든 후에 커서키 상하를 누르는 이벤트를 잡아서 옮겨다니는 식이라서, 좋기는 한데 코드를 이해하고 수정하기가 힘들어서 포기.

주로 chap04 디렉토리 아래에 있는 내용을 가지고 짜맞췄음.

샘플에 있던 구현들은, 텍스트의 내용이 바뀔 때마다 서버에 접속해서 텍스트를 전송하고, 서버가 처리한 내용을 다시 받아오는 식이었는데, 이렇게 했더니만 너무 반응이 느려서 쓰기가 힘들었다. 그래서 이 패치에서는 제일 처음에 페이지 목록을 Local:action=titleindex""를 호출해서 받아온 후, 클라이언트 브라우저의 자바스크립트 쪽에서 사용자가 입력한 내용을 가지고 목록을 대조하도록 하였다.

=== # 사용법 ===
바로가기 텍스트 필드에 커서를 놓고, 문자열을 입력하면 아래 그림과 같이 문자열이 포함되어 있는 페이지 제목의 목록이 나타난다.
|| Upload:autocomplete.png ||
|| 빨간 선은 목록이 출력되는 DIV경계. 테스트를 위해 아직 남겨 두었음 ||

* 목록에 떴을 때, down 커서키로 목록으로 갈 수 있음.
* 목록의 제일 위에서 up 커서키를 누르면 다시 필드로 오고, 이때는 사용자가 필드에 입력했던 값으로 되돌아옴 (다른 검색엔진들이 이런 식으로 처리하길래...)
** 목록에서 ESC를 눌렀을 때도 마찬가지. 단 웹마에서는 ESC가 동작하지 않는다.
* 목록에서 페이지를 선택한 후, enter 또는 space를 치거나 마우스로 목록 이외의 곳을 클릭하면 다시 필드로 오고, 선택했던 페이지 이름으로 필드를 채워줌
** 이 경우에는 필드의 텍스트를 선택한 상태로 만든다. Ctrl+C 눌러서 바로 복사할 수 있게 하려는 의도. (아무래도 주인장은 페이지 이동의 목적보다 다른 페이지 링크하려는데 정확한 이름이 기억 안 날 때 쓰려는 것이라..)
=== # 부작용 ===
모르겠음.

여기에 사용된 라이브러리 코드는 전혀 구조를 모르는 채로 그냥 가져다 썼기 때문에, 그쪽에 버그가 있을지도 모르지만... 책 부록으로도 나오고 한 걸 보니 큰 문제는 없을 것이라 생각함

화면 위 메뉴바 우측에 있는 저 자그마한 바로가기 폼에... 온갖 이벤트 핸들러들이 난무하게 된다 -_-; 어떻게든 IE와 FF양쪽에서 다 동작하게 하려니 좀 지저분하고, 클라이언트에 무리를 줄 것 같다는 느낌도 든다. 뭐 딱히 체감하지는 못했지만...
=== # 알려진 문제점 & 한계 ===
==== # 처음에 목록을 가져올 때 반응이 느림 ====
텍스트 필드에 커서를 놓고, 키보드가 처음으로 눌렸다 떼어지는 순간에 목록을 받아온다. 이 때 딜레이가 있다. GyparkWiki에서는 별로 체감되지는 않는 듯 한데, 서버 또는 네트웍이 느리면 체감될지도.

Local:action=titleindex""를 매번 실행할게 아니라 파일로 저장해놓고 파일을 읽어오게 할까 싶기도 한데, 그러면 그 파일을 항상 최신 상태로 유지하기 위해서 고쳐줘야 할 곳이 생김

첨에 페이지가 출력될 때 바로가기 폼을 출력한 아래에 스크립트를 넣어서 getMsg() 함수를 무조건 실행하게 해 보았다. 가져오는 속도는 그대로지만, 페이지 로딩할 때 묻어가게 함으로써 체감 딜레이를 줄이려고 한 건데, FF에서는 무난하게 되는데 IE에서는 페이지 로딩 직후에 심하게 버벅대어서 포기.

==== # 목록 갱신 속도도 느림 (해결) ====
일단 목록을 가져왔으면 그 다음은 클라이언트에서 저장한 목록을 가지고 대조하니까 좀 낫긴 한데, 타이핑을 빨리 할 경우 매번 키가 떼어질 때마다 목록 대조를 하기 때문에 좀 불필요한 대조를 너무 많이 한다.

특히나, 필드를 채워나가면서 후보 목록을 줄일 때는 그나마 나은데, 반대로 백스페이스로 지워가면서 후보를 늘릴 때는 목록 갱신하는 지연시간이 체감된다. 일정 시간 (0.*초?) 이내에는 수행하지 않게 하고 싶은데 방법을 모르고 있음

처음에는, 텍스트 필드에 전혀 값이 없을경우는 모든 페이지에 매치되는 것으로 처리하게 했다. 즉 모든 페이지 목록이 출력되게 했는데, 페이지 1500개 가량을 추가하는 시간이 상당히 걸려서, 한 글자 이상일 때만 목록을 갱신하도록 고치니까 좀 나아졌음

'''해결'''

setTimeout()을 써서, 마지막 갱신 후 0.3초 이내에는 다시 갱신하지 않도록 하여서 타이핑을 빠르게 할 경우 중간에는 갱신하지 않게 하였다.

==== # DIV 구성 ====
안쪽에 있는 자동 완성 DIV가 펼쳐지면서, IE에서는 바깥쪽에 DIV.gotobar_search가 같이 넓어져서 아래 본문을 밀어내어 버린다. FF에서는 괜찮다. DIV에 스타일을 어떻게 주어야 밀어내지 않고 위에 겹치게 할 수 있을지 모르겠음. DIV.gotobar_search에 z-index를 10 정도를 주어봤는데, 일반적인 페이지에서는 되는데 [[Diary]]처럼 아래쪽에 테이블,DIV 등이 있거나 페이지 편집 화면에서는 여전히 밀어냄.

또, 페이지 중에 이름이 긴 것들이 있어서 DIV의 폭을 좀 더 늘리고 싶은데, 이 때 DIV가 열리고 닫힘에 따라서 바깥쪽의 DIV.gotobar_search 박스까지 왼쪽으로 움직였다 되돌아왔다 그러는 바람에 정신이 사납다. DIV에 관계없이 기존 출력은 고정되게 하고 싶음. 바깥 div의 폭을 350px로, 목록 div의 폭을 500px로 준 후 목록에 position:relative; left:-150px; 를 넣어봤지만 FF에서는 통했는데 IE에서는 안 통했다.

==== # 브라우저의 자동 완성 기능과 충돌 ====
브라우저에서 제공하는 자동 완성 기능에 의해서 예전에 입력했던 값의 목록을 보여주는 리스트가 뜨는데 이것과 화면이 겹친다. 저 필드에서만 브라우저의 자동 완성 기능을 강제로 금지시키는 법을 모르겠음

==== # 목록의 각 라인이 겹쳐 보임 ====
현재 GyparkWiki의 글꼴로는 IE에서 목록의 각 줄이 서로 조금씩 겹쳐보인다. 스타일쉬트를 만져줘도 별 무소용. 어딜 고쳐야 할지 모르겠음.

==== # FF에서 한글을 입력할 때 갱신되지 않음 (해결) ====
텍스트 필드에 한글을 입력할 때, IE에서는 한 글자가 완성될 때마다 목록 갱신을 시도하지만, FF에서는 영문 입력 모드로 변환하던가, 한글이 아닌 문자를 넣어야만 그제서야 갱신된다.

이를 해결하기 위한 편법으로, 제일 뒤에 스페이스는 무시하고 목록을 대조하게 하였으니, 한글을 입력하다가 스페이스를 눌러주면 그 시점에서 갱신된다. 그 뒤를 이어서 계속 입력하려면 백스페이스를 눌러줘야 하는 건 어쩔 수 없다. =.=;

'''불완전한 해결'''

위에 언급한 setTimeout()에서, 0.2초 마다 getMsg() 자신을 다시 호출하게 해주어서, FF에서도 0.2초마다 텍스트 필드를 검사하게 함으로써 한글만 입력하는 경우에도 계속 목록 갱신이 이루어지도록 했다.

다만 제일 처음부터 필드에 한글로만 입력을 하고 있는 상태라면 첫번째 getMsg()가 불릴 수가 없어서 목록을 받아오지 못한다. 따라서 제일 처음에 한영 토글 내지는 아무 키나 눌러서 받아오던가, 한글 입력이 완료된 후에 한글이 아닌 다른 키를 눌러서 (한영 토글이나 스페이스 바 등) 첫번째 갱신을 시작시켜줘야 함.

keyup이 아니라 keydown 이벤트를 쓰면 이 문제는 해결이 되는데, 대신에 FF에서만 필드에 한 번 타이핑한 글자가 두 번 찍힌다던가 하는 문제들이 생겨서 손을 못 대겠음. OTL

==== # FF에서 특정한 한글을 입력할 때 중복 입력됨 ====
FF에서 텍스트 필드에 커서를 놓고, 특정한 한글 자모를 입력할 때 (주인장이 발견한 건 "비디오"와 한 가지 더 있는데 기억 안 남) 자모 하나 또는 글자 하나가 연속으로 중복해서 입력되는 문제가 있다.

이건 도저히 이유를 모르겠다. 처음에는 위의 "갱신이 안 되는 문제"를 해결하려고 추가한 코드 때문에 그런 줄 알았는데, 그 코드들을 다 제거해도 마찬가지. 샘플 소스의 chap07에 있는 루틴이 그 문제를 고려하고 있는지 모르겠는데, 나중에 더 자세히 봐야할 듯. 암튼 지금은 해결을 못 하겠음. 항상 그러는게 아니니 쓰는 데 크게 불편하지는 않을 듯.

==== # 입력 필드와 목록 창 사이를 이동하는 게 조금 불편함 (해결) ====
키보드로만 작업할 경우, 텍스트 필드에 입력을 하다가 곧바로 커서키로 목록으로 이동할 수 없다. 또 목록에서 스페이스나 엔터를 눌러서 바로 페이지 이동을 할 수 없다. TAB을 눌러서 이동한 후, 커서키로 원하는 목록을 활성화시키고, 다시 TAB을 눌러 버튼으로 가거나 Shift+TAB을 눌러서 입력 필드로 되돌아온 후에 엔터나 스페이스를 눌러서 submit해야 한다.

원하는 대로 하려면 onKeypress 이벤트를 쓴 후 눌려진 키 값을 체크해야 할 것 같은데, 키 값 얻어내는 건 브라우저마다 또 방법이 다르고 해서 코드가 너무 복잡해질 것 같아서 포기.

'''해결'''

결국 keypress 이벤트도 처리하도록 함.

==== # UTF-8이 아닌 다른 인코딩으로 운영하는 경우 (불확실) ====

일단 [[/TitleIndex액션]]을 고쳐서 &charset=UTF-8을 명시해주면 EUC-KR위키에서도 UTF_8로 인코딩된 목록을 받을 수 있게는 해 놨는데, 막상 테스트해보니까 현재 상태로 그냥 UTF-8로 된 목록을 받아서도 잘 처리하더라 -_-; 목록 검색, 갱신까지 다 잘 되는 듯. 그래서 일단 고치지 않고 그냥 action=titleindex만 주어서 목록을 받아 오게 하고 있음.
==== # 목록 창을 다시 닫기 불편함 (해결) ====
ESC키를 눌러서 닫을 수 있으면 좋겠는데, 현재는 목록창을 닫을 수 있는 방법은 일단 목록창에 포커스를 주었다가 다른 곳으로 포커스를 이동하는 것 뿐이다 =.=;

'''해결'''

ESC를 누르거나, 목록 제일 처음 항목에서 up 커서키를 눌러서 창을 닫고 텍스트필드로 돌아올 수 있다. 단 웹마에서는 ESC가 통하질 않는다. (IE에서는 괜찮은데 -_-? 웹마가 이벤트를 가로채는 곳이 있는 듯)

=== # wiki.pl 수정 ===

GotoBar를 출력하고 그 바로 아래에 변수를 초기화하는 스크립트를 추가. 사실 이 변수들은 그저, 매번 각 요소를 가리킬 때 "document.goto_form.goto_text".. 처럼 길게 쓰는 것이 불편해서 사용하는 것.
{{{#!vim perl
sub GetGotoBar {
    ...
# 이 단락 추가
    my $gotobar_script = <<EOF;
<script>
<!--
gotobar_init();
-->
</script>
EOF

    return
        "<DIV class='gotobar'>"
        . $bar_search
        . $bar_user
        . $bar_menu
        . "</DIV>"
# 여기 추가
        . $gotobar_script
        . "<HR class='gotobar'>\n"
        ;
}
}}}

[[/GotoBar개선]]에서 추가된 GetGotoForm에서, 각각의 요소에 이벤트 처리 부분을 추가해준다. 일일이 표시하기 힘들어서 함수를 다시 통채로 적음.

그리고 Goto매크로와 공유하는 함수라서, 이게 매크로로 쓰였는지 아닌지에 따라 다르게 출력할 부분들이 많다. (아예 goto매크로 쪽 구현을 다시 바꿔버릴 걸 그랬나 싶기도)

{{{#!vim perl
sub GetGotoForm {
    my ($not_macro, $string);
    if (@_) {
        ($string) = @_;
    } else {
        $not_macro = 1;
    }

    my $result;
    my $location_prefix = $ScriptName . &ScriptLinkChar();
    my $param_backup = $q->param("id");
    $q->param("id", "$string");
    $GotoTextFieldId++;

    $result =
        $q->start_form(
                -name           => ($not_macro?"goto_form":""),
                -method         => "POST",
                -action         => "$ScriptName",
                -enctype        => "application/x-www-form-urlencoded",
                -accept_charset => "$HttpCharset",
                -onSubmit       =>
                        "document.location.href = "
                        . "'$location_prefix'+document.getElementById('goto_$GotoTextFieldId')"
                        . ".value.replace(/\\s*\$/,'').replace(/ /g,'_');"
                        . "return false;"
                        ,
                )
        . "\n"
        . &GetHiddenValue("action", "browse")
        . "\n"
        . $q->textfield(
                -name   => ($not_macro?"goto_text":""),
                -id     => "goto_$GotoTextFieldId",
                -class  => "goto",
                -size   => "30",
                -value  => "$string",
                -accesskey => ($not_macro?"g":""),
                -title  => ($not_macro?T("Go")."(Alt + g)":""),
                -tabindex => ($not_macro?"1000":""),
                # IE&FF
                -onKeyup=> ( $not_macro?
                                "getMsg('$ScriptName')"
                                :
                                ""
                            ),
                # FF에서 처음에 한글로 입력을 시작할 때
                # up,down 키로 목록과 필드를 오갈때
                -onKeydown=> ( $not_macro?
                                "goto_text_keydown(this,event); "
                                . "getMsg('$ScriptName')"
                                :
                                ""
                            ),
                )
        . " "
        . $q->submit(
                -class  => "goto",
                -name   => "Submit",
                -value  => T("Go"),
                -tabindex => ($not_macro?"1002":""),
                )

        # 자동 완성 목록이 나올 DIV
        . ($not_macro? "<BR>\n"
            . "<DIV id=\"goto_list\" style=\"display:none;\">\n"
            . $q->popup_menu(
                    -name     => "goto_select",
                    -size     => "15",
                    -tabindex => "1001",
                    -onBlur   => "goto_list_blur(this,true,true);_goto_field.select()",
                    -onChange => "goto_list_blur(this,true,false);",
                    -values   => ["-- Loading page list... --"],
                    -onKeydown=> "return goto_list_keydown(this,event);",
                )
            . "</DIV>\n"
            :
            ""
          )

        . $q->endform
        ;

    $q->param("id", $param_backup);
    return $result;
}
}}}

브라우저의 버그(?)를 편법으로 풀기 위해서, 검색 필드가 있는 폼에도 이름을 붙여 주어야 했다.
{{{#!vim perl
sub GetSearchForm {
    ...
    $result =
# 인자로 이름을 적어 줌
        &GetFormStart("search_form")
        . &GetHiddenValue("dosearch", 1)
        . $q->textfield(
                -name   => "search",
                -class  => "search",
# 하는 김에 size도 좀 늘렸음
                -size   => "30",
                -accesskey => "s",
                -title  => "Alt + s",
                )

    ...
}
}}}

=== # wikiscript.js 수정 ===

==== # 서버와의 통신을 위한 라이브러리 ====
이건 위에서 언급한 샘플 코드에 library로 들어 있던 파일의 내용을 그대로 가져왔다. 원 저자는 일본사람인 듯 하고 맘대로 쓰게 공개되어 있는 것 같음.

<memo(어차피 주인장도 이해 못 한채로 쓰는 것이니 가림)>
{{{#!vim javascript
// 바로 가기 필드 자동 완성
//==============================================================================
//  SYSTEM      :  잠정판 크로스 프라우저 Ajax용 라이브러리
//  PROGRAM     :  XMLHttpRequest에 의한 송수신을 합니다
//  FILE NAME   :  jslb_ajaxXXX.js
//  CALL FROM   :  Ajax 클라이언트
//  AUTHER      :  Toshirou Takahashi http://jsgt.org/mt/01/
//  SUPPORT URL :  http://jsgt.org/mt/archives/01/000409.html
//  CREATE      :  2005.6.26
//  TEST-URL    :  헤더 http://jsgt.org/ajax/ref/lib/test_head.htm
//  TEST-URL    :  인증   http://jsgt.org/mt/archives/01/000428.html
//  TEST-URL    :  비동기
//        http://allabout.co.jp/career/javascript/closeup/CU20050615A/index.htm
//  TEST-URL    :  SQL     http://jsgt.org/mt/archives/01/000392.html
//------------------------------------------------------------------------------
// 최신 정보   : http://jsgt.org/mt/archives/01/000409.html
// 저작권 표시의무 없음. 상업 이용과 개조는 자유. 연락 필요 없음.
//
//

    ////
    // 동작가능한 브라우저 판정
    //
    // @sample        if(chkAjaBrowser()){ location.href='nonajax.htm' }
    // @sample        oj = new chkAjaBrowser();if(oj.bw.safari){ /* Safari 코드 */ }
    // @return        라이브러리가 동작가능한 브라우저만 true  true|false
    //
    //  Enable list (v038현재)
    //   WinIE 5.5+
    //   Konqueror 3.3+
    //   AppleWebKit계(Safari,OmniWeb,Shiira) 124+
    //   Mozilla계(Firefox,Netscape,Galeon,Epiphany,K-Meleon,Sylera) 20011128+
    //   Opera 8+
    //
    function chkAjaBrowser()
    {
        var a,ua = navigator.userAgent;
        this.bw= {
          safari    : ((a=ua.split('AppleWebKit/')[1])?a.split('(')[0]:0)>=124 ,
          konqueror : ((a=ua.split('Konqueror/')[1])?a.split(';')[0]:0)>=3.3 ,
          mozes     : ((a=ua.split('Gecko/')[1])?a.split(" ")[0]:0) >= 20011128 ,
          opera     : (!!window.opera) && ((typeof XMLHttpRequest)=='function') ,
          msie      : (!!window.ActiveXObject)?(!!createHttpRequest()):false
        }
        return (this.bw.safari||this.bw.konqueror||this.bw.mozes||this.bw.opera||this.bw.msie)
    }


    ////
    // XMLHttpRequest 오브젝트 생성
    //
    // @sample        oj = createHttpRequest()
    // @return        XMLHttpRequest 오브젝트(인스턴스)
    //
    function createHttpRequest()
    {
        if(window.ActiveXObject){
             //Win e4,e5,e6용
            try {
                return new ActiveXObject("Msxml2.XMLHTTP") ;
            } catch (e) {
                try {
                    return new ActiveXObject("Microsoft.XMLHTTP") ;
                } catch (e2) {
                    return null ;
                }
            }
        } else if(window.XMLHttpRequest){
             //Win Mac Linux m1,f1,o8 Mac s1 Linux k3용
            return new XMLHttpRequest() ;
        } else {
            return null ;
        }
    }

    ////
    // 송수신 함수
    //
    // @sample         sendRequest(onloaded,'&prog=1','POST','./about2.php',true,true)
    // @param callback 송수신시에 기동하는 함수 이름
    // @param data     송신하는 데이터 (&이름1=값1&이름2=값2...)
    // @param method   "POST" 또는 "GET"
    // @param url      요청하는 파일의 URL
    // @param async    비동기라면 true 동기라면 false
    // @param sload    수퍼 로드 true로 강제、생략또는 false는 기본
    // @param user     인증 페이지용 사용자 이름
    // @param password 인증 페이지용 암호
    //
    function sendRequest(callback,data,method,url,async,sload,user,password)
    {
        //XMLHttpRequest 오브젝트 생성
        var oj = createHttpRequest();
        if( oj == null ) return null;

        //강제 로드의 설정
        var sload = (!!sendRequest.arguments[5])?sload:false;
        if(sload || method.toUpperCase() == 'GET')url += "?";
        if(sload)url=url+"t="+(new Date()).getTime();

        //브라우저 판정
        var bwoj = new chkAjaBrowser();
        var opera     = bwoj.bw.opera;
        var safari    = bwoj.bw.safari;
        var konqueror = bwoj.bw.konqueror;
        var mozes     = bwoj.bw.mozes ;

        //송신 처리
        //opera는 onreadystatechange에 중복 응답이 있을 수 있어 onload가 안전
        //Moz,FireFox는 oj.readyState==3에서도 수신하므로 보통은 onload가 안전
        //Win ie에서는 onload가 동작하지 않는다
        //Konqueror은 onload가 불안정
        //참고 http://jsgt.org/ajax/ref/test/response/responsetext/try1.php
        if(opera || safari || mozes){
            oj.onload = function () { callback(oj); }
        } else {

            oj.onreadystatechange =function ()
            {
                if ( oj.readyState == 4 ){
                    callback(oj);
                }
            }
        }

        //URL 인코딩
        data = uriEncode(data)
        if(method.toUpperCase() == 'GET') {
            url += data
        }

        //open 메소드
        oj.open(method,url,async,user,password);

        //헤더 application/x-www-form-urlencoded 설정
        setEncHeader(oj)

        //디버그
        //alert("////jslb_ajaxxx.js//// \n data:"+data+" \n method:"+method+" \n url:"+url+" \n async:"+async);

        //send 메소드
        oj.send(data);

        //URI 인코딩 헤더 설정
        function setEncHeader(oj){

            //헤더 application/x-www-form-urlencoded 설정
            // @see  http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/interact/forms.html#h-17.13.3
            // @see  #h-17.3
            //   ( enctype의 기본값은 "application/x-www-form-urlencoded")
            //   h-17.3에 의해、POST/GET 상관없이 설정
            //   POST에서 "multipart/form-data"을 설정할 필요가 있는 경우에는 커스터마이즈 해주세요.
            //
            //  이 메소드가 Win Opera8.0에서 에러가 나므로 분기(8.01은 OK)
            var contentTypeUrlenc = 'application/x-www-form-urlencoded; charset=UTF-8';
            if(!window.opera){
                oj.setRequestHeader('Content-Type',contentTypeUrlenc);
            } else {
                if((typeof oj.setRequestHeader) == 'function')
                    oj.setRequestHeader('Content-Type',contentTypeUrlenc);
            }
            return oj
        }

        //URL 인코딩
        function uriEncode(data){

            if(data!=""){
                //&와=로 일단 분해해서 encode
                var encdata = '';
                var datas = data.split('&');
                for(i=1;i<datas.length;i++)
                {
                    var dataq = datas[i].split('=');
                    encdata += '&'+encodeURIComponent(dataq[0])+'='+encodeURIComponent(dataq[1]);
                }
            } else {
                encdata = "";
            }
            return encdata;
        }


        return oj
    }
}}}
</memo>

==== # 위키에 적용하기 위한 코드 ====
이 패치의 목적을 달성하기 위해, 샘플 예제들을 읽어보고 거기 있는 것들을 레고 조립하듯 이리 저리 짜맞추고, 브라우저별로 반응이 다른 부분들을 손질하고, 필요한 부분은 추가해서 만든 코드 =.=; 뭔가 비효율적이다 싶은 곳들도 여러 군데 있을 것임.

이런 저런 전역변수들
{{{#!vim javascript
// 여기서부터는 UseModWiki ext버전에서 바로가기 필드 자동완성을 위해 수정했음
// 필요한 전역변수
var have_data = 0;
var page_list;
var previous_search = 'previous';
var resOj;
var timeout = 0;
var timeout_url;
var div_blur = 0;
var user_last_input;
// 엘리먼트들의 이름을 짧게 쓰기 위한 변수
var _goto_field;
var _select_field;
var _list_div;
var _search_field;
}}}

변수 초기화
{{{#!vim javascript
function gotobar_init() {
    _goto_field   = document.goto_form.goto_text;
    _select_field = document.goto_form.goto_select;
    _list_div = document.getElementById('goto_list');
    _search_field = document.search_form.search;
}
}}}

처음 불리면 서버에 접속해서 Local:action=titleindex""를 받아오고, 두번째부터는 그냥 목록 갱신만 시킴
{{{#!vim javascript
//송수신 함수
function getMsg(url) {

    // 0.2초 이내에는 다시 갱신하지 않음 - 타이핑 속도를 못 따라잡는 문제
    if (timeout) {
        return;
    }
    timeout=1
    timeout_url=url
//  setTimeout("timeout=0;",200)
    setTimeout("timeout=0; getMsg(timeout_url);",300)

    if (have_data) {
        renew_select()
    }
    else {
        // 처음 한번만 서버에서 목록을 받아옴
        have_data = 1;
        sendRequest(
            on_loaded1,                                 //콜백함수
            '&action=titleindex',                       //파라메터
            'GET',                                      //HTTP메소드
            url,                                        //URL
            true,                                       //비동기
            true                                        //강제로드
        )
    }
}
}}}

서버에서 응답이 왔을 때 쓰이는 콜백함수
{{{#!vim javascript
function on_loaded1(oj)
{
    //응답을 취득
    var res  =  decodeURIComponent(oj.responseText)

    // titleindex 출력을 받아서, 개별 페이지 이름의 배열로 분리
    page_list = res.split(/\s+/)

    // select 목록 갱신
    renew_select()
}
}}}

후보 목록을 갱신하는 함수. 이런 저런 조건을 따져서 최대한 무의미한 (결과에 변화가 없는) 갱신을 하지 않게 하려 했음
{{{#!vim javascript
function renew_select() {
    // 사용자가 입력한 값을 포함한 페이지 제목만 추려냄
    var search = _goto_field.value;

    // 입력값에 변동이 없다면 진행하지 않는다
    if (previous_search == search || !page_list) {
        return;
    }
    previous_search = search

    // 목록에서 선택한 직후라면 진행하지 않는다
    if (div_blur) {
        div_blur = 0;
        return;
    }

    // 뒤의 공백을 제거하고, 중간 공백은 "_"로 치환하고, 대소문자 구분 안함
    var temp = search;
    search = search.replace(/\s*$/, '').replace(' ','_');

    // 입력값이 널 문자 또는 일정 길이 이하면 중단 - 속도 문제
    if (search.length < 1) {
        return false;
    }

    user_last_input = temp; // up키로 되돌아갔을때 복원하기 위한 값

    search = new RegExp(search, "i")
    var new_list = new Array();
    for( i = 0 ; i < page_list.length ; i++ ){
        if (page_list[i].match(search)) {
            new_list.push(page_list[i])
        }
    }

    // select 목록 갱신
    _list_div.style.display='block'
    resOj = new chgARRAYtoHTMLOptions(new_list,_select_field)
    resOj.addOptions()
}
}}}

이건 좀 묘한 함수인데.. 샘플 소스에서는 XML파일을 인자로 받아서, 여러가지 동작을 할 수 있는 오브젝트를 반환하는 함수가 있었다. 근데 여기서는 굳이 오브젝트까지 쓸 필요는 없었지 싶음
{{{#!vim javascript
// 배열을 인자로 받아서, oj에 해당하는 select 목록을 조작하는 객체를 반환
// chgXMLtoHTMLOptions()의 흉내를 내어서 수정함
function chgARRAYtoHTMLOptions(arr,oj) {

    return {

        //XML의 items,value,text을 연결하여 배열로 반환합니다
        setItems : function() {
            return arr;
        },

        //XML의 데이터로부터 오브젝트를 생성합니다
        addOptions : function() {
            //모든 옵션을 지웁니다
            this.delAllOptions(oj)
            //XML 데이터의 오브젝트를 받아 냅니다
            var data = this.setItems()
            //"item" 태그가 나온 순서대로 처리합니다
            for( i = 0 ; i < data.length ; i++ ) {
                var text  = data[i]
                var value = data[i]
                oj.options[oj.length]=new Option(text,value)
            }
        },

        //index로 지정된 옵션을 지웁니다
        delOptionByIndex : function(index) {
            oj.options[index]=null
        },

        //모든 옵션을 지웁니다
        delAllOptions : function(oj) {
            var optionIndex = oj.options.length
            for ( i=0 ; i <= optionIndex ; i++ ) {
                oj.options[0]=null          // 어째서 "i"가 아니라 "0"일까...?
            }
        },

        //option이 선택된 때의 처리
        onselectedOption : function(oj) {
            _goto_field.value = oj.options[oj.selectedIndex].value
            previous_search = _goto_field.value;
        }
    }
}
}}}

인자에 따라서, 목록 출력을 갱신하거나, 목록이 있는 DIV를 닫거나, 둘 다 수행하거나 하는 함수
{{{#!vim javascript
function goto_list_blur(oj, field_update, close_div) {
    div_blur = 1    // 텍스트필드값이 변경되더라도 목록 갱신을 하지 않게 함
    if (field_update) {
        resOj.onselectedOption(oj)
    }
    if (close_div) {
        _list_div.style.display = 'none'
    }
}
}}}

목록이 출력되는 SELECT 박스 내에서 키가 눌렸을 때 불리는 함수
{{{#!vim javascript
function goto_list_keydown(oj, KeyStorke) {
    var evt = KeyStorke || window.event;
    var nKeyCode = evt.keyCode;

    // 목록을 닫고 텍스트 필드로 되돌아갈 지 여부 판단
    if (nKeyCode == 13 || nKeyCode == 32) {
        // enter,space가 눌렸을 때 - 필드 갱신 후 닫음
        goto_list_blur(oj, true, true);
        _goto_field.focus();
        return false;
    }
    else if (nKeyCode == 27 || (nKeyCode == 38 && oj.selectedIndex <= 0)) {
        // esc가 눌렸거나
        // up이 눌렸고 목록의 제일 위에 있었을 때 - 필드 갱신 없이 닫기만 함
        goto_list_blur(oj, false, true);
        _goto_field.focus();
        _goto_field.value = user_last_input;
        setTimeout("_search_field.focus(); _goto_field.focus(); _goto_field.value = user_last_input;", 20); // for IE
        return false;
    }
    else if (nKeyCode == 8) {
        // BS - 필드 값에서 한 글자 지우고 포커스 이동
        user_last_input = _goto_field.value.substring(0,_goto_field.value.length-1);
        _goto_field.focus();
        _goto_field.value = user_last_input;
        setTimeout("_search_field.focus(); _goto_field.focus(); _goto_field.value = user_last_input;", 20); // for IE
        return true;
    }
    else {
        return true;
    }
}
}}}

사용자가 입력하는 텍스트 필드에서 키가 눌렸을 때 불리는 함수. 존재 이유는 딱 하나, 필드에서 down 커서키를 눌러서 목록으로 옮겨가기 위함 -_-;
{{{#!vim javascript
function goto_text_keydown(oj, KeyStorke) {
    var evt = KeyStorke || window.event;
    var nKeyCode = evt.keyCode;

    if (nKeyCode == 40 && resOj) {  // down
        _list_div.style.display = 'block'
        if (_select_field.options.length > 0) {
            _search_field.focus()       // 웹마 때문에 우회함
            _select_field.focus()
        }
    }
    else if (nKeyCode == 38) {      // up
        _list_div.style.display = 'none'
    }
}
}}}
=== # 추가 업데이트 내역 ===

ext 2.25b - 바로가기폼에 공백이 여러번 포함된 단어를 적었을 때, 첫번째 공백만 언더스코어(_)로 바뀌는 문제 해결 <mysign([[Raymundo]],2012-8-5 2:59 pm)>
=== # 사용자 의견 ===

지금... 페이지 목록 보여주는 건 다 됐는데, DIV 박스의 스타일 속성을 어떻게 줘야 되는지 몰라서 좀 흉하게 나옵니다. OTL 일단 지금까지 작업한 거 올려놓고 도움 요청을 해야겠네요. <mysign([[Raymundo]],2007-3-19 5:50 pm)>

-_-;;; 백스페이스, ESC등을 눌렀을 때 처리까지 추가하고 IE와 FF에서 제대로 되는 것도 확인했는데 왜 웹마에서 문제가 되냐 =.= <mysign([[Raymundo]],2007-3-20 1:46 pm)>

: [http://www.mdiwebma.com/webma/?doc=bbs/gnuboard.php&bo_table=bug&wr_id=849 웹마 버그 신고] <mysign([[Raymundo]],2007-3-20 2:50 pm)>

웹마에서 ESC가 동작하지 않는 문제 빼고는 그럭저럭 만족스럽게 돌아가고, 나머지 문제는 "해결되었거나, 내 힘으로 해결하기는 불가능하다고 판단됨"이므로 -_-; 일단 소스 정리해서 올렸습니다. <mysign([[Raymundo]],2007-3-20 4:05 pm)>
<longcomments(100)>
----
[[위키위키분류]]
UseModWiki소스수정/바로가기폼 페이지로 돌아가기 | 다른 수정본 보기