Create script for multi-lingual input control page

git-svn-id: http://xe-core.googlecode.com/svn/branches/1.5.0@8853 201d5d3c-b55e-5fd7-737f-ddc643e51545
This commit is contained in:
taggon 2011-08-24 05:25:56 +00:00
parent 3cd09ec9ed
commit b87aedbd2b
2 changed files with 89 additions and 101 deletions

View file

@ -1,32 +1,47 @@
jQuery(function($){ jQuery(function($){
$('li') // multi-lingual text list
$('#langList')
.find('ul').hide().attr('aria-hidden','true').end() // collapse all language input control
.delegate('button._edit', 'click', function(){ .delegate('button._edit', 'click', function(){
var $this = $(this); var $this = $(this), $ul = $this.next('ul'), form;
/*, site_srl = $this.data('site_srl');
currentClickedSiteObject = $this;*/
var formObj = $this.parents().find('form').first(); // toggle input control
if($ul.attr('aria-hidden') == 'false') {
$ul.slideUp('fast');
$ul.attr('aria-hidden', 'true');
}else{
$ul.slideDown('fast');
$ul.attr('aria-hidden', 'false');
}
// TODO : 모듈 목록을 찾아서 셀렉트 박스에 할당 if($ul.data('lang-loaded') == true) return;
var params = new Array();
var response_tags = ['error', 'message', 'lang_list', 'lang_name']; $ul.data('lang-loaded', true);
params['lang_name'] = formObj.find('input[name=lang_name]').val(); form = $this.closest('form').get(0);
function on_complete(ret) {
var name = ret['lang_name'], list = ret['lang_list']['item'], elems = form.elements, item;
$ul.find('label+textarea').prev('label').css('visibility','hidden');
if(!$.isArray(list)) list = [list];
for(var i=0,c=list.length; i < c; i++) {
item = list[i];
if(item && item.lang_code && elems[item.lang_code]) {
elems[item.lang_code].value = item.value;
if(!item.value) $(elems[item.lang_code]).prev('label').css('visibility','visible');
}
}
}
exec_xml(
'module',
'getModuleAdminLangListByName',
{lang_name:form.elements['lang_name'].value},
on_complete,
'error,message,lang_list,lang_name'.split(',')
);
})
exec_xml('module','getModuleAdminLangListByName',params, completeGetModuleList, response_tags);
});
}); });
function completeGetModuleList(ret_obj, response_tags)
{
var langName = ret_obj['lang_name'];
var langList = ret_obj['lang_list']['item'];
if(!jQuery.isArray(langList)) langList = [langList];
var htmlListBuffer = '';
for(var x in langList)
{
var objLang = langList[x];
jQuery('#' + langName + '_' + objLang.lang_code).val(objLang.value);
}
}

View file

