[첫화면으로]UseModWiki소스수정/GotoBar개선

마지막으로 [b]
1. 화면 상단 메뉴바(GotoBar) 개선
1.1. 어떻게 고쳐졌나...
1.1.1. 바로가기
1.1.2. 테이블 대신 리스트 사용
1.1.3. DIV
1.1.4. 환경설정 링크
1.2. 부작용
1.3. 알려진 문제점
1.4. wiki.pl 수정
1.5. wiki.css 수정
1.6. wiki_print.css 수정
1.7. translations/ko_KR.UTF-8.pl , ko_KR.EUC-KR.pl 수정
1.8. 추가 업데이트 내역
1.9. 사용자 의견

1. 화면 상단 메뉴바(GotoBar) 개선

메뉴바를 뜯어 고침.

1.1. 어떻게 고쳐졌나...

1.1.1. 바로가기

goto매크로와 같은 동작을 하는 /바로가기폼을 추가했음. 바로가기를 누르면 해당 페이지로 이동.

기존의 goto매크로의 경우, A라는 페이지에서 매크로에 "B"페이지 이름을 입력하고 버튼을 누르면, 어쨌거나 둘 다 제대로 B페이지를 불러오기는 하는데, 생긴게 맘에 안 들어서 자바스크립트의 onClick 이벤트를 쓰도록 했음.

Alt+G를 누르면 바로가기 텍스트필드로 커서를 이동시킬 수 있다. FF에서는 동작하지 않는다.

1.1.2. 테이블 대신 리스트 사용

기존 메뉴바는 1행짜리 테이블인데, 검색 필드에 "내용출력" 체크박스가 추가된 데 이어서 바로가기 필드까지 추가되는 바람에, 브라우저 창의 폭을 어지간히 늘리지 않으면 한 줄짜리 테이블로는 왼쪽의 메뉴 링크들이 너무 더덕더덕 붙고 셀마다 두줄로 나오는 등 대책이 없었다. =.=;

그래서 아예 처음부터 두 줄 높이를 잡고 테이블을 하려니까 이건 이거대로 셀끼리 열을 맞추는게 맘대로 안 되어서... (왼쪽을 죄다 rowspan을 할 걸 그랬나) 아예 생각난 김에 테이블을 버리고 리스트로 바꿨다. 소스보기를 하면 알 수 있겠지만, 기존에 테이블의 각 셀에 들어가던 것이 이제는 UL(순서없는 리스트)의 LI항목이 되었음

더 자세히 얘기하면 메뉴바에 있는 항목들을 세 그룹으로 나누어서 세 그룹이 각각 별개의 리스트로 구성되었음.

1.1.3. DIV

세 그룹 배치를 위해 DIV 사용. UseModWiki스타일쉬트에서 반영해주어야 한다.

1.1.4. 환경설정 링크

"환경설정" 링크는 로그인했을 때만 나타나게 했음

1.2. 부작용

1.3. 알려진 문제점

1.4. wiki.pl 수정

$GotoTextFieldId 전역 변수 추가 - goto매크로가 있는 페이지를 출력하게 되면, 메뉴바의 바로가기와 매크로의 바로가기의 텍스트 필드 id값을 별개로 주어야 해서... 
### 패치를 위해 추가된 내부 전역 변수
use vars qw(%RevisionTs $FS_lt $FS_gt $StartTime $Sec_Revision $Sec_Ts
    ...
    $UseShortcutPage $SectionNumber $AnchorPattern $GotoTextFieldId);

