ss_new_ui_skin_and_page/ss/js/configurableTab.js

/// <reference path="wdDrag.js" />
if (!wd) {
    var wd = {};
}
wd.configurableTab = wd.configurableTab || {};


wd.configurableTab.editTab = function () {

    var isEditing = $('.tab-div>ul').attr('editing');
    
    $('.tab-div > ul').attr('editing', (isEditing&&isEditing=="1")?"0":"1");
    
    var primaryDisplayCount = 0;
    var secondaryDisplayCount = 0;
//  console.log("editTabClick")
//  console.log(window.document);
    if (isEditing=="1") {
    	
        // destroyDrag();
        DM.getDrager().destroy();
		
		$('li[shadow=true]').remove();
		
        //移除拖放添加的属性
        $('li[wdSecondaryTab]').each(function () {
            var hasItem = false;
            $(this).find('li input').each(function () {
                if ($(this).prop('checked')) {
                    hasItem = true;
                }
            })
            if (!hasItem)
                $(this).css('display', 'none');
        })
//      $('li[wdSecondaryTab=true] li').each(function (index, e) {
//          var target = $(e);
//          var check = target.children('input').prop('checked')
//          target.css('display', check ? 'inline-block' : 'none');
//      });
        //隐藏更多
        $('li[wdSecondaryTab] ul').removeProp('style')
        //移除tab item多余的class并去除编辑使用的辅助元素
        $('[ssTabClick]').each(function () {    // ('[wdTabClick]').。Lin
            $(this).prop('class', 'tab-normal');
            var text = $(this).children('span.handle').text();
            var statePoint=$(this).children(".statePoint");
            $(this).text(text);
            if(statePoint.length>0){
                $(this).append(statePoint.clone());
             }
            
        })

        
        //            $('.tab-div .tab-secondary ul').removeAttr('style');
        //            $('.tab-div .item').each(function() {
        //
        //                $(this).removeClass('item');
        //
        //            })

        var tabConfig = wd.configurableTab.saveTabConfig($('.tab-div>ul').get(0));
        $.each(tabConfig.base,
            function (i, e) {
                if (e.display) {
                    primaryDisplayCount++;
                }
            });
        $.each(tabConfig.more,
            function (i, e) {
                if (e.display) {
                    secondaryDisplayCount++;
                }
            });
        //保存配置
        wd.display.initTab();
//      $('[wdSecondaryTab]').bind('mouseover', function () {
//          $(this).find('ul').css('display', 'block')
//      })
//      $('[wdSecondaryTab]').bind('mouseout', function () {
//          $(this).find('ul').css('display', 'none')
//      })

    } else {


        //重新复制tab item
        //            $('[wdTabClick]').each(function() {
        //            	var t = $(this);
        //            	var n = $('<li></li>');
        //            	n.prop('style',t.prop('style'));
        //            	n.prop('class',t.prop('class'));
        //            	n.attr('wdTabClick',t.attr('wdTabClick'));
        //            	n.attr('name',t.attr('name'));
        //            	n.attr('name')
        //            	n.text(t.text());
        //            	t.replaceWith(n);
        //            })

        
        // $('.tab-div ul').addClass('dragList');
        $('.tab-div ul').not("#tabOption").attr("id", "tabSelected");
        window.isWriteOut = true;
        var tabobj=wd.display.getTabInstance();
        
        if(!tabobj)return;
        $('.tab-div>ul>li').show().each(function (index, e) {
            if ($(e).attr('wdSecondaryTab')) {
                $(e).find('li').each(function () {
                    var t = $(this);
                    var n = $('<li></li>');
//                  n.prop('style', t.prop('style'));
//                  n.prop('class', t.prop('class'));
					n.prop('class', tabobj.styles.wdNormalMoreClass);
/* 再改，规范 <li wdTabClick= 命名。Lin
                    n.attr('wdTabClick', t.attr('wdTabClick'));
*/                  n.attr('ssTabClick', t.attr('ssTabClick'));
                    n.attr('name', t.attr('name'));
//                  n.addClass('tab item')
                    n.addClass('item')
                    var text = $(this).text();
                    $('<input type="checkbox" />').prop('checked', $(this).css('display') !== 'none').appendTo(n);
                    n.append('<span class="handle">' + text + '</span>')
//                  n.css('display', 'block');
                    n.on("click","[type=checkbox]",function(){
                  		window.event.stopPropagation();
                    })
                	
                	if(t.children(".statePoint").length>0){
                    	n.append(t.children(".statePoint").clone());
                	}
                    
                    
                    t.replaceWith(n);
                })
            } else {
                var t = $(this);
                var n = $('<li></li>');
//              n.prop('style', t.prop('style'));
//              n.prop('class', t.prop('class'));
				n.prop('class', tabobj.styles.wdNormalClass);
/* 再改，规范 <li wdTabClick= 命名。Lin
                n.attr('wdTabClick', t.attr('wdTabClick'));
*/              n.attr('ssTabClick', t.attr('ssTabClick'));
                n.attr('name', t.attr('name'));
//              n.addClass('tab item')
				n.addClass('item')
                var text = $(e).text();
                //                        $(e).empty();
                //$('<input type="checkbox" />').prop('checked', $(e).css('display') !== 'none').appendTo($(e))
                n.append('<span class="handle">' + text + '</span>')
                if(t.children(".statePoint").length>0){
                    n.append(t.children(".statePoint").clone());
                }
                
                t.replaceWith(n);
            }

//          $(e).css('display', 'block')
			$(e).show();
        })
        
        $('.tab-div>ul>li').first().before($('<li shadow="true" style="width: 10px;padding: 0;" class="item '+tabobj.styles.wdNormalClass+'"></li>').hide());
        if($('.tab-div>ul>li:not([shadow=true])').length==1){
        	$('li[shadow=true]').show();	
        }
        
        //开启拖动
        var dr = DM.getInstance("tab",false, ["editOrder"], {
            selectedListAlignMode: "horizontal",
            itemSelector: "li",
        });
        dr.dragend = function () {
        	console.log(arguments);
            setTimeout(function () {
            	var tabobj=wd.display.getTabInstance();
                $('li[wdSecondaryTab=true] ul li').each(function () {
                    if ($(this).find('input').length == 0) {
                        if (this.confs.imgBtn) {
                            this.confs.imgBtn.after($('<input type="checkbox" checked />')[0])
                        } else {
                            $(this).prepend('<input type="checkbox" checked />')
                        }
                    }
                }).removeAttr("style").attr("class","item").addClass(tabobj.styles.wdNormalMoreClass);
                
                $('.tab-div>ul>li:not([shadow=true])').each(function () {
                    if (!$(this).attr('wdSecondaryTab')) {
                        $(this).find('input').remove();
                    }
                }).removeAttr("style").attr("class","item").addClass(tabobj.styles.wdNormalClass);
                
                //全部在更多无法拖出问题
                if($('.tab-div>ul>li:not([shadow=true])').length==1){
                	$('.tab-div>ul>li[shadow=true]').show();
                }else{
                	$('.tab-div>ul>li[shadow=true]').hide();
                }
                
            }, 10)
        }
        if (more && more.confs)
            more.confs.destroy();
        if (dr.optionList){
        	dr.optionList.element.style.minHeight = '35px';
        	dr.optionList.element.style.minWidth = '35px';
        }
        
         //显示隐藏的选项卡
//      $('li[wdSecondaryTab],li[wdSecondaryTab] ul').css('display', 'block');
		$('li[wdSecondaryTab],li[wdSecondaryTab] ul').show();
//      $('[wdSecondaryTab]').unbind('mouseover')
//      $('[wdSecondaryTab]').unbind('mouseout')
    }

}
//保存配置
wd.configurableTab.saveTabConfig = function (tab) {

	var result={base:[],more:[]};
 
    //遍历tab的所以项
    $('.tab-div>ul').each(function (e) {
        $(this).children('li').each(function () {
            if ($(this).attr('wdSecondaryTab')) {
                $(this).find('li').each(function () {
                    result.more.push({
                        desc: $(this).text(),
                        display: $(this).css('display') != 'none',
                        name: $(this).attr('name')
                    })
                })
            } else {
                result.base.push({
                    desc: $(this).text(),
                    display: $(this).css('display') != 'none',
                    name: $(this).attr('name')
                })
            }
        })

    });
    
    
    
    var bjid = wd.configurableTab.bjid;

    
    var token;
	var ps=window.location.href.replace(/.*\?/,"").split("&");
	
	for(var i=0;i<ps.length;i++){
		if(ps[i].indexOf("ssToken=")>-1){ // ("token=")>。Lin
			token=ps[i].replace("ssToken\=",'');  // ("token\=",。Lin
			break;
		}
	}
    $.ajax({
        url: '/service?ssServ=saveTabConfig&bjid='+ bjid +"&tokenstring="+ token,
		async: false,
        type: 'post',
        data:{"data":JSON.stringify(result)} ,
    })
    
    
    return result;
    
}


