tabulator-tables 6.5.0 → 6.5.1

package/src/js/modules/Interaction/Interaction.js

@@ -0,0 +1,339 @@
+import Module from '../../core/Module.js';
+
+import Cell from '../../core/cell/Cell.js';
+import Column from '../../core/column/Column.js';
+
+export default class Interaction extends Module{
+
+	static moduleName = "interaction";
+
+	constructor(table){
+		super(table);
+
+		this.eventMap = {
+			//row events
+			rowClick:"row-click",
+			rowDblClick:"row-dblclick",
+			rowContext:"row-contextmenu",
+			rowMouseEnter:"row-mouseenter",
+			rowMouseLeave:"row-mouseleave",
+			rowMouseOver:"row-mouseover",
+			rowMouseOut:"row-mouseout",
+			rowMouseMove:"row-mousemove",
+			rowMouseDown:"row-mousedown",
+			rowMouseUp:"row-mouseup",
+			rowTap:"row",
+			rowDblTap:"row",
+			rowTapHold:"row",
+
+			//cell events
+			cellClick:"cell-click",
+			cellDblClick:"cell-dblclick",
+			cellContext:"cell-contextmenu",
+			cellMouseEnter:"cell-mouseenter",
+			cellMouseLeave:"cell-mouseleave",
+			cellMouseOver:"cell-mouseover",
+			cellMouseOut:"cell-mouseout",
+			cellMouseMove:"cell-mousemove",
+			cellMouseDown:"cell-mousedown",
+			cellMouseUp:"cell-mouseup",
+			cellTap:"cell",
+			cellDblTap:"cell",
+			cellTapHold:"cell",
+
+			//column header events
+			headerClick:"column-click",
+			headerDblClick:"column-dblclick",
+			headerContext:"column-contextmenu",
+			headerMouseEnter:"column-mouseenter",
+			headerMouseLeave:"column-mouseleave",
+			headerMouseOver:"column-mouseover",
+			headerMouseOut:"column-mouseout",
+			headerMouseMove:"column-mousemove",
+			headerMouseDown:"column-mousedown",
+			headerMouseUp:"column-mouseup",
+			headerTap:"column",
+			headerDblTap:"column",
+			headerTapHold:"column",
+
+			//group header
+			groupClick:"group-click",
+			groupDblClick:"group-dblclick",
+			groupContext:"group-contextmenu",
+			groupMouseEnter:"group-mouseenter",
+			groupMouseLeave:"group-mouseleave",
+			groupMouseOver:"group-mouseover",
+			groupMouseOut:"group-mouseout",
+			groupMouseMove:"group-mousemove",
+			groupMouseDown:"group-mousedown",
+			groupMouseUp:"group-mouseup",
+			groupTap:"group",
+			groupDblTap:"group",
+			groupTapHold:"group",
+		};
+
+		this.subscribers = {};
+
+		this.touchSubscribers = {};
+
+		this.columnSubscribers = {};
+
+		this.touchWatchers = {
+			row:{
+				tap:null,
+				tapDbl:null,
+				tapHold:null,
+			},
+			cell:{
+				tap:null,
+				tapDbl:null,
+				tapHold:null,
+			},
+			column:{
+				tap:null,
+				tapDbl:null,
+				tapHold:null,
+			},
+			group:{
+				tap:null,
+				tapDbl:null,
+				tapHold:null,
+			}
+		};
+
+		this.registerColumnOption("headerClick");
+		this.registerColumnOption("headerDblClick");
+		this.registerColumnOption("headerContext");
+		this.registerColumnOption("headerMouseEnter");
+		this.registerColumnOption("headerMouseLeave");
+		this.registerColumnOption("headerMouseOver");
+		this.registerColumnOption("headerMouseOut");
+		this.registerColumnOption("headerMouseMove");
+		this.registerColumnOption("headerMouseDown");
+		this.registerColumnOption("headerMouseUp");
+		this.registerColumnOption("headerTap");
+		this.registerColumnOption("headerDblTap");
+		this.registerColumnOption("headerTapHold");
+
+		this.registerColumnOption("cellClick");
+		this.registerColumnOption("cellDblClick");
+		this.registerColumnOption("cellContext");
+		this.registerColumnOption("cellMouseEnter");
+		this.registerColumnOption("cellMouseLeave");
+		this.registerColumnOption("cellMouseOver");
+		this.registerColumnOption("cellMouseOut");
+		this.registerColumnOption("cellMouseMove");
+		this.registerColumnOption("cellMouseDown");
+		this.registerColumnOption("cellMouseUp");
+		this.registerColumnOption("cellTap");
+		this.registerColumnOption("cellDblTap");
+		this.registerColumnOption("cellTapHold");
+
+	}
+
+	initialize(){
+		this.initializeExternalEvents();
+
+		this.subscribe("column-init", this.initializeColumn.bind(this));
+		this.subscribe("cell-dblclick", this.cellContentsSelectionFixer.bind(this));
+		this.subscribe("scroll-horizontal", this.clearTouchWatchers.bind(this));
+		this.subscribe("scroll-vertical", this.clearTouchWatchers.bind(this));
+	}
+
+	clearTouchWatchers(){
+		var types = Object.values(this.touchWatchers);
+
+		types.forEach((type) => {
+			//tapDbl and tapHold hold timer ids that must be cancelled (tap is just a boolean flag)
+			clearTimeout(type.tapDbl);
+			clearTimeout(type.tapHold);
+
+			for(let key in type){
+				type[key] = null;
+			}
+		});
+	}
+		
+	cellContentsSelectionFixer(e, cell){
+		var range;
+
+		if(this.table.modExists("edit")){
+			if (this.table.modules.edit.currentCell === cell){
+				return; //prevent instant selection of editor content
+			}
+		}
+
+		e.preventDefault();
+
+		try{
+			if (document.selection) { // IE
+				range = document.body.createTextRange();
+				range.moveToElementText(cell.getElement());
+				range.select();
+			} else if (window.getSelection) {
+				range = document.createRange();
+				range.selectNode(cell.getElement());
+				window.getSelection().removeAllRanges();
+				window.getSelection().addRange(range);
+			}
+		}catch(e){}
+	}
+
+	initializeExternalEvents(){
+		for(let key in this.eventMap){
+			this.subscriptionChangeExternal(key, this.subscriptionChanged.bind(this, key));
+		}
+	}
+
+	subscriptionChanged(key, added){
+		if(added){
+			if(!this.subscribers[key]){
+				if(this.eventMap[key].includes("-")){
+					this.subscribers[key] = this.handle.bind(this, key);
+					this.subscribe(this.eventMap[key], this.subscribers[key]);
+				}else{
+					this.subscribeTouchEvents(key);
+				}
+			}
+		}else{
+			if(this.eventMap[key].includes("-")){
+				if(this.subscribers[key] && !this.columnSubscribers[key]  && !this.subscribedExternal(key)){
+					this.unsubscribe(this.eventMap[key], this.subscribers[key]);
+					delete this.subscribers[key];
+				}
+			}else{
+				this.unsubscribeTouchEvents(key);
+			}
+		}
+	}
+
+
+	subscribeTouchEvents(key){
+		var type = this.eventMap[key];
+
+		if(!this.touchSubscribers[type + "-touchstart"]){
+			this.touchSubscribers[type + "-touchstart"] = this.handleTouch.bind(this, type, "start");
+			this.touchSubscribers[type + "-touchend"] = this.handleTouch.bind(this, type, "end");
+
+			this.subscribe(type + "-touchstart", this.touchSubscribers[type + "-touchstart"]);
+			this.subscribe(type + "-touchend", this.touchSubscribers[type + "-touchend"]);
+		}
+
+		this.subscribers[key] = true;
+	}
+
+	unsubscribeTouchEvents(key){
+		var noTouch = true,
+		type = this.eventMap[key];
+
+		if(this.subscribers[key] && !this.subscribedExternal(key)){
+			delete this.subscribers[key];
+
+			for(let i in this.eventMap){
+				if(this.eventMap[i] === type){
+					if(this.subscribers[i]){
+						noTouch = false;
+					}
+				}
+			}
+
+			if(noTouch){
+				this.unsubscribe(type + "-touchstart", this.touchSubscribers[type + "-touchstart"]);
+				this.unsubscribe(type + "-touchend", this.touchSubscribers[type + "-touchend"]);
+
+				delete this.touchSubscribers[type + "-touchstart"];
+				delete this.touchSubscribers[type + "-touchend"];
+			}
+		}
+	}
+
+	initializeColumn(column){
+		var def = column.definition;
+
+		for(let key in this.eventMap){
+			if(def[key]){
+				this.subscriptionChanged(key, true);
+
+				if(!this.columnSubscribers[key]){
+					this.columnSubscribers[key] = [];
+				}
+
+				this.columnSubscribers[key].push(column);
+			}
+		}
+	}
+
+	handle(action, e, component){
+		this.dispatchEvent(action, e, component);
+	}
+
+	handleTouch(type, action, e, component){
+		var watchers = this.touchWatchers[type];
+
+		if(type === "column"){
+			type = "header";
+		}
+
+		switch(action){
+			case "start":
+				watchers.tap = true;
+
+				clearTimeout(watchers.tapHold);
+
+				watchers.tapHold = setTimeout(() => {
+					clearTimeout(watchers.tapHold);
+					watchers.tapHold = null;
+
+					watchers.tap = null;
+					clearTimeout(watchers.tapDbl);
+					watchers.tapDbl = null;
+
+					this.dispatchEvent(type + "TapHold", e,  component);
+				}, 1000);
+				break;
+
+			case "end":
+				if(watchers.tap){
+
+					watchers.tap = null;
+					this.dispatchEvent(type + "Tap", e,  component);
+				}
+
+				if(watchers.tapDbl){
+					clearTimeout(watchers.tapDbl);
+					watchers.tapDbl = null;
+
+					this.dispatchEvent(type + "DblTap", e,  component);
+				}else{
+					watchers.tapDbl = setTimeout(() => {
+						clearTimeout(watchers.tapDbl);
+						watchers.tapDbl = null;
+					}, 300);
+				}
+
+				clearTimeout(watchers.tapHold);
+				watchers.tapHold = null;
+				break;
+		}
+	}
+
+	dispatchEvent(action, e, component){
+		var componentObj = component.getComponent(),
+		callback;
+
+		if(this.columnSubscribers[action]){
+
+			if(component instanceof Cell){
+				callback = component.column.definition[action];
+			}else if(component instanceof Column){
+				callback = component.definition[action];
+			}
+
+			if(callback){
+				callback(e, componentObj);
+			}
+		}
+
+		this.dispatchExternal(action, e, componentObj);
+	}
+}