GetGotoBar 함수 싸그리 바뀜 
sub GetGotoBar {
    my ($id) = @_;
    my ($main, $bar_menu, $bar_user, $bar_search);

# gotobar_menu
    $bar_menu .= "<DIV class='gotobar_menu'>\n";
    $bar_menu .= "<UL>\n";
    $bar_menu .= "<LI>"
                . &GetPageLink($HomePage).&GetPageLinkText($HomePage, "[f]")
                . "</LI>\n";
    $bar_menu .= "<LI>"
                . &GetPageLink(T($RCName)).&ScriptLink("action=rc", "[r]")
                . "</LI>\n";
    $bar_menu .= "<LI>"
                . &ScriptLink("action=index", T('Index')."[i]")
                . "</LI>\n";
    if ($id =~ m|/|) {
### subpage 의 경우, 상위페이지 이름 앞에 아이콘 표시
        $main = $id;
        $main =~ s|/.*||;  # Only the main page name (remove subpage)
        $bar_menu .= "<LI>"
                    . "<img src=\"$IconUrl/parentpage.gif\" border=\"0\" alt=\""
                    . T('Main Page:') . " $main\" align=\"absmiddle\">"
                    . &GetPageLink($main)
                    . "</LI>\n";
    }
    if ($UserGotoBar ne '') {
        $bar_menu .= "<LI>" . $UserGotoBar . "</LI>\n";
    }
    foreach ($UserGotoBar2, $UserGotoBar3, $UserGotoBar4) {
        if ($_ ne '') {
            $bar_menu .= "<LI>" . $_ . "</LI>\n";
        }
    }
    if (&GetParam("linkrandom", 0)) {
        $bar_menu .= "<LI>" . &GetRandomLink() . "</LI>\n";
    }
    $bar_menu .= "<LI>"
                . &ScriptLink("action=links", T('Links'))
                . "</LI>\n";
    if (&UserIsAdmin()) {
        $bar_menu .= "<LI>"
                    . &ScriptLink("action=adminmenu", T('Admin'))
                    . "</LI>\n";
    }
    $bar_menu .= "</UL>";
    $bar_menu .= "</DIV>\n";

# gotobar_user
    $bar_user .= "<DIV class='gotobar_user'>\n";
    $bar_user .= "<UL>\n";
    if (!&LoginUser()) {
        $bar_user .= "<LI>"
                    . &ScriptLink("action=login&pageid=$pageid", T('Login')."[l]")
                    . "</LI>\n";
    }
    else {
        $bar_user .= "<LI>"
                    . &GetPageLink(&GetParam('username')) . "</LI>\n"
                    . "<LI>"
                    . &GetPrefsLink() . " | "
                    . &ScriptLink("action=logout", T('Logout'). "[l]")
                    . "</LI>\n";
    }
    $bar_user .= "</UL>";
    $bar_user .= "</DIV>\n";

# gotobar_search, goto
    $bar_search .= "<DIV class='gotobar_search'>\n";
    $bar_search .= "<UL>\n";
    $bar_search .= "<LI>" . &GetGotoForm() . "</LI>\n";

    $bar_search .= "<LI>" . &GetSearchForm() . "</LI>\n";
    $bar_search .= "</UL>";
    $bar_search .= "</DIV>\n";

    return
        "<DIV class='gotobar'>"
        . $bar_search
        . $bar_user
        . $bar_menu
        . "</DIV>"
        . "<HR class='gotobar'>\n"
        ;
}

바로가기 폼을 만드는 GetGotoForm 함수를 추가하는데, 이건 /바로가기폼에서 다룬다.

스타일 등의 일관성을 위해서, 검색 폼을 만드는 GetSearchForm 함수도 통채로 수정 
sub GetSearchForm {
    my ($result);

### 단축키 alt-s 지정
    my $checked = &GetParam("context","");
    $result =
        &GetFormStart()
        . &GetHiddenValue("dosearch", 1)
        . $q->textfield(
                -name   => "search",
                -class  => "search",
                -size   => "15",
                -accesskey => "s",
                -title  => "Alt + s",
                )
        . $q->checkbox(
                -name       => 'context',
                -checked    => ($checked)?1:'',
                -value      => 'on',
                -label      => T('Context'),
            )
        . " "
        . $q->submit(
                -class  => "search",
                -name   => "Submit",
                -value  => T("Search"),
                )
        . $q->endform
        ;

    return $result;
}