wd.configurableTab.init = function (yyid, bjid) {
    //在弹出窗口添加按钮
	console.log("wd.configurableTab.init");



    var wdDialogId = wd.display.getwdDialogId();
    if (wdDialogId) {
    	this.wdDialogId=wdDialogId;
    	
        var w = wd.topWindow.dhxWins.window(wdDialogId);
        wd.display.removeDialogLine(w);
        
        if (w && w.isAddTabEditButton == null) {
            w.button("wdTab").show();
            w.button("wdTab_save").hide();
            
            w.button("wdTab").onclick = function () {
				console.log(111111)
                this.hide();
                w.button("wdTab_save").show();
                
                if (wd.topWindow.$tabList != null) {
                    var id=null;
                    for (var i = wd.topWindow.$tabList.length-1; i >=0 ; i--) {
                        //只修改当前弹窗的tab
                        if(!id){id=wd.topWindow.$tabList[i].wdDialogId}
                        if(id==wd.topWindow.$tabList[i].wdDialogId){
                        	wd.topWindow.$tabList[i].editTab();
                        }	
                    }
                }
            }
            w.button("wdTab_save").onclick = function () {
                this.hide();
                w.button("wdTab").show()
                if (wd.topWindow.$tabList != null) {
					var id=null;
					for (var i = wd.topWindow.$tabList.length-1; i >=0 ; i--) {
                        //只修改当前弹窗的tab
                        if(!id){id=wd.topWindow.$tabList[i].wdDialogId}
                        if(id==wd.topWindow.$tabList[i].wdDialogId){
                        	wd.topWindow.$tabList[i].editTab();
                        }
                    }
// 					for (var i = 0; i < wd.topWindow.$tabList.length; i++) {
//                      wd.topWindow.$tabList[i].editTab();
//                  }
					
                }
            }            
            
            
            
            w.isAddTabEditButton = true;
        }
    }
	
	if (!more) {
        more = document.createElement("li");
        more.setAttribute('class', 'tab-normal tab-secondary')
        more.setAttribute('wdSecondaryTab', 'true')
        more.appendChild(document.createTextNode("更多"))
    }
	

    wd.configurableTab.bjid = bjid;
    if (!bjid) {
        wd.display.initTab();
        return;
    }

    //为每个tab item填写name
    $('li[ssTabClick]').each(function (index) { // ('li[wdTabClick]').。Lin
        if(!$(this).attr('name'))
			$(this).attr('name', "tab_" + index);
    })

    $('.tab-div>ul').each(function () {
        var tab = $(this).css('display', 'none');
        
	    var token;
		var ps=window.location.href.replace(/.*\?/,"").split("&");
		
		for(var i=0;i<ps.length;i++){
			if(ps[i].indexOf("ssToken=")>-1){ // ("token=")>。Lin
				token=ps[i].replace("ssToken\=",'');  // ("token\=",。Lin
				break;
			}
		}
        $.ajax({
            url: '/service?ssServ=loadTabConfig&bjid='+ bjid +"&tokenstring="+ token,
            type: 'get',
            async: false,
            dataType: 'json',
            success: function (data, status) {
                if (data&&data.base) {
                    wd.configurableTab.initTab(data, tab[0])
                } else {
                	
                	if(tab.find("[wdSecondaryTab]").length==0&&more){
					 	tab.append(more);
					}
                	                  
                    var baseList=[];
                    var moreList=[];
                    tab.find("li[name]").each(function(index,ele){
                    	if(ele.getAttribute("wdTabSite")){
                    		var ddd=ele.getAttribute("wdTabSite").split(":");
                    		if(ddd[0]=="base")baseList.push({index:parseInt(ddd[1]),ele:ele})
                    		if(ddd[0]=="more")moreList.push({index:parseInt(ddd[1]),ele:ele})
                    	}
                    })
                    //排序
					baseList.sort(function(a,b){
						return a.index-b.index;
					})
					moreList.sort(function(a,b){
						return a.index-b.index;
					})
					for(var i=1;i<baseList.length;i++){
						$(baseList[i-1]["ele"]).after(baseList[i]["ele"])
					}
					
					var secondaryLi=tab.find("[wdSecondaryTab]");
					if(secondaryLi.children("ul").length==0){
						secondaryLi.append("<ul id=\"tabOption\"></ul>");
					}
					
					for(var i=0;i<moreList.length;i++){
						secondaryLi.children("ul").append(moreList[i]["ele"]);
					}

              		if($('[wdSecondaryTab]').find("li").length==0)
                    	$('[wdSecondaryTab]').css('display', 'none');
					
                }
            }
        })
        tab.css('display', 'block');
        wd.display.initTab();
    })

}

