tabulator-tables 6.5.0 → 6.5.1

package/src/js/modules/ResizeColumns/ResizeColumns.js

@@ -0,0 +1,365 @@
+import Module from '../../core/Module.js';
+
+export default class ResizeColumns extends Module{
+
+	static moduleName = "resizeColumns";
+
+	constructor(table){
+		super(table);
+		
+		this.startColumn = false;
+		this.startX = false;
+		this.startWidth = false;
+		this.latestX = false;
+		this.handle = null;
+		this.initialNextColumn = null;
+		this.nextColumn = null;
+		
+		this.initialized = false;
+		this.registerColumnOption("resizable", true);
+		this.registerTableOption("resizableColumnFit", false);
+		this.registerTableOption("resizableColumnGuide", false);
+	}
+	
+	initialize(){
+		this.subscribe("column-rendered", this.layoutColumnHeader.bind(this));
+	}
+	
+	initializeEventWatchers(){
+		if(!this.initialized){
+			
+			this.subscribe("cell-rendered", this.layoutCellHandles.bind(this));
+			this.subscribe("cell-delete", this.deInitializeComponent.bind(this));
+			
+			this.subscribe("cell-height", this.resizeHandle.bind(this));
+			this.subscribe("column-moved", this.columnLayoutUpdated.bind(this));
+			
+			this.subscribe("column-hide", this.deInitializeColumn.bind(this));
+			this.subscribe("column-show", this.columnLayoutUpdated.bind(this));
+			this.subscribe("column-width", this.columnWidthUpdated.bind(this));
+			
+			this.subscribe("column-delete", this.deInitializeComponent.bind(this));
+			this.subscribe("column-height", this.resizeHandle.bind(this));
+			
+			this.initialized = true;
+		}
+	}
+	
+	
+	layoutCellHandles(cell){
+		if(cell.row.type === "row"){
+			this.deInitializeComponent(cell);
+			this.initializeColumn("cell", cell, cell.column, cell.element);
+		}
+	}
+	
+	layoutColumnHeader(column){
+		if(column.definition.resizable){
+			this.initializeEventWatchers();
+			this.deInitializeComponent(column);
+			this.initializeColumn("header", column, column, column.element);
+		}
+	}
+	
+	columnLayoutUpdated(column){
+		var prev = column.prevColumn();
+		
+		this.reinitializeColumn(column);
+		
+		if(prev){
+			this.reinitializeColumn(prev);
+		}
+	}
+	
+	columnWidthUpdated(column){
+		if(column.modules.frozen){
+			if(this.table.modules.frozenColumns.leftColumns.includes(column)){
+				this.table.modules.frozenColumns.leftColumns.forEach((col) => {
+					this.reinitializeColumn(col);
+				});
+			}else if(this.table.modules.frozenColumns.rightColumns.includes(column)){
+				this.table.modules.frozenColumns.rightColumns.forEach((col) => {
+					this.reinitializeColumn(col);
+				});
+			}
+		}
+	}
+
+	frozenColumnOffset(column){
+		var offset = false;
+
+		if(column.modules.frozen){
+			offset = column.modules.frozen.marginValue; 
+
+			if(column.modules.frozen.position === "left"){
+				offset += column.getWidth() - 3;
+			}else{
+				if(offset){
+					offset -= 3;
+				}
+			}
+		}
+
+		return offset !== false ? offset + "px" : false;
+	}
+	
+	reinitializeColumn(column){
+		var frozenOffset = this.frozenColumnOffset(column);
+		
+		column.cells.forEach((cell) => {
+			if(cell.modules.resize && cell.modules.resize.handleEl){
+				if(frozenOffset){
+					cell.modules.resize.handleEl.style[column.modules.frozen.position] = frozenOffset;
+					cell.modules.resize.handleEl.style["z-index"] = 11;
+				}
+				
+				cell.element.after(cell.modules.resize.handleEl);
+			}
+		});
+		
+		if(column.modules.resize && column.modules.resize.handleEl){
+			if(frozenOffset){
+				column.modules.resize.handleEl.style[column.modules.frozen.position] = frozenOffset;
+			}
+			
+			column.element.after(column.modules.resize.handleEl);
+		}
+	}
+	
+	initializeColumn(type, component, column, element){
+		var self = this,
+		variableHeight = false,
+		mode = column.definition.resizable,
+		config = {},
+		nearestColumn = column.getLastColumn();
+		
+		//set column resize mode
+		if(type === "header"){
+			variableHeight = column.definition.formatter == "textarea" || column.definition.variableHeight;
+			config = {variableHeight:variableHeight};
+		}
+		
+		if((mode === true || mode == type) && this._checkResizability(nearestColumn)){
+			
+			var handle = document.createElement('span');
+			handle.className = "tabulator-col-resize-handle";
+			
+			handle.addEventListener("click", function(e){
+				e.stopPropagation();
+			});
+			
+			var handleDown = function(e){
+				self.startColumn = column;
+				self.initialNextColumn = self.nextColumn = nearestColumn.nextColumn();
+				self._mouseDown(e, nearestColumn, handle);
+			};
+			
+			handle.addEventListener("mousedown", handleDown);
+			handle.addEventListener("touchstart", handleDown, {passive: true});
+			
+			//resize column on  double click
+			handle.addEventListener("dblclick", (e) => {
+				var oldWidth = nearestColumn.getWidth();
+				
+				e.stopPropagation();
+				nearestColumn.reinitializeWidth(true);
+				
+				if(oldWidth !== nearestColumn.getWidth()){
+					self.dispatch("column-resized", nearestColumn);
+					self.dispatchExternal("columnResized", nearestColumn.getComponent());
+				}
+			});
+			
+			if(column.modules.frozen){
+				handle.style.position = "sticky";
+				handle.style[column.modules.frozen.position] = this.frozenColumnOffset(column);
+			}
+			
+			config.handleEl = handle;
+			
+			if(element.parentNode && column.visible){
+				element.after(handle);			
+			}
+		}
+		
+		component.modules.resize = config;
+	}
+	
+	deInitializeColumn(column){
+		this.deInitializeComponent(column);
+		
+		column.cells.forEach((cell) => {
+			this.deInitializeComponent(cell);
+		});
+	}
+	
+	deInitializeComponent(component){
+		var handleEl;
+		
+		if(component.modules.resize){
+			handleEl = component.modules.resize.handleEl;
+			
+			if(handleEl && handleEl.parentElement){
+				handleEl.parentElement.removeChild(handleEl);
+			}
+		}
+	}
+	
+	resizeHandle(component, height){
+		if(component.modules.resize && component.modules.resize.handleEl){
+			component.modules.resize.handleEl.style.height = height;
+		}
+	}
+
+	getResizingClientX(e){
+		if (typeof e.clientX !== "undefined") return e.clientX;
+
+		const touch = this.table.options.resizableColumnGuide
+			? e.changedTouches?.[0]
+			: e.touches?.[0];
+
+		return touch?.clientX;
+	}
+	
+	resize(e, column){
+		var x = this.getResizingClientX(e);
+
+		if (typeof x !== "number" || !isFinite(x)) {
+			console.warn("ResizeColumns: could not resolve pointer X from event", e);
+			return;
+		}
+
+		var startDiff = x - this.startX,
+		moveDiff = x - this.latestX,
+		blockedBefore, blockedAfter;
+
+		this.latestX = x;
+
+		if(this.table.rtl){
+			startDiff = -startDiff;
+			moveDiff = -moveDiff;
+		}
+
+		blockedBefore = column.width == column.minWidth || column.width == column.maxWidth;
+
+		column.setWidth(this.startWidth + startDiff);
+
+		blockedAfter = column.width == column.minWidth || column.width == column.maxWidth;
+
+		if(moveDiff < 0){
+			this.nextColumn = this.initialNextColumn;
+		}
+
+		if(this.table.options.resizableColumnFit && this.nextColumn && !(blockedBefore && blockedAfter)){
+			let colWidth = this.nextColumn.getWidth();
+
+			if(moveDiff > 0){
+				if(colWidth <= this.nextColumn.minWidth){
+					this.nextColumn = this.nextColumn.nextColumn();
+				}
+			}
+
+			if(this.nextColumn){
+				this.nextColumn.setWidth(this.nextColumn.getWidth() - moveDiff);
+			}
+		}
+
+		this.table.columnManager.rerenderColumns(true);
+
+		if(!this.table.browserSlow && column.modules.resize && column.modules.resize.variableHeight){
+			column.checkCellHeights();
+		}
+	}
+
+	calcGuidePosition(e, column, handle) {
+		var mouseX = typeof e.clientX === "undefined" ? e.touches[0].clientX : e.clientX,
+		handleX = handle.getBoundingClientRect().x - this.table.element.getBoundingClientRect().x,
+		tableX = this.table.element.getBoundingClientRect().x,
+		columnX = column.element.getBoundingClientRect().left - tableX,
+		mouseDiff = mouseX - this.startX,
+		pos = Math.max(handleX + mouseDiff, columnX + column.minWidth);
+
+		if(column.maxWidth){
+			pos = Math.min(pos, columnX + column.maxWidth);
+		}
+
+		return pos;
+	}
+
+	_checkResizability(column){
+		return column.definition.resizable;
+	}
+	
+	_mouseDown(e, column, handle){
+		var self = this,
+		guideEl;
+
+		this.dispatchExternal("columnResizing", column.getComponent());
+
+		if(self.table.options.resizableColumnGuide){
+			guideEl = document.createElement("span");
+			guideEl.classList.add('tabulator-col-resize-guide');
+			self.table.element.appendChild(guideEl);
+			setTimeout(() => {
+				guideEl.style.left = self.calcGuidePosition(e, column, handle) + "px";
+			});
+		}
+
+		self.table.element.classList.add("tabulator-block-select");
+
+		function mouseMove(e){
+			if(self.table.options.resizableColumnGuide){
+				guideEl.style.left = self.calcGuidePosition(e, column, handle) + "px";
+			}else{
+				self.resize(e, column);
+			}
+		}
+		
+		function mouseUp(e){
+			if(self.table.options.resizableColumnGuide){
+				self.resize(e, column);
+				guideEl.remove();
+			}
+			
+			//block editor from taking action while resizing is taking place
+			if(self.startColumn.modules.edit){
+				self.startColumn.modules.edit.blocked = false;
+			}
+			
+			if(self.table.browserSlow && column.modules.resize && column.modules.resize.variableHeight){
+				column.checkCellHeights();
+			}
+			
+			document.body.removeEventListener("mouseup", mouseUp);
+			document.body.removeEventListener("mousemove", mouseMove);
+			
+			handle.removeEventListener("touchmove", mouseMove);
+			handle.removeEventListener("touchend", mouseUp);
+			
+			self.table.element.classList.remove("tabulator-block-select");
+			
+			if(self.startWidth !== column.getWidth()){
+				self.table.columnManager.verticalAlignHeaders();
+
+				self.dispatch("column-resized", column);
+				self.dispatchExternal("columnResized", column.getComponent());
+			}
+		}
+		
+		e.stopPropagation(); //prevent resize from interfering with movable columns
+		
+		//block editor from taking action while resizing is taking place
+		if(self.startColumn.modules.edit){
+			self.startColumn.modules.edit.blocked = true;
+		}
+		
+		self.startX = typeof e.clientX === "undefined" ? e.touches[0].clientX : e.clientX;
+		self.latestX = self.startX;
+		self.startWidth = column.getWidth();
+		
+		document.body.addEventListener("mousemove", mouseMove);
+		document.body.addEventListener("mouseup", mouseUp);
+		handle.addEventListener("touchmove", mouseMove, {passive: true});
+		handle.addEventListener("touchend", mouseUp);
+	}
+}