상단 메뉴바에 폼이 하나 더 생겼기 때문에, 페이지 편집하다가 미리 보기를 했을때 제대로 안 나온다. 미리 보기 창을 띄우는 부분 수정 
sub DoEdit {
    ...
function preview()
{
    var w = window.open("", "Preview", "width=640,height=480,resizable=1,statusbar=1,scrollbars=1");
    w.focus();

    var body = '<html><head><title>Wiki Preview</title><meta http-equiv="Content-Type" content="text/html; charset=$HttpCharset"></head>';
// 아래 한 줄 (이 주석은 넣지 말 것)
    body += '<body><form method="post" action="$ScriptName" accept-charset="$HttpCharset" name="form_edit">';
    body += '<input type="hidden" name="id" value="$id">';
    body += '<input type="hidden" name="action" value="preview"><input type=hidden name="text"></form></body></html>';

    w.document.open();
    w.document.charset = '$HttpCharset';
    w.document.write(body);
    w.document.close();
// 아래 두 줄 (이 주석은 넣지 말 것)
    w.document.form_edit.text.value = window.document.form_edit.text.value;
    w.document.form_edit.submit();
}
...
}

1.5. wiki.css 수정

UseModWiki스타일쉬트도 수정해야 한다. 기존에 있던 TABLE, TR, TD에 .gotobar류의 항목들 대신 아래의 항목을 사용함 

/* 상단 메뉴 바 */
DIV.gotobar {
    border-top: 2px solid silver;
    border-bottom: 2px solid silver;
}

DIV.gotobar_menu {
    margin: 0;
    padding: 5px 5px 5px 5px;
    height: 60px;
    text-align: left;
}

DIV.gotobar_user {
    float: right;
    margin: 0 0 0 10px;
    padding: 2px 5px 2px 5px;
    height: 60px;
    border-left: 1px solid gray;
}

DIV.gotobar_search {
    float: right;
    margin: 0 0 0 10px;
    padding: 2px 5px 2px 5px;
    height: 60px;
    border-left: 1px solid gray;
}

DIV.gotobar UL {
    margin: 0;
    padding: 0;
    list-style: none;
}

DIV.gotobar LI {
    margin: 0;
    vertical-align: baseline;
    padding: 2px 0 2px 0;
}

DIV.gotobar_menu LI {
    display: inline;
    height: 30px;
    margin: 3px 20px 0 0;
    text-align: center;
}

DIV.gotobar_user LI {
    text-align: center;
    margin: 0;
}

INPUT.goto, INPUT.search {
    height: 22px;
}

DIV.gotobar LI FORM {
    display: inline;
}

DIV.gotobar_search DIV {
    display: inline;
}

DIV.gotobar A:link,
DIV.gotobar A:visited,
DIV.gotobar A:active,
DIV.gotobar A:hover
{
    background: transparent;
    color: blue;
    text-decoration: none;
}
DIV.gotobar A:hover
{
    text-decoration: underline;
}

HR.gotobar {
    border-color: silver;
    margin-top: 2px;
    height: 2px;
}

1.6. wiki_print.css 수정

프린트용 스타일쉬트도 마찬가지로 TABLE.gotobar 대신에 DIV.gotobar를 사용 
DIV.gotobar {
    display: none;
}

1.7. translations/ko_KR.UTF-8.pl , ko_KR.EUC-KR.pl 수정

다음 항목 추가 
Search
검색

1.8. 추가 업데이트 내역

1.9. 사용자 의견

이름:  
Homepage:
내용:
 
위키위키분류

마지막 편집일: 2007-3-19 5:43 pm (변경사항 [d])
819 hits | Permalink | 변경내역 보기 [h] | 페이지 소스 보기
0.137 sec 처음으로 [t]