var more = null;
wd.configurableTab.initTab = function (tabConfig, tab) {

    var allName = {};
    var lis = $(tab).find('li[name]').remove();
    var tabItemMap = {};
    lis.each(function () {
        allName[$(this).attr('name')] = 0;
        tabItemMap[$(this).attr('name')] = this;
    });

	
	if (more&&more.parentNode) {
        more.parentNode.removeChild(more);
   	}
    more =$('<li class="tab-normal tab-secondary" wdSecondaryTab="true">更多<ul id="tabOption"></ul></li>')[0];
    var secondaryTab =more.querySelector("#tabOption");

    primaryDisplayCount = 0;
    secondaryDisplayCount = 0;

    	for(var key in tabConfig){
	        
	        var itemList=tabConfig[key];
	        
	        for (var i = 0; i < itemList.length; i++) {
		        var item=itemList[i];
		        var name=item.name;
		        if (0==allName[name]) {
		        	allName[name]=1;
		           	var display=item.display;
		           	if(!display){
		           		tabItemMap[name].style.display="none";
		           	}
		           	if(key=="base"){
		           		tab.appendChild(tabItemMap[name]);
		           		if(display){
		           			primaryDisplayCount++;
		           		}
		           	}else if(key=="more"){
		           		secondaryTab.appendChild(tabItemMap[name]);
		           		if(display){
		           			secondaryDisplayCount++;
		           		}
		           	}
		        }
	    	}
    	}
    	
    	//other as the more
    	for(var key in allName){
    		if(0==allName[key]){
    			secondaryTab.appendChild(tabItemMap[key]);
//         		tabItemMap[allName[i]].style.display="none";
				secondaryDisplayCount++;
    		}
    	}
    	
    	
    	
    	
    
    
    
    	tab.appendChild(more);
    if (secondaryDisplayCount == 0) {
        more.style.display = 'none'
    }

    if (secondaryDisplayCount >= primaryDisplayCount) {
//      secondaryTab.style.left = "0px";
        delete secondaryTab.style.right
//      for (i = 0; i < secondaryTab.children.length; i++) {
//          secondaryTab.children[i].style.float = "left"
//      }
    }
}


if (wd.topWindow.$tabList == null)
    wd.topWindow.$tabList = [];


wd.topWindow.$tabList.push(wd.configurableTab); //这样窗口菜单编辑按钮可以访问到所有的tab。

$(window).unload(function() {
	try{
		var index = wd.topWindow.$tabList.indexOf(wd.configurableTab);
    	if (index != -1)
        	wd.topWindow.$tabList.splice(index, 1);		
	}catch(e){
		console.log(e)
	}

})