UI refactoring for document category

git-svn-id: http://xe-core.googlecode.com/svn/branches/maserati@11962 201d5d3c-b55e-5fd7-737f-ddc643e51545
This commit is contained in:
flyskyko 2012-10-30 05:47:24 +00:00
parent 3f84fbd473
commit e7c04a83f5
8 changed files with 267 additions and 244 deletions

View file

@ -857,6 +857,15 @@
Context::set('category_xml_file', $category_xml_file);
Context::loadJavascriptPlugin('ui.tree');
// Get a list of member groups
$oMemberModel = &getModel('member');
$group_list = $oMemberModel->getGroups($module_info->site_srl);
Context::set('group_list', $group_list);
$security = new Security();
$security->encodeHTML('group_list..title');
// Get information of module_grants
$oTemplate = &TemplateHandler::getInstance();
return $oTemplate->compile($this->module_path.'tpl', 'category_list');
@ -878,39 +887,13 @@
if(!$grant->manager) return new Object(-1,'msg_not_permitted');
$category_srl = Context::get('category_srl');
$parent_srl = Context::get('parent_srl');
// Get a list of member groups
$group_list = $oMemberModel->getGroups($module_info->site_srl);
Context::set('group_list', $group_list);
// Without the sub-menu has parent_srl category_srl chugaim
if(!$category_srl && $parent_srl) {
// Get information of the parent menu
$parent_info = $this->getCategory($parent_srl);
// Default parameter settings for a new menu
$category_info->category_srl = getNextSequence();
$category_info->parent_srl = $parent_srl;
$category_info->parent_category_title = $parent_info->title;
// Add to the root menu, or if an existing menu Modified
} else {
// If category_srl the menu brings the information
if($category_srl) $category_info = $this->getCategory($category_srl);
}
$category_info = $this->getCategory($category_srl);
if(!$category_info)
{
return new Object(-1, 'msg_invalid_request');
}
$category_info->title = htmlspecialchars($category_info->title);
Context::set('category_info', $category_info);
$security = new Security();
$security->encodeHTML('group_list..title');
// tpl template file directly compile and will return a variable and puts it on.
$oTemplate = &TemplateHandler::getInstance();
$tpl = $oTemplate->compile('./modules/document/tpl', 'category_info');
// Changing user-defined language
$oModuleController = &getController('module');
$oModuleController->replaceDefinedLangCode($tpl);
// set of variables to return
$this->add('tpl', $tpl);
$this->add('category_info', $category_info);
}
/**

View file

@ -1,68 +0,0 @@
<input type="hidden" name="category_srl" value="{$category_info->category_srl}" />
<input type="hidden" name="parent_srl" value="{$category_info->parent_srl}" />
<div class="layer" boxModelController" style="display:block">
<button type="button" class="xButton layerClose" title="Close this layer." onclick="jQuery(this).closest('#category_info').hide();">X</button>
<h4 class="xeAdmin h3">{$lang->category}</h4>
<div class="layerBody table">
<table cellspacing="0" class="rowTable">
<!--@if($category_info->parent_category_title)-->
<tr>
<th scope="row">{$lang->parent_category_title}</th>
<td class="wide">{$category_info->parent_category_title}</td>
</tr>
<!--@end-->
<tr>
<th scope="row">{$lang->category_title}</th>
<td>
<input type="text" name="category_title" id="category_name" value="{$category_info->title}" />
<a href="{getUrl('','module','module','act','dispModuleAdminLangcode','target','category_name')}" onclick="popopen(this.href);return false;" class="buttonSet buttonSetting"><span>{$lang->cmd_find_langcode}</span></a>
</td>
</tr>
<tr>
<th scope="row">{$lang->category_color}</th>
<td>
<input type="text" name="category_color" value="{htmlspecialchars($category_info->color)}" class="color-indicator" />
<p>{$lang->about_category_color}</p>
</td>
</tr>
<tr>
<th scope="row">{$lang->category_description}</th>
<td >
<textarea name="category_description" id="category_description" rows="8" cols="42">{htmlspecialchars($category_info->description)}</textarea>
<a href="{getUrl('','module','module','act','dispModuleAdminLangcode','target','category_description')}" onclick="popopen(this.href);return false;" class="buttonSet buttonSetting"><span>{$lang->cmd_find_langcode}</span></a>
<p>{$lang->about_category_description}</p>
</td>
</tr>
<tr >
<th scope="row2">{$lang->category_group_srls}</th>
<td>
<!--@foreach($group_list as $key=>$val)-->
<div><input type="checkbox" name="group_srls[]" value="{$key}" id="group_{$key}" <!--@if(is_array($category_info->group_srls)&&in_array($key, $category_info->group_srls))-->checked="checked"<!--@end--> class="checkbox" /> <label for="group_{$key}">{$val->title}</label></div>
<!--@end-->
<p>{$lang->about_category_group_srls}</p>
</td>
</tr>
<tr>
<th scope="row">{$lang->expand}</th>
<td>
<input type="checkbox" name="expand" value="Y" <!--@if($category_info->expand=="Y")-->checked="checked"<!--@end--> class="checkbox" />
<p>{$lang->about_expand}</p>
</td>
</tr>
<tr>
<th scope="row" colspan="2" class="button">
<span class="buttonAction actionBlue"><input type="submit" value="{$lang->cmd_save}" /></span>
</th>
</tr>
</table>
</div>
</div>
<script>
jQuery(function(){
jQuery('input.color-indicator').xe_colorpicker();
});
</script>

View file

@ -10,29 +10,83 @@
var category_title = "{$lang->category}";
</script>
<div cond="$XE_VALIDATOR_MESSAGE" class="message {$XE_VALIDATOR_MESSAGE_TYPE}">
<div cond="$XE_VALIDATOR_MESSAGE" class="x_alert x_alert-{$XE_VALIDATOR_MESSAGE_TYPE}">
<p>{$XE_VALIDATOR_MESSAGE}</p>
</div>
<form ruleset="insertCategory" id="fo_category" action="./" method="post">
<input type="hidden" name="module" value="document" />
<input type="hidden" name="act" value="procDocumentInsertCategory" />
<input type="hidden" name="module_srl" value="{$module_info->module_srl}" />
<input type="hidden" name="xml_file" value="{$category_xml_file}" />
<input type="hidden" name="success_return_url" value="{getRequestUriByServerEnviroment()}" />
<div id="category_info" class="x" style="position:absolute"></div>
</form>
<div id="menu">
<ul class="simpleTree">
<li class="root" id='tree_0'><span>{$lang->category}</span></li>
</ul>
</div>
<span style="float:right"><a href="#" onclick="doReloadTreeCategory('{$module_info->module_srl}');return false;" class="button black"><span>{$lang->cmd_remake_cache}</span></a></span>
<span style="float:right"><a href="#" onclick="doReloadTreeCategory('{$module_info->module_srl}');return false;" class="x_btn"><span>{$lang->cmd_remake_cache}</span></a></span>
<script>
var simpleTreeCollection;
var max_menu_depth = 999;
var lang_confirm_delete = "{$lang->confirm_delete}";
var xml_url = "{$category_xml_file}";
doCategoryFormMove();
Tree(xml_url);
var simpleTreeCollection;
var max_menu_depth = 999;
var lang_confirm_delete = "{$lang->confirm_delete}";
var xml_url = "{$category_xml_file}";
jQuery(function($){
Tree(xml_url);
});
</script>
<div class="x_modal x" id="__category_info" style="display:none">
<form ruleset="insertCategory" id="fo_category" action="./" method="post" class="x_form x_form-horizontal" style="margin:0">
<input type="hidden" name="module" value="document" />
<input type="hidden" name="act" value="procDocumentInsertCategory" />
<input type="hidden" name="module_srl" value="{$module_info->module_srl}" />
<input type="hidden" name="xml_file" value="{$category_xml_file}" />
<input type="hidden" name="success_return_url" value="{getRequestUriByServerEnviroment()}" />
<input type="hidden" name="parent_srl" value="{$category_info->parent_srl}" />
<input type="hidden" name="category_srl" value="{$category_info->category_srl}" />
<div class="x_modal-header">
<h3>{$lang->category}</h3>
</div>
<div class="x_modal-body">
<div id="__parent_category_info" class="x_control-group">
<label class="x_control-label">{$lang->parent_category_title}</label>
<div class="x_controls">
<span id="__parent_category_title"></span>
</div>
</div>
<div class="x_control-group">
<label class="x_control-label" for="category_title">{$lang->category_title}</label>
<div class="x_controls">
<input type="text" class="lang_code" name="category_title" id="category_title" value="" />
</div>
</div>
<div class="x_control-group">
<label class="x_control-label" for="category_color">{$lang->category_color}</label>
<div class="x_controls">
<input type="text" class="color-indicator" name="category_color" id="category_color" value="" />
<span class="x_help-block">{$lang->about_category_color}</span>
</div>
</div>
<div class="x_control-group">
<label class="x_control-label" for="category_description">{$lang->category_description}</label>
<div class="x_controls">
<textarea name="category_description" class="lang_code" id="category_description" rows="8" cols="42"></textarea>
<span class="x_help-block">{$lang->about_category_description}</span>
</div>
</div>
<div class="x_control-group">
<label class="x_control-label">{$lang->category_group_srls}</label>
<div class="x_controls">
<label loop="$group_list => $key, $val" class="x_inline" for="group_{$key}"><input type="checkbox" name="group_srls[]" value="{$key}" id="group_{$key}" /> {$val->title}</label>
<span class="x_help-block">{$lang->about_category_group_srls}</span>
</div>
</div>
<div class="x_control-group">
<label class="x_control-label">{$lang->expand}</label>
<div class="x_controls">
<label class="x_inline" for="expand"><input type="checkbox" name="expand" value="Y" id="expand" /> {$lang->about_expand}</label>
</div>
</div>
</div>
<div class="x_modal-footer">
<button type="button" class="x_btn x_pull-left" data-hide="#__category_info">{$lang->cmd_close}</button>
<button type="submit" class="x_btn x_btn-primary x_pull-right">{$lang->cmd_save}</button>
</div>
</form>
</div>

View file

@ -5,68 +5,84 @@
**/
function Tree(url){
var $ = jQuery;
// clear tree;
jQuery('#menu > ul > li > ul').remove();
if(jQuery("ul.simpleTree > li > a").size() ==0)jQuery('<a href="#" class="add"><img src="./common/js/plugins/ui.tree/images/iconAdd.gif" /></a>').bind("click",function(e){addNode(0,e);}).appendTo("ul.simpleTree > li");
$('#menu > ul > li > ul').remove();
if($("ul.simpleTree > li > a").size() == 0){
$('<a href="#__category_info" class="add modalAnchor"><img src="./common/js/plugins/ui.tree/images/iconAdd.gif" /></a>')
.bind('before-open.mw', function(e){
addNode(0,e);
})
.appendTo("ul.simpleTree > li")
.xeModalWindow();
}
//ajax get data and transeform ul il
jQuery.get(url,function(data){
jQuery(data).find("node").each(function(i){
var text = jQuery(this).attr("text");
var node_srl = jQuery(this).attr("node_srl");
var parent_srl = jQuery(this).attr("parent_srl");
var color = jQuery(this).attr("color");
var url = jQuery(this).attr("url");
$.get(url,function(data){
$(data).find("node").each(function(i){
var text = $(this).attr("text");
var node_srl = $(this).attr("node_srl");
var parent_srl = $(this).attr("parent_srl");
var color = $(this).attr("color");
var url = $(this).attr("url");
// node
var node = '';
if(color && color !='transparent'){
node = jQuery('<li id="tree_'+node_srl+'"><span style="color:'+color+';">'+text+'</span></li>');
node = $('<li id="tree_'+node_srl+'"><span style="color:'+color+';">'+text+'</span></li>');
}else{
node = jQuery('<li id="tree_'+node_srl+'"><span>'+text+'</span></li>');
node = $('<li id="tree_'+node_srl+'"><span>'+text+'</span></li>');
}
// button
jQuery('<a href="#" class="add"><img src="./common/js/plugins/ui.tree/images/iconAdd.gif" /></a>').bind("click",function(e){
jQuery("#tree_"+node_srl+" > span").click();
$('<a href="#__category_info" class="add modalAnchor"><img src="./common/js/plugins/ui.tree/images/iconAdd.gif" /></a>').bind("click",function(e){
$("#tree_"+node_srl+" > span").click();
})
.bind('before-open.mw', function(e){
addNode(node_srl,e);
return false;
}).appendTo(node);
})
.appendTo(node)
.xeModalWindow();
jQuery('<a href="#" class="modify"><img src="./common/js/plugins/ui.tree/images/iconModify.gif" /></a>').bind("click",function(e){
jQuery("#tree_"+node_srl+" > span").click();
$('<a href="#__category_info" class="modify modalAnchor"><img src="./common/js/plugins/ui.tree/images/iconModify.gif" /></a>').bind("click",function(e){
$("#tree_"+node_srl+" > span").click();
})
.bind('before-open.mw', function(e){
modifyNode(node_srl,e);
return false;
}).appendTo(node);
})
.appendTo(node)
.xeModalWindow();
jQuery('<a href="#" class="delete"><img src="./common/js/plugins/ui.tree/images/iconDel.gif" /></a>').bind("click",function(e){
$('<a href="#" class="delete"><img src="./common/js/plugins/ui.tree/images/iconDel.gif" /></a>').bind("click",function(e){
deleteNode(node_srl);
return false;
}).appendTo(node);
// insert parent child
if(parent_srl>0){
if(jQuery('#tree_'+parent_srl+'>ul').length==0) jQuery('#tree_'+parent_srl).append(jQuery('<ul>'));
jQuery('#tree_'+parent_srl+'> ul').append(node);
if($('#tree_'+parent_srl+'>ul').length==0) $('#tree_'+parent_srl).append($('<ul>'));
$('#tree_'+parent_srl+'> ul').append(node);
}else{
if(jQuery('#menu ul.simpleTree > li > ul').length==0) jQuery("<ul>").appendTo('#menu ul.simpleTree > li');
jQuery('#menu ul.simpleTree > li > ul').append(node);
if($('#menu ul.simpleTree > li > ul').length==0) $("<ul>").appendTo('#menu ul.simpleTree > li');
$('#menu ul.simpleTree > li > ul').append(node);
}
});
//button show hide
jQuery("#menu li").each(function(){
if(jQuery(this).parents('ul').size() > max_menu_depth) jQuery("a.add",this).hide();
if(jQuery(">ul",this).size()>0) jQuery(">a.delete",this).hide();
$("#menu li").each(function(){
if($(this).parents('ul').size() > max_menu_depth) $("a.add",this).hide();
if($(">ul",this).size()>0) $(">a.delete",this).hide();
});
// draw tree
simpleTreeCollection = jQuery('.simpleTree').simpleTree({
simpleTreeCollection = $('.simpleTree').simpleTree({
autoclose: false,
afterClick:function(node){
jQuery('#category_info').html("");
$('#category_info').html("");
//alert("text-"+jQuery('span:first',node).text());
},
afterDblClick:function(node){
@ -77,7 +93,7 @@ function Tree(url){
Tree(xml_url);
return;
}
var module_srl = jQuery("#fo_category input[name=module_srl]").val();
var module_srl = $("#fo_category input[name=module_srl]").val();
var parent_srl = destination.attr('id').replace(/.*_/g,'');
var source_srl = source.attr('id').replace(/.*_/g,'');
@ -88,9 +104,9 @@ function Tree(url){
parent_srl = 0;
}
jQuery.exec_json("document.procDocumentMoveCategory",{ "module_srl":module_srl,"parent_srl":parent_srl,"target_srl":target_srl,"source_srl":source_srl},
$.exec_json("document.procDocumentMoveCategory",{ "module_srl":module_srl,"parent_srl":parent_srl,"target_srl":target_srl,"source_srl":source_srl},
function(data){
jQuery('#category_info').html('');
$('#category_info').html('');
if(data.error > 0) Tree(xml_url);
});
@ -98,12 +114,12 @@ function Tree(url){
// i want you !! made by sol
beforeMovedToLine : function(destination, source, pos){
return (jQuery(destination).parents('ul').size() + jQuery('ul',source).size() <= max_menu_depth);
return ($(destination).parents('ul').size() + jQuery('ul',source).size() <= max_menu_depth);
},
// i want you !! made by sol
beforeMovedToFolder : function(destination, source, pos){
return (jQuery(destination).parents('ul').size() + jQuery('ul',source).size() <= max_menu_depth-1);
return ($(destination).parents('ul').size() + jQuery('ul',source).size() <= max_menu_depth-1);
},
afterAjax:function()
{
@ -117,30 +133,72 @@ function Tree(url){
// open all node
nodeToggleAll();
},"xml");
}
function addNode(node,e){
var params ={
"category_srl":0
,"parent_srl":node
,"module_srl":jQuery("#fo_category [name=module_srl]").val()
};
jQuery.exec_json('document.getDocumentCategoryTplInfo', params, function(data){
jQuery('#category_info').html(data.tpl).css('left',e.pageX).css('top',e.pageY);
});
function clearValue(){
var $ = jQuery;
var $w = $('#__category_info');
// clear value
$w.find('input[type="text"], textarea').val('');
$w.find('input[type="checkbox"]').removeAttr('checked');
$w.find('.lang_code').trigger('reload-multilingual');
$w.find('.color-indicator').trigger('keyup');
}
function addNode(node,e){
var $ = jQuery;
var $w = $('#__category_info');
clearValue();
// set value
$w.find('input[name="category_srl"]').val(0);
$w.find('input[name="parent_srl"]').val(node);
if(node){
$('#__parent_category_info').show();
$('#__parent_category_title').text($('#tree_' + node + ' > span').text());
}else{
$('#__parent_category_info').hide();
}
}
function modifyNode(node,e){
var params ={
"category_srl":node
,"parent_srl":0
,"module_srl":jQuery("#fo_category [name=module_srl]").val()
};
var $ = jQuery;
var $w = $('#__category_info');
jQuery.exec_json('document.getDocumentCategoryTplInfo', params, function(data){
jQuery('#category_info').html(data.tpl).css('left',e.pageX).css('top',e.pageY);
});
clearValue();
// set value
$w.find('input[name="category_srl"]').val(node);
$w.find('input[name="parent_srl"]').val(0);
var module_srl = $w.find('input[name="module_srl"]').val();
$.exec_json('document.getDocumentCategoryTplInfo', {'module_srl': module_srl, 'category_srl': node}, function(data){
if(!data || !data.category_info) return;
if(data.error){
alert(data.message);
return;
}
$w.find('input[name="category_title"]').val(data.category_info.title).trigger('reload-multilingual');
$w.find('input[name="category_color"]').val(data.category_info.color).trigger('keyup');
$w.find('textarea[name="category_description"]').val(data.category_info.description).trigger('reload-multilingual');
for(var i in data.category_info.group_srls){
var group_srl = data.category_info.group_srls[i];
$w.find('input[name="group_srls[]"][value="' + group_srl + '"]').attr('checked', 'checked');
}
if(data.category_info.expand == 'Y'){
$w.find('input[name="expand"]').attr('checked', 'checked');
}
});
$('#__parent_category_info').hide();
}
@ -183,7 +241,3 @@ function doReloadTreeCategory(module_srl) {
var response_tags = new Array('error','message', 'xml_file');
exec_xml('document', 'procDocumentMakeXmlFile', params, completeInsertCategory, response_tags, params);
}
function doCategoryFormMove() {
jQuery(function($){ $('#fo_category').appendTo(document.body); $('#category_info').css('width', '550px'); });
}