ss_new_ui_skin_and_page/ss/gridster/Gridster-Wd.js

var dimensions = 20;
var margins = 5;

/*
依赖jquery.js,jquery.gridster.min.js,
 */

function GridsterWd(gridster, json) {
	var sybjCtrl = this;
	this.gridster = gridster;
	var THIS=this;
//	try{
//		gridster.$el.css({zIndex:parseInt(wd.topWindow.wd.base.applyIframeElement.parentNode.style.zIndex)+1});
//	}catch(e){
//		console.log(e);
//	}
	
	gridster.add_widget2=function(id,lb,initurl, size_x, size_y, col, row, max_size, min_size){
 		//console.log(arguments);
 		var html="<li id=\""+id+"\" bjlb=\""+lb+"\" initurl=\""+initurl+"\" >"
   		+"<div title=\"双击重置大小\" class=\"grsymask\" style=\"width:100%;height:100%;opacity:0.5;position:absolute;z-index:1;"+(THIS.isEditing?"":"display:none;")+"\"></div>"
 		+"<div class='close' onclick=\"closediv(this.parentElement)\"></div>"
        +"<div class=\"ContainerForLoad\" style=\"height:100%;"+(THIS.isEditing?"":"")+"\"></div></li>;"
		return gridster.add_widget.call(gridster,html,size_x, size_y, col, row, max_size, min_size);
	}
//	
	this.jsondata = json||"[]";
	this.isGf = (EditType == '2') ? 1 : 0;
	this.ajaxUrl = (this.isGf == 0) ? "/desktop?" : "/desktopDef?"; // ajax服务地址    // "geXingHua.do?" : " geXingHuaGf.do?"。Lin
	// 如
	// geXingHua.do?
	this.edit_en = null; // 是否开启编辑状态
	this.containerForLoad = "ContainerForLoad"; // 类名常量 li标签内定位加载整个部件的div
	this.imgheader = "img-header"; // 类名常量 li标签内定位绑定刷新事件的div
	this.flushIconStyle = "background:url(/nndx/image/icon-party.png) no-repeat;height:31px;width:38px;margin-left:3px;margin-top:2px"; // 刷新按钮的样式
	this.setAjaxUrl = function(ajaxUrl) {
		this.ajaxUrl = ajaxUrl;
	};

	this.funcStr = [ "initGridster", "myserialize", "saveedit", "userEdit",
			"ajax_userEdit", "ajax_getBuJianCode", "yesedit", "noedit",
			"closediv", "getParams", "rollBackChangeAndExit", "flushBj", "",
			"", "", "" ];

	this.initGridster = function() {
		// 处理返回的数据 data("code":"div...", "列":"列值", "行":"行值", "高":"高值",
		// "宽":"宽值");
		// 处理：1.首先转化成json对象，对json对象数组进行遍历
		var divarray = new Array();
		this.gridster.remove_all_widgets();
		this.isEditing = false;
		// console.info("还原使用json ： " + json==null?'有':'无');
		var objs = JSON.parse(this.jsondata);
		
		var usewidth=Math.max($(wd.topWindow).outerWidth(true),1025)/(dimensions+margins+margins);
		
		
		var cols=[0];
		var rows=[0];
		var group=[];
		
		var sgroup=[{col:1,row:1}];
		var egroup=[];
		var avgroup=sgroup;
		

		
		
		var THIS=this;
		
		function inIectangle(g,ggg){
			var A=[];
			A[0]=new Array(g.col,g.row);
			A[1]=new Array(g.col+g.size_x,g.row+g.size_y);
			
			for(var i=0;i<ggg.length;i++){
				var B=[];
				B[0]=new Array(ggg[i].col,ggg[i].row);
				B[1]=new Array(ggg[i].col+ggg[i].size_x,ggg[i].row+ggg[i].size_y);
		  		if(THIS.areaInArea(A,B)){
		  			return true;
		  		}
				
			}
			
			return false;
		}
		
		$(objs).each(function(i,el){
			// 加载布局里各个模块的位置和大小
			//宽,高不小于100
			this.size_x=calWidthAndHeight(Math.max( el.size_x,100));
			this.size_y=calWidthAndHeight(Math.max( el.size_y,100));
			this.col=calLeftAndTop(el.col);
			this.row= calLeftAndTop(el.row);
		}).sort(function(a,b){
//			if(a.col<b.col){
//				
//				if(a.row<=b.row){
//					return -1;
//				}else{
//					return 1;	
//				}
//			}else if(a.col==b.col){
//				if(a.row<b.row){
//					return -1;
//				}else{
//					return 1;
//				}
//				
//			}else if(a.col>b.col){
//				if(a.row>=b.row){
//					return 1;
//				}else{
//					return -1;
//				}
//			}

			if(a.row>=b.row){
				
				if(a.col>b.col+b.size_x){
					
					if(b.row<=a.row){
						return 1;
					}else{
						return -1;
					}
				}else{
					if(b.row<a.row){
						return 1;
					}else{
						return -1;
					}					
				}

			}else{
				return -1
			}
			


			return 0;
		}).each(function(i,el){
if(true)return;//20220914智能重排排版不稳定，先去掉
			//智能重排
			var find=false;
			var findgroup;
			for(var j=0;j<avgroup.length;j++){
					el.col=avgroup[j].col;
					el.row=avgroup[j].row;
					if(!avgroup[j].use&&(el.col+el.size_x)<=usewidth&&!inIectangle(el,group)){
						findgroup=avgroup[j];
						find=true;
						break;
					}				
			}
			if(find){
				findgroup.use=1;
			}else{
				el.col=1;
				var maxrow=0;
				for(var j=0;j<avgroup.length;j++){
					maxrow=Math.max(maxrow,avgroup[j].row);
				}
				el.row=maxrow;
			}
			//推测位置
			sgroup.push({col:el.col+el.size_x, row:el.row});
			egroup.push({col:1, row:el.row+el.size_y});
			egroup.push({col:el.col, row:el.row+el.size_y});
			avgroup=sgroup.concat(egroup);
			group.push(el);
//			console.log(el);
		}).each(function(i, el) {
//					console.log(i+" gridster "+el)
					//console.log(calWidthAndHeight(el.size_x)+" "+ calWidthAndHeight(el.size_y)+" "+ calLeftAndTop(el.col)+" "+ calLeftAndTop(el.row))
					
					var sss=sybjCtrl.gridster.add_widget2(el.id, el.bjlb, el.initurl,
							(el.size_x),(el.size_y), (el.col), (el.row)).addClass("plugin-div");

//					sybjCtrl.gridster.add_widget("<div class='close' onclick='closediv(this.parentElement)'></div><div class='ContainerForLoad' style='height:100%;'></div>",el.size_x, el.size_y, el.col, el.row).attr({id:el.id,bjlb:el.bjlb,initurl:el.initurl});
		});
		gridster.$el.on("dblclick",".grsymask",function(){
			var widget=$(this).parents("[initurl]")
//			console.log(widget);
			var data=SYBJCTRL.getParams("serviceType=20&sybjsyId="+widget.attr("id"));
			//console.log(data)
			gridster.resize_widget(widget,calWidthAndHeight(data.size_x),calWidthAndHeight(data.size_y))
			return false;
		})
		
		
//		try{
//			var children=gridster.$el.children()
//			var maxwidth=0;
//	
//			for(var i=0;i<children.length;i++){
//				var x=parseInt($(children[i]).css("left"));
//				
//				var xx=parseInt($(children[i]).css("width"));
//				
//				maxwidth=Math.max(maxwidth,x+xx);
//			}
//			
//			wd.topWindow.wd.base.setHomeWidth(maxwidth);
//		}catch(e){
//			console.log(e);
//		}
		
	};
	this.myserialize = function() {
		//从$("ul li")改为$("ul li.gs-w")
		var length = $("ul li.gs-w").length;
		// console.info('li的length： ' + length);
		var array_json = new Array();
		$("ul li.gs-w").each(function(i, el) {
			// data-row="3" data-col="2" data-sizex="300" data-sizey="100"
			// col,row,size_x,size_y
			// console.info('li的col：' + $(this).attr("data-col") + "li的row:" +
			// $(this).attr("data-row"));
			var d = new Object();
//			d.col = $(this).attr("data-col");
//			d.row = $(this).attr("data-row");
//			d.size_x = $(this).attr("data-sizex");
//			d.size_y = $(this).attr("data-sizey");
			
			d.col = parseInt($(this).css("left"));
			d.row =parseInt($(this).css("top"));
			d.size_x =parseInt($(this).css("width"));
			d.size_y = parseInt($(this).css("height"));
			
			d.id = $(this).attr("id");
			array_json.push(d);
		});
		// //console.info('array_json的值： '+array_json);
		// //console.info('array_json转json的值： '+JSON.stringify(array_json));
		return JSON.stringify(array_json);
	};

	this.saveedit = function(SESSION_STATE) {
		var saveStr = this.myserialize();
		var result = this.ajax_getBuJianCode({serviceType:4,json: saveStr});
		if (SESSION_STATE == "SESSION_STATE_APP_NETWORK" && this.isGf == 0) { // 判断是否为前台页面，后台页面不关闭编辑菜单
			this.noedit();
			sybjCtrl.changeRootTitle();

		} else {
			alert('保存成功');    // ('保存')。Lin
		}
	};

	// 初始化编辑
	this.userEdit = function(gfOrgr) {
		// console.info("调用initEdit");
		if (gfOrgr == 'gf') {
			this.ajax_userEdit("/desktopDef?serviceType=0&edit=1");  // ("geXingHuaGf.do?serviceType=0&edit=1")。Lin
		} else {
			this.ajax_userEdit("/desktop?serviceType=0&edit=1"); // ("geXingHua.do?serviceType=0&edit=1")。Lin
		}
		;

	};
	//重置首页
	this.reset = function(){
		$.ajax({
			type : "POST",
			url : "/desktop?serviceType=6&edit=1",  // "geXingHua.do?serviceType=6&edit=1"。Lin
			data : {},
			dataType : "json",
			async : false,
			success : function(data) {
				window.location.reload();
			}
		});
	}
	// ajax方法 处理用户编辑请求
	this.ajax_userEdit = function(ajaxurl) {
		$.ajax({
			type : "POST",
			url : ajaxurl,
			data : {},
			dataType : "json",
			async : false,
			success : function(data) {
				// case 1：说明第一次使用，需刷新页面 case 0:不处理
				if (data != null && data['needFlush'] == 1) {
					// 刷新，显示编辑菜单
					window.location.reload();
				} else {
					yesedit();
				}
			}
		});
	};

	// ajax方法 处理Gridster部件请求
	// ajax方法 获取新增部件html代码

	this.ajax_getBuJianCode = function(arg, func) {
		var d;
		$.ajax({
			type : "POST",
			url : this.ajaxUrl,
			data :arg,
			dataType : "json",
			async : false,
			success : function(data) {
				if (data != null && data['needFlush'] == 1) {
					window.location.reload();
					if (data['isForwardGf'] != '1') { // 若不是转向官方模板编辑，则不手动改变当前路径为"个人首页"

						sybjCtrl.changeRootTitle();

					}
				} else {
					d = data;
				}
			}
		});
		return d;
	}

	this.yesedit = function() { // 开启编辑模式
		this.isEditing = true;
		if($("#GxhGFDqSyMbid").val()==""){
			$("#mbselect").val("");
			$("#grsymb_del_btn").hide();
		}
		$("#slder,#pg_cj").css('display', 'block');
		$("#pg_cj").css('top', '30px');
		this.gridster.enable(); // 可拖动
		this.gridster.enable_resize(); // 可改变大小
		edit_en = true;
		
		// 显示关闭按钮
		$(".close").css("display","");
		//遮罩层
		$("#slder,.grsymask").slideDown("slow");
//		$("."+this.containerForLoad).hide()
		// 拉伸到底部修复
//		setTimeout(function(){
//			var marginleft=THIS.gridster.$el.css("margin-left");
//			THIS.gridster.$el.css({"left":marginleft,"margin":0});
//		},1000)
		
//		this.gridster.$el.css({"left":marginleft});//禁用自动居中显示
//		setTimeout(function(){
//	$(wd.base.applyIframeElement.parentElement).css("left")
		
		//禁用自动居中显示
		gridster.$el.css({margin:0});
//			$(wd.topWindow.wd.base.applyIframeElement).css({marginLeft:""}).attr("width","100%");
		
		//对齐首页图片按钮
//		var offsetleft=wd.topWindow.wd.base.applyIframeElement.parentNode.offsetLeft;
//		$("#pg_cj").css({left:Math.abs(offsetleft)});
		//显示选择部件栏
		var pg_cjTop=$("#pg_cj").offset().top+"px";
		$("#pg_cj").css("height","calc(100% - "+pg_cjTop+" )");
	};

	this.noedit = function() {
		this.isEditing = false;
		this.gridster.disable();
		this.gridster.disable_resize();
		edit_en = false;
		// 隐藏关闭按钮
		$(".close").css("display","none");
		//关闭遮罩层
		$("#slder,.grsymask").slideUp("slow");
		//移除 对齐首页图片按钮
		$("#pg_cj").css({left:0});
		//移除选择部件栏
		$("#pg_cj").css('top', '0px');

		//恢复自动居中显示
		this.gridster.$el.css({margin:"",left:""});
		
		wd.topWindow.wd.base.refreshApplyIframeHeight();
		
	};

	this.closediv = function(obj) {
		// console.info('关闭部件的id: ' + obj.id);
		var msg = this.ajax_getBuJianCode({serviceType:3,del:obj.id});
		if (edit_en) {
			this, gridster.remove_widget(obj, null);
		}
	};

	// ajax方法 获取部件使用参数[bjid(当不是新增时不返回id，根据isAddBj标志位判断),bjlb,bj初始化服务地址]
	this.getParams = function(_url) {
		var data;
		$.ajax({
			type : "POST",
			url : this.ajaxUrl + _url,
			data : {},
			dataType : "json",
			async : false,
			success : function(arg) {
				data = arg;
			}
		});
		return data;
	};

	this.changeRootTitle = function() { // 将当前路径恢复为"个人首页"
		try {
			wd.topWindow.initialMenuPath();
		} catch (e) {
			// console.info("wzchange()失效，当前可能为后台页面");
		}
	}

	this.rollBackChangeAndExit = function() { // 退出(Gridser页面刷新),rollback指将未执行保存的数据纪录回滚
		 var saveStr = this.myserialize();
		 var result = this.ajax_getBuJianCode({serviceType:5,json: saveStr});
		 if (SESSION_STATE == "SESSION_STATE_APP_NETWORK") { // 判断是否为前台页面，后台页面不关闭编辑菜单
		 	this.noedit();
		 } else {
		 	// alert('保存');
		 }
	};

	// 传入部件id进行刷新
	this.flushBj = function(bjId, icon) {
		if (-1 == bjId.indexOf("#")) { // 考虑不带#号传入情况
			bjId = "#" + bjId;
		}
		var id;
		var bjLb;
		var initUrl;
		id = $(bjId).attr("id");
		bjLb = $(bjId).attr("bjlb");
		initUrl = $(bjId).attr("initurl");
		//var loadingClass="home-todoPlugin-loadingIcon";
//		var $icon=$(icon);
		//$icon.addClass($icon.attr("refreshClass"));
		$(bjId+" ."+this.containerForLoad).load(initUrl, {
			"sybjId" : id,
			"sybjLb" : bjLb
		}, function() {
			//$(icon).removeClass(loadingClass);
			//$(icon).css('background-image','url(/wd/theme/standard/img/refresh.png)');
			//$(icon).css('background-size','');
		});
	};
	
	this.refreshHomeplugin=function(bjlbm){
		var THIS=this;
		var result="0";
		this.gridster.$el.children("[initurl][bjlb="+bjlbm+"]").each(function(){
			result="1"
			THIS.flushBj($(this).attr("id"));
		})
		return result;
	}

	// “鼠标进入后才出现个人首页部件的滚动条”效果实现方法,如果注释掉这个js,会导致按钮无法点击并刷新个人首页
	this.scrollEvent = function(bjId) {
		//var item = $(bjId).find('#sybjBodyInner');
		//item.unbind('mouseover').bind('mouseover', 'div', function() {
		//	this.style.overflowY = this.style.overflowX = "auto";
		//});
		//item.unbind('mouseout').bind('mouseout', 'div', function() {
		//	this.style.overflowY = this.style.overflowX = "hidden";
		//});

		// $(bjId).find("#shList,#sqList,#wenzList,#tzList,#gzList,.itemList,#sybjBodyInner").css({"height":"100%"});
		// var group="#wenzList,#tzList,#gzList,.itemList,#sybjBodyInner";
		// $(bjId).find(group).css({"height":"100%"});
		// $(bjId).on("mouseout",function(){
		// 	$(this).find(group).css({"overflowY":"hidden","width":$(this).find('#sybj').width() - 10});
		// }).on("mouseover",function(){
		// 	$(this).find(group).css({"overflowY":"auto","overflowX":"hidden"});
    // }).trigger("mouseout").trigger("mouseover");
    

	//$(bjId).on("mouseout",function(){
	//		$(this).find("#shList,#sqList,#wenzList,#tzList,#gzList,.itemList").css({"width":$(this).find('#sybj').width() - 5});
	//	}).on("mouseover",function(){
			// $(this).find("#sybjBodyInner").css({"overflowY":"auto","overflowX":"hidden"});
	//	}).trigger("mouseout").trigger("mouseover");
	}

	// 模板方法
	// 模板ajax方法，保存，另存为，删除
	this.ajax_Mb = function(arg,reqdata) {
		if(!reqdata)reqdata={}
		var d;
		$.ajax({
			type : "POST",
			url : "/desktopDef?" + arg,  // "geXingHuaGf.do?" +。Lin
			data : reqdata,
			dataType : "json",
			async : false,
			success : function(data) {
				// console.info('data: ' + data);
				if (data['needFlush'] == 1) {
//					window.location.reload();
					var iframe = top.window.document.querySelector("iframe[oriSrc]");
					iframe.src = iframe.getAttribute("oriSrc");
					
				} else {
					d = data;
				}
				if (data['newValue'] != 'undefined') {
					$("#mbselect").append(
							"<option value='" + data['newValue'] + "'>"
									+ data['newMc'] + "</option>");
				}

			}
		});
		return d;
	};

	this.selectMB = function(gfmbymid) {

		this.ajax_Mb("serviceType=9&select=" + gfmbymid);

	};

	this.exitMB = function(exit) {
		var saveStr = this.myserialize();
		this.ajax_Mb("serviceType=10&exit=" + exit,{json:saveStr} );
		// SYBJCTRL.SaveRollBackAndExit();
		this.changeRootTitle();
	};

	this.addMB = function() {
		var name = prompt("新模板名称", "未定义");
		if (name != null && name != "") {
			this.ajax_Mb("serviceType=6&addMB=" + name);
		}
	};

	this.saveAsMB = function() {
//		var name = prompt("另存为模板名称", "未定义");
//		if (name != null && name != "") {
//			var bjjson = this.myserialize();
//			this.ajax_Mb("serviceType=12&newMc=" + name ,{bjjson:bjjson});
//		}

		var mycallback=(function(t){
			var THIS=t;
			return function(data){
				var bjjson = THIS.myserialize();
/* 改，增加 描述 字段值
				THIS.ajax_Mb("serviceType=12",{newMc:data.mc,grsymbh:data.grsymbh,bjjson:bjjson});
*/				THIS.ajax_Mb("serviceType=12",
                    {newMc:data.mc,grsymbh:data.grsymbh,ms:data.ms,bjjson:bjjson});
			}
			})(this)

		wd.display.confirm({title:"另存为新模板",url:"/page/desktopDefAdd.jsp?mc=未定义",width:500,callback:mycallback});
		
	};

	this.delMB = function() {
		this.ajax_Mb("serviceType=7&delMB=1");
	};

	this.resetMB = function() {
		if (confirm("重置操作不可恢复")) {
			this.ajax_Mb("serviceType=11&reset=1");
		}
	};
	this.winFromBjId = "";
	// 事件控制 主要为关闭弹窗后的回调方法提供接口，实现调用弹窗的首页部件的刷新
	this.EventCtrl = {

		setBjId : function(bjid) { // 设入调用弹窗的具体部件Id
			this.winFromBjId = bjid;
			// console.info("EventCtrl.setBjId: 值为"+this.winFromBjId);

		},
		FlushBj : function() {
			var winFromBjId = this.winFromBjId;
			sybjCtrl.flushBj(winFromBjId);
		}
	};
	

	 ////////////////////////////////////////////////
	 this.areaInArea=function(A,B){
	 	
			var x_s1=A[0][0];
			var x_e1=A[1][0];
			var x_s2=B[0][0];
			var x_e2=B[1][0];
			
			var y_s1=A[0][1];
			var y_e1=A[1][1];
			var y_s2=B[0][1];
			var y_e2=B[1][1];
			
			var x_overlap=!(x_e1 <= x_s2 || x_e2 <= x_s1);
			var y_overlap=!(y_e1 <= y_s2 || y_e2 <= y_s1);

			return x_overlap&&y_overlap;
			
	 }
	
	

	return this;
};


