User:Bawolff/sandbox/resizeEditbox/resizeEdit.js

/*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);