package/src/js/modules/Keybindings/Keybindings.js

@@ -0,0 +1,198 @@
+import Module from '../../core/Module.js';
+
+import defaultBindings from './defaults/bindings.js';
+import defaultActions from './defaults/actions.js';
+
+export default class Keybindings extends Module{
+
+	static moduleName = "keybindings";
+
+	//load defaults
+	static bindings = defaultBindings;
+	static actions = defaultActions;
+
+	constructor(table){
+		super(table);
+
+		this.watchKeys = null;
+		this.pressedKeys = null;
+		this.keyupBinding = false;
+		this.keydownBinding = false;
+
+		this.registerTableOption("keybindings", {}); //array for keybindings
+		this.registerTableOption("tabEndNewRow", false); //create new row when tab to end of table
+	}
+
+	initialize(){
+		var bindings = this.table.options.keybindings,
+		mergedBindings = {};
+
+		this.watchKeys = {};
+		this.pressedKeys = [];
+
+		if(bindings !== false){
+			Object.assign(mergedBindings, Keybindings.bindings);
+			Object.assign(mergedBindings, bindings);
+
+			this.mapBindings(mergedBindings);
+			this.bindEvents();
+		}
+
+		this.subscribe("table-destroy", this.clearBindings.bind(this));
+	}
+
+	mapBindings(bindings){
+		for(let key in bindings){
+			if(Keybindings.actions[key]){
+				if(bindings[key]){
+					if(typeof bindings[key] !== "object"){
+						bindings[key] = [bindings[key]];
+					}
+
+					bindings[key].forEach((binding) => {
+						var bindingList = Array.isArray(binding) ?  binding : [binding];
+						
+						bindingList.forEach((item) => {
+							this.mapBinding(key, item);
+						});						
+					});
+				}
+			}else{
+				console.warn("Key Binding Error - no such action:", key);
+			}
+		}
+	}
+
+	getKeyCode(e){
+		// Convert modern e.key to legacy numeric key code for compatibility
+		if(e.key.length === 1){
+			return e.key.toUpperCase().charCodeAt(0);
+		}
+		
+		// Handle special keys
+		var specialKeys = {
+			"Enter": 13,
+			"Escape": 27,
+			"Tab": 9,
+			"Backspace": 8,
+			"Delete": 46,
+			"ArrowUp": 38,
+			"ArrowDown": 40,
+			"ArrowLeft": 37,
+			"ArrowRight": 39,
+			"Home": 36,
+			"End": 35,
+			"PageUp": 33,
+			"PageDown": 34,
+			"Insert": 45
+		};
+		
+		return specialKeys[e.key] || e.keyCode || 0;
+	}
+
+	mapBinding(action, symbolsList){
+		var binding = {
+			action: Keybindings.actions[action],
+			keys: [],
+			ctrl: false,
+			shift: false,
+			meta: false,
+		};
+
+		var symbols = symbolsList.toString().toLowerCase().split(" ").join("").split("+");
+
+		symbols.forEach((symbol) => {
+			switch(symbol){
+				case "ctrl":
+					binding.ctrl = true;
+					break;
+
+				case "shift":
+					binding.shift = true;
+					break;
+
+				case "meta":
+					binding.meta = true;
+					break;
+
+				default:
+					symbol = isNaN(symbol) ? symbol.toUpperCase().charCodeAt(0) : parseInt(symbol);
+					binding.keys.push(symbol);
+
+					if(!this.watchKeys[symbol]){
+						this.watchKeys[symbol] = [];
+					}
+
+					this.watchKeys[symbol].push(binding);
+			}
+		});
+	}
+
+	bindEvents(){
+		var self = this;
+
+		this.keyupBinding = function(e){
+			var code = self.getKeyCode(e);
+			var bindings = self.watchKeys[code];
+
+			if(bindings){
+
+				self.pressedKeys.push(code);
+
+				bindings.forEach(function(binding){
+					self.checkBinding(e, binding);
+				});
+			}
+		};
+
+		this.keydownBinding = function(e){
+			var code = self.getKeyCode(e);
+			var bindings = self.watchKeys[code];
+
+			if(bindings){
+
+				var index = self.pressedKeys.indexOf(code);
+
+				if(index > -1){
+					self.pressedKeys.splice(index, 1);
+				}
+			}
+		};
+
+		this.table.element.addEventListener("keydown", this.keyupBinding);
+
+		this.table.element.addEventListener("keyup", this.keydownBinding);
+	}
+
+	clearBindings(){
+		if(this.keyupBinding){
+			this.table.element.removeEventListener("keydown", this.keyupBinding);
+		}
+
+		if(this.keydownBinding){
+			this.table.element.removeEventListener("keyup", this.keydownBinding);
+		}
+	}
+
+	checkBinding(e, binding){
+		var match = true;
+
+		if(e.ctrlKey == binding.ctrl && e.shiftKey == binding.shift && e.metaKey == binding.meta){
+			binding.keys.forEach((key) => {
+				var index = this.pressedKeys.indexOf(key);
+
+				if(index == -1){
+					match = false;
+				}
+			});
+
+			if(match){
+				binding.action.call(this, e);
+			}
+
+			return true;
+		}
+
+		return false;
+	}
+}

