view/js/resizable-tables.js

//
// Resizable Table Columns.
//  version: 1.0
//
// (c) 2006, bz
//
// 25.12.2006:  first working prototype
// 26.12.2006:  now works in IE as well but not in Opera (Opera is @#$%!)
// 27.12.2006:  changed initialization, now just make class='resizable' in table and load script
//
function preventEvent(e) {
        var ev = e || window.event;
        if (ev.preventDefault) ev.preventDefault();
        else ev.returnValue = false;
        if (ev.stopPropagation)
                ev.stopPropagation();
        return false;
}

function getStyle(x, styleProp) {
        if (x.currentStyle)
                var y = x.currentStyle[styleProp];
        else if (window.getComputedStyle)
                var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
        return y;
}

function getWidth(x) {
        if (x.currentStyle)
                // in IE
                var y = x.clientWidth - parseInt(x.currentStyle["paddingLeft"]) - parseInt(x.currentStyle["paddingRight"]);
                // for IE5: var y = x.offsetWidth;
        else if (window.getComputedStyle)
                // in Gecko
                var y = document.defaultView.getComputedStyle(x,null).getPropertyValue("width");
        return y || 0;
}

function setCookie (name, value, expires, path, domain, secure) {
        document.cookie = name + "=" + escape(value) +
                ((expires) ? "; expires=" + expires : "") +
                ((path) ? "; path=" + path : "") +
                ((domain) ? "; domain=" + domain : "") +
                ((secure) ? "; secure" : "");
}

