tabulator-tables 5.1.8 → 5.2.0

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

@@ -0,0 +1,194 @@
+import Module from '../../core/Module.js';
+
+class Popup extends Module{
+	
+	constructor(table){
+		super(table);
+		
+		this.columnSubscribers = {};
+		
+		this.registerTableOption("rowContextPopup", false);
+		this.registerTableOption("rowClickPopup", false);
+		this.registerTableOption("groupContextPopup", false);
+		this.registerTableOption("groupClickPopup", false);
+		
+		this.registerColumnOption("headerContextPopup");
+		this.registerColumnOption("headerClickPopup");
+		this.registerColumnOption("headerPopup");
+		this.registerColumnOption("headerPopupIcon");
+		this.registerColumnOption("contextPopup");
+		this.registerColumnOption("clickPopup");
+		
+	}
+	
+	initialize(){
+		this.initializeRowWatchers();
+		this.initializeGroupWatchers();
+		
+		this.subscribe("column-init", this.initializeColumn.bind(this));
+	}
+	
+	initializeRowWatchers(){
+		if(this.table.options.rowContextPopup){
+			this.subscribe("row-contextmenu", this.loadPopupEvent.bind(this, this.table.options.rowContextPopup));
+			this.table.on("rowTapHold", this.loadPopupEvent.bind(this, this.table.options.rowContextPopup));
+		}
+		
+		if(this.table.options.rowClickPopup){
+			this.subscribe("row-click", this.loadPopupEvent.bind(this, this.table.options.rowClickPopup));
+		}
+	}
+	
+	initializeGroupWatchers(){
+		if(this.table.options.groupContextPopup){
+			this.subscribe("group-contextmenu", this.loadPopupEvent.bind(this, this.table.options.groupContextPopup));
+			this.table.on("groupTapHold", this.loadPopupEvent.bind(this, this.table.options.groupContextPopup));
+		}
+		
+		if(this.table.options.groupClickPopup){
+			this.subscribe("group-click", this.loadPopupEvent.bind(this, this.table.options.groupClickPopup));
+		}
+	}
+	
+	initializeColumn(column){
+		var options = ["headerContextPopup", "headerClickPopup"],
+		def = column.definition;
+		
+		//handle column events
+		if(def.headerContextPopup && !this.columnSubscribers.headerContextPopup){
+			this.columnSubscribers.headerContextPopup = this.loadPopupTableColumnEvent.bind(this, "headerContextPopup");
+			this.subscribe("column-contextmenu", this.columnSubscribers.headerContextPopup);
+			this.table.on("headerTapHold", this.loadPopupTableColumnEvent.bind(this, "headerContextPopup"))
+		}
+		
+		if(def.headerClickPopup && !this.columnSubscribers.headerClickPopup){
+			this.columnSubscribers.headerClickPopup = this.loadPopupTableColumnEvent.bind(this, "headerClickPopup");
+			this.subscribe("column-click", this.columnSubscribers.headerClickPopup);
+		}
+		
+		if(def.headerPopup){
+			this.initializeColumnHeaderPopup(column);
+		}
+		
+		//handle cell events
+		if(def.contextPopup && !this.columnSubscribers.contextPopup){
+			this.columnSubscribers.contextPopup = this.loadPopupTableCellEvent.bind(this, "contextPopup");
+			this.subscribe("cell-contextmenu", this.columnSubscribers.contextPopup);
+			this.table.on("cellTapHold", this.loadPopupTableCellEvent.bind(this, "contextPopup"))
+		}
+		
+		if(def.clickPopup && !this.columnSubscribers.clickPopup){
+			this.columnSubscribers.clickPopup = this.loadPopupTableCellEvent.bind(this, "clickPopup");
+			this.subscribe("cell-click", this.columnSubscribers.clickPopup);
+		}
+	}
+	
+	initializeColumnHeaderPopup(column){
+		var icon = column.definition.headerPopupIcon,
+		headerPopupEl;
+		
+		headerPopupEl = document.createElement("span");
+		headerPopupEl.classList.add("tabulator-header-popup-button");
+
+		if(icon){
+			if(typeof icon === "function"){
+				icon = icon(column.getComponent());
+			}
+
+			if(icon instanceof HTMLElement){
+				headerPopupEl.appendChild(icon);
+			}else{
+				headerPopupEl.innerHTML = icon;
+			}
+		}else{
+			headerPopupEl.innerHTML = "⋮";
+		}
+		
+		headerPopupEl.addEventListener("click", (e) => {
+			e.stopPropagation();
+			e.preventDefault();
+			
+			this.loadPopupEvent(column.definition.headerPopup, e, column);
+		});
+		
+		column.titleElement.insertBefore(headerPopupEl, column.titleElement.firstChild);
+	}
+	
+	loadPopupTableCellEvent(option, e, cell){
+		if(cell._cell){
+			cell = cell._cell;
+		}
+		
+		if(cell.column.definition[option]){
+			this.loadPopupEvent(cell.column.definition[option], e, cell);
+		}
+	}
+	
+	loadPopupTableColumnEvent(option, e, column){
+		if(column._column){
+			column = column._column;
+		}
+		
+		if(column.definition[option]){
+			this.loadPopupEvent(column.definition[option], e, column);
+		}
+	}
+	
+	loadPopupEvent(contents, e, component){
+		var renderedCallback;
+
+		function onRendered(callback){
+			renderedCallback = callback;
+		}
+		
+		if(component._group){
+			component = component._group;
+		}else if(component._row){
+			component = component._row;
+		}
+		
+		contents = typeof contents == "function" ? contents.call(this.table, e, component.getComponent(),  onRendered) : contents;
+		
+		this.loadPopup(e, component, contents, renderedCallback);
+	}
+	
+	loadPopup(e, component, contents, renderedCallback){
+		var touch = !(e instanceof MouseEvent),
+		contentsEl, popup;
+		
+		if(contents instanceof HTMLElement){
+			contentsEl = contents;
+		}else{
+			contentsEl = document.createElement("div");
+			contentsEl.innerHTML = contents;
+		}
+		
+		contentsEl.classList.add("tabulator-popup");
+
+		contentsEl.addEventListener("click", (e) =>{
+			e.stopPropagation();
+		});
+
+		if(!touch){
+			e.preventDefault();
+		}
+		
+		popup = this.popup(contentsEl);
+
+		if(typeof renderedCallback === "function"){
+			popup.renderCallback(renderedCallback);
+		}
+		
+		popup.show(e).hideOnBlur(() => {
+			this.dispatchExternal("popupClosed", component.getComponent());
+		});
+
+
+
+		this.dispatchExternal("popupOpened", component.getComponent())
+	}
+}
+
+Popup.moduleName = "popup";
+
+export default Popup;

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

