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