moveable_columns.js

/* Tabulator v4.5.3 (c) Oliver Folkerd */

var MoveColumns = function MoveColumns(table) {
    this.table = table; //hold Tabulator object
    this.placeholderElement = this.createPlaceholderElement();
    this.hoverElement = false; //floating column header element
    this.checkTimeout = false; //click check timeout holder
    this.checkPeriod = 250; //period to wait on mousedown to consider this a move and not a click
    this.moving = false; //currently moving column
    this.toCol = false; //destination column
    this.toColAfter = false; //position of moving column relative to the desitnation column
    this.startX = 0; //starting position within header element
    this.autoScrollMargin = 40; //auto scroll on edge when within margin
    this.autoScrollStep = 5; //auto scroll distance in pixels
    this.autoScrollTimeout = false; //auto scroll timeout
    this.touchMove = false;

    this.moveHover = this.moveHover.bind(this);
    this.endMove = this.endMove.bind(this);
};

MoveColumns.prototype.createPlaceholderElement = function () {
    var el = document.createElement("div");

    el.classList.add("tabulator-col");
    el.classList.add("tabulator-col-placeholder");

    return el;
};

MoveColumns.prototype.initializeColumn = function (column) {
    var self = this,
        config = {},
        colEl;

    if (!column.modules.frozen) {

        colEl = column.getElement();

        config.mousemove = function (e) {
            if (column.parent === self.moving.parent) {
                if ((self.touchMove ? e.touches[0].pageX : e.pageX) - Tabulator.prototype.helpers.elOffset(colEl).left + self.table.columnManager.element.scrollLeft > column.getWidth() / 2) {
                    if (self.toCol !== column || !self.toColAfter) {
                        colEl.parentNode.insertBefore(self.placeholderElement, colEl.nextSibling);
                        self.moveColumn(column, true);
                    }
                } else {
                    if (self.toCol !== column || self.toColAfter) {
                        colEl.parentNode.insertBefore(self.placeholderElement, colEl);
                        self.moveColumn(column, false);
                    }
                }
            }
        }.bind(self);

        colEl.addEventListener("mousedown", function (e) {
            self.touchMove = false;
            if (e.which === 1) {
                self.checkTimeout = setTimeout(function () {
                    self.startMove(e, column);
                }, self.checkPeriod);
            }
        });

        colEl.addEventListener("mouseup", function (e) {
            if (e.which === 1) {
                if (self.checkTimeout) {
                    clearTimeout(self.checkTimeout);
                }
            }
        });

        self.bindTouchEvents(column);
    }

    column.modules.moveColumn = config;
};

MoveColumns.prototype.bindTouchEvents = function (column) {
    var self = this,
        colEl = column.getElement(),
        startXMove = false,
        //shifting center position of the cell
    dir = false,
        currentCol,
        nextCol,
        prevCol,
        nextColWidth,
        prevColWidth,
        nextColWidthLast,
        prevColWidthLast;

    colEl.addEventListener("touchstart", function (e) {
        self.checkTimeout = setTimeout(function () {
            self.touchMove = true;
            currentCol = column;
            nextCol = column.nextColumn();
            nextColWidth = nextCol ? nextCol.getWidth() / 2 : 0;
            prevCol = column.prevColumn();
            prevColWidth = prevCol ? prevCol.getWidth() / 2 : 0;
            nextColWidthLast = 0;
            prevColWidthLast = 0;
            startXMove = false;

            self.startMove(e, column);
        }, self.checkPeriod);
    }, { passive: true });

    colEl.addEventListener("touchmove", function (e) {
        var halfCol, diff, moveToCol;

        if (self.moving) {
            self.moveHover(e);

            if (!startXMove) {
                startXMove = e.touches[0].pageX;
            }

            diff = e.touches[0].pageX - startXMove;

            if (diff > 0) {
                if (nextCol && diff - nextColWidthLast > nextColWidth) {
                    moveToCol = nextCol;

                    if (moveToCol !== column) {
                        startXMove = e.touches[0].pageX;
                        moveToCol.getElement().parentNode.insertBefore(self.placeholderElement, moveToCol.getElement().nextSibling);
                        self.moveColumn(moveToCol, true);
                    }
                }
            } else {
                if (prevCol && -diff - prevColWidthLast > prevColWidth) {
                    moveToCol = prevCol;

                    if (moveToCol !== column) {
                        startXMove = e.touches[0].pageX;
                        moveToCol.getElement().parentNode.insertBefore(self.placeholderElement, moveToCol.getElement());
                        self.moveColumn(moveToCol, false);
                    }
                }
            }

            if (moveToCol) {
                currentCol = moveToCol;
                nextCol = moveToCol.nextColumn();
                nextColWidthLast = nextColWidth;
                nextColWidth = nextCol ? nextCol.getWidth() / 2 : 0;
                prevCol = moveToCol.prevColumn();
                prevColWidthLast = prevColWidth;
                prevColWidth = prevCol ? prevCol.getWidth() / 2 : 0;
            }
        }
    }, { passive: true });

    colEl.addEventListener("touchend", function (e) {
        if (self.checkTimeout) {
            clearTimeout(self.checkTimeout);
        }
        if (self.moving) {
            self.endMove(e);
        }
    });
};

