tabulator-tables 5.0.8 → 5.1.1

package/src/js/core/tools/InteractionMonitor.js

@@ -1,75 +1,149 @@
 import CoreFeature from '../CoreFeature.js';
 import Helpers from './Helpers.js';
+import Row from '../row/Row.js';
 
 export default class InteractionManager extends CoreFeature {
-
+	
 	constructor (table){
 		super(table);
-
+		
 		this.el = null;
-
+		
 		this.abortClasses = ["tabulator-headers", "tabulator-table"];
-
+		
 		this.previousTargets = {};
-
+		
 		this.listeners = [
-		"click",
-		"dblclick",
-		"contextmenu",
-		"mouseenter",
-		"mouseleave",
-		"mouseover",
-		"mouseout",
-		"mousemove",
-		"touchstart",
-		"touchend",
+			"click",
+			"dblclick",
+			"contextmenu",
+			"mouseenter",
+			"mouseleave",
+			"mouseover",
+			"mouseout",
+			"mousemove",
+			"touchstart",
+			"touchend",
 		];
-
+		
 		this.componentMap = {
 			"tabulator-cell":"cell",
 			"tabulator-row":"row",
 			"tabulator-group":"group",
 			"tabulator-col":"column",
 		};
+		
+		this.pseudoTrackers = {
+			"row":{
+				subscriber:null,
+				target:null,
+			},
+			"cell":{
+				subscriber:null,
+				target:null,
+			},
+			"group":{
+				subscriber:null,
+				target:null,
+			},
+			"column":{
+				subscriber:null,
+				target:null,
+			},
+		}
+		
+		this.pseudoTracking = false;
 	}
-
+	
 	initialize(){
 		this.el = this.table.element;
+		
 		this.buildListenerMap();
 		this.bindSubscriptionWatchers();
 	}
-
+	
 	buildListenerMap(){
 		var listenerMap = {};
-
+		
 		this.listeners.forEach((listener) => {
 			listenerMap[listener] = {
 				handler:null,
 				components:[],
 			}
 		})
-
+		
 		this.listeners = listenerMap;
 	}
-
+	
+	bindPseudoEvents(){
+		Object.keys(this.pseudoTrackers).forEach((key) => {
+			this.pseudoTrackers[key].subscriber = this.pseudoMouseEnter.bind(this, key);
+			this.subscribe(key + "-mouseover", this.pseudoTrackers[key].subscriber);
+		});
+		
+		this.pseudoTracking = true;
+	}
+	
+	pseudoMouseEnter(key, e, target){
+		if(this.pseudoTrackers[key].target !== target){
+			
+			if(this.pseudoTrackers[key].target){
+				this.dispatch(key + "-mouseleave", e, target);
+			}
+			
+			this.pseudoMouseLeave(key, e);
+			
+			this.pseudoTrackers[key].target = target;
+			
+			this.dispatch(key + "-mouseenter", e, target);
+		}
+	}
+	
+	pseudoMouseLeave(key, e){
+		var leaveList = Object.keys(this.pseudoTrackers),
+		linkedKeys = {
+			"row":["cell"],
+			"cell":["row"],
+		};
+		
+		leaveList = leaveList.filter((item) => {
+			var links = linkedKeys[key];
+			return item !== key && (!links || (links && !links.includes(item)));
+		});
+		
+		
+		leaveList.forEach((key) => {
+			var target = this.pseudoTrackers[key].target;
+			
+			if(this.pseudoTrackers[key].target){
+				this.dispatch(key + "-mouseleave", e, target);
+				
+				this.pseudoTrackers[key].target = null;
+			}
+		});
+	}
+	
+	
 	bindSubscriptionWatchers(){
 		var listeners = Object.keys(this.listeners),
 		components = Object.values(this.componentMap);
-
+		
 		for(let comp of components){
 			for(let listener of listeners){
 				let key = comp + "-" + listener;
-
+				
 				this.subscriptionChange(key, this.subscriptionChanged.bind(this, comp, listener));
 			}
 		}
+		
+		this.subscribe("table-destroy", this.clearWatchers.bind(this))
 	}
-
+	
 	subscriptionChanged(component, key, added){
 		var listener = this.listeners[key].components,
 		index = listener.indexOf(component),
 		changed = false;
-
+		
 		if(added){
 			if(index === -1){
 				listener.push(component);
@@ -83,16 +157,20 @@ export default class InteractionManager extends CoreFeature {
 				}
 			}
 		}
-
+		
+		if((key === "mouseenter" || key === "mouseleave") && !this.pseudoTracking){
+			this.bindPseudoEvents();
+		}
+		
 		if(changed){
 			this.updateEventListeners();
 		}
 	}
-
+	
 	updateEventListeners(){
 		for(let key in this.listeners){
 			let listener = this.listeners[key];
-
+			
 			if(listener.components.length){
 				if(!listener.handler){
 					listener.handler = this.track.bind(this, key);
@@ -107,86 +185,102 @@ export default class InteractionManager extends CoreFeature {
 			}
 		}
 	}
-
+	
 	track(type, e){
 		var path = (e.composedPath && e.composedPath()) || e.path;
+		
 		var targets = this.findTargets(path);
 		targets = this.bindComponents(type, targets);
+		
 		this.triggerEvents(type, e, targets);
+		
+		if(this.pseudoTracking && (type == "mouseover" || type == "mouseleave") && !Object.keys(targets).length){
+			this.pseudoMouseLeave("none", e);
+		}
 	}
-
+	
 	findTargets(path){
 		var targets = {};
-
+		
 		let componentMap = Object.keys(this.componentMap);
-
+		
 		for (let el of path) {
 			let classList = el.classList ? [...el.classList] : [];
-
+			
 			let abort = classList.filter((item) => {
 				return this.abortClasses.includes(item);
 			})
-
+			
 			if(abort.length){
 				break;
 			}
-
+			
 			let elTargets = classList.filter((item) => {
 				return componentMap.includes(item);
 			})
-
+			
 			for (let target of elTargets) {
 				targets[this.componentMap[target]] = el;
 			}
 		}
-
+		
 		if(targets.group && targets.group === targets.row){
 			delete targets.row;
 		}
-
+		
 		return targets;
 	}
-
+	
 	bindComponents(type, targets){
 		//ensure row component is looked up before cell
 		var keys = Object.keys(targets).reverse(),
 		listener = this.listeners[type],
 		targetMatches = {};
-
+		
 		for(let key of keys){
 			let component;
 			let target = targets[key];
 			let previousTarget = this.previousTargets[key];
-
+			
 			if(previousTarget && previousTarget.target === target){
 				component = previousTarget.component;
 			}else{
 				switch(key){
 					case "row":
 					case "group":
-					if(listener.components.includes("row") || listener.components.includes("cell")){
-						let rows = this.table.rowManager.getVisibleRows();
-
+					if(listener.components.includes("row") || listener.components.includes("cell") || listener.components.includes("group")){
+						let rows = this.table.rowManager.getVisibleRows(true);
+						
 						component = rows.find((row) => {
 							return row.getElement() === target;
 						});
+						
+						if(targets["row"].parentNode && targets["row"].parentNode.closest(".tabulator-row")){
+							targets[key] = false;
+						}
 					}
 					break;
-
+					
 					case "column":
 					if(listener.components.includes("column")){
 						component = this.table.columnManager.findColumn(target);
 					}
 					break
-
+					
 					case "cell":
 					if(listener.components.includes("cell")){
-						component = targets["row"].findCell(target);
+						if(targets["row"] instanceof Row){
+							component = targets["row"].findCell(target);
+						}else{	
+							if(targets["row"]){
+								console.warn("Event Target Lookup Error - The row this cell is attached to cannot be found, has the table been reinitialized without being destroyed first?")
+							}
+						}
 					}
 					break;
 				}
 			}
-
+			
 			if(component){
 				targets[key] = component;
 				targetMatches[key] = {
@@ -195,19 +289,30 @@ export default class InteractionManager extends CoreFeature {
 				}
 			}
 		}
-
+		
 		this.previousTargets = targetMatches;
-
+		
 		return targets;
 	}
-
+	
 	triggerEvents(type, e, targets){
 		var listener = this.listeners[type];
-
+		
 		for(let key in targets){
 			if(targets[key] && listener.components.includes(key)){
 				this.dispatch(key + "-" + type, e, targets[key]);
 			}
 		}
 	}
+	
+	clearWatchers(){
+		for(let key in this.listeners){
+			let listener = this.listeners[key];
+			
+			if(listener.handler){
+				this.el.removeEventListener(key, listener.handler)
+				listener.handler = null;
+			}
+		}
+	}
 }

package/src/js/modules/Ajax/Ajax.js

@@ -6,145 +6,125 @@ import defaultLoaderPromise from './defaults/loaderPromise.js';
 import defaultContentTypeFormatters from './defaults/contentTypeFormatters.js';
 
 class Ajax extends Module{
-
+	
 	constructor(table){
 		super(table);
-
-		this.config = false; //hold config object for ajax request
+		
+		this.config = {}; //hold config object for ajax request
 		this.url = ""; //request URL
 		this.urlGenerator = false;
 		this.params = false; //request parameters
-
+		
 		this.loaderPromise = false;
-
+		
 		this.registerTableOption("ajaxURL", false); //url for ajax loading
 		this.registerTableOption("ajaxURLGenerator", false);
 		this.registerTableOption("ajaxParams", {});  //params for ajax loading
 		this.registerTableOption("ajaxConfig", "get"); //ajax request type
 		this.registerTableOption("ajaxContentType", "form"); //ajax request type
 		this.registerTableOption("ajaxRequestFunc", false); //promise function
-
+		
 		this.registerTableOption("ajaxRequesting", function(){});
 		this.registerTableOption("ajaxResponse", false);
-
+		
 		this.contentTypeFormatters = Ajax.contentTypeFormatters;
 	}
-
+	
 	//initialize setup options
 	initialize(){
 		this.loaderPromise = this.table.options.ajaxRequestFunc || Ajax.defaultLoaderPromise;
 		this.urlGenerator = this.table.options.ajaxURLGenerator || Ajax.defaultURLGenerator;
-
-		if(this.table.options.ajaxParams){
-			this.setParams(this.table.options.ajaxParams);
-		}
-
-		if(this.table.options.ajaxConfig){
-			this.setConfig(this.table.options.ajaxConfig);
-		}
-
+		
 		if(this.table.options.ajaxURL){
 			this.setUrl(this.table.options.ajaxURL);
 		}
 
-		this.registerTableFunction("getAjaxUrl", this.getUrl.bind(this));
 
+		this.setDefaultConfig(this.table.options.ajaxConfig);
+		
+		this.registerTableFunction("getAjaxUrl", this.getUrl.bind(this));
+		
 		this.subscribe("data-loading", this.requestDataCheck.bind(this));
+		this.subscribe("data-params", this.requestParams.bind(this));
 		this.subscribe("data-load", this.requestData.bind(this));
 	}
-
-
+	
+	requestParams(data, config, silent, params){
+		var ajaxParams = this.table.options.ajaxParams;
+		
+		if(ajaxParams){
+			if(typeof ajaxParams === "function"){
+				ajaxParams = ajaxParams.call(this.table);
+			}
+			
+			params = Object.assign(params, ajaxParams);
+		}		
+		
+		return params;
+	}
+	
 	requestDataCheck(data, params, config, silent){
 		return !!((!data && this.url) || typeof data === "string");
 	}
-
-	requestData(data, params, config, silent, previousData){
-		if(this.requestDataCheck(data)){
-			if(data){
-				this.setUrl(data);
-			}
-
-			if(params){
-				this.setParams(params, true);
-			}
-
-			if(config){
-				this.setConfig(config);
+	
+	requestData(url, params, config, silent, previousData){
+		var ajaxConfig;
+		
+		if(!previousData && this.requestDataCheck(url)){
+			if(url){
+				this.setUrl(url);
 			}
-
-			return this.sendRequest();
+			
+			ajaxConfig = this.generateConfig(config);
+			
+			return this.sendRequest(this.url, params, ajaxConfig);
 		}else{
 			return previousData;
 		}
 	}
+	
+	setDefaultConfig(config = {}){
+		this.config = Object.assign({}, Ajax.defaultConfig);
 
-	//set ajax params
-	setParams(params, update){
-		if(update){
-			this.params = this.params || {};
-
-			for(let key in params){
-				this.params[key] = params[key];
-			}
+		if(typeof config == "string"){
+			this.config.method = config;
 		}else{
-			this.params = params;
+			Object.assign(this.config, config);
 		}
 	}
-
-	getParams(){
-		return this.params || {};
-	}
-
+	
 	//load config object
-	setConfig(config){
-		this._loadDefaultConfig();
-
+	generateConfig(config = {}){
+		var ajaxConfig = Object.assign({}, this.config)
+		
 		if(typeof config == "string"){
-			this.config.method = config;
+			ajaxConfig.method = config;
 		}else{
-			for(let key in config){
-				this.config[key] = config[key];
-			}
+			Object.assign(ajaxConfig, config);
 		}
+		
+		return ajaxConfig;
 	}
-
-	//create config object from default
-	_loadDefaultConfig(force){
-		if(!this.config || force){
-
-			this.config = {};
-
-			//load base config from defaults
-			for(let key in Ajax.defaultConfig){
-				this.config[key] = Ajax.defaultConfig[key];
-			}
-		}
-	}
-
+	
 	//set request url
 	setUrl(url){
 		this.url = url;
 	}
-
+	
 	//get request url
 	getUrl(){
 		return this.url;
 	}
-
+	
 	//send ajax request
-	sendRequest(silent){
-		var url = this.url,
-		esc, query;
-
-		this._loadDefaultConfig();
-
-		if(this.table.options.ajaxRequesting.call(this.table, this.url, this.params) !== false){
-			return this.loaderPromise(url, this.config, this.params)
+	sendRequest(url, params, config){
+		if(this.table.options.ajaxRequesting.call(this.table, url, params) !== false){
+			return this.loaderPromise(url, config, params)
 			.then((data)=>{
 				if(this.table.options.ajaxResponse){
-					data = this.table.options.ajaxResponse.call(this.table, this.url, this.params, data);
+					data = this.table.options.ajaxResponse.call(this.table, url, params, data);
 				}
-
+				
 				return data;
 			});
 		}else{

package/src/js/modules/ColumnCalcs/ColumnCalcs.js

@@ -51,8 +51,9 @@ class ColumnCalcs extends Module{
 		this.subscribe("row-added", this.rowsUpdated.bind(this));
 		this.subscribe("column-moved", this.recalcActiveRows.bind(this));
 		this.subscribe("column-add", this.recalcActiveRows.bind(this));
-		this.subscribe("data-refeshed", this.recalcActiveRows.bind(this));
+		this.subscribe("data-refreshed", this.recalcActiveRows.bind(this));
 		this.subscribe("table-redraw", this.tableRedraw.bind(this));
+		this.subscribe("rows-visible", this.visibleRows.bind(this));
 
 		this.registerTableFunction("getCalcResults", this.getResults.bind(this));
 		this.registerTableFunction("recalc", this.userRecalc.bind(this));
@@ -78,6 +79,18 @@ class ColumnCalcs extends Module{
 	///////// Internal Logic //////////
 	///////////////////////////////////
 
+	visibleRows(viewable, rows){
+		if(this.topRow){
+			rows.unshift(this.topRow);
+		}
+
+		if(this.botRow){
+			rows.push(this.botRow);
+		}
+	
+		return rows;
+	}
+
 	rowsUpdated(row){
 		if(this.table.options.groupBy){
 			this.recalcRowGroup(this);
@@ -318,12 +331,12 @@ class ColumnCalcs extends Module{
 
 	rowsToData(rows){
 		var data = [];
-
+		
 		rows.forEach((row) => {
 			data.push(row.getData());
 
 			if(this.table.options.dataTree && this.table.options.dataTreeChildColumnCalcs){
-				if(row.modules.dataTree.open){
+				if(row.modules.dataTree && row.modules.dataTree.open){
 					var children = this.rowsToData(this.table.modules.dataTree.getFilteredTreeChildren(row));
 					data = data.concat(children);
 				}

package/src/js/modules/DataTree/DataTree.js

@@ -38,17 +38,16 @@ class DataTree extends Module{
 		this.registerComponentFunction("row", "getTreeParent", this.getTreeParent.bind(this));
 		this.registerComponentFunction("row", "getTreeChildren", this.getRowChildren.bind(this));
 		this.registerComponentFunction("row", "addTreeChild", this.addTreeChildRow.bind(this));
+		this.registerComponentFunction("row", "isTreeExpanded", this.isRowExpanded.bind(this));
 	}
 
 	initialize(){
 		if(this.table.options.dataTree){
 			var dummyEl = null,
-			firstCol = this.table.columnManager.getFirstVisibileColumn(),
 			options = this.table.options;
 
 			this.field = options.dataTreeChildField;
 			this.indent = options.dataTreeChildIndent;
-			this.elementField = options.dataTreeElementColumn || (firstCol ? firstCol.field : false);
 
 			if(options.dataTreeBranchElement){
 
@@ -117,15 +116,23 @@ class DataTree extends Module{
 
 			this.subscribe("row-init", this.initializeRow.bind(this));
 			this.subscribe("row-layout-after", this.layoutRow.bind(this));
-			this.subscribe("row-relayout", this.layoutRow.bind(this));
 			this.subscribe("row-deleted", this.rowDelete.bind(this),0);
 			this.subscribe("row-data-changed", this.rowDataChanged.bind(this), 10);
+			this.subscribe("cell-value-updated", this.cellValueChanged.bind(this));
+			this.subscribe("edit-cancelled", this.cellValueChanged.bind(this));
 			this.subscribe("column-moving-rows", this.columnMoving.bind(this));
+			this.subscribe("table-built", this.initializeElementField.bind(this));
 
 			this.registerDisplayHandler(this.getRows.bind(this), 30);
 		}
 	}
 
+	initializeElementField(){
+		var firstCol = this.table.columnManager.getFirstVisibleColumn();
+
+		this.elementField = this.table.options.dataTreeElementColumn || (firstCol ? firstCol.field : false);
+	}
+	
 	getRowChildren(row){
 		return this.getTreeChildren(row, true);
 	}
@@ -151,6 +158,14 @@ class DataTree extends Module{
 		}
 	}
 
+	cellValueChanged(cell){
+		var field = cell.column.getField();
+
+		if(field === this.elementField){
+			this.layoutRow(cell.row);
+		}
+	}
+
 	initializeRow(row){
 		var childArray = row.getData()[this.field];
 		var isArray = Array.isArray(childArray);
@@ -396,6 +411,10 @@ class DataTree extends Module{
 		}
 	}
 
+	isRowExpanded(row){
+		return row.modules.dataTree.open;
+	}
+
 	getTreeParent(row){
 		return row.modules.dataTree.parent ? row.modules.dataTree.parent.getComponent() : false;
 	}
@@ -555,12 +574,6 @@ class DataTree extends Module{
 		return output;
 	}
 
-	checkForRestyle(cell){
-		if(!cell.row.cells.indexOf(cell)){
-			this.layoutRow(cell.row);
-		}
-	}
-
 	getChildField(){
 		return this.field;
 	}

package/src/js/modules/Download/defaults/downloaders/json.js

@@ -19,7 +19,7 @@ export default function(list, options, setFileContents){
 			case "row":
 			row.columns.forEach((col) => {
 				if(col){
-					item[col.component.getField()] = col.value;
+					item[col.component.getTitleDownload() || col.component.getField()] = col.value;
 				}
 			});