@@ -8,126 +8,154 @@ class ResizeColumns extends Module{
 		this.startColumn = false;
 		this.startX = false;
 		this.startWidth = false;
+		this.latestX = false;
 		this.handle = null;
-		this.prevHandle = null;
+		this.initialNextColumn = null;
+		this.nextColumn = null;
 		
+		this.initialized = false;
 		this.registerColumnOption("resizable", true);
+		this.registerTableOption("resizableColumnFit", false);
 	}
 	
 	initialize(){
-		// if(this.table.options.resizableColumns){
-		this.subscribe("cell-layout", this.layoutCellHandles.bind(this));
-		this.subscribe("column-init", this.layoutColumnHeader.bind(this));
-		// }
+		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-delete", this.deInitializeComponent.bind(this));
+			this.subscribe("column-height", this.resizeHandle.bind(this));
+			
+			this.initialized = true;
+		}
+	}
+	
+	
 	layoutCellHandles(cell){
 		if(cell.row.type === "row"){
-			this.initializeColumn("cell", cell.column, cell.element);
+			this.deInitializeComponent(cell);
+			this.initializeColumn("cell", cell, cell.column, cell.element);
 		}
 	}
 	
 	layoutColumnHeader(column){
-		this.initializeColumn("header", column, column.element);
+		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);
+		}
+	}
+	
+	reinitializeColumn(column){
+		column.cells.forEach((cell) => {
+			if(cell.modules.resize && cell.modules.resize.handleEl){
+				cell.element.after(cell.modules.resize.handleEl);
+			}
+		});
+		
+		if(column.modules.resize && column.modules.resize.handleEl){
+			column.element.after(column.modules.resize.handleEl);
+		}
 	}
 	