MoveColumns.prototype.startMove = function (e, column) {
    var element = column.getElement();

    this.moving = column;
    this.startX = (this.touchMove ? e.touches[0].pageX : e.pageX) - Tabulator.prototype.helpers.elOffset(element).left;

    this.table.element.classList.add("tabulator-block-select");

    //create placeholder
    this.placeholderElement.style.width = column.getWidth() + "px";
    this.placeholderElement.style.height = column.getHeight() + "px";

    element.parentNode.insertBefore(this.placeholderElement, element);
    element.parentNode.removeChild(element);

    //create hover element
    this.hoverElement = element.cloneNode(true);
    this.hoverElement.classList.add("tabulator-moving");

    this.table.columnManager.getElement().appendChild(this.hoverElement);

    this.hoverElement.style.left = "0";
    this.hoverElement.style.bottom = "0";

    if (!this.touchMove) {
        this._bindMouseMove();

        document.body.addEventListener("mousemove", this.moveHover);
        document.body.addEventListener("mouseup", this.endMove);
    }

    this.moveHover(e);
};

MoveColumns.prototype._bindMouseMove = function () {
    this.table.columnManager.columnsByIndex.forEach(function (column) {
        if (column.modules.moveColumn.mousemove) {
            column.getElement().addEventListener("mousemove", column.modules.moveColumn.mousemove);
        }
    });
};

MoveColumns.prototype._unbindMouseMove = function () {
    this.table.columnManager.columnsByIndex.forEach(function (column) {
        if (column.modules.moveColumn.mousemove) {
            column.getElement().removeEventListener("mousemove", column.modules.moveColumn.mousemove);
        }
    });
};

MoveColumns.prototype.moveColumn = function (column, after) {
    var movingCells = this.moving.getCells();

    this.toCol = column;
    this.toColAfter = after;

    if (after) {
        column.getCells().forEach(function (cell, i) {
            var cellEl = cell.getElement();
            cellEl.parentNode.insertBefore(movingCells[i].getElement(), cellEl.nextSibling);
        });
    } else {
        column.getCells().forEach(function (cell, i) {
            var cellEl = cell.getElement();
            cellEl.parentNode.insertBefore(movingCells[i].getElement(), cellEl);
        });
    }
};

MoveColumns.prototype.endMove = function (e) {
    if (e.which === 1 || this.touchMove) {
        this._unbindMouseMove();

        this.placeholderElement.parentNode.insertBefore(this.moving.getElement(), this.placeholderElement.nextSibling);
        this.placeholderElement.parentNode.removeChild(this.placeholderElement);
        this.hoverElement.parentNode.removeChild(this.hoverElement);

        this.table.element.classList.remove("tabulator-block-select");

        if (this.toCol) {
            this.table.columnManager.moveColumnActual(this.moving, this.toCol, this.toColAfter);
        }

        this.moving = false;
        this.toCol = false;
        this.toColAfter = false;

        if (!this.touchMove) {
            document.body.removeEventListener("mousemove", this.moveHover);
            document.body.removeEventListener("mouseup", this.endMove);
        }
    }
};

MoveColumns.prototype.moveHover = function (e) {
    var self = this,
        columnHolder = self.table.columnManager.getElement(),
        scrollLeft = columnHolder.scrollLeft,
        xPos = (self.touchMove ? e.touches[0].pageX : e.pageX) - Tabulator.prototype.helpers.elOffset(columnHolder).left + scrollLeft,
        scrollPos;

    self.hoverElement.style.left = xPos - self.startX + "px";

    if (xPos - scrollLeft < self.autoScrollMargin) {
        if (!self.autoScrollTimeout) {
            self.autoScrollTimeout = setTimeout(function () {
                scrollPos = Math.max(0, scrollLeft - 5);
                self.table.rowManager.getElement().scrollLeft = scrollPos;
                self.autoScrollTimeout = false;
            }, 1);
        }
    }

    if (scrollLeft + columnHolder.clientWidth - xPos < self.autoScrollMargin) {
        if (!self.autoScrollTimeout) {
            self.autoScrollTimeout = setTimeout(function () {
                scrollPos = Math.min(columnHolder.clientWidth, scrollLeft + 5);
                self.table.rowManager.getElement().scrollLeft = scrollPos;
                self.autoScrollTimeout = false;
            }, 1);
        }
    }
};

Tabulator.prototype.registerModule("moveColumn", MoveColumns);