tabulator-tables 5.6.1 → 6.0.0

package/src/js/modules/MoveRows/MoveRows.js

@@ -1,7 +1,16 @@
 import Module from '../../core/Module.js';
 import Helpers from '../../core/tools/Helpers.js';
 
-class MoveRows extends Module{
+import defaultSenders from './defaults/senders.js';
+import defaultReceivers from './defaults/receivers.js';
+
+export default class MoveRows extends Module{
+
+	static moduleName = "moveRow";
+
+	//load defaults
+	static senders = defaultSenders;
+	static receivers = defaultReceivers;
 
 	constructor(table){
 		super(table);
@@ -522,7 +531,7 @@ class MoveRows extends Module{
 
 			switch(typeof this.table.options.movableRowsSender){
 				case "string":
-					sender = this.senders[this.table.options.movableRowsSender];
+					sender = MoveRows.senders[this.table.options.movableRowsSender];
 					break;
 
 				case "function":
@@ -554,7 +563,7 @@ class MoveRows extends Module{
 
 		switch(typeof this.table.options.movableRowsReceiver){
 			case "string":
-				receiver = this.receivers[this.table.options.movableRowsReceiver];
+				receiver = MoveRows.receivers[this.table.options.movableRowsReceiver];
 				break;
 
 			case "function":
@@ -592,45 +601,4 @@ class MoveRows extends Module{
 				return this.dropComplete(table, data.row, data.success);
 		}
 	}
-}
-
-MoveRows.prototype.receivers = {
-	insert:function(fromRow, toRow, fromTable){
-		this.table.addRow(fromRow.getData(), undefined, toRow);
-		return true;
-	},
-
-	add:function(fromRow, toRow, fromTable){
-		this.table.addRow(fromRow.getData());
-		return true;
-	},
-
-	update:function(fromRow, toRow, fromTable){
-		if(toRow){
-			toRow.update(fromRow.getData());
-			return true;
-		}
-
-		return false;
-	},
-
-	replace:function(fromRow, toRow, fromTable){
-		if(toRow){
-			this.table.addRow(fromRow.getData(), undefined, toRow);
-			toRow.delete();
-			return true;
-		}
-
-		return false;
-	},
-};
-
-MoveRows.prototype.senders = {
-	delete:function(fromRow, toRow, toTable){
-		fromRow.delete();
-	}
-};
-
-MoveRows.moduleName = "moveRow";
-
-export default MoveRows;
+}

package/src/js/modules/MoveRows/defaults/receivers.js

@@ -0,0 +1,30 @@
+export default{
+	insert:function(fromRow, toRow, fromTable){
+		this.table.addRow(fromRow.getData(), undefined, toRow);
+		return true;
+	},
+
+	add:function(fromRow, toRow, fromTable){
+		this.table.addRow(fromRow.getData());
+		return true;
+	},
+
+	update:function(fromRow, toRow, fromTable){
+		if(toRow){
+			toRow.update(fromRow.getData());
+			return true;
+		}
+
+		return false;
+	},
+
+	replace:function(fromRow, toRow, fromTable){
+		if(toRow){
+			this.table.addRow(fromRow.getData(), undefined, toRow);
+			toRow.delete();
+			return true;
+		}
+
+		return false;
+	},
+};

package/src/js/modules/MoveRows/defaults/senders.js

@@ -0,0 +1,5 @@
+export default {
+	delete:function(fromRow, toRow, toTable){
+		fromRow.delete();
+	}
+};

package/src/js/modules/Mutator/Mutator.js

@@ -2,7 +2,12 @@ import Module from '../../core/Module.js';
 
 import defaultMutators from './defaults/mutators.js';
 
-class Mutator extends Module{
+export default class Mutator extends Module{
+
+	static moduleName = "mutator";
+
+	//load defaults
+	static mutators = defaultMutators;
 
 	constructor(table){
 		super(table);
@@ -152,11 +157,4 @@ class Mutator extends Module{
 	disable(){
 		this.enabled = false;
 	}
-}
-
-Mutator.moduleName = "mutator";
-
-//load defaults
-Mutator.mutators = defaultMutators;
-
-export default Mutator;
+}

package/src/js/modules/Page/Page.js

@@ -2,7 +2,12 @@ import Module from '../../core/Module.js';
 
 import defaultPageCounters from './defaults/pageCounters.js';
 
-class Page extends Module{
+export default class Page extends Module{
+
+	static moduleName = "page";
+
+	//load defaults
+	static pageCounters = defaultPageCounters;
 	
 	constructor(table){
 		super(table);
@@ -871,11 +876,4 @@ class Page extends Module{
 			}
 		}
 	}
-}
-
-Page.moduleName = "page";
-
-//load defaults
-Page.pageCounters = defaultPageCounters;
-
-export default Page;
+}

package/src/js/modules/Persistence/Persistence.js

@@ -3,7 +3,15 @@ import Module from '../../core/Module.js';
 import defaultReaders from './defaults/readers.js';
 import defaultWriters from './defaults/writers.js';
 
-class Persistence extends Module{
+export default class Persistence extends Module{
+
+	static moduleName = "persistence";
+
+	static moduleInitOrder = -10;
+
+	//load defaults
+	static readers = defaultReaders;
+	static writers = defaultWriters;
 
 	constructor(table){
 		super(table);
@@ -462,14 +470,4 @@ class Persistence extends Module{
 
 		return definitions;
 	}
-}
-
-Persistence.moduleName = "persistence";
-
-Persistence.moduleInitOrder = -10;
-
-//load defaults
-Persistence.readers = defaultReaders;
-Persistence.writers = defaultWriters;
-
-export default Persistence;
+}

package/src/js/modules/Popup/Popup.js

@@ -1,6 +1,8 @@
 import Module from '../../core/Module.js';
 
-class Popup extends Module{
+export default class Popup extends Module{
+	
+	static moduleName = "popup";
 	
 	constructor(table){
 		super(table);
@@ -220,12 +222,6 @@ class Popup extends Module{
 			this.dispatchExternal("popupClosed", component.getComponent());
 		});
 
-
-
 		this.dispatchExternal("popupOpened", component.getComponent());
 	}
-}
-
-Popup.moduleName = "popup";
-
-export default Popup;
+}

package/src/js/modules/Print/Print.js

@@ -1,6 +1,8 @@
 import Module from '../../core/Module.js';
 
-class Print extends Module{
+export default class Print extends Module{
+
+	static moduleName = "print";
 
 	constructor(table){
 		super(table);
@@ -131,8 +133,4 @@ class Print extends Module{
 
 		this.manualBlock = false;
 	}
-}
-
-Print.moduleName = "print";
-
-export default Print;
+}

package/src/js/modules/ReactiveData/ReactiveData.js

@@ -1,6 +1,8 @@
 import Module from '../../core/Module.js';
 
-class ReactiveData extends Module{
+export default class ReactiveData extends Module{
+
+	static moduleName = "reactiveData";
 	
 	constructor(table){
 		super(table);
@@ -398,11 +400,4 @@ class ReactiveData extends Module{
 			this.blocked = false;
 		}
 	}
-}
-
-ReactiveData.moduleName = "reactiveData";
-
-export default ReactiveData;
-
-
-
+}

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,
+		}
+	}
+};