package/src/js/modules/ResizeRows/ResizeRows.js

@@ -0,0 +1,145 @@
+import Module from '../../core/Module.js';
+
+export default class ResizeRows extends Module{
+
+	static moduleName = "resizeRows";
+
+	constructor(table){
+		super(table);
+
+		this.startColumn = false;
+		this.startY = false;
+		this.startHeight = false;
+		this.handle = null;
+		this.prevHandle = null;
+
+		this.registerTableOption("resizableRows", false); //resizable rows
+		this.registerTableOption("resizableRowGuide", false);
+	}
+
+	initialize(){
+		if(this.table.options.resizableRows){
+			this.subscribe("row-layout-after", this.initializeRow.bind(this));
+		}
+	}
+
+	initializeRow(row){
+		var self = this,
+		rowEl = row.getElement();
+
+		var handle = document.createElement('div');
+		handle.className = "tabulator-row-resize-handle";
+
+		var prevHandle = document.createElement('div');
+		prevHandle.className = "tabulator-row-resize-handle prev";
+
+		handle.addEventListener("click", function(e){
+			e.stopPropagation();
+		});
+
+		var handleDown = function(e){
+			self.startRow = row;
+			self._mouseDown(e, row, handle);
+		};
+
+		handle.addEventListener("mousedown", handleDown);
+		handle.addEventListener("touchstart", handleDown, {passive: true});
+
+		prevHandle.addEventListener("click", function(e){
+			e.stopPropagation();
+		});
+
+		var prevHandleDown =  function(e){
+			var prevRow = self.table.rowManager.prevDisplayRow(row);
+
+			if(prevRow){
+				self.startRow = prevRow;
+				self._mouseDown(e, prevRow, prevHandle);
+			}
+		};
+
+		prevHandle.addEventListener("mousedown",prevHandleDown);
+		prevHandle.addEventListener("touchstart",prevHandleDown, {passive: true});
+
+		rowEl.appendChild(handle);
+		rowEl.appendChild(prevHandle);
+	}
+
+	resize(e, row) {
+		row.setHeight(this.startHeight + ((typeof e.screenY === "undefined" ? e.touches[0].screenY : e.screenY) - this.startY));
+	}
+
+	calcGuidePosition(e, row, handle) {
+		var mouseY = typeof e.screenY === "undefined" ? e.touches[0].screenY : e.screenY,
+		handleY = handle.getBoundingClientRect().y - this.table.element.getBoundingClientRect().y,
+		tableY = this.table.element.getBoundingClientRect().y,
+		rowY = row.element.getBoundingClientRect().top - tableY,
+		mouseDiff = mouseY - this.startY;
+
+		return Math.max(handleY + mouseDiff, rowY);
+	}
+
+	_mouseDown(e, row, handle){
+		var self = this,
+		guideEl;
+
+		self.dispatchExternal("rowResizing", row.getComponent());
+
+		if(self.table.options.resizableRowGuide){
+			guideEl = document.createElement("span");
+			guideEl.classList.add('tabulator-row-resize-guide');
+			self.table.element.appendChild(guideEl);
+			setTimeout(() => {
+				guideEl.style.top = self.calcGuidePosition(e, row, handle) + "px";
+			});
+		}
+
+		self.table.element.classList.add("tabulator-block-select");
+
+		function mouseMove(e){
+			if(self.table.options.resizableRowGuide){
+				guideEl.style.top = self.calcGuidePosition(e, row, handle) + "px";
+			}else{
+				self.resize(e, row);
+			}
+		}
+
+		function mouseUp(e){
+			if(self.table.options.resizableRowGuide){
+				self.resize(e, row);
+				guideEl.remove();
+			}
+
+			// //block editor from taking action while resizing is taking place
+			// if(self.startColumn.modules.edit){
+			// 	self.startColumn.modules.edit.blocked = false;
+			// }
+
+			document.body.removeEventListener("mouseup", mouseMove);
+			document.body.removeEventListener("mousemove", mouseMove);
+
+			handle.removeEventListener("touchmove", mouseMove);
+			handle.removeEventListener("touchend", mouseUp);
+
+			self.table.element.classList.remove("tabulator-block-select");
+
+			self.dispatchExternal("rowResized", row.getComponent());
+		}
+
+		e.stopPropagation(); //prevent resize from interfering with movable columns
+
+		//block editor from taking action while resizing is taking place
+		// if(self.startColumn.modules.edit){
+		// 	self.startColumn.modules.edit.blocked = true;
+		// }
+
+		self.startY = typeof e.screenY === "undefined" ? e.touches[0].screenY : e.screenY;
+		self.startHeight = row.getHeight();
+
+		document.body.addEventListener("mousemove", mouseMove);
+		document.body.addEventListener("mouseup", mouseUp);
+
+		handle.addEventListener("touchmove", mouseMove, {passive: true});
+		handle.addEventListener("touchend", mouseUp);
+	}
+}

