User:Bawolff/sandbox/resizeEditbox/resizeEdit.js
Note: After saving, you may have to bypass your browser's cache to see the changes. Mozilla / Firefox / Safari: hold down Shift while clicking Reload, or press Ctrl-Shift-R (Cmd-Shift-R on Apple Mac); IE: hold Ctrl while clicking Refresh, or press Ctrl-F5; Konqueror: simply click the Reload button, or press F5; Opera users may need to completely clear their cache in Tools→Preferences. — More skins
/*extern addHandler */
/*
Please note, this is based on example 17-4 (pg 422) in Javascript: The Definitive Guide, by David Flanagan (published by O'Reily Media). ISBN: 978-0-596-10199-2
They say in the preface you're free to use any of the examples in the book in your own code, as long as you don't reproduce the entire book.
For the record, as far as any copyright I own, your free to do with this code as you wish - bawolff
*/
var editBoxResize = {};
editBoxResize.opt = {grid: 'url(http://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Blank_square.svg/120px-Blank_square.svg.png)'}
editBoxResize.lastDelata = {x: NaN, y: NaN}
editBoxResize.lastDelata2 = {x: NaN, y: NaN}
editBoxResize.init = function () {
var wp = document.getElementById('wpTextbox1');
wp.style.width = 'auto';
var parent = wp.parentNode;
if (parent === null) {
return false;
}
var sib = wp.nextSibling;
var divContainer = document.createElement('div');
divContainer.id = 'jsResizeEditboxContainer';
divContainer.appendChild(wp); //removes wp from doc tree
editBoxResize.box = parent.insertBefore(divContainer, sib); //reinserts surrounded by div
divContainer.style.cssFloat = 'left';
divContainer.style.padding = '0 0.5em 0.5em 0';
divContainer.style.margin = '0';
divContainer.style.cursor = 'se-resize';
var nextThing = divContainer.nextSibling;
if (nextThing !== null && nextThing.nodeType === 1 ) {
nextThing.style.clear = 'left';
}
//add initial handlers
addHandler(divContainer, 'mousedown', editBoxResize.mouseDown);
addHandler(wp, 'mousedown', editBoxResize.killMouseDown);
}
editBoxResize.killMouseDown = function(e) {
//stop event prop, so not triggered when just clicking inside edit box
if (!e) e = window.event //MSIE
if (e.stopPropagation) e.stopPropagation(); //dom2
else e.cancelBubble = true; //IE
}
editBoxResize.mouseDown = function(e) {
if (!e) e = window.event //MSIE
editBoxResize.box.firstChild.style.visibility = 'hidden';
editBoxResize.box.style.backgroundImage = editBoxResize.opt.grid;
//attach events so we start to listen to drags.
if (document.addEventListener) {
//DOM2 way
document.addEventListener("mousemove", editBoxResize.resize, true);
document.addEventListener("mouseup", editBoxResize.mouseUp, true);
}
else if (document.attachEvent) {
//MSIE 5+
editBoxResize.box.setCapture();
editBoxResize.box.attachEvent("onmousemove", editBoxResize.resize);
editBoxResize.box.attachEvent("onmouseup", editBoxResize.mouseUp);
editBoxResize.box.attachEvent("onlosecapture", editBoxResize.mouseUp);
}
else {
//old DOM 0 (this may or may not work depending if events bubble)
editBoxResize.oldmove = document.onmousemove;
editBoxResize.oldup = document.onmouseup;
document.onmousemove = editBoxResize.resize;
document.onmouseup = editBoxResize.mouseUp;
}
}
editBoxResize.mouseUp = function(e) {
if (!e) e = window.event //MSIE
editBoxResize.box.firstChild.style.visibility = 'visible';
editBoxResize.box.style.backgroundImage = 'none';
//rem events we no longer care about (As no longer dragging)
if (document.removeEventListener) {
//DOM2 way
document.removeEventListener("mousemove", editBoxResize.resize, true);
document.removeEventListener("mouseup", editBoxResize.mouseUp, true);
}
else if (document.detachEvent) {
//MSIE 5+
editBoxResize.box.releaseCapture();
editBoxResize.box.detachEvent("onmousemove", editBoxResize.resize);
editBoxResize.box.detachEvent("onmouseup", editBoxResize.mouseUp);
editBoxResize.box.detachEvent("onlosecapture", editBoxResize.mouseUp);
}
else {
//old DOM 0
document.onmousemove = editBoxResize.oldmove;
document.onmouseup = editBoxResize.oldup;
}
//stop event propagation (as we're done)
if (e.stopPropagation) e.stopPropagation(); //dom2
else e.cancelBubble = true; //IE
}
editBoxResize.resize = function (e, selfCalled) {
//get drag events, change size of edit box
//this isn't really done yet.
var elm = editBoxResize.box;
if (!e) { e = window.event; }
var deltax = editBoxResize.box.offsetLeft+elm.offsetWidth - e.clientX;
var deltay = editBoxResize.box.offsetTop+editBoxResize.box.offsetHeight - e.clientY;
/*
if (selfCalled) {
if (deltax === editBoxResize.lastDelata2.x) {return true};
}
*/
if (deltax<-10) {
editBoxResize.box.firstChild.cols++;
}
else if (deltax > 10) {
(editBoxResize.box.firstChild.cols > 5) ?(editBoxResize.box.firstChild.cols--) : (true)
}
if (deltay<-10) {
editBoxResize.box.firstChild.rows++;
}
else if (deltay>10) {
(editBoxResize.box.firstChild.rows > 5) ?(editBoxResize.box.firstChild.rows--) : (true)
}
/*
editBoxResize.lastDelata2.x = editBoxResize.lastDelata.x;
editBoxResize.lastDelata2.y = editBoxResize.lastDelata.y;
editBoxResize.lastDelata.x = deltax;
editBoxResize.lastDelata.y = deltay;
*/
}
$(editBoxResize.init);