UIMultiLang

Multi Language Editor

사용자 정의 다국어를 선택하거나 추가 또는 수정할 때 사용할 수 있는 UI 패턴이다.

Basics

다국어 편집기 UI는 다음 템플릿 코드를 수정하여 사용할 수 있다.

<div class="multiLangEdit">
    <input type="hidden" class="vLang" /><input type="text" class="vLang" />
    <span class="desc"><a href="#langEdit" class="editUserLang tgAnchor">Edit Multilingual text</a></span>
</div>
...
...
<!-- Multilingual editor layer -->
<div id="langEdit" class="langEdit tgContent">
    <ul class="langList"></ul>
    <div class="langInput">
        <h2>다국어 <strong>수정</strong> | <a href="#langEdit">추가</a></h2>
        <ul>
            {@
                /* move current language to the top */
                $a = array($lang_type=>$lang_supported[$lang_type]);
                unset($lang_supported[$lang_type]);
                $lang_supported = array_merge($a, $lang_supported);
            }
            <li loop="$lang_supported=>$code,$name" class="{$code}"><label for="{$code}_var1">{$name}</label> <input type="text" value="" id="{$code}_var1" /></li>
        </ul>
        <div class="action">
            <div class="btnArea">
                <span class="btn small"><input type="submit" value="사용|저장 후 사용" /></span>
            </div>
            <p><a href="{getUrl('act','dispModuleAdminLangcode')}">다국어 텍스트 관리</a></p>
        </div>
    </div>
</div>

div.multiLangEdit 요소는 클래스 이름만 그대로 유지한다면 다른 요소로 대체해도 상관없다. 예를 들어, div요소 대신 td를 다음과 같이 사용할 수 있다.

<td class="multiLangEdit">
    <input type="hidden" class="vLang" /><input type="text" class="vLang" />
    <span class="desc"><a href="#langEdit" class="editUserLang tgAnchor">Edit Multilingual text</a></span>
</td>

div#langEdit 요소는 페이지에서 한 번만 입력하면 되며, 다국어 편집 링크 a.editUserLang.tgAnchor는 href 속성을 사용해 #langEdit 요소를 가리켜야 한다.

input.vLang 요소의 첫 번째 요소에는 다국어의 고유한 이름(name)이, 두 번째 요소에는 현재 사용 중인 언어의 텍스트값(value)이 저장된다. 예를 들어, DB에 다음과 같이 저장된 다국어 텍스트가 있다고 가정해보자.

name
lang_code
value

userlang1234
en
Hello

userlang1234
ko
안녕하세요

userlang1234
jp
こんにちは

사용자 환경의 사용중인 언어가 한국어(ko)일 때 userlang1234 다국어 텍스트를 적용한 input.vLang의 값은 다음과 동등하다.

<div class="multiLangEdit">
    <input type="hidden" class="vLang" value="$user_lang-&gt;userlang1234" /><input type="text" class="vLang" value="안녕하세요" />
    ....
</div>