panel,dialog,window組件越界問題彙總

以前分別寫過panel,dialog,window三個組件由於拖曳或者reSize形成組件越界而沒法還原的問題，兩篇文章分別針對拖曳和reSize給出瞭解決方案。不過根據朋友的反饋，reSize的解決方案和拖曳的解決方案同時使用時存在效率低下的問題，我的也在進一步使用過程當中發現了另一些問題，共修正如下Bug：

• 原生panel並沒有拖曳和縮放功能，且繼承panel組件的上層組件太多，極容易出問題，故放棄對panel組件的支持。
• onResize配合onMove使用時，性能低下，緣由是由onResize觸發的onMove內部死循環。已修正。
• resize時，超越瀏覽器邊界會形成縮放和拖動都不可用。經過增長了對offset的監控修正
• IE8下，reSize超越瀏覽器邊界後依舊會形成縮放和拖曳不可用，緣由是IE8此時不影響onkeyup事件。已修正。
• window，dioalg內部包含layout，datagrid組件時，resize高度小於必定值會形成性能低下。已修正。
• 初始化時，若是頁面不是最大化，onResize會把window和dialog高度自動變小。經過計數器修正。

實現代碼：

最終綜合兩種方案，整理出代碼：

var ie = (function() {
	var undef, v = 3, div = document.createElement('div'), all = div
			.getElementsByTagName('i');
	while (div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
			all[0])
		;
	return v > 4 ? v : undef;
}());
/**
 * add by cgh
 * 針對panel window dialog三個組件調整大小時會超出父級元素的修正
 * 若是父級元素的overflow屬性爲hidden，則修復上下左右個方向
 * 若是父級元素的overflow屬性爲非hidden，則只修復上左兩個方向
 * @param width
 * @param height
 * @returns
 */
var easyuiPanelOnResize = function(width, height) {
	if (!$.data(this, 'window') && !$.data(this, 'dialog'))
		return;

	if (ie === 8) {
		var data = $.data(this, "window") || $.data(this, "dialog");
		if (data.pmask) {
			var masks = data.window.nextAll('.window-proxy-mask');
			if (masks.length > 1) {
				$(masks[1]).remove();
				masks[1] = null;
			}
		}
	}
	if ($(this).panel('options').maximized == true) {
		$(this).panel('options').fit = false;
	}
	$(this).panel('options').reSizing = true;
	if (!$(this).panel('options').reSizeNum) {
		$(this).panel('options').reSizeNum = 1;
	} else {
		$(this).panel('options').reSizeNum++;
	}
	var parentObj = $(this).panel('panel').parent();
	var left = $(this).panel('panel').position().left;
	var top = $(this).panel('panel').position().top;

	if ($(this).panel('panel').offset().left < 0) {
		$(this).panel('move', {
			left : 0
		});
	}
	if ($(this).panel('panel').offset().top < 0) {
		$(this).panel('move', {
			top : 0
		});
	}

	if (left < 0) {
		$(this).panel('move', {
			left : 0
		}).panel('resize', {
			width : width + left
		});
	}
	if (top < 0) {
		$(this).panel('move', {
			top : 0
		}).panel('resize', {
			height : height + top
		});
	}
	if (parentObj.css("overflow") == "hidden") {
		var inline = $.data(this, "window").options.inline;
		if (inline == false) {
			parentObj = $(window);
		}

		if ((width + left > parentObj.width())
				&& $(this).panel('options').reSizeNum > 1) {
			$(this).panel('resize', {
				width : parentObj.width() - left
			});
		}

		if ((height + top > parentObj.height())
				&& $(this).panel('options').reSizeNum > 1) {
			$(this).panel('resize', {
				height : parentObj.height() - top
			});
		}
	}
	$(this).panel('options').reSizing = false;
};
/**
 * add by cgh
 * 針對panel window dialog三個組件拖動時會超出父級元素的修正
 * 若是父級元素的overflow屬性爲hidden，則修復上下左右個方向
 * 若是父級元素的overflow屬性爲非hidden，則只修復上左兩個方向
 * @param left
 * @param top
 * @returns
 */
var easyuiPanelOnMove = function(left, top) {
	if ($(this).panel('options').reSizing)
		return;
	var parentObj = $(this).panel('panel').parent();
	var width = $(this).panel('options').width;
	var height = $(this).panel('options').height;
	/*var right = left + width;
	var buttom = top + height;
	var parentWidth = parentObj.width();
	var parentHeight = parentObj.height();*/

	if (left < 0) {
		$(this).panel('move', {
			left : 0
		});
	}
	if (top < 0) {
		$(this).panel('move', {
			top : 0
		});
	}

	if (parentObj.css("overflow") == "hidden") {
		var inline = $.data(this, "window").options.inline;
		if (inline == false) {
			parentObj = $(window);
		}
		if (left > parentObj.width() - width) {
			$(this).panel('move', {
				"left" : parentObj.width() - width
			});
		}
		if (top > parentObj.height() - height) {
			$(this).panel('move', {
				"top" : parentObj.height() - height
			});
		}
	}
};

$.fn.panel.defaults.onResize = easyuiPanelOnResize;
$.fn.window.defaults.onResize = easyuiPanelOnResize;
$.fn.dialog.defaults.onResize = easyuiPanelOnResize;
$.fn.window.defaults.onMove = easyuiPanelOnMove;
$.fn.panel.defaults.onMove = easyuiPanelOnMove;
$.fn.dialog.defaults.onMove = easyuiPanelOnMove;