package/src/js/modules/ResizeTable/ResizeTable.js

@@ -0,0 +1,158 @@
+import Module from '../../core/Module.js';
+
+export default class ResizeTable extends Module{
+
+	static moduleName = "resizeTable";
+	
+	constructor(table){
+		super(table);
+		
+		this.binding = false;
+		this.visibilityObserver = false;
+		this.resizeObserver = false;
+		this.containerObserver = false;
+		
+		this.tableHeight = 0;
+		this.tableWidth = 0;
+		this.containerHeight = 0;
+		this.containerWidth = 0;
+		
+		this.autoResize = false;
+		
+		this.visible = false;
+		
+		this.initialized = false;
+		this.initialRedraw = false;
+		
+		this.registerTableOption("autoResize", true); //auto resize table
+	}
+	
+	initialize(){
+		if(this.table.options.autoResize){
+			var table = this.table,
+			tableStyle;
+			
+			this.tableHeight = table.element.clientHeight;
+			this.tableWidth = table.element.clientWidth;
+			
+			if(table.element.parentNode){
+				this.containerHeight = table.element.parentNode.clientHeight;
+				this.containerWidth = table.element.parentNode.clientWidth;
+			}
+			
+			if(typeof IntersectionObserver !== "undefined" && typeof ResizeObserver !== "undefined" && table.rowManager.getRenderMode() === "virtual"){
+				
+				this.initializeVisibilityObserver();
+				
+				this.autoResize = true;
+				
+				this.resizeObserver = new ResizeObserver((entry) => {
+					if(!table.browserMobile || (table.browserMobile && (!table.modules.edit || (table.modules.edit && !table.modules.edit.currentCell)))){
+						
+						var nodeHeight = Math.floor(entry[0].contentRect.height);
+						var nodeWidth = Math.floor(entry[0].contentRect.width);
+						
+						if(this.tableHeight != nodeHeight || this.tableWidth != nodeWidth){
+							this.tableHeight = nodeHeight;
+							this.tableWidth = nodeWidth;
+							
+							if(table.element.parentNode){
+								this.containerHeight = table.element.parentNode.clientHeight;
+								this.containerWidth = table.element.parentNode.clientWidth;
+							}
+							
+							this.redrawTable();
+						}
+					}
+				});
+				
+				this.resizeObserver.observe(table.element);
+				
+				tableStyle = window.getComputedStyle(table.element);
+				
+				if(this.table.element.parentNode && !this.table.rowManager.fixedHeight && (tableStyle.getPropertyValue("max-height") || tableStyle.getPropertyValue("min-height"))){
+					
+					this.containerObserver = new ResizeObserver((entry) => {
+						if(!table.browserMobile || (table.browserMobile && (!table.modules.edit || (table.modules.edit && !table.modules.edit.currentCell)))){
+							
+							var nodeHeight = Math.floor(entry[0].contentRect.height);
+							var nodeWidth = Math.floor(entry[0].contentRect.width);
+							
+							if(this.containerHeight != nodeHeight || this.containerWidth != nodeWidth){
+								this.containerHeight = nodeHeight;
+								this.containerWidth = nodeWidth;
+								this.tableHeight = table.element.clientHeight;
+								this.tableWidth = table.element.clientWidth;
+							}
+							
+							this.redrawTable();
+						}
+					});
+					
+					this.containerObserver.observe(this.table.element.parentNode);
+				}
+				
+				this.subscribe("table-resize", this.tableResized.bind(this));
+				
+			}else{
+				this.binding = function(){
+					if(!table.browserMobile || (table.browserMobile && (!table.modules.edit || (table.modules.edit && !table.modules.edit.currentCell)))){
+						table.columnManager.rerenderColumns(true);
+						table.redraw();
+					}
+				};
+				
+				window.addEventListener("resize", this.binding);
+			}
+			
+			this.subscribe("table-destroy", this.clearBindings.bind(this));
+		}
+	}
+	
+	initializeVisibilityObserver(){
+		this.visibilityObserver = new IntersectionObserver((entries) => {
+			this.visible = entries[entries.length - 1].isIntersecting;
+			
+			if(!this.initialized){
+				this.initialized = true;
+				this.initialRedraw = !this.visible;
+			}else{
+				if(this.visible){
+					this.redrawTable(this.initialRedraw);
+					this.initialRedraw = false;
+				}
+			}
+		});
+		
+		this.visibilityObserver.observe(this.table.element);
+	}
+	
+	redrawTable(force){
+		if(this.initialized && this.visible){
+			this.table.columnManager.rerenderColumns(true);
+			this.table.redraw(force);
+		}
+	}
+	
+	tableResized(){
+		this.table.rowManager.redraw();
+	}
+	
+	clearBindings(){
+		if(this.binding){
+			window.removeEventListener("resize", this.binding);
+		}
+		
+		if(this.resizeObserver){
+			this.resizeObserver.unobserve(this.table.element);
+		}
+		
+		if(this.visibilityObserver){
+			this.visibilityObserver.unobserve(this.table.element);
+		}
+		
+		if(this.containerObserver){
+			this.containerObserver.unobserve(this.table.element.parentNode);
+		}
+	}
+}