@ -1,93 +1,67 @@
<!--%import("js/multilingual.js")--> <!--%import("js/multilingual.js")-->
<div class="content" id="content">
<div cond="$XE_VALIDATOR_MESSAGE" class="message {$XE_VALIDATOR_MESSAGE_TYPE}"> <div cond="$XE_VALIDATOR_MESSAGE" class="message {$XE_VALIDATOR_MESSAGE_TYPE}">
<p>{$XE_VALIDATOR_MESSAGE}</p> <p>{$XE_VALIDATOR_MESSAGE}</p>
</div> </div>
<h1 class="h1">Multilingual</h1> <h1 class="h1">Multilingual</h1>
<p>현재 12 종류의 다국어 문자를 지원할 수 있습니다. 다른 종류의 다국어 지원을 원하는 경우 /common/lang/ 폴더의 다국어 가운데 하나의 세트를 번역해서 XE 개발자(contact@xpressengine.com)에게 보내주세요.</p> <p>현재 12 종류의 다국어 문자를 지원할 수 있습니다. 다른 종류의 다국어 지원을 원하는 경우 /common/lang/ 폴더의 다국어 가운데 하나의 세트를 번역해서 XE 개발자(contact@xpressengine.com)에게 보내주세요.</p>
<div class="mLangEdit ko"> <div class="mLangEdit ko"><!-- class="mLangEdit LANGCODE" -->
<!-- 한국어일 때 "mLangEdit ko" | 영어일 때 "mLangEdit ko" | ... --> <div class="btnArea">
<div class="btnArea"> <span class="btn"><a href="#addWord" class="modalAnchor">새로운 단어 또는 문장 추가...</a></span>
<span class="btn"><a href="#addWord" class="modalAnchor">새로운 단어 또는 문장 추가...</a></span>
</div>
<ul>
<!--@foreach($lang_code_list AS $key=>$value)-->
{@$langName = $value->name}
<li>
<form action="./" method="post" class="form" id="langForm_{$langName}" >
<input type="hidden" name="act" value="procModuleAdminInsertLang" />
<input type="hidden" name="lang_name" value="{$langName}" />
<strong>{$value->value}</strong> <button type="button" class="side text _edit">Edit</button>
<ul>
<!--@foreach($lang_supported AS $key2=>$value2)-->
<li class="{$key2}"><label for="{$langName}_{$key2}">{$value2}</label> <textarea rows="1" cols="42" name="{$key2}" id="{$langName}_{$key2}"></textarea></li>
<!--@end-->
</ul>
<div class="btnArea">
<button type="submit" name="act" value="procModuleAdminInsertLang">{$lang->cmd_save}</button>
<button type="submit" name="act" value="procModuleAdminDeleteLang">{$lang->cmd_delete}</button>
</div>
</form>
</li>
<!--@end-->
</ul>
<div class="btnArea">
<span class="btn"><a href="#addWord" class="modalAnchor">새로운 단어 또는 문장 추가...</a></span>
</div>
</div> </div>
<div class="modal" id="addWord"> <ul id="langList">
<form action="" class="mLangEdit fg form"> <li loop="$lang_code_list=>$key,$value">
<h2 class="h2">새로운 단어 또는 문장 추가</h2> {@$langName = $value->name}
<form action="./" method="post" class="form" id="langForm_{$langName}" >
<form action="./" method="post" class="form" id="langForm_new" > <input type="hidden" name="act" value="procModuleAdminInsertLang" />
<input type="hidden" name="act" value="procModuleAdminInsertLang" /> <input type="hidden" name="lang_name" value="{$langName}" />
<strong>{$value->value}</strong> <button type="button" class="side text _edit">Edit</button>
<ul> <ul>
<!--@foreach($lang_supported AS $key2=>$value2)--> <li class="{$key2}" loop="$lang_supported=>$key2,$value2"><label for="{$langName}_{$key2}">{$value2}</label> <textarea rows="1" cols="42" name="{$key2}" id="{$langName}_{$key2}"></textarea></li>
<li class="{$key2}"><label for="{$langName}_{$key2}">{$value2}</label> <textarea rows="1" cols="42" name="{$key2}" id="{$langName}_{$key2}"></textarea></li>
<!--@end-->
</ul> </ul>
<div class="btnArea"> <div class="btnArea">
<span class="btn small"><button type="submit">Save</button></span> <button type="submit" name="act" value="procModuleAdminInsertLang">{$lang->cmd_save}</button>
<button type="submit" name="act" value="procModuleAdminDeleteLang">{$lang->cmd_delete}</button>
</div> </div>
</form>
</form> </form>
</li>
</ul>
<div class="btnArea">
<span class="btn"><a href="#addWord" class="modalAnchor">새로운 단어 또는 문장 추가...</a></span>
</div> </div>
// 다국어 추가 삭제 관리 페이지 프로토타입. 태곤의 TO DO. </div>
<script type="text/javascript"> <div class="modal" id="addWord">
jQuery(function($){ <form action="" class="mLangEdit fg form">
var ml = $('.mLangEdit'); <h2 class="h2">새로운 단어 또는 문장 추가</h2>
ml.find('>ul>li>ul').hide().end().find('>ul>li>.btnArea').hide(); // 하위 목록과 버튼 숨김
ml.find('>ul>li>.side').click(function(){ // Edit 버튼을 클릭하면 <form action="./" method="post" class="form" id="langForm_new" >
var tpi = $(this).parent('li'); <input type="hidden" name="act" value="procModuleAdminInsertLang" />
ml.find('>ul>li>ul:visible, >ul>li>.btnArea:visible') // 열린 하위 목록과 버튼 숨김 <ul>
.slideUp(200) <li class="{$key2}" loop="$lang_supported=>$key2,$value2"><label for="{$langName}_{$key2}">{$value2}</label> <textarea rows="1" cols="42" name="{$key2}" id="{$langName}_{$key2}"></textarea></li>
.parent('li') </ul>
.removeClass('active'); <div class="btnArea">
tpi.children('ul:hidden, .btnArea:hidden') // 닫힌 하위 목록과 버튼 열기 <span class="btn small"><button type="submit">Save</button></span>
.slideDown(200) </div>
.parent('li') </form>
.addClass('active'); </form>
}); </div>
}); <div class="search">
</script> <form action="" class="pagination">
<div class="search">
<form action="" class="pagination">
<input type="hidden" name="error_return_url" value="" /> <input type="hidden" name="error_return_url" value="" />
<input type="hidden" name="module" value="{$module}" /> <input type="hidden" name="module" value="{$module}" />
<input type="hidden" name="act" value="{$act}" /> <input type="hidden" name="act" value="{$act}" />
<input cond="$search_keyword" type="hidden" name="search_keyword" value="{$search_keyword}" /> <input cond="$search_keyword" type="hidden" name="search_keyword" value="{$search_keyword}" />
<input cond="$search_target" type="hidden" name="search_target" value="{$search_target}" /> <input cond="$search_target" type="hidden" name="search_target" value="{$search_target}" />
<a href="{getUrl('page', '')}" class="direction">&laquo; FIRST</a> <a href="{getUrl('page', '')}" class="direction">&laquo; FIRST</a>
<block cond="$page_navigation->first_page + $page_navigation->page_count > $page_navigation->last_page && $page_navigation->page_count != $page_navigation->total_page"> <block cond="$page_navigation->first_page + $page_navigation->page_count > $page_navigation->last_page && $page_navigation->page_count != $page_navigation->total_page">
<a href="{getUrl('page', '')}">1</a> <a href="{getUrl('page', '')}">1</a>
<a href="#goTo" class="tgSimple" title="{$lang->cmd_go_to_page}">...</a> <a href="#goTo" class="tgSimple" title="{$lang->cmd_go_to_page}">...</a>
</block> </block>
<!--@while($page_no = $page_navigation->getNextPage())--> <block loop="$page_no = $page_navigation->getNextPage()">
{@$last_page = $page_no} {@$last_page = $page_no}
<strong cond="$page_no == $page">{$page_no}</strong> <strong cond="$page_no == $page">{$page_no}</strong>
<a cond="$page_no != $page" href="{getUrl('page', $page_no)}">{$page_no}</a> <a cond="$page_no != $page" href="{getUrl('page', $page_no)}">{$page_no}</a>
<!--@end--> </block>
<block cond="$last_page != $page_navigation->last_page"> <block cond="$last_page != $page_navigation->last_page">
<a href="#goTo" class="tgSimple" title="{$lang->cmd_go_to_page}">...</a> <a href="#goTo" class="tgSimple" title="{$lang->cmd_go_to_page}">...</a>
<a href="{getUrl('page', $page_navigation->last_page)}">{$page_navigation->last_page}</a> <a href="{getUrl('page', $page_navigation->last_page)}">{$page_navigation->last_page}</a>
@ -97,14 +71,13 @@ jQuery(function($){
<input name="page" title="{$lang->cmd_go_to_page}" /> <input name="page" title="{$lang->cmd_go_to_page}" />
<button type="submit">Go</button> <button type="submit">Go</button>
</span> </span>
</form> </form>
<form action="./" method="get"> <form action="./" method="get">
<input type="hidden" name="module" value="{$module}" /> <input type="hidden" name="module" value="{$module}" />
<input type="hidden" name="act" value="{$act}" /> <input type="hidden" name="act" value="{$act}" />
<input type="hidden" name="search_target" value="value" /> <input type="hidden" name="search_target" value="value" />
<input title="search_keyword" name="search_keyword" value="{htmlspecialchars($search_keyword)}" /> <input title="search_keyword" name="search_keyword" value="{htmlspecialchars($search_keyword)}" />
<input type="submit" value="Search" /> <input type="submit" value="Search" />
</form> </form>
</div>
</div> </div>