Files
Pichome/core/template/default/common/wx_menu.htm
2021-12-09 21:00:09 +08:00

504 lines
20 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<style>
.group-tabul{
margin-left: 0px;
padding-left: 0px;
float: left;
}
.custom_menu_list {
padding: 2px 15px;
border-top: 1px solid #FFF;
border-bottom: 1px solid #e5e5e5;
height: 38px;
overflow:visible;
}
.custom_menu_list:hover{
background:#F7F7F7;
}
.custom_menu_addName, .custom_menu_name, .custom_menu_subName {
height: 34px;
line-height: 32px;
display: inline-block;
vertical-align: middle;
cursor: pointer;
}
.js_add_second{
padding-left:42px;
}
.custom_menu_list.cm_subname {
padding-left: 42px;
}
.custom_menu_title_text {
padding: 12px 15px 12px 35px;
border-bottom: 1px solid #e5e5e5;
margin:0;
}
.hover_visible{
opacity:0;
_filter: Alpha(opacity=0);
}
.custom_menu_list:hover .hover_visible{
opacity:1;
_filter: Alpha(opacity=100);
}
.custom_menu_list.editing:hover .hover_visible,.custom_menu_list.editing .hover_visible{
display:none;
}
.custom_menu_input{
height: 26px;
border: 1px solid #ddd;
outline: 0;
width: 250px;
padding:0 5px;
display: none;
margin: 2px 0;
}
.custom_menu_notice {
margin-left: 20px;
display: none;
color: #da4a38;
}
.error .custom_menu_input{
border-color:#da4a38;
}
.error .js_input_limit{
border-color:#da4a38;
}
.error .custom_menu_notice{
display:inline-block;
}
.custom_menu_list.editing .custom_menu_subName,.custom_menu_list.editing .custom_menu_name,.custom_menu_list.editing .custom_menu_addName,.custom_menu_list.editing .icon{
display:none;
}
.custom_menu_list.editing .custom_menu_input{
display:inline-block;
}
.icon {
display: inline-block;
width: 24px;
height: 24px;
background-image: url(static/image/common/icon_main.png)!important;
background-repeat: no-repeat!important;
}
.icon_click_gray {
width: 28px;
height: 16px;
background-position: -224px -126px;
}
.icon_link_gray {
width: 20px;
height: 20px;
background-position: -190px -158px;
}
.custom_menu_list .icon_link_gray {
margin: 8px 0 0;
}
.custom_menu_list .icon_click_gray {
margin: 8px -4px 0 0;
}
.custom_menu_list .icon_arrow_down, .custom_menu_list .icon_arrow_right {
margin-right: 8px;
}
.icon_arrow_down {
width: 8px;
height: 8px;
background-position: -64px -96px;
}
.custom_menu_list .icon_add_small {
vertical-align: -3px;
margin-right: 5px;
}
.icon_add_small {
width: 14px;
height: 14px;
background-position: -32px -160px;
}
.icon_edit_gray {
height: 16px;
width: 16px;
background-position: -192px -33px;
}
.custom_menu_list .icon_edit_gray {
vertical-align: middle;
margin-left: 8px;
}
.custom_menu_list .icon_remove {
margin: 8px 0 0 10px;
}
.icon_remove, .icon_remove_gray {
width: 16px;
height: 17px;
background-position: -160px -32px;
}
</style>
<div class="main-header clearfix">
<ul class="group-tabul" style="margin-bottom:0px">
<li><a href="{$baseurl_info}">{eval echo $base_info_title?$base_info_title:'{lang application_message}';}</a></li>
<li class="active"><a href="{$baseurl_menu}">{eval echo $base_menu_title?$base_menu_title:'{lang application_menu}';}</a></li>
</ul>
</div>
<div class="main-content" style="border-top:1px solid #FFF;">
<ul class="help-block text_center custom_menu_title_text ">
<li>{lang creat_three_level_menu}</li>
<li>{lang edit_menu_in_the_user_can_not_see}</li>
<li>{lang menu_release_24_hours_to_update}</li>
<li>{lang drag_can_be_sorted}</li>
</ul>
<div class="custom_menu_mainList_wrap">
<!--{loop $menu[button] $key $value}-->
<div class="custom_cmname_list_wrap">
<div class="custom_menu_list cm_name js_li clearfix" data-id="$key" data-name="$value[name]" data-type="$value[type]" <!--{if $value[type]=='click'}--> data-key="$value[key]"<!--{elseif $value[type]=='view'}-->data-url="$value[url]"<!--{/if}-->>
<a class="icon icon_remove pull-right js_menu_remove hover_visible" href="javascript:;"></a>
<span class="icon icon_arrow_down"></span><span class="custom_menu_name">$value[name]</span>
<!--{if $value[type] && $value[type]=='view'}-->
<a class=" pull-right js_link" href="javascript:;" title="{lang skip_links}" onclick="setEventkey(this,'link');return false"><span class="icon icon_link_gray"></span></a>
<!--{elseif $value[type]}-->
<a class=" pull-right js_click " href="javascript:;" title="{lang menu}KEY" onclick="setEventkey(this,'click');return false"><span class="icon icon_click_gray"></span></a>
<!--{/if}-->
<a class="js_change_name ml10 hover_visible icon icon_edit_gray" href="javascript:;" title="{lang modification}"></a>
<input type="text" class="custom_menu_input js_add_2_menu js_input_limit " value="$value[name]" autofocus data-limit="8">
<span class="custom_menu_notice ">{lang level_1_menu_name_limit_beyond_truncation}</span>
</div>
<div class="custom_menu_list_wrap" data-id="$key">
<!--{loop $value[sub_button] $key1 $value1}-->
<div class="custom_menu_list cm_subname js_li clearfix" data-id="{$key}_{$key1}" data-name="$value1[name]" data-type="$value1[type]" <!--{if $value1[type]=='click'}--> data-key="$value1[key]"<!--{elseif $value1[type]=='view'}-->data-url="$value1[url]"<!--{/if}-->>
<a class="icon icon_remove pull-right js_menu_remove hover_visible" href="javascript:;"></a>
<span class="custom_menu_subName">$value1[name]</span>
<!--{if $value1[type]=='view'}-->
<a class=" pull-right js_link" href="javascript:;" title="{lang skip_links}" onclick="setEventkey(this,'link');return false"><span class="icon icon_link_gray"></span></a>
<!--{elseif $value1[type]=='click'}-->
<a class=" pull-right js_click " href="javascript:;" title="{lang menu}KEY" onclick="setEventkey(this,'click');return false"><span class="icon icon_click_gray"></span></a>
<!--{/if}-->
<a class="js_change_name ml10 hover_visible icon icon_edit_gray" href="javascript:;" title="{lang modification}"></a>
<input type="text" class="custom_menu_input js_add_2_menu js_input_limit" value="$value1[name]" autofocus data-limit="16" >
<span class="custom_menu_notice ">{lang level_2_menu_name_limit_beyond_truncation}</span>
</div>
<!--{/loop}-->
</div>
<div class="custom_menu_list js_add_second" data-id="$key">
<span class="icon icon_add_small"></span>
<span class="custom_menu_addName gray">{lang add_second_level_of_menus}</span>
<input type="text" class="custom_menu_input js_add_2_menu js_input_limit" data-limit="16" autofocus placeholder="{lang level_2_menu_name_limit}">
<span class="custom_menu_notice ">{lang level_2_menu_name_limit_beyond_truncation}</span>
</div>
</div>
<!--{/loop}-->
</div>
<div class="custom_menu_list js_add">
<span class="icon icon_add_small"></span>
<span class="custom_menu_addName gray">{lang add_themselves_menu}</span>
<input type="text" class="custom_menu_input js_add_menu js_input_limit " data-limit="8" autofocus placeholder="{lang level_2_menu_name_limit}">
<span class="custom_menu_notice ">{lang level_1_menu_name_limit_beyond_truncation}</span>
</div>
<div style="padding:10px;">
<button class="btn btn-primary" onclick="menu_save(this)" data-loading-text="{lang In_the_save}" style="width:80px;">{lang save}</button>
&nbsp;&nbsp;<button class="btn btn-success" onclick="menu_publish(this)" data-loading-text="{lang release}" style="width:120px;" <!--{if !$setting['agentid']}-->disabled="disabled"<!--{/if}-->>{lang published_weixin}</button>
&nbsp;&nbsp;<button class="btn btn-danger" onclick="menu_default(this)" data-loading-text="{lang in_recovery}">{lang restore_defaults}</button>
<small class="pull-right gray mt10">{lang release_24_hours_to_update}</small>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function(e) {
check_add_second();
jQuery(document).on('click','.js_change_name',function(){
jQuery(this).parent().addClass('editing');
jQuery(this).parent().find('.custom_menu_input').focus();
});
jQuery(document).on('click','.js_add_second',function(){
if(!jQuery('.custom_menu_list_wrap[data-id='+jQuery(this).attr('data-id')+'] .cm_subname').length){//如果一级目录有事件,弹窗提示;
var self=this;
showDialog('{lang use_the_secondary_menu}', 'confirm', '{lang secondary_menu_confirm}', function(){
jQuery(self).addClass('editing').find('.custom_menu_input').focus();
});
}else{
jQuery(this).addClass('editing');
jQuery(this).find('.custom_menu_input').focus();
}
});
jQuery(document).on('click','.js_add',function(){
jQuery(this).addClass('editing');
jQuery(this).find('.custom_menu_input').focus();
});
jQuery(document).on('click','.js_menu_remove',function(){
var li=jQuery(this).parent();
if(li.hasClass('cm_name')){//是主菜单时,删除所有子菜单
jQuery('.custom_menu_list[data-id='+li.attr('data-id')+']').remove();
jQuery('.custom_menu_list_wrap[data-id='+li.attr('data-id')+']').remove();
}
li.remove();
check_add_second();
});
jQuery(document).on('keyup','.js_input_limit',function(e){
var val=jQuery(this).val();
if(mb_strlen(val)>jQuery(this).attr('data-limit')){
jQuery(this).parent().addClass('error');
}else{
jQuery(this).parent().removeClass('error');
}
if(e.keyCode=='13'){
jQuery(this).trigger('blur');
}
});
jQuery(document).on('blur','.custom_menu_input',function(){
var li=jQuery(this).parent();
var cut_val=mb_cutstr(this.value,jQuery(this).attr('data-limit'));
if(this.value){
if(li.hasClass('js_add_second')){
var pid=li.attr('data-id');
if(jQuery('.custom_menu_list_wrap[data-id='+pid+'] .cm_subname').length<5){//判定是否已经有5个二级菜单了
var html='<div class="custom_menu_list cm_subname js_li clearfix" data-name="'+cut_val+'">'
+' <a class="icon icon_remove pull-right js_menu_remove hover_visible" href="javascript:;"></a>'
+' <span class="custom_menu_subName">'+cut_val+'</span>'
+' <div class="btn-group pull-right eventkey">'
+' <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">'
+' {lang add_the_event_type} <span class="caret"></span>'
+' </button>'
+' <ul class="dropdown-menu" role="menu">'
+' <li><a href="javascript:;" onclick="setEventkey(this,\'click\');return false">{lang menu}key</a></li>'
+' <li><a href="javascript:;" onclick="setEventkey(this,\'link\');return false">{lang jump_page}</a></li>'
+' </ul>'
+' </div>'
+' <a class="js_change_name ml10 hover_visible icon icon_edit_gray" href="javascript:;" title="{lang modification}"></a>'
+' <input type="text" class="custom_menu_input js_add_2_menu js_input_limit " value="'+cut_val+'" autofocus="true" data-limit="16" >'
+' <span class="custom_menu_notice ">{lang level_2_menu_name_limit_beyond_truncation}</span>'
+' </div>';
jQuery('.custom_menu_list_wrap[data-id='+pid+']').append(html);
jQuery('.js_li[data-id='+pid+']').attr('data-type','').find('.js_click,.js_link,.btn-group').remove();
check_add_second();
init_dragsort(2);
}
this.value='';
}else if(li.hasClass('js_add')){
if(jQuery('.cm_name').length<3){
var html='<div class="custom_menu_list cm_name js_li clearfix" data-name="'+cut_val+'" data-type="">'
+' <a class="icon icon_remove pull-right js_menu_remove hover_visible" href="javascript:;"></a>'
+' <span class="icon icon_arrow_down"></span><span class="custom_menu_name">'+cut_val+'</span>'
+' <a class="js_change_name ml10 hover_visible icon icon_edit_gray" href="javascript:;" title="{lang modification}"></a>'
+' <input type="text" class="custom_menu_input js_add_2_menu js_input_limit " value="'+cut_val+'" autofocus="true" data-limit="8">'
+' <span class="custom_menu_notice ">{lang level_1_menu_name_limit_beyond_truncation}</span>'
+'</div>'
+'<div class="custom_menu_list_wrap"></div>'
+'<div class="custom_menu_list js_add_second">'
+' <span class="icon icon_add_small"></span>'
+' <span class="custom_menu_addName gray">{lang add_second_level_of_menus}</span>'
+' <input type="text" class="custom_menu_input js_add_2_menu js_input_limit" data-limit="16" autofocus="true" placeholder="{lang level_2_menu_name_limit}">'
+' <span class="custom_menu_notice ">{lang level_2_menu_name_limit_beyond_truncation}</span>'
+'</div>';
jQuery(html).appendTo('.custom_menu_mainList_wrap');
check_add_second();
init_dragsort(1);
}
}else{
li.find('.custom_menu_subName,.custom_menu_name').html(cut_val);
li.attr('data-name',cut_val);
this.value=cut_val;
}
}
li.removeClass('editing');
});
init_dragsort();
});
var ajaxurl='$baseurl_ajax';
function init_dragsort(flag){
if(flag==1) jQuery('.custom_menu_mainList_wrap').dragsort(null,function(){check_add_second();});
else if(flag==2) jQuery('.custom_menu_list_wrap').dragsort(null,function(){check_add_second();});
else{
jQuery('.custom_menu_list_wrap').dragsort(null,function(){check_add_second();});
jQuery('.custom_menu_mainList_wrap').dragsort(null,function(){check_add_second();});
}
}
function menu_save(obj){
var button=jQuery(obj);
button.button('loading');
var menu=[];
jQuery('.custom_menu_mainList_wrap .js_li').each(function(){
var li=jQuery(this);
if(li.hasClass('cm_name')){
var dataid=li.attr('data-id');
var type=li.attr('data-type');
var arr={}
arr['name']=li.attr('data-name');
if(type){
arr['type']=li.attr('data-type');
if(type=='click'){
arr['key']=li.attr('data-key');
}else{
arr['url']=li.attr('data-url');
}
}else{
arr['sub_button']=[];
}
menu.push(arr);
}else if(li.hasClass('cm_subname')){
var id0=li.parent().attr('data-id');
var type=li.attr('data-type');
var arr={};
arr['name']=li.attr('data-name');
if(type){
arr['type']=li.attr('data-type');
if(type=='click'){
arr['key']=li.attr('data-key');
}else{
arr['url']=li.attr('data-url');
}
}
menu[id0]['sub_button'].push(arr);
}
});
jQuery.post(ajaxurl+'&action=menu_save',{menu:menu},function(json){
if(json.msg=='success'){
showmessage('{lang save_success}!','success',1000,1);
}else{
showmessage('{lang save_unsuccess}!','danger',3000,1);
}
button.button('reset');
},'json');
}
function menu_default(obj){
if(confirm('{lang restore_the_default_menu}')){
var button=jQuery(obj);
button.button('loading');
jQuery.post(ajaxurl+'&action=menu_default',function(json){
window.location.reload();
});
}
}
function menu_publish(obj){
var button=jQuery(obj);
button.button('loading');
var menu=[];
if(jQuery('.custom_menu_mainList_wrap .js_li .btn-group').length){
showmessage('{lang none_response_event_please_check}','danger',5000,1);
button.button('reset');
return;
}
jQuery('.custom_menu_mainList_wrap .js_li').each(function(){
var li=jQuery(this);
if(li.hasClass('cm_name')){
var dataid=li.attr('data-id');
var type=li.attr('data-type');
var arr={}
arr['name']=li.attr('data-name');
if(type){
arr['type']=li.attr('data-type');
if(type=='click'){
arr['key']=li.attr('data-key');
}else{
arr['url']=li.attr('data-url');
}
}else{
arr['sub_button']=[];
}
menu.push(arr);
}else if(li.hasClass('cm_subname')){
var id0=li.parent().attr('data-id');
var type=li.attr('data-type');
var arr={};
if(type){
arr['name']=li.attr('data-name');
arr['type']=li.attr('data-type');
if(type=='click'){
marr['key']=li.attr('data-key');
}else{
arr['url']=li.attr('data-url');
}
menu[id0]['sub_button'].push(arr);
}
}
});
jQuery.post(ajaxurl+'&action=menu_publish',{menu:menu},function(json){
if(json.msg=='success'){
showmessage('{lang release_success}!','success',1000,1);
}else{
showmessage(json.error,'danger',3000,1);
}
button.button('reset');
},'json');
}
function setEventkey(obj,type){
var el=jQuery(obj);
var dataid=el.closest('.js_li').attr('data-id');
showWindow('setEvent',ajaxurl+'&action=setEventkey&type='+type+'&dataid='+dataid+'&t='+new Date().getTime());
}
function check_add_second(){
var i=0;
jQuery('.custom_menu_mainList_wrap .custom_menu_list,.custom_menu_mainList_wrap .custom_menu_list_wrap').each(function(){
var me=jQuery(this);
if(me.hasClass('cm_name')){
me.attr('data-id',i);
i++;
}else if(me.hasClass('custom_menu_list_wrap')){
me.attr('data-id',(i-1));
var li=jQuery('.cm_name[data-id='+(i-1)+']');
if(jQuery('.custom_menu_list_wrap[data-id='+(i-1)+'] .cm_subname').length){//有子菜单主菜单去除evnent
jQuery('.custom_menu_list_wrap[data-id='+(i-1)+'] .cm_subname').each(function(index){
var el=jQuery(this);
el.attr('data-id',(i-1)+'_'+index);
if(el.attr('data-type')==''){
jQuery('<div class="btn-group pull-right eventkey"><button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">{lang add_the_event_type}<span class="caret"></span></button><ul class="dropdown-menu" role="menu"> <li><a href="javascript:;" onclick="setEventkey(this,\'click\');return false">{lang menu}key</a></li><li><a href="javascript:;" onclick="setEventkey(this,\'link\');return false">{lang jump_page}</a></li></ul> </div>').appendTo(this);
}
});
li.attr('data-type','').find('.js_click,.js_link,.btn-group').remove();
}else{
if(li.attr('data-type')==''){
li.find('.js_click,.js_link,.btn-group').remove();
jQuery('<div class="btn-group pull-right eventkey"><button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">{lang add_the_event_type}<span class="caret"></span></button><ul class="dropdown-menu" role="menu"> <li><a href="javascript:;" onclick="setEventkey(this,\'click\');return false">{lang menu}key</a></li><li><a href="javascript:;" onclick="setEventkey(this,\'link\');return false">{lang jump_page}</a></li></ul> </div>').appendTo(li);
}
}
}else if(me.hasClass('js_add_second')){
me.attr('data-id',i-1);
if(jQuery('.custom_menu_list_wrap[data-id='+(i-1)+'] .cm_subname').length>4) me.addClass('hidden');
else me.removeClass('hidden');
}
});
if(i>2){
jQuery('.js_add').addClass('hidden');
}else{
jQuery('.js_add').removeClass('hidden');
}
}
function mb_strlen(str) {
var len = 0;
for(var i = 0; i < str.length; i++) {
len += str.charCodeAt(i) < 0 || str.charCodeAt(i) > 255 ? 2 : 1;
}
return len;
}
function mb_cutstr(str, maxlen) {
var len = 0;
var ret = '';
var dot = '';
maxlen = maxlen - dot.length;
for(var i = 0; i < str.length; i++) {
len += str.charCodeAt(i) < 0 || str.charCodeAt(i) > 255 ? 2 : 1;
if(len > maxlen) {
ret += dot;
break;
}
ret += str.substr(i, 1);
}
return ret;
}
</script>
<script type="text/javascript" src="static/js/jquery.dragsort.js?{VERHASH}"></script>