-	initializeColumn(type, column, element){
+	initializeColumn(type, component, column, element){
 		var self = this,
 		variableHeight = false,
-		mode = column.definition.resizable;
+		mode = column.definition.resizable,
+		config = {},
+		nearestColumn = column.getLastColumn();
 		
 		//set column resize mode
 		if(type === "header"){
 			variableHeight = column.definition.formatter == "textarea" || column.definition.variableHeight;
-			column.modules.resize = {variableHeight:variableHeight};
+			config = {variableHeight:variableHeight};
 		}
 		
-		if(mode === true || mode == type){
+		if((mode === true || mode == type) && this._checkResizability(nearestColumn)){
 			
 			var handle = document.createElement('div');
 			handle.className = "tabulator-col-resize-handle";
 			
-			
-			var prevHandle = document.createElement('div');
-			prevHandle.className = "tabulator-col-resize-handle prev";
-			
 			handle.addEventListener("click", function(e){
 				e.stopPropagation();
 			});
 			
 			var handleDown = function(e){
-				var nearestColumn = column.getLastColumn();
-				
-				if(nearestColumn && self._checkResizability(nearestColumn)){
-					self.startColumn = column;
-					self._mouseDown(e, nearestColumn, handle);
-				}
+				self.startColumn = column;
+				self.initialNextColumn = self.nextColumn = nearestColumn.nextColumn();
+				self._mouseDown(e, nearestColumn, handle);
 			};
 			
 			handle.addEventListener("mousedown", handleDown);
 			handle.addEventListener("touchstart", handleDown, {passive: true});
 			
-			//reszie column on  double click
-			handle.addEventListener("dblclick", function(e){
-				var col = column.getLastColumn(),
-				oldWidth;
+			//resize column on  double click
+			handle.addEventListener("dblclick", (e) => {
+				var oldWidth = nearestColumn.getWidth();
 				
-				if(col && self._checkResizability(col)){
-					oldWidth = col.getWidth();
-
-					e.stopPropagation();
-					col.reinitializeWidth(true);
-
-					if(oldWidth !== col.getWidth()){
-						self.dispatch("column-resized", col);
-						self.table.externalEvents.dispatch("columnResized", col.getComponent());
-					}
-				}
-			});
-			
-			
-			prevHandle.addEventListener("click", function(e){
 				e.stopPropagation();
-			});
-			
-			var prevHandleDown = function(e){
-				var nearestColumn, colIndex, prevColumn;
-				
-				nearestColumn = column.getFirstColumn();
+				nearestColumn.reinitializeWidth(true);
 				
-				if(nearestColumn){
-					colIndex = self.table.columnManager.findColumnIndex(nearestColumn);
-					prevColumn = colIndex > 0 ? self.table.columnManager.getColumnByIndex(colIndex - 1) : false;
-					
-					if(prevColumn && self._checkResizability(prevColumn)){
-						self.startColumn = column;
-						self._mouseDown(e, prevColumn, prevHandle);
-					}
+				if(oldWidth !== nearestColumn.getWidth()){
+					self.dispatch("column-resized", nearestColumn);
+					self.table.externalEvents.dispatch("columnResized", nearestColumn.getComponent());
 				}
-			};
+			});
 			
-			prevHandle.addEventListener("mousedown", prevHandleDown);
-			prevHandle.addEventListener("touchstart", prevHandleDown, {passive: true});
+			config.handleEl = handle;
 			
-			//resize column on double click
-			prevHandle.addEventListener("dblclick", function(e){
-				var nearestColumn, colIndex, prevColumn;
-				
-				nearestColumn = column.getFirstColumn();
-				
-				if(nearestColumn){
-					colIndex = self.table.columnManager.findColumnIndex(nearestColumn);
-					prevColumn = colIndex > 0 ? self.table.columnManager.getColumnByIndex(colIndex - 1) : false;
-					
-					if(prevColumn && self._checkResizability(prevColumn)){
-						e.stopPropagation();
-						prevColumn.reinitializeWidth(true);
-					}
-				}
-			});
+			if(element.parentNode){
+				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;
 			
-			element.appendChild(handle);
-			element.appendChild(prevHandle);
+			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;
 		}
 	}
 	
@@ -139,14 +167,42 @@ class ResizeColumns extends Module{
 		var self = this;
 		
 		self.table.element.classList.add("tabulator-block-select");
-
+		
 		function mouseMove(e){
-			// self.table.columnManager.tempScrollBlock();
+			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){
-				column.setWidth(self.startWidth - ((typeof e.screenX === "undefined" ? e.touches[0].screenX : e.screenX) - self.startX));
-			}else{
-				column.setWidth(self.startWidth + ((typeof e.screenX === "undefined" ? e.touches[0].screenX : e.screenX) - self.startX));
+				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.renderer.rerenderColumns(true);
@@ -174,7 +230,7 @@ class ResizeColumns extends Module{
 			handle.removeEventListener("touchend", mouseUp);
 			
 			self.table.element.classList.remove("tabulator-block-select");
-
+			
 			if(self.startWidth !== column.getWidth()){
 				self.dispatch("column-resized", column);
 				self.table.externalEvents.dispatch("columnResized", column.getComponent());
@@ -189,6 +245,7 @@ class ResizeColumns extends Module{
 		}
 		
 		self.startX = typeof e.screenX === "undefined" ? e.touches[0].screenX : e.screenX;
+		self.latestX = self.startX;
 		self.startWidth = column.getWidth();
 		
 		document.body.addEventListener("mousemove", mouseMove);

package/src/js/modules/Sort/defaults/sorters/datetime.js

@@ -6,8 +6,21 @@ export default function(a, b, aRow, bRow, column, dir, params){
 	emptyAlign = 0;
 
 	if(typeof DT != "undefined"){
-		a = format === "iso" ? DT.fromISO(String(a)) : DT.fromFormat(String(a), format);
-		b = format === "iso" ? DT.fromISO(String(b)) : DT.fromFormat(String(b), format);
+		if(DT.isDateTime(a)){
+			 a = a;
+		}else if(inputFormat === "iso"){
+			 a = DT.fromISO(String(a));
+		}else{
+			 a = DT.fromFormat(String(a), inputFormat);
+		}
+
+		if(DT.isDateTime(b)){
+			 b = b;
+		}else if(inputFormat === "iso"){
+			 a = DT.fromISO(String(b));
+		}else{
+			 b = DT.fromFormat(String(b), inputFormat);
+		}
 
 		if(!a.isValid){
 			emptyAlign = !b.isValid ? 0 : -1;

package/src/js/modules/Tooltip/Tooltip.js

@@ -0,0 +1,132 @@
+import Module from '../../core/Module.js';
+import Cell from '../../core/cell/Cell.js';
+
+class Tooltip extends Module{
+	
+	constructor(table){
+		super(table);
+		
+		this.tooltipSubscriber = null,
+		this.headerSubscriber = null,
+		
+		this.timeout = null;
+		this.popupInstance = null;
+		
+		this.registerTableOption("tooltipGenerationMode", undefined);  //deprecated
+		this.registerTableOption("tooltipDelay", 300); 
+		
+		this.registerColumnOption("tooltip");
+		this.registerColumnOption("headerTooltip");
+	}
+	
+	initialize(){
+		this.deprecationCheck();
+		
+		this.subscribe("column-init", this.initializeColumn.bind(this));
+	}
+	
+	deprecationCheck(){
+		if(typeof this.table.options.tooltipGenerationMode !== "undefined"){
+			console.warn("Use of the tooltipGenerationMode option is now deprecated. This option is no longer needed as tooltips are always generated on hover now");
+		}
+	}	
+	
+	initializeColumn(column){
+		if(column.definition.headerTooltip && !this.headerSubscriber){
+			this.headerSubscriber = true;
+			
+			this.subscribe("column-mousemove", this.mousemoveCheck.bind(this, "headerTooltip"));
+			this.subscribe("column-mouseout", this.mouseoutCheck.bind(this, "headerTooltip"));
+		}
+		
+		if(column.definition.tooltip && !this.tooltipSubscriber){
+			this.tooltipSubscriber = true;
+			
+			this.subscribe("cell-mousemove", this.mousemoveCheck.bind(this, "tooltip"));
+			this.subscribe("cell-mouseout", this.mouseoutCheck.bind(this, "tooltip"));
+		}
+	}
+	
+	mousemoveCheck(action, e, component){
+		var tooltip = action === "tooltip" ? component.column.definition.tooltip : component.definition.headerTooltip;
+		
+		if(tooltip){
+			this.clearPopup();
+			this.timeout = setTimeout(this.loadTooltip.bind(this, e, component, tooltip), this.table.options.tooltipDelay);
+		}
+	}
+
+	mouseoutCheck(action, e, component){
+		if(!this.popupInstance){
+			this.clearPopup();
+		}
+	}
+	
+	clearPopup(action, e, component){
+		clearTimeout(this.timeout);
+		this.timeout = null;
+		
+		if(this.popupInstance){
+			this.popupInstance.hide();
+		}
+	}
+	
+	loadTooltip(e, component, tooltip){
+		var contentsEl, renderedCallback, coords;
+
+		function onRendered(callback){
+			renderedCallback = callback;
+		}
+		
+		if(typeof tooltip === "function"){
+			tooltip = tooltip(e, component.getComponent(), onRendered);
+		}
+		
+		if(tooltip instanceof HTMLElement){
+			contentsEl = tooltip;
+		}else{
+			contentsEl = document.createElement("div");
+			
+			if(tooltip === true){
+				if(component instanceof Cell){
+					tooltip = component.value;
+				}else{
+					if(component.definition.field){
+						this.langBind("columns|" + component.definition.field, (value) => {
+							contentsEl.innerHTML = tooltip = value || component.definition.title;
+						});
+					}else{
+						tooltip = component.definition.title;
+					}
+				}
+			}
+			
+			contentsEl.innerHTML = tooltip;
+		}
+		
+		if(tooltip || tooltip === 0 || tooltip === "0" || tooltip === false){
+			contentsEl.classList.add("tabulator-tooltip");
+
+			contentsEl.addEventListener("mousemove", e => e.preventDefault())
+			
+			this.popupInstance = this.popup(contentsEl);
+			
+			if(typeof renderedCallback === "function"){
+				this.popupInstance.renderCallback(renderedCallback);
+			}
+
+			coords = this.popupInstance.containerEventCoords(e);
+			
+			this.popupInstance.show(coords.x + 15, coords.y + 15).hideOnBlur(() => {
+				this.dispatchExternal("TooltipClosed", component.getComponent());
+				this.popupInstance = null;
+			});
+			
+			this.dispatchExternal("TooltipOpened", component.getComponent());
+		}
+	}
+}
+
+Tooltip.moduleName = "tooltip";
+
+export default Tooltip;