通过调用addResizeObserver来给对象增加可以改变大小的功能
/**
* filename: Resizeable.js
* 通过调用addResizeObserver来给对象增加可以改变大小的功能
* todo: 在ff下还有Bug
*/
function addResizeObserver(eventObj,targetElementId){
if(isMoveing) return;
var isOnResizing = false;
var canResize = false;
var resizeMode = null;
var rePositionOK = false;
if(!eventObj) eventObj=window.event;
//var beObservedElement = Event.element(eventObj);
var beObservedElement = $(targetElementId);
//if($(targetElementId)!= beObservedElement){return;}
var miniHeight = 120;
var miniWidth = 220;
var maxHeight = document.body.offsetHeight;
var maxWidth = document.body.offsetWidth;
var chatPanelWidth = beObservedElement.offsetWidth;
var chatPanelHeight = beObservedElement.offsetHeight;
//位置都以左上角的坐标计算，输出的时候换算为对应的相对坐标
var chatPanelLeft = beObservedElement.offsetLeft;
var chatPanelTop = beObservedElement.offsetTop;
var chatPanelRight = chatPanelLeft+chatPanelWidth;
var chatPanelBottom = chatPanelTop + chatPanelHeight;
if(chatPanelRight-10 < eventObj.clientX && eventObj.clientX< chatPanelRight && eventObj.clientY >chatPanelTop+10 && eventObj.clientY<chatPanelBottom-10)
{
canResize = true;
resizeMode = "east";
beObservedElement.style.cursor = "e-resize";
beObservedElement.observe("mouseout",outHandler);
beObservedElement.observe("mousedown",startMove,true);
}else if(chatPanelRight-10 < eventObj.clientX && eventObj.clientX < chatPanelRight && eventObj.clientY < chatPanelTop+10 && eventObj.clientY > chatPanelTop){
//debug("north_east");
canResize = true;
beObservedElement.style.cursor = "ne-resize";
resizeMode = "north_east";
beObservedElement.observe("mouseout",outHandler);
beObservedElement.observe("mousedown",startMove,true);
}else if(chatPanelLeft+10 < eventObj.clientX && eventObj.clientX < chatPanelRight-10 && eventObj.clientY < chatPanelTop+10 && eventObj.clientY > chatPanelTop){
canResize = true;
resizeMode = "north";
beObservedElement.style.cursor = "n-resize";
beObservedElement.observe("mouseout",outHandler);
beObservedElement.observe("mousedown",startMove,true);
}else if(chatPanelLeft+10 < eventObj.clientX && eventObj.clientX < chatPanelRight-10 && eventObj.clientY > chatPanelBottom-10 && eventObj.clientY < chatPanelBottom){
canResize = true;
//debug("south");
resizeMode = "south";
beObservedElement.style.cursor = "s-resize";
beObservedElement.observe("mouseout",outHandler);
beObservedElement.observe("mousedown",startMove,true);
}else if(eventObj.clientX > chatPanelRight-10 && eventObj.clientX < chatPanelRight && eventObj.clientY > chatPanelBottom-10 && eventObj.clientY < chatPanelBottom){
canResize = true;
//debug("south_east");
resizeMode = "south_east";
beObservedElement.style.cursor = "se-resize";
beObservedElement.observe("mouseout",outHandler);
beObservedElement.observe("mousedown",startMove,true);
}else if(chatPanelLeft < eventObj.clientX && eventObj.clientX < chatPanelLeft + 10 && eventObj.clientY > chatPanelTop + 10 && eventObj.clientY < chatPanelBottom -10){
canResize = true;
//debug("west");
resizeMode = "west";
beObservedElement.style.cursor = "w-resize";
beObservedElement.observe("mouseout",outHandler);
beObservedElement.observe("mousedown",startMove,true);
}else if(chatPanelLeft < eventObj.clientX && eventObj.clientX < chatPanelLeft + 10 && eventObj.clientY < chatPanelTop + 10 && eventObj.clientY > chatPanelTop){
canResize = true;
//debug("north_west");
resizeMode = "north_west";
beObservedElement.style.cursor = "nw-resize";
beObservedElement.observe("mouseout",outHandler);
beObservedElement.observe("mousedown",startMove,true);
}else if(chatPanelLeft < eventObj.clientX && eventObj.clientX < chatPanelLeft + 10 && eventObj.clientY > chatPanelBottom - 10 && eventObj.clientY < chatPanelBottom){
canResize = true;
//debug("south_west");
resizeMode = "south_west";
beObservedElement.style.cursor = "sw-resize";
beObservedElement.observe("mouseout",outHandler);
beObservedElement.observe("mousedown",startMove,true);
}else{
if(!isOnResizing && canResize){
canResize = false;
outHandler();
}
}
Event.stop(eventObj);
//mousedown
function startMove(event){
if(!canResize)return;
isOnResizing = true;
if(!event) event = window.event;
if(beObservedElement.setCapture){
beObservedElement.setCapture();
beObservedElement.attachEvent("onlosecapture", loseCaptureHandler);
}
beObservedElement.observe('mousemove',moveHanlder);
beObservedElement.observe('mouseup',upHandler);
Event.stop(event);
//debug("mouse down OK");
}
function moveHanlder(eventMove){
//debug("start to move");
if(eventMove == null) eventMove = window.event;
var toHeight = 0;
var toWidth = 0;
if(resizeMode.indexOf("east")>-1){
if(!rePositionOK){
rePositionOK = true;
beObservedElement.style.left = chatPanelLeft + "px";
}
toWidth = eventMove.clientX - beObservedElement.offsetLeft;
}
if(resizeMode.indexOf("west")>-1){
toWidth = chatPanelRight - eventMove.clientX;
if(toWidth<=miniWidth){
rePositionOK = true;
} else {
rePositionOK = false;
beObservedElement.style.left = eventMove.clientX + "px";
}
}
if(resizeMode.indexOf("north")>-1){
beObservedElement.style.top = null;
beObservedElement.style.bottom = (document.body.offsetHeight- chatPanelBottom) + "px";
toHeight = chatPanelBottom -eventMove.clientY;
}
if(resizeMode.indexOf("south")>-1){
beObservedElement.style.top = beObservedElement.offsetTop + "px";
//beObservedElement.style.bottom = null;
toHeight = eventMove.clientY - chatPanelTop;
}
resizeto(toWidth,toHeight);
Event.stop(eventMove);
}
function upHandler(eventUp){
if(!eventUp) eventUp = window.event;
//if(beObservedElement != Event.element(eventUp))return;
isOnResizing = false;
beObservedElement.parentElement.style.curosr = "auto";
//Event.stopObserving(document,"mousemove",moveHanlder);
Event.stopObserving(beObservedElement,"mousedown",startMove);
beObservedElement.stopObserving("mouseup",upHandler);
beObservedElement.stopObserving("mousemove",moveHanlder);
if(beObservedElement.releaseCapture){
beObservedElement.detachEvent("onlosecapture",upHandler);
beObservedElement.releaseCapture();
}
Event.stop(eventUp);
//debug(eventUp.srcElement.tagName + "_id=" +eventUp.srcElement.id);
}
function resizeto(width,height){
if(width > miniWidth && width < maxWidth && width!=0){
beObservedElement.style.width = width + "px";
//debug("left=" +beObservedElement.style.left + "; right=" + beObservedElement.style.right + ";");
}
if(height!=0 && height > miniHeight && height < maxHeight){
beObservedElement.style.height = height + "px";
//debug("top=" + beObservedElement.style.top +"; bottom="+ beObservedElement.style.bottom);
}
}
function outHandler(){
//debug("is already out...");
beObservedElement.style.cursor = "auto";
//beObservedElement.style.borderRight = "0px";
beObservedElement.stopObserving('mousedown',startMove,true);
beObservedElement.stopObserving('mouseout',outHandler,true);
}
function loseCaptureHandler(){
//debug("Los element's cpature....");
}
}
