tabulator-tables 5.6.0 → 6.0.0

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

@@ -1,7 +1,9 @@
 import Module from '../../core/Module.js';
 
-class ResizeColumns extends Module{
-	
+export default class ResizeColumns extends Module{
+
+	static moduleName = "resizeColumns";
+
 	constructor(table){
 		super(table);
 		
@@ -16,6 +18,7 @@ class ResizeColumns extends Module{
 		this.initialized = false;
 		this.registerColumnOption("resizable", true);
 		this.registerTableOption("resizableColumnFit", false);
+		this.registerTableOption("resizableColumnGuide", false);
 	}
 	
 	initialize(){
@@ -163,7 +166,7 @@ class ResizeColumns extends Module{
 				
 				if(oldWidth !== nearestColumn.getWidth()){
 					self.dispatch("column-resized", nearestColumn);
-					self.table.externalEvents.dispatch("columnResized", nearestColumn.getComponent());
+					self.dispatchExternal("columnResized", nearestColumn.getComponent());
 				}
 			});
 			
@@ -208,60 +211,99 @@ class ResizeColumns extends Module{
 		}
 	}
 	
+	resize(e, column){
+		var x = typeof e.clientX === "undefined" ? e.touches[0].clientX : e.clientX,
+		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;
-		
+		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){
-			var x = typeof e.screenX === "undefined" ? e.touches[0].screenX : e.screenX,
-			startDiff = x - self.startX,
-			moveDiff = x - self.latestX,
-			blockedBefore, blockedAfter;
-			
-			self.latestX = x;
-			
-			if(self.table.rtl){
-				startDiff = -startDiff;
-				moveDiff = -moveDiff;
-			}
-			
-			blockedBefore = column.width == column.minWidth || column.width == column.maxWidth;
-			
-			column.setWidth(self.startWidth + startDiff);
-			
-			blockedAfter = column.width == column.minWidth || column.width == column.maxWidth;
-			
-			if(moveDiff < 0){
-				self.nextColumn = self.initialNextColumn;
-			}
-			
-			if(self.table.options.resizableColumnFit && self.nextColumn && !(blockedBefore && blockedAfter)){
-				let colWidth = self.nextColumn.getWidth();
-				
-				if(moveDiff > 0){
-					if(colWidth <= self.nextColumn.minWidth){
-						self.nextColumn = self.nextColumn.nextColumn();
-					}
-				}
-				
-				if(self.nextColumn){
-					self.nextColumn.setWidth(self.nextColumn.getWidth() - moveDiff);
-				}
-			}
-			
-			self.table.columnManager.rerenderColumns(true);
-			
-			if(!self.table.browserSlow && column.modules.resize && column.modules.resize.variableHeight){
-				column.checkCellHeights();
+			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){
@@ -284,7 +326,7 @@ class ResizeColumns extends Module{
 				self.table.columnManager.verticalAlignHeaders();
 
 				self.dispatch("column-resized", column);
-				self.table.externalEvents.dispatch("columnResized", column.getComponent());
+				self.dispatchExternal("columnResized", column.getComponent());
 			}
 		}
 		
@@ -295,7 +337,7 @@ class ResizeColumns extends Module{
 			self.startColumn.modules.edit.blocked = true;
 		}
 		
-		self.startX = typeof e.screenX === "undefined" ? e.touches[0].screenX : e.screenX;
+		self.startX = typeof e.clientX === "undefined" ? e.touches[0].clientX : e.clientX;
 		self.latestX = self.startX;
 		self.startWidth = column.getWidth();
 		
@@ -304,8 +346,4 @@ class ResizeColumns extends Module{
 		handle.addEventListener("touchmove", mouseMove, {passive: true});
 		handle.addEventListener("touchend", mouseUp);
 	}
-}
-
-ResizeColumns.moduleName = "resizeColumns";
-
-export default ResizeColumns;
+}

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

@@ -1,6 +1,8 @@
 import Module from '../../core/Module.js';
 
-class ResizeRows extends Module{
+export default class ResizeRows extends Module{
+
+	static moduleName = "resizeRows";
 
 	constructor(table){
 		super(table);
@@ -12,6 +14,7 @@ class ResizeRows extends Module{
 		this.prevHandle = null;
 
 		this.registerTableOption("resizableRows", false); //resizable rows
+		this.registerTableOption("resizableRowGuide", false);
 	}
 
 	initialize(){
@@ -62,16 +65,50 @@ class ResizeRows extends Module{
 		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;
+		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){
-			row.setHeight(self.startHeight + ((typeof e.screenY === "undefined" ? e.touches[0].screenY : e.screenY) - self.startY));
+			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){
@@ -105,8 +142,4 @@ class ResizeRows extends Module{
 		handle.addEventListener("touchmove", mouseMove, {passive: true});
 		handle.addEventListener("touchend", mouseUp);
 	}
-}
-
-ResizeRows.moduleName = "resizeRows";
-
-export default ResizeRows;
+}

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

@@ -1,6 +1,8 @@
 import Module from '../../core/Module.js';
 
-class ResizeTable extends Module{
+export default class ResizeTable extends Module{
+
+	static moduleName = "resizeTable";
 	
 	constructor(table){
 		super(table);
@@ -153,8 +155,4 @@ class ResizeTable extends Module{
 			this.containerObserver.unobserve(this.table.element.parentNode);
 		}
 	}
-}
-
-ResizeTable.moduleName = "resizeTable";
-
-export default ResizeTable;
+}

package/src/js/modules/ResponsiveLayout/ResponsiveLayout.js

@@ -1,6 +1,10 @@
 import Module from '../../core/Module.js';
+import extensions from './extensions/extensions.js';
 
-class ResponsiveLayout extends Module{
+export default class ResponsiveLayout extends Module{
+
+	static moduleName = "responsiveLayout";
+	static moduleExtensions = extensions;
 
 	constructor(table){
 		super(table);
@@ -58,6 +62,10 @@ class ResponsiveLayout extends Module{
 		this.collapseStartOpen = this.table.options.responsiveLayoutCollapseStartOpen;
 		this.hiddenColumns = [];
 
+		if(this.collapseFormatter){
+			this.collapseFormatter = this.collapseFormatter.bind(this.table);
+		}
+
 		//determine level of responsivity for each column
 		this.table.columnManager.columnsByIndex.forEach((column, i) => {
 			if(column.modules.responsive){
@@ -249,6 +257,7 @@ class ResponsiveLayout extends Module{
 			if(contents){
 				el.appendChild(contents);
 			}
+			row.calcHeight(true);
 		}
 	}
 
@@ -314,7 +323,7 @@ class ResponsiveLayout extends Module{
 	formatCollapsedData(data){
 		var list = document.createElement("table");
 
-		data.forEach(function(item){
+		data.forEach((item) => {
 			var row = document.createElement("tr");
 			var titleData = document.createElement("td");
 			var valueData = document.createElement("td");
@@ -322,7 +331,8 @@ class ResponsiveLayout extends Module{
 
 			var titleHighlight = document.createElement("strong");
 			titleData.appendChild(titleHighlight);
-			this.langBind("columns|" + item.field, function(text){
+			
+			this.modules.localize.bind("columns|" + item.field, function(text){
 				titleHighlight.innerHTML = text || item.title;
 			});
 
@@ -337,12 +347,8 @@ class ResponsiveLayout extends Module{
 			row.appendChild(titleData);
 			row.appendChild(valueData);
 			list.appendChild(row);
-		}, this);
+		});
 
 		return Object.keys(data).length ? list : "";
 	}
-}
-
-ResponsiveLayout.moduleName = "responsiveLayout";
-
-export default ResponsiveLayout;
+}

package/src/js/modules/ResponsiveLayout/extensions/extensions.js

@@ -0,0 +1,9 @@
+import responsiveCollapse from './formatters/responsiveCollapse.js';
+
+export default {
+	format:{
+		formatters:{
+			responsiveCollapse:responsiveCollapse,
+		}
+	}
+};

package/src/js/modules/SelectRange/Range.js

@@ -1,7 +1,7 @@
 import CoreFeature from '../../core/CoreFeature.js';
 import RangeComponent from "./RangeComponent";
 
-class Range extends CoreFeature{
+export default class Range extends CoreFeature{
 	constructor(table, rangeManager, start, end) {
 		super(table);
 		
@@ -22,6 +22,13 @@ class Range extends CoreFeature{
 		this.table = table;
 		this.start = {row:0, col:0};
 		this.end = {row:0, col:0};
+
+		if(this.rangeManager.rowHeader){
+			this.left = 1;
+			this.right = 1;
+			this.start.col = 1;
+			this.end.col = 1;
+		}
 		
 		this.initElement();
 		
@@ -81,14 +88,14 @@ class Range extends CoreFeature{
 		
 		if (element.type === "column") {
 			if(this.rangeManager.columnSelection){
-				this.setStart(0, element.getPosition() - 2);
+				this.setStart(0, element.getPosition() - 1);
 			}
 		}else{
 			row = element.row.position - 1;
-			col = element.column.getPosition() - 2;
+			col = element.column.getPosition() - 1;
 			
 			if (element.column === this.rangeManager.rowHeader) {
-				this.setStart(row, 0);
+				this.setStart(row, 1);
 			} else {
 				this.setStart(row, col);
 			}
@@ -102,18 +109,18 @@ class Range extends CoreFeature{
 		if (element.type === "column") {
 			if(this.rangeManager.columnSelection){
 				if (this.rangeManager.selecting === "column") {
-					this.setEnd(rowsCount - 1, element.getPosition() - 2);
+					this.setEnd(rowsCount - 1, element.getPosition() - 1);
 				} else if (this.rangeManager.selecting === "cell") {
-					this.setEnd(0, element.getPosition() - 2);
+					this.setEnd(0, element.getPosition() - 1);
 				}
 			}
 		}else{
 			row = element.row.position - 1;
-			col = element.column.getPosition() - 2;
+			col = element.column.getPosition() - 1;
 			isRowHeader = element.column === this.rangeManager.rowHeader;
 			
 			if (this.rangeManager.selecting === "row") {
-				this.setEnd(row, this._getTableColumns().length - 2);
+				this.setEnd(row, this._getTableColumns().length - 1);
 			} else if (this.rangeManager.selecting !== "row" && isRowHeader) {
 				this.setEnd(row, 0);
 			} else if (this.rangeManager.selecting === "column") {
@@ -145,7 +152,7 @@ class Range extends CoreFeature{
 	}
 	
 	_getTableRows() {
-		return this.table.rowManager.getDisplayRows();
+		return this.table.rowManager.getDisplayRows().filter(row=> row.type === "row");
 	}
 	
 	///////////////////////////////////
@@ -157,7 +164,11 @@ class Range extends CoreFeature{
 		_vDomBottom = this.table.rowManager.renderer.vDomBottom,
 		_vDomLeft = this.table.columnManager.renderer.leftCol,
 		_vDomRight = this.table.columnManager.renderer.rightCol,		
-		top, bottom, left, right, topLeftCell, bottomRightCell;
+		top, bottom, left, right, topLeftCell, bottomRightCell, topLeftCellEl, bottomRightCellEl, topLeftRowEl, bottomRightRowEl;
+
+		if(this.table.options.renderHorizontal === "virtual" && this.rangeManager.rowHeader) {
+			_vDomRight += 1;
+		}
 		
 		if (_vDomTop == null) {
 			_vDomTop = 0;
@@ -183,23 +194,33 @@ class Range extends CoreFeature{
 			
 			topLeftCell = this.rangeManager.getCell(top, left);
 			bottomRightCell = this.rangeManager.getCell(bottom, right);
+			topLeftCellEl = topLeftCell.getElement();
+			bottomRightCellEl = bottomRightCell.getElement();
+			topLeftRowEl = topLeftCell.row.getElement();
+			bottomRightRowEl = bottomRightCell.row.getElement();
 			
 			this.element.classList.add("tabulator-range-active");
 			// this.element.classList.toggle("tabulator-range-active", this === this.rangeManager.activeRange);
+
+			if(this.table.rtl){
+				this.element.style.right = topLeftRowEl.offsetWidth - topLeftCellEl.offsetLeft - topLeftCellEl.offsetWidth + "px";
+				this.element.style.width = topLeftCellEl.offsetLeft + topLeftCellEl.offsetWidth - bottomRightCellEl.offsetLeft + "px";
+			}else{
+				this.element.style.left = topLeftRowEl.offsetLeft + topLeftCellEl.offsetLeft + "px";
+				this.element.style.width = bottomRightCellEl.offsetLeft + bottomRightCellEl.offsetWidth - topLeftCellEl.offsetLeft + "px";
+			}
 			
-			this.element.style.left = topLeftCell.row.getElement().offsetLeft + topLeftCell.getElement().offsetLeft + "px";
-			this.element.style.top = topLeftCell.row.getElement().offsetTop + "px";
-			this.element.style.width = bottomRightCell.getElement().offsetLeft + bottomRightCell.getElement().offsetWidth - topLeftCell.getElement().offsetLeft + "px";
-			this.element.style.height = bottomRightCell.row.getElement().offsetTop + bottomRightCell.row.getElement().offsetHeight - topLeftCell.row.getElement().offsetTop + "px";
+			this.element.style.top = topLeftRowEl.offsetTop + "px";
+			this.element.style.height = bottomRightRowEl.offsetTop + bottomRightRowEl.offsetHeight - topLeftRowEl.offsetTop + "px";
 		}
 	}
 	
 	atTopLeft(cell) {
-		return cell.row.position - 1 === this.top && cell.column.getPosition() - 2 === this.left;
+		return cell.row.position - 1 === this.top && cell.column.getPosition() - 1 === this.left;
 	}
 	
 	atBottomRight(cell) {
-		return cell.row.position - 1 === this.bottom && cell.column.getPosition() - 2 === this.right;
+		return cell.row.position - 1 === this.bottom && cell.column.getPosition() - 1 === this.right;
 	}
 	
 	occupies(cell) {
@@ -211,7 +232,7 @@ class Range extends CoreFeature{
 	}
 	
 	occupiesColumn(col) {
-		return this.left <= col.getPosition() - 2 && col.getPosition() - 2 <= this.right;
+		return this.left <= col.getPosition() - 1 && col.getPosition() - 1 <= this.right;
 	}
 	
 	overlaps(left, top, right, bottom) {
@@ -280,7 +301,7 @@ class Range extends CoreFeature{
 	}
 	
 	getColumns() {
-		return this._getTableColumns().slice(this.left + 1, this.right + 2);
+		return this._getTableColumns().slice(this.left, this.right + 1);
 	}
 	
 	clearValues(){
@@ -342,6 +363,4 @@ class Range extends CoreFeature{
 		
 		return !this.destroyed;
 	}
-}
-
-export default Range;
+}

package/src/js/modules/SelectRange/RangeComponent.js

@@ -1,4 +1,4 @@
-class RangeComponent {
+export default class RangeComponent {
 	constructor(range) {
 		this._range = range;
 
@@ -88,6 +88,4 @@ class RangeComponent {
 			this._range.destroy(true);
 		}
 	}
-}
-
-export default RangeComponent;
+}