function getCookie(name) {
        var cookie = " " + document.cookie;
        var search = " " + name + "=";
        var setStr = null;
        var offset = 0;
        var end = 0;
        if (cookie.length > 0) {
                offset = cookie.indexOf(search);
                if (offset != -1) {
                        offset += search.length;
                        end = cookie.indexOf(";", offset)
                        if (end == -1) {
                                end = cookie.length;
                        }
                        setStr = unescape(cookie.substring(offset, end));
                }
        }
        return(setStr);
}
// main class prototype
function ColumnResize(row) {
        if (row.tagName != 'TR') return;

        this.id = row.id;

        // ============================================================
        // private data
        var self = this;

        var dragColumns  = row.cells; // first row columns, used for changing of width
        if (!dragColumns) return; // return if no table exists or no one row exists

        var dragColumnNo; // current dragging column
        var dragX;        // last event X mouse coordinate

        var saveOnmouseup;   // save document onmouseup event handler
        var saveOnmousemove; // save document onmousemove event handler
        var saveBodyCursor;  // save body cursor property
        
        var setupFlags = new Array(dragColumns.length);

        // ============================================================
        // methods

        // ============================================================
        // do changes columns widths
        // returns true if success and false otherwise
        this.changeColumnWidth = function(no, w) {
                if (!dragColumns) return false;

                if (no < 0) return false;
                if (dragColumns.length < no) return false;

                if (parseInt(dragColumns[no].style.width) <= -w) return false;
                if (dragColumns[no+1] && parseInt(dragColumns[no+1].style.width) <= w) return false;

                dragColumns[no].style.width = parseInt(dragColumns[no].style.width) + w +'px';
//              if (dragColumns[no+1])
//                      dragColumns[no+1].style.width = parseInt(dragColumns[no+1].style.width) - w + 'px';

                return true;
        }

        // ============================================================
        // do drag column width
        this.columnDrag = function(e) {
                
                if (!setupFlags[dragColumnNo]) {
                        setupFlags[dragColumnNo] = true;
                        self.setup(dragColumnNo);
                }
                
                var e = e || window.event;
                var X = e.clientX || e.pageX;
                if (!self.changeColumnWidth(dragColumnNo, X-dragX)) {
                        // stop drag!
                        self.stopColumnDrag(e);
                }

                dragX = X;
                // prevent other event handling
                preventEvent(e);
                return false;
        }

        // ============================================================
        // stops column dragging
        this.stopColumnDrag = function(e) {
                var e = e || window.event;
                if (!dragColumns) return;

                // restore handlers & cursor
                document.onmouseup  = saveOnmouseup;
                document.onmousemove = saveOnmousemove;
                document.body.style.cursor = saveBodyCursor;

                // remember columns widths in cookies for server side
                var colWidth = '';
                var separator = '';
                for (var i=0; i<dragColumns.length; i++) {
                        colWidth += separator + parseInt( getWidth(dragColumns[i]) );
                        separator = '+';
                }
                var expire = new Date();
                expire.setDate(expire.getDate() + 365); // year
                document.cookie = self.id + '-width=' + colWidth +
                        '; expires=' + expire.toGMTString();

                preventEvent(e);
        }
        
        this.setup = function(i) {
//              dragColumns[i].width = ""; // for sure
                dragColumns[i].style.width = parseInt( getWidth(dragColumns[i]) ) + "px";

/*
                // set up current columns widths in their particular attributes
                // do it in two steps to avoid jumps on page!
                var colWidth = new Array();
                for (var i=0; i<dragColumns.length; i++)
                        colWidth[i] = parseInt( getWidth(dragColumns[i]) );
                for (var i=0; i<dragColumns.length; i++) {
                        dragColumns[i].width = ""; // for sure
                        dragColumns[i].style.width = colWidth[i] + "px";
                }
*/
        }
        
        // ============================================================
        // init data and start dragging
        this.startColumnDrag = function(e) {
                var e = e || window.event;

                // if not first button was clicked
                //if (e.button != 0) return;

                // remember dragging object
                dragColumnNo = (e.target || e.srcElement).parentNode.parentNode.cellIndex;
                dragX = e.clientX || e.pageX;
                
                saveOnmouseup       = document.onmouseup;
                document.onmouseup  = self.stopColumnDrag;

                saveBodyCursor             = document.body.style.cursor;
                document.body.style.cursor = 'col-resize'; //'w-resize';

                // fire!
                saveOnmousemove      = document.onmousemove;
                document.onmousemove = self.columnDrag;

                preventEvent(e);
        }
        
        var wasActive = (document.activeElement != null);
        var activeElemID = wasActive ? document.activeElement.id : "";
        var activeElemName = wasActive ? document.activeElement.name : "";
        
        // prepare table header to be draggable
        // it runs during class creation
        for (var i=0; i<dragColumns.length; i++) {
                dragColumns[i].innerHTML = "<div style='position:relative;width:100%;'>"+
                        "<div style='"+
                        "background-color:transparent/*#aaa*/;position:absolute;height:100%;width:5px;margin-right:-5px;"+
                        "left:100%;top:0px;cursor:col-resize/*w-resize*/;z-index:10;'>"+
                        "</div><div>"+
                        dragColumns[i].innerHTML+
                        "</div></div>";
                // BUGBUG: calculate real border width instead of 5px!!!
                dragColumns[i].firstChild.firstChild.onmousedown = this.startColumnDrag;
        }
        
        if (wasActive && ((activeElemID&&activeElemID.length) || (activeElemName&&activeElemName.length))) {
                var activeEl = activeElemID ? $(activeElemID) : document.getElementsByName(activeElemName)[0];
                if (activeEl) {
                        activeEl.focus();
                        activeEl.select();
                }
        }
}

// select all rows and make resizable those that have 'resizable' class
var resizableRows = new Array();

function ResizableColumns() {
        resizableRows.clear();
        var rows = document.getElementsByTagName('tr');
        for (var i=0; i<rows.length; i++) {
                if (rows[i].className.match(/resizable/)) {
                        // generate id
                        if (!rows[i].id) rows[i].id = 'tr'+(i+1);
                        // make rows resizable
                        resizableRows[resizableRows.length] = new ColumnResize(rows[i]);
                }
        }
}

// execute earlier to avoid overriding other startup modifiers since this replaces HTML and kill previously-attached event listeners.
document.observe('dom:loaded', ResizableColumns);