package/src/js/modules/Keybindings/defaults/actions.js

@@ -0,0 +1,90 @@
+export default {
+	keyBlock:function(e){
+		e.stopPropagation();
+		e.preventDefault();
+	},
+
+	scrollPageUp:function(e){
+		var rowManager = this.table.rowManager,
+		newPos = rowManager.scrollTop - rowManager.element.clientHeight;
+
+		e.preventDefault();
+
+		if(rowManager.displayRowsCount){
+			if(newPos >= 0){
+				rowManager.element.scrollTop = newPos;
+			}else{
+				rowManager.scrollToRow(rowManager.getDisplayRows()[0]);
+			}
+		}
+
+		this.table.element.focus();
+	},
+
+	scrollPageDown:function(e){
+		var rowManager = this.table.rowManager,
+		newPos = rowManager.scrollTop + rowManager.element.clientHeight,
+		scrollMax = rowManager.element.scrollHeight;
+
+		e.preventDefault();
+
+		if(rowManager.displayRowsCount){
+			if(newPos <= scrollMax){
+				rowManager.element.scrollTop = newPos;
+			}else{
+				rowManager.scrollToRow(rowManager.getDisplayRows()[rowManager.displayRowsCount - 1]);
+			}
+		}
+
+		this.table.element.focus();
+
+	},
+
+	scrollToStart:function(e){
+		var rowManager = this.table.rowManager;
+
+		e.preventDefault();
+
+		if(rowManager.displayRowsCount){
+			rowManager.scrollToRow(rowManager.getDisplayRows()[0]);
+		}
+
+		this.table.element.focus();
+	},
+
+	scrollToEnd:function(e){
+		var rowManager = this.table.rowManager;
+
+		e.preventDefault();
+
+		if(rowManager.displayRowsCount){
+			rowManager.scrollToRow(rowManager.getDisplayRows()[rowManager.displayRowsCount - 1]);
+		}
+
+		this.table.element.focus();
+	},
+
+	navPrev:function(e){
+		this.dispatch("keybinding-nav-prev", e);
+	},
+
+	navNext:function(e){
+		this.dispatch("keybinding-nav-next", e);
+	},
+
+	navLeft:function(e){
+		this.dispatch("keybinding-nav-left", e);
+	},
+
+	navRight:function(e){
+		this.dispatch("keybinding-nav-right", e);
+	},
+
+	navUp:function(e){
+		this.dispatch("keybinding-nav-up", e);
+	},
+
+	navDown:function(e){
+		this.dispatch("keybinding-nav-down", e);
+	},
+};