//left=5+(x-1)(20+5+5)
//x=(left-5)/(20+5+5)+1
	function calLeftAndTop(v) {
		v=parseInt(v);
		return Math.max( parseInt((v-margins)/(dimensions+margins+margins)+1),1);
//		var a = 0;
//		var b = 0;
//		if (v <= 0 || v <= dimensions / 2)
//			return 1;
//		for (var j = 0; j < 100; j++) {
//			b = dimensions * (j - 1) + j * margins * 2
//
//				if (a <= v && b >= v) {
//					if (j == 0) {
//						if ((b + a) / 2 > v) {
//							return 1;
//						} else {
//							return 1;
//						}
//					} else {
//						if ((b + a) / 2 > v) {
//							return j - 1;
//						} else {
//							return j;
//						}
//					}
//				}
//				a = b;
//		}
//		return 100;
	}


 

//width=20+(x-1)(20+5+5)
//x=(width-20)/(20+5+5)+1
	function calWidthAndHeight(v) {
		v=parseInt(v);
		return Math.max( parseInt((v-dimensions)/(dimensions+margins+margins)+1),1);
//		var a = 0;
//		var b = 0;
//		if (v <= 0 || v <= dimensions / 2)
//			return 1;
//		for (var j = 0; j < 100; j++) {
//			b = dimensions * j + margins * (j - 1) * 2;
//
//			//					console.log(b+" "+a)
//			if (a <= v && b >= v) {
//				if (j == 0) {
//					if ((b + a) / 2 > v) {
//						return 1;
//					} else {
//						return 1;
//					}
//				} else {
//					if ((b + a) / 2 > v) {
//						return j - 1;
//					} else {
//						return j;
//					}
//				}
//			}
//			a = b;
//		}
//		return 100;
	}