magiccontrolhandler - replacement for AJAX Toolkit ResizableControlExtender and
DragPanelExtender
layouthandler.js
/*
To enable "resize" and/or "move" add class="MagicControlAll" attribute to html element. For example:
<table runat="server" id="table1" class="MagicControlAll" border="1">
...
</table>
See MagicControlHandler.css for other css available class names.
For AJAX UpdatePanel Support add following script after asp:ScriptManager:
<script type="text/javascript">
Sys.Application.add_load(MagicControlInitialize);
</script>
On master page use the following script to override the name of input element:
<script type="text/javascript">
MagicControlClass.prototype.FormElement = 'ctl00_MagicControl';
</script>
*/
MagicControlClass.prototype.MoveArea = 16;
MagicControlClass.prototype.ResizeArea = 16;
MagicControlClass.prototype.zIndexStart = 1000;
MagicControlClass.prototype.FormElement = 'MagicControl';
function MagicControlClass(htmlobject, eventobject) {
this.Control = htmlobject;
this.OffsetLeft = htmlobject.offsetLeft;
this.OffsetTop = htmlobject.offsetTop;
this.Left = 0;
this.Top = 0;
this.ScrollTop = 0;
this.ScrollLeft = 0;
var o = htmlobject;
while (o.tagName != 'HTML') {
if (o.style.position == 'absolute') {
this.Left += o.offsetLeft;
this.Top += o.offsetTop;
}
o = o.parentNode;
if (o.scrollLeft) this.ScrollLeft += o.scrollLeft;
if (o.scrollTop) this.ScrollTop += o.scrollTop;
}
this.Width = htmlobject.offsetWidth;
this.Height = htmlobject.offsetHeight;
this.MouseX = eventobject.clientX;
this.MouseY = eventobject.clientY;
this.PaddingBottom = (this.Control.style.paddingBottom) ? MagicControlClass.prototype.ResizeArea : 0;
}
function MagicControlMoving() {
with (this) return (MouseY - Top < MoveArea - ScrollTop) ? true : false;
}
function MagicControlResizing() {
with (this) return (MouseY - Top > Height - ResizeArea - ScrollTop && MouseX - Left > Width - ResizeArea - ScrollLeft) ? true : false;
}
function MagicControlMoveTo(X, Y) {
with (this) {
var L = OffsetLeft + X - MouseX;
if (L < 0) L = 0;
Control.style.left = L + 'px';
var T = OffsetTop + Y - MouseY;
if (T < 0) T = 0;
Control.style.top = T + 'px';
}
}
function MagicControlResizeTo(X, Y) {
with (this) {
if (Control.className.indexOf('MagicControlWidth') >= 0 || Control.className.indexOf('MagicControlSize') >= 0 || Control.className.indexOf('MagicControlAll') >= 0) {
var W = Width + X - MouseX;
if (W < ResizeArea) W = ResizeArea;
Control.style.width = W + 'px';
}
if (Control.className.indexOf('MagicControlHeight') >= 0 || Control.className.indexOf('MagicControlSize') >= 0 || Control.className.indexOf('MagicControlAll') >= 0) {
var H = Height + Y - MouseY - PaddingBottom;
if (H < ResizeArea - PaddingBottom) H = ResizeArea - PaddingBottom;
Control.style.height = H + 'px';
}
}
}
MagicControlClass.prototype.Moving = MagicControlMoving;
MagicControlClass.prototype.Resizing = MagicControlResizing;
MagicControlClass.prototype.MoveTo = MagicControlMoveTo;
MagicControlClass.prototype.ResizeTo = MagicControlResizeTo;
function MagicControlMousedown(e) {
if (!e) e = event;
var MagicControlObject = new MagicControlClass(this, e);
for (var i = 0; i < document.MagicControlList.length; i++) {
var o = document.getElementById(document.MagicControlList[i]);
if (o.id == this.id) {
document.MagicControlList.splice(i, 1);
document.MagicControlList[document.MagicControlList.length] = this.id;
o = document.getElementById(document.MagicControlList[i]);
}
o.style.zIndex = MagicControlClass.prototype.zIndexStart + i + 1;
}
if (MagicControlObject.Resizing() || MagicControlObject.Moving()) {
document.MagicControlObject = MagicControlObject;
e.cancelBubble = true;
return false;
}
}
function MagicControlMousemove(e) {
if (!document.MagicControlObject) return;
if (!e) e = event;
with (document.MagicControlObject) {
if (Resizing())
ResizeTo(e.clientX, e.clientY)
else if (Moving())
MoveTo(e.clientX, e.clientY)
e.cancelBubble = true;
return false;
}
}
function MagicControlMouseup(e) {
if (!document.MagicControlObject) return;
with (document.MagicControlObject) {
var L = parseInt(Control.style.left);
var T = parseInt(Control.style.top);
var W = parseInt(Control.style.width);
var H = parseInt(Control.style.height);
if (!isNaN(L) || !isNaN(T) || !isNaN(W) || !isNaN(H)) {
if (isNaN(L)) L = '-';
if (isNaN(T)) T = '-';
if (isNaN(W)) W = '-';
if (isNaN(H)) H = '-';
if (Control.className.indexOf('MagicControlWidth') >= 0) H = '-';
if (Control.className.indexOf('MagicControlHeight') >= 0) W = '-';
var FormElement = document.forms[0][FormElement];
if (FormElement) {
var ObjectParams = FormElement.value.split(';');
FormElement.value = Control.id + ',' + L + ',' + T + ',' + W + ',' + H + ',' + Control.style.zIndex;
for (var op = 0; op < ObjectParams.length; op++)
if (ObjectParams[op].length > 0)
if (ObjectParams[op].substring(0, Control.id.length + 1) != Control.id + ',')
FormElement.value += ';' + ObjectParams[op];
}
}
}
document.MagicControlObject = null;
e.cancelBubble = true;
return false;
}
function MagicControlInitialize() {
document.AutoID = new Array();
document.MagicControlList = new Array();
var divs = document.getElementsByTagName('*');
for (var i = 0; i < divs.length; i++) {
if (divs[i].className.indexOf('MagicControl') >= 0) {
if (!divs[i].id) {
var AUTOID = null;
var o = divs[i];
while (o.tagName != 'BODY') {
o = o.parentNode;
if (o.id) if (o.id.indexOf('_AUTO_') < 0) {
if (!document.AutoID[o.id]) document.AutoID[o.id] = 1; else document.AutoID[o.id]++;
divs[i].id = o.id + '_AUTO_' + document.AutoID[o.id];
break;
}
}
}
document.MagicControlList[document.MagicControlList.length] = divs[i].id;
divs[i].onmousedown = MagicControlMousedown;
if ((divs[i].className.indexOf('MagicControlWidthScroll') >= 0) || (divs[i].className.indexOf('MagicControlHeightScroll') >= 0) ||
(divs[i].className.indexOf('MagicControlSizeScroll') >= 0) || (divs[i].className.indexOf('MagicControlAllScroll') >= 0))
divs[i].style.paddingBottom = MagicControlClass.prototype.ResizeArea + 'px';
if ((divs[i].className.indexOf('MagicControlMove') >= 0) || (divs[i].className.indexOf('MagicControlAll') >= 0))
divs[i].style.position = 'absolute';
divs[i].style.zIndex = MagicControlClass.prototype.zIndexStart + document.MagicControlList.length;
}
}
var FormElement = document.forms[0][MagicControlClass.prototype.FormElement];
if (FormElement) {
var ObjectParams = FormElement.value.split(';');
for (var op = 0; op < ObjectParams.length; op++) if (ObjectParams[op].length > 0) {
var ObjectParam = ObjectParams[op].split(',');
if (ObjectParam.length > 5) {
var htmlobject = document.getElementById(ObjectParam[0]);
if (htmlobject != null) {
if (!isNaN(ObjectParam[1])) htmlobject.style.left = ObjectParam[1] + 'px';
if (!isNaN(ObjectParam[2])) htmlobject.style.top = ObjectParam[2] + 'px';
if (!isNaN(ObjectParam[3])) htmlobject.style.width = ObjectParam[3] + 'px';
if (!isNaN(ObjectParam[4])) htmlobject.style.height = ObjectParam[4] + 'px';
if (!isNaN(ObjectParam[5])) htmlobject.style.zIndex = ObjectParam[5];
}
}
}
} else {
alert('FORM element must contain input element with id=' + MagicControlClass.prototype.FormElement + '!');
}
if (window.addEventListener) { // not ie
document.addEventListener("mousemove", MagicControlMousemove, false);
document.addEventListener("mouseup", MagicControlMouseup, false);
}
else if (window.attachEvent) { // ie
document.attachEvent('onmousemove', MagicControlMousemove);
document.attachEvent('onmouseup', MagicControlMouseup);
}
}
if (window.addEventListener) // not ie
window.addEventListener("load", MagicControlInitialize, false);
else if (window.attachEvent) // ie
window.attachEvent('onload', MagicControlInitialize);