package/src/js/modules/Keybindings/defaults/bindings.js

@@ -0,0 +1,12 @@
+export default {
+	navPrev:"shift + 9",
+	navNext:9,
+	navUp:38,
+	navDown:40,
+	navLeft:37,
+	navRight:39,
+	scrollPageUp:33,
+	scrollPageDown:34,
+	scrollToStart:36,
+	scrollToEnd:35,
+};

package/src/js/modules/Layout/Layout.js

@@ -0,0 +1,66 @@
+import Module from '../../core/Module.js';
+
+import defaultModes from './defaults/modes.js';
+
+export default class Layout extends Module{
+
+	static moduleName = "layout";
+
+	//load defaults
+	static modes = defaultModes;
+
+	constructor(table){
+		super(table, "layout");
+
+		this.mode = null;
+
+		this.registerTableOption("layout", "fitData"); //layout type
+		this.registerTableOption("layoutColumnsOnNewData", false); //update column widths on setData
+
+		this.registerColumnOption("widthGrow");
+		this.registerColumnOption("widthShrink");
+	}
+
+	//initialize layout system
+	initialize(){
+		var layout = this.table.options.layout;
+
+		if(Layout.modes[layout]){
+			this.mode = layout;
+		}else{
+			console.warn("Layout Error - invalid mode set, defaulting to 'fitData' : " + layout);
+			this.mode = 'fitData';
+		}
+
+		this.table.element.setAttribute("tabulator-layout", this.mode);
+		this.subscribe("column-init", this.initializeColumn.bind(this));
+	}
+
+	initializeColumn(column){
+		if(column.definition.widthGrow){
+			column.definition.widthGrow = Number(column.definition.widthGrow);
+		}
+		if(column.definition.widthShrink){
+			column.definition.widthShrink = Number(column.definition.widthShrink);
+		}
+	}
+
+	getMode(){
+		return this.mode;
+	}
+
+	//trigger table layout
+	layout(dataChanged){
+
+		var variableHeight = this.table.columnManager.columnsByIndex.find((column) => column.definition.variableHeight || column.definition.formatter === "textarea");
+		
+		this.dispatch("layout-refreshing");
+		Layout.modes[this.mode].call(this, this.table.columnManager.columnsByIndex, dataChanged);
+
+		if(variableHeight){
+			this.table.rowManager.normalizeHeight(true);
+		}
+
+		this.dispatch("layout-refreshed");
+	}
+}