gdymtsceshi/WebContent/assets/lib/dynamic/custom_new.js

/**
 * 浏览器动态化效果及事件类
 * 
 * 
 * @author xiongbing
 * @date 2013-12-18
 * @version 1.0
 * 
 */
//-----------------------------------------------------------------------------
/*判断浏览器*/
var isIE = navigator.userAgent.toLowerCase().indexOf("msie") > -1;
var $J = jQuery.noConflict();

//-----------------------------------------------------------------------------	

$J(function() {
	/**
     * 网站页面对象
     *
     * @class Page
     * @constructor
     * @param {DOMDocument}document
     */
    var Page = function(elem) {
        /**
         * 当前对象
         *
         * @property elem
         * @private
         */
        this.elem = elem;
        
        this.common=Page.common;

    };
    Page.common = {
        /**
         * 去除字符串头尾空白字符
         *
         * @method trim
         * @static
         * @param {String}str
         * @return {String}
         */
        trim : function(str) {
            return str.replace(/^\s*/, "").replace(/\s*$/, "");
        },
        isFunction : function(obj) {
            return Object.prototype.toString.call(obj) === "[object Function]";
        },
        /**
         * 获取一个元素相对于页面左上角的位置
         * @param elem
         * @return object {x:, y: }
         */
        findPos : function(elem) {
            var offset = {
                x:0,
                y:0
            };
            if (!!document.documentElement.getBoundingClientRect()) {//支持此方法的浏览器可以直接获取位置
                offset.x = elem.getBoundingClientRect().left + this.scroll().left;
                offset.y = elem.getBoundingClientRect().top + this.scroll().top;
            } else {
                while (elem) {
                    offset.x += elem.offsetLeft;
                    offset.y += elem.offsetTop;
                    elem = elem.offsetParent;
                }
            }
            return offset;
        },
        /**
         * 返回数组或对象中第一个值为 val 对象的 index 或 key
         * @param obj 对象或数组
         * @param val 待检测值
         */
        indexOf : function indexOf(obj, val) {
            if (obj.indexOf) {
                return obj.indexOf(val);
            } else {
                var result = -1;
                this.each(obj, function(idx) {
                    if (this[idx] === val) {
                        result = idx;
                        return false;
                    }
                });
                return result;
            }
        },
        each : function (object, callback, context) {
            if (object === undefined || object === null) {
                return;
            }
            if (object.length === undefined || this.isFunction(object)) {
                for (var name in object) {
                    if (object.hasOwnProperty(name)) { //只有此元素本身属性调用回调
                        if (callback.call(context || object[name], name, object[name]) === false) {
                            break;
                        }
                    }
                }
            } else {
                for (var i = 0; i < object.length; i++) {
                    if (callback.call(context || object, i, object[i]) === false) {
                        break;
                    }
                }
            }
            return object;
        },
        /**
         * 设置或获取元素样式
         *
         * @method css
         * @static
         * @param {Object}elem
         * @param {Object}styles
         * @return {Object}
         */
        css : function() {
            /**
             * 获取一个元素的样式
             * @param elem
             * @param styleName
             */
            var getStyle = function(elem, styleName) {
                var value = '';
                if (styleName == 'float') {
                    document.defaultView ? styleName = 'float'/*cssFloat*/ : styleName = 'styleFloat';
                }
                if (elem.style[styleName]) {//内联样式
                    value = elem.style[styleName];
                } else if (elem.currentStyle) {//IE
                    value = elem.currentStyle[styleName];
                } else if (document.defaultView && document.defaultView.getComputedStyle) {//W3 DOM
                    styleName = styleName.replace(/([A-Z])/g, '-$1').toLowerCase();
                    var s = document.defaultView.getComputedStyle(elem, '');
                    value = s && s.getPropertyValue(styleName);
                } else { //other,for example, Safari
                    value = null;
                }
                //处理width 和 height 出现 auto 或是百分比宽度 的情况
                if ((value == "auto" || value.indexOf('%') !== -1) && ('width' === styleName.toLowerCase() || 'height' === styleName.toLowerCase()) && elem.style.display != "none" && value.indexOf('%') !== -1) {
                    value = elem["offset" + styleName.charAt(0).toUpperCase() + styleName.substring(1).toLowerCase()] + "px";
                }
                if (styleName == "opacity") {
                    try {
                        value = elem.filters['DXImageTransform.Microsoft.Alpha'].opacity;
                        value = value / 100;
                    } catch(e) {
                        try {
                            value = elem.filters('alpha').opacity;
                        } catch(err) {
                        }
                    }
                }
                return value;
            };
            return function(elem, styles) {
                if (typeof styles === 'string') {
                    return getStyle(elem, styles);
                } else {
                   this.each(styles, function(key, value) {
                        elem.style[key] = value;
                    });
                }
            };
        }(),
        scroll:function() {
            return {
                left : document.documentElement.scrollLeft + document.body.scrollLeft,
                top : document.documentElement.scrollTop + document.body.scrollTop
            }
        }
        
    };
    Page.prototype={
    		/**
    		*判断是否存在额外的标识
    		*优先级为id/class/tagname依次下降
    		*①如果id存在并可以确定唯一arr[0]='{id}'，否则arr[0]='false'
    		*②如果①不成立，class存在并可以确定唯一arr[1]='{class}'，否则arr[1]='false'
    		*③如果②不成立，arr[2]='{tagname[index]}'
    		*
    		*@param  ele      传入节点对象
    		*@return arr[]  返回数组
    		*/
    		'getMark':function (ele){
    			var html = $J(ele).html();
    			var arr = ['false','false','false'];
    			var isBreak=false;
    			//查看是否存在id，并判断是否可以唯一定位
    			if(!isBreak){
    				var id=$J(ele).attr("id");
    				if(id!=null&&id!=''&&id!=undefined){
    					if(html==$J('#'+id).html()){
    						arr[0]='#'+id;
    						isBreak=true;
    					}
    				}
    			}
    			//查看是否存在class，并判断是否可以唯一定位
    			if(!isBreak){
    				var css=$J(ele).attr("class");
    				if(css!=null&&css!=''&&css!=undefined&&css.indexOf(' ')==-1){
    					if(html==$J('.'+css).html()){
    						arr[1]='.'+css;
    						isBreak=true;
    					}
    				}
    			}
    			//前两个条件都不符合则返回该元素标签及所在节点级别中的索引
    			if(!isBreak){
    				var tagName=ele.tagName;
    				var curObj = $J(ele);
    			    var preObj = curObj.prevAll();
    			    var curIndex = preObj.filter(tagName).length;
    			    var prevIndex=0;
    			    var domIndex=0;
    			    preObj.each(function(){
    			      prevIndex=prevIndex+$J(this).find(tagName).length;
    			    });
    			    domIndex=curIndex +prevIndex;
    				arr[2]=tagName.toLowerCase()+':eq('+domIndex+')';
    			}
    			return arr;
    	},
    	/**
    	*获取选定对象所在dom中的符合jquery选择器的路径
    	*
    	*@param  ele      传入节点对象
    	*@param  nodepath 节点路径，初始为''
    	*@return str      返回节点路径
    	*/
    	'getPath':function (ele,nodepath){
    		var tagName = ele.tagName;
    		if(tagName!=undefined&&tagName.toLowerCase!='html'&&tagName.toLowerCase!='body'){
    			var arr = this.getMark(ele);
    			var mark = false;
    			var currnpath='';
    			var id=arr[0];
    			var css=arr[1];
    			var tName=arr[2];
    			if(id!='false'){
    				currnpath=id;
    				mark=true;
    			}
    			if(!mark&&css!='false'){
    				currnpath=css;
    				mark=true;
    			}
    			if(!mark){
    				currnpath=tName;
    			}
    			nodepath = currnpath+' '+nodepath;
    			if(!mark){
    				var pars = $J(ele).parent();
    				nodepath=this.getPath(pars[0],nodepath);
    			}else{
    				return nodepath;
    			}
    			
    		}
    		return nodepath;
    	},
    	/**
    	*获取选定对象所在dom中的上下节点路径
    	*
    	*@param  ele      传入节点对象
    	*@return str      返回本节点为中心的上下路径
    	*/
    	'relation':function (ele){
    		var nodepath='';
    		var currTagName = ele.tagName.toLowerCase();
    		var parsTag = $J(ele).parent();
    		var childTag = $J(ele).children();
    		if(parsTag!=null&&parsTag!=undefined&&parsTag.length>0){
    			var qppath = this.getPath(parsTag[0],'');
    			//nodepath = "<a href='javascript:resize(\""+qppath+"\");' style='color:blue' title='父节点'>"+parsTag[0].tagName.toLowerCase() + "</a>.";
    			nodepath = "<em n='"+qppath+"' style='CURSOR: pointer;color:blue' title='父节点'>"+parsTag[0].tagName.toLowerCase() + "</em>.";
    		}
    		var qcpath = this.getPath(ele,'');
    		nodepath = nodepath + "<em n='"+qcpath+"' style='CURSOR: pointer;color:red' title='当前选中节点'>" + currTagName + "</em>";
    		//nodepath = nodepath + "<em style='color:red' title='当前选中节点'>" + currTagName + "</em>";
    		if(childTag!=null&&childTag!=undefined&&childTag.length>0){
    			var qcnpath = this.getPath(childTag[0],'');
    			//nodepath = nodepath + ".<a href='javascript:resize(\""+qcnpath+"\");' style='color:blue' title='子节点'>" + childTag[0].tagName.toLowerCase() + "</a>";
    			nodepath = nodepath + ".<em n='"+qcnpath+"' style='CURSOR: pointer;color:blue' title='子节点'>" + childTag[0].tagName.toLowerCase() + "</em>";
    		}
    		return nodepath;
    	},
    	'resize':function(ele) {
    		$J(ele).trigger("mouseover");
    	},
    	'creatDiv' : function(id,width,height,left,top,html,cssText){
    		var curr = this;
    		menuobj=this.elem;
            var div = document.createElement('div');
            div.id = id;
            if(!cssText){
                var cssText = 'position:absolute;filter:alpha(opacity=90);background-color:#ffce73;opacity:0.9;z-index:100;text-align:center; font-weight:bold;line-height:18px;font-size:16px;';
            }
            cssText += 'height:'+height+'px;';
            cssText += 'width:'+width+'px;';
            cssText += 'left:'+left+'px;';
            cssText += 'top:'+top+'px;';
            div.style.cssText = cssText;
        	div.innerHTML=html;
        	/*if(html==''){
        		//添加双击事件及右键菜单
        		$J(div).dblclick(function(event){dbclick(curr.elem,event);});
        		$J(div).contextMenu(menu1,{theme:'vista'});
        	}*/
            return div;
        },
        'removeDiv': function (id){
            var div = document.getElementById(id);
            if(div){
                document.body.removeChild(div);
            }
        },
        'removeClipDiv':function(){
            for (var i = 0 ; i < 5 ; i++){
                this.removeDiv('yShade' + i);
            }
            this.shadeStatu = false;
        },
        'createClipDiv':function(color){
            if(this){
                var main = this;
                //对象的左上角坐标
                var y = Math.abs(main.common.findPos(main.elem).y);
                var x = Math.abs(main.common.findPos(main.elem).x);
                //对象的宽高
                var mwidth = main.elem.scrollWidth;
                var mheight = main.elem.scrollHeight;
                //当前电脑页面宽高
                var dwidth = document.documentElement.scrollWidth;
                var dheight = document.documentElement.scrollHeight;
                this.removeClipDiv();
                var shadeArr = [];
                //body不100%框的布尔状态
                var  isFullWidth = (document.body.scrollWidth == document.body.offsetWidth);
                /*
                var blueText = 'position:absolute;border:5px solid rgb(0, 154, 226);border:5px solid rgba(0, 154, 226,1.0);-webkit-border-radius:5px;-moz-border-radius:5px;-khtml-border-radius:5px;z-index:100;';
                var redText = 'position:absolute;border:5px solid rgb(208, 28, 29);border:5px solid rgba(208, 28, 29,1.0);-webkit-border-radius:5px;-moz-border-radius:5px;-khtml-border-radius:5px;z-index:100;';
                */
                var blueText = 'position:absolute; background-color:rgb(89, 207, 248); background-color:rgba(89, 207, 248,0.7);z-index:100;font-size:5px;';
                var redText = 'position:absolute;background-color:rgb(252, 113, 123);background-color:rgba(252, 113, 123,0.7);z-index:100;font-size:5px;';
                var cssText = blueText;
                if(color=='red'){
                	cssText = redText;
                }
                var  _leftTemp = (document.body.offsetWidth - document.documentElement.scrollWidth)/2 ;
                //var html=main.elem.tagName;
                //var html=this.getPath(main.elem,'');//alert(html);
                var html=this.relation(main.elem);
                var xTips=x-5;
                var yTips=y-21;
                if(y==0){
                	yTips=y+mheight+5;
                }
                shadeArr[0] = this.creatDiv('yShade0',mwidth+10,16,xTips,yTips,html);
                //shadeArr[1] = this.creatDiv('yShade1',mwidth,mheight,x-5+_leftTemp,y-5,'',cssText);
                shadeArr[1] = this.creatDiv('yShade1',mwidth+10,5,x-5,y-5,'',cssText);
                shadeArr[2] = this.creatDiv('yShade2',mwidth+10,5,x-5,y+mheight,'',cssText);
                shadeArr[3] = this.creatDiv('yShade3',5,mheight,x-5,y,'',cssText);
                shadeArr[4] = this.creatDiv('yShade4',5,mheight,mwidth+x,y,'',cssText);
                for (var i = 0,count = shadeArr.length ; i < count ; i++){
                    document.body.appendChild(shadeArr[i]);
                }
            }
            this.shadeStatu = true;
        }
    };
  //-----------------------------------------------------------------------------
    /*节点路径中的单击事件*/
    function resize(nodepath) {
    	$J(nodepath).trigger("mouseover");
    }
    //-----------------------------------------------------------------------------	
    /*双击事件*/
    function dbclick(nodepath){
    	var elem = $J(nodepath)[0];
    	var tagName = elem.tagName;
    	var objid = $J(elem).attr("objid");
    	if(objid!=undefined){
	    	var tagType = "span";
	    	if(tagName.toLowerCase() == "span"){
	    		tagType = "span";
	    	}else if(tagName.toLowerCase() == "a"){
	    		tagType = "alink";
	    	}else if(tagName.toLowerCase() == "table" || tagName.toLowerCase() == "div" || tagName.toLowerCase() == "ul" || tagName.toLowerCase() == "dl" ){
	    		tagType = "list";
	    	}else if(tagName.toLowerCase() == "img"){
				tagType = "pic&w="+this.width+"&h="+this.height;
			}else{
				return false;
			}
	    	window.parent.showDialog('p_setproperty','选择标签',"setparam/p_setproperty.jsp?objid="+objid+"&type="+tagType,902,565);
	    	//openFile1("setparam/p_setproperty.jsp?objid="+objid+"&type="+tagType,"615","1002");
    	}
    	//event.stopPropagation();
    }
  //-----------------------------------------------------------------------------	
    function bindClick(){
    	//定义setTimeout执行方法
    	var TimeFn = null;
    	$J("[n]").click(function () {
    		var n='';
	    	n = $J(this).attr("n");
    	    // 取消上次延时未执行的方法
    	    clearTimeout(TimeFn);
    	    //执行延时
    	    TimeFn = setTimeout(function(){
    	        //do function在此处写单击事件要执行的代码
    	    	
    	        resize(n);
    	    },300);
    	});

    	$J("[n]").dblclick(function () {
    	     // 取消上次延时未执行的方法
    	    clearTimeout(TimeFn);
    	    //双击事件的执行代码
    	    dbclick($J(this).attr("n"));
    	});
    }
//-----------------------------------------------------------------------------
	/*取消A链接*/
	$J("a").click(function() {
        return false;
	});
//-----------------------------------------------------------------------------	
	/*鼠标悬停区域效果*/
	//$J("table").add("div").add("ul").add("span").add("a").add("font").add("img").bind("mouseover",function(event){
	$J("table").add("div").add("span").add("font").add("a").add("dd").add("dt").add("img").bind("mouseover",function(event){
	 event.stopPropagation();
		var obj = this;
		var tagName = this.tagName;
		var objid = $J(this).attr("objid");
		
		
		 
		if($J(obj).attr("cmstag") && $J(obj).attr("cmstag")!=""){
			var page1=new Page(obj);
			page1.removeClipDiv();
			page1.createClipDiv('red');
		}/*else if(1==1){
			
		}*/else{
			var page1=new Page(obj);
			page1.removeClipDiv();
			page1.createClipDiv('blue');
		}
		bindClick();
		event.stopPropagation();
	});

//-----------------------------------------------------------------------------
	/*双击事件*/
	//$J("table").add("div").add("ul").add("span").add("a").add("dd").add("dt").add("img").dblclick(function(event){
	$J("table").add("div").add("span").add("font").add("a").add("dd").add("dt").add("img").dblclick(function(event){
		var obj = this;
		
		var tagName = this.tagName;
		var objid = $J(this).attr("objid");
	
 
		//var _workbench=$("#workbench",document.body);
	 
		  //var parName=_workbench.find("[objid='"+objid+"']").parent(".selected");
		 //alert(parName);
		 
		/*console.info(obj);
		console.info(obj.closest("dd"));
		var dd = obj.closest("dd"); */
		//console.info(obj.closest("dd").parent().closest("div").find("a"));
		//alert(_workbench.find("[objid='"+objid+"']").closest("li")); 
		/*if(partagName.indexOf("li")>=0||){
			
		}*/
		
		
    	if(objid!=undefined){
			/*var tagType = "span";
			if(tagName.toLowerCase() == "a"){
				tagType = "alink";
			}else if(tagName.toLowerCase() == "table" || tagName.toLowerCase() == "ul" || tagName.toLowerCase() == "dl" ){
				tagType = "list";
			}else if(tagName.toLowerCase() == "div"){
				tagType = "content";
			}else if(tagName.toLowerCase() == "img"){
				tagType = "pic&w="+this.width+"&h="+this.height;
			}*/
    		var tagType=tagName.toLowerCase();
			var objid = $J(this).attr("objid");
		 
			window.parent.showDialog('p_setproperty','选择标签',"/myconsole/dynamic/selectLabel?objID="+objid+"&labelType="+tagType,900,565);
			//openFile1("setparam/p_setproperty.jsp?objid="+objid+"&type="+tagType,"615","1002");
    	}
		event.stopPropagation();
	});
//-----------------------------------------------------------------------------	
	/*添加菜单*/
	function setImg(obj){
		var objid = $J(obj).attr("objid");
		window.parent.showDialog('p_setproperty','选择标签',"setparam/p_setproperty.jsp?objid="+objid+"&type=pic&w="+obj.width+"&h="+obj.height,902,565);
		//openFile1("setparam/p_setproperty.jsp?objid="+objid+"&type=pic&w="+obj.width+"&h="+obj.height,"615","1002");
	}
	function editHTML(obj){
		var objid = $J(obj).attr("objid");
		openFile1("p_fileedit_part.jsp?objid="+objid,"680","980");
	}
	function clearHTML(obj){
		var objid = $J(obj).attr("objid");
	    window.open("setparam/p_clearparam.jsp?objid="+objid);
	    if(obj.tagName.toLowerCase()=="img"){
	    	var aTag = $J(obj).parent();
	    	if($J(aTag).attr("tagName").toLowerCase()=="a"&&$J(aTag).attr("tag")){
	    		if(confirm("是否需要清除外层链接动态化标签？")){
	    			window.open("setparam/p_clearparam.jsp?objid="+$J(aTag).attr("objid"));
	    		}
	    	}
	    }
	}
	 
	 
//-----------------------------------------------------------------------------
});