/GotoBar개선을 하면서 상단 메뉴바에 페이지 이름을 넣고 바로 이동할 수 있는 바로가기 폼을 추가하면서, 텍스트 필드에 문자열을 입력하면 그 문자열이 포함되어 있는 페이지 목록을 팝업 리스트로 보여준다.
예전부터 있었으면 하는 기능이었는데 스프링노트에 있는 게 너무 부러워서 침만 흘리다가, 스프링노트에 있는 건 어려운 거 빼고;;; 유즈모드에도 있어야지라는 의지로 완전 어설프게 구현 =.=;
용도는, 물론 자기가 원하는 페이지를 이동할 때 이름의 일부만 알아도 가능하게 하는 것도 있지만, 페이지를 편집할 때 다른 페이지 링크를 넣으려고 이름을 적어넣어야 하는데, 이름이 길면 헷갈리기도 하고 오타도 잘 나는 터라 복사해서 쓸 수 있게 하려는 것.
AJAX인지 뭔지를 알아야 하는 것 같던데, 웹에서 "AJAX 자동완성" 등으로 검색해보니 무슨 자바 servlet인가도 필요한 것 같고, 그건 J2EE를 설치해야 하는 것 같고 등등... =.=; 그러다가 [Ajax 입문 : Asynchronous JavaScript + XML]에 있는 샘플챕터 PDF 파일과 예제소스 파일을 보니까 자바스크립트가 포함된 html과 php, perl 등을 사용해서 만든 간단한 샘플들이 있었다.
여기 있는 샘플 중에 자동 완성 샘플도 있었는데 (chap07 디렉토리), 이건 iframe이 나오질 않나 div는 세 겹으로 쌓이지 않나... 그리고 목록을 dl 리스트로 만든 후에 커서키 상하를 누르는 이벤트를 잡아서 옮겨다니는 식이라서, 좋기는 한데 코드를 이해하고 수정하기가 힘들어서 포기.
주로 chap04 디렉토리 아래에 있는 내용을 가지고 짜맞췄음.
샘플에 있던 구현들은, 텍스트의 내용이 바뀔 때마다 서버에 접속해서 텍스트를 전송하고, 서버가 처리한 내용을 다시 받아오는 식이었는데, 이렇게 했더니만 너무 반응이 느려서 쓰기가 힘들었다. 그래서 이 패치에서는 제일 처음에 페이지 목록을 action=titleindex를 호출해서 받아온 후, 클라이언트 브라우저의 자바스크립트 쪽에서 사용자가 입력한 내용을 가지고 목록을 대조하도록 하였다.
모르겠음.
여기에 사용된 라이브러리 코드는 전혀 구조를 모르는 채로 그냥 가져다 썼기 때문에, 그쪽에 버그가 있을지도 모르지만... 책 부록으로도 나오고 한 걸 보니 큰 문제는 없을 것이라 생각함
화면 위 메뉴바 우측에 있는 저 자그마한 바로가기 폼에... 온갖 이벤트 핸들러들이 난무하게 된다 -_-; 어떻게든 IE와 FF양쪽에서 다 동작하게 하려니 좀 지저분하고, 클라이언트에 무리를 줄 것 같다는 느낌도 든다. 뭐 딱히 체감하지는 못했지만...
텍스트 필드에 커서를 놓고, 키보드가 처음으로 눌렸다 떼어지는 순간에 목록을 받아온다. 이 때 딜레이가 있다. GyparkWiki에서는 별로 체감되지는 않는 듯 한데, 서버 또는 네트웍이 느리면 체감될지도.
action=titleindex를 매번 실행할게 아니라 파일로 저장해놓고 파일을 읽어오게 할까 싶기도 한데, 그러면 그 파일을 항상 최신 상태로 유지하기 위해서 고쳐줘야 할 곳이 생김
첨에 페이지가 출력될 때 바로가기 폼을 출력한 아래에 스크립트를 넣어서 getMsg() 함수를 무조건 실행하게 해 보았다. 가져오는 속도는 그대로지만, 페이지 로딩할 때 묻어가게 함으로써 체감 딜레이를 줄이려고 한 건데, FF에서는 무난하게 되는데 IE에서는 페이지 로딩 직후에 심하게 버벅대어서 포기.
일단 목록을 가져왔으면 그 다음은 클라이언트에서 저장한 목록을 가지고 대조하니까 좀 낫긴 한데, 타이핑을 빨리 할 경우 매번 키가 떼어질 때마다 목록 대조를 하기 때문에 좀 불필요한 대조를 너무 많이 한다.
특히나, 필드를 채워나가면서 후보 목록을 줄일 때는 그나마 나은데, 반대로 백스페이스로 지워가면서 후보를 늘릴 때는 목록 갱신하는 지연시간이 체감된다. 일정 시간 (0.*초?) 이내에는 수행하지 않게 하고 싶은데 방법을 모르고 있음
처음에는, 텍스트 필드에 전혀 값이 없을경우는 모든 페이지에 매치되는 것으로 처리하게 했다. 즉 모든 페이지 목록이 출력되게 했는데, 페이지 1500개 가량을 추가하는 시간이 상당히 걸려서, 한 글자 이상일 때만 목록을 갱신하도록 고치니까 좀 나아졌음
해결
setTimeout()을 써서, 마지막 갱신 후 0.3초 이내에는 다시 갱신하지 않도록 하여서 타이핑을 빠르게 할 경우 중간에는 갱신하지 않게 하였다.
안쪽에 있는 자동 완성 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에서는 안 통했다.
텍스트 필드에 한글을 입력할 때, IE에서는 한 글자가 완성될 때마다 목록 갱신을 시도하지만, FF에서는 영문 입력 모드로 변환하던가, 한글이 아닌 문자를 넣어야만 그제서야 갱신된다.
이를 해결하기 위한 편법으로, 제일 뒤에 스페이스는 무시하고 목록을 대조하게 하였으니, 한글을 입력하다가 스페이스를 눌러주면 그 시점에서 갱신된다. 그 뒤를 이어서 계속 입력하려면 백스페이스를 눌러줘야 하는 건 어쩔 수 없다. =.=;
불완전한 해결
위에 언급한 setTimeout()에서, 0.2초 마다 getMsg() 자신을 다시 호출하게 해주어서, FF에서도 0.2초마다 텍스트 필드를 검사하게 함으로써 한글만 입력하는 경우에도 계속 목록 갱신이 이루어지도록 했다.
다만 제일 처음부터 필드에 한글로만 입력을 하고 있는 상태라면 첫번째 getMsg()가 불릴 수가 없어서 목록을 받아오지 못한다. 따라서 제일 처음에 한영 토글 내지는 아무 키나 눌러서 받아오던가, 한글 입력이 완료된 후에 한글이 아닌 다른 키를 눌러서 (한영 토글이나 스페이스 바 등) 첫번째 갱신을 시작시켜줘야 함.
keyup이 아니라 keydown 이벤트를 쓰면 이 문제는 해결이 되는데, 대신에 FF에서만 필드에 한 번 타이핑한 글자가 두 번 찍힌다던가 하는 문제들이 생겨서 손을 못 대겠음. OTL
FF에서 텍스트 필드에 커서를 놓고, 특정한 한글 자모를 입력할 때 (주인장이 발견한 건 "비디오"와 한 가지 더 있는데 기억 안 남) 자모 하나 또는 글자 하나가 연속으로 중복해서 입력되는 문제가 있다.
이건 도저히 이유를 모르겠다. 처음에는 위의 "갱신이 안 되는 문제"를 해결하려고 추가한 코드 때문에 그런 줄 알았는데, 그 코드들을 다 제거해도 마찬가지. 샘플 소스의 chap07에 있는 루틴이 그 문제를 고려하고 있는지 모르겠는데, 나중에 더 자세히 봐야할 듯. 암튼 지금은 해결을 못 하겠음. 항상 그러는게 아니니 쓰는 데 크게 불편하지는 않을 듯.
키보드로만 작업할 경우, 텍스트 필드에 입력을 하다가 곧바로 커서키로 목록으로 이동할 수 없다. 또 목록에서 스페이스나 엔터를 눌러서 바로 페이지 이동을 할 수 없다. TAB을 눌러서 이동한 후, 커서키로 원하는 목록을 활성화시키고, 다시 TAB을 눌러 버튼으로 가거나 Shift+TAB을 눌러서 입력 필드로 되돌아온 후에 엔터나 스페이스를 눌러서 submit해야 한다.
원하는 대로 하려면 onKeypress 이벤트를 쓴 후 눌려진 키 값을 체크해야 할 것 같은데, 키 값 얻어내는 건 브라우저마다 또 방법이 다르고 해서 코드가 너무 복잡해질 것 같아서 포기.
해결
결국 keypress 이벤트도 처리하도록 함.
일단 /TitleIndex액션을 고쳐서 &charset=UTF-8을 명시해주면 EUC-KR위키에서도 UTF_8로 인코딩된 목록을 받을 수 있게는 해 놨는데, 막상 테스트해보니까 현재 상태로 그냥 UTF-8로 된 목록을 받아서도 잘 처리하더라 -_-; 목록 검색, 갱신까지 다 잘 되는 듯. 그래서 일단 고치지 않고 그냥 action=titleindex만 주어서 목록을 받아 오게 하고 있음.
ESC키를 눌러서 닫을 수 있으면 좋겠는데, 현재는 목록창을 닫을 수 있는 방법은 일단 목록창에 포커스를 주었다가 다른 곳으로 포커스를 이동하는 것 뿐이다 =.=;
해결
ESC를 누르거나, 목록 제일 처음 항목에서 up 커서키를 눌러서 창을 닫고 텍스트필드로 돌아올 수 있다. 단 웹마에서는 ESC가 통하질 않는다. (IE에서는 괜찮은데 -_-? 웹마가 이벤트를 가로채는 곳이 있는 듯)
/GotoBar개선에서 추가된 GetGotoForm에서, 각각의 요소에 이벤트 처리 부분을 추가해준다. 일일이 표시하기 힘들어서 함수를 다시 통채로 적음.
그리고 Goto매크로와 공유하는 함수라서, 이게 매크로로 쓰였는지 아닌지에 따라 다르게 출력할 부분들이 많다. (아예 goto매크로 쪽 구현을 다시 바꿔버릴 걸 그랬나 싶기도)
이 패치의 목적을 달성하기 위해, 샘플 예제들을 읽어보고 거기 있는 것들을 레고 조립하듯 이리 저리 짜맞추고, 브라우저별로 반응이 다른 부분들을 손질하고, 필요한 부분은 추가해서 만든 코드 =.=; 뭔가 비효율적이다 싶은 곳들도 여러 군데 있을 것임.
이런 저런 전역변수들
// 여기서부터는 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;
//송수신 함수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 //강제로드
)
}}
서버에서 응답이 왔을 때 쓰이는 콜백함수
function on_loaded1(oj)
{
//응답을 취득
var res = decodeURIComponent(oj.responseText)
// titleindex 출력을 받아서, 개별 페이지 이름의 배열로 분리
page_list = res.split(/\s+/)
// select 목록 갱신
renew_select()
}
후보 목록을 갱신하는 함수. 이런 저런 조건을 따져서 최대한 무의미한 (결과에 변화가 없는) 갱신을 하지 않게 하려 했음
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파일을 인자로 받아서, 여러가지 동작을 할 수 있는 오브젝트를 반환하는 함수가 있었다. 근데 여기서는 굳이 오브젝트까지 쓸 필요는 없었지 싶음
// 배열을 인자로 받아서, 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를 닫거나, 둘 다 수행하거나 하는 함수
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 박스 내에서 키가 눌렸을 때 불리는 함수
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 커서키를 눌러서 목록으로 옮겨가기 위함 -_-;
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'}}
I see in GetGotoForm some oddities. E.g.:
1) a name with trailer of spaces at the beginning ("_" want to say space):
__________Name
then url returns "_" for each space ant the title prune spaces
2) a name with trailer of spaces at the end ("_" wants to say space):
Name_________
then url prune spaces and the title too
3) a name with spaces between characters ("_" wants to say space):
Name_________Name
then url returns "_" for each spaces and the title converts in one space.
I have an attempt (javascript is not my first language, in fact is neither the second one ).
I checked what you said. Thank you for your pointing out. I'll look into it more. But, by now, I don't think this is a problem to solve, because it will as same situaion as when a user types URL directly in a browser.
![[첫화면으로]](/raymundo_logo.jpg){kind=logo}
UseModWiki소스수정/바로가기폼
action=titleindex를 호출해서 받아온 후, 클라이언트 브라우저의 자바스크립트 쪽에서 사용자가 입력한 내용을 가지고 목록을 대조하도록 하였다.
