tabulator-tables 6.5.0 → 6.5.1

package/src/js/core/tools/Popup.js

@@ -0,0 +1,317 @@
+import CoreFeature from '../CoreFeature.js';
+import Helpers from './Helpers.js';
+
+export default class Popup extends CoreFeature{
+	constructor(table, element, parent){
+		super(table);
+		
+		this.element = element;
+		this.container = this._lookupContainer();
+		
+		this.parent = parent;
+		
+		this.reversedX = false;
+		this.childPopup = null;
+		this.blurable = false;
+		this.blurCallback = null;
+		this.blurEventsBound = false;
+		this.renderedCallback = null;
+		
+		this.visible = false;
+		this.hideable = true;
+		
+		this.element.classList.add("tabulator-popup-container");
+		
+		this.blurEvent = this.hide.bind(this, false);
+		this.escEvent = this._escapeCheck.bind(this);
+		
+		this.destroyBinding = this.tableDestroyed.bind(this);
+		this.destroyed = false;
+	}
+	
+	tableDestroyed(){
+		this.destroyed = true;
+		this.hide(true);
+	}
+	
+	_lookupContainer(){
+		var container = this.table.options.popupContainer;
+		
+		if(typeof container === "string"){
+			container = document.querySelector(container);
+			
+			if(!container){
+				console.warn("Menu Error - no container element found matching selector:",  this.table.options.popupContainer , "(defaulting to document body)");
+			}
+		}else if (container === true){
+			container = this.table.element;
+		}
+		
+		if(container && !this._checkContainerIsParent(container)){
+			container = false;
+			console.warn("Menu Error - container element does not contain this table:",  this.table.options.popupContainer , "(defaulting to document body)");
+		}
+		
+		if(!container){
+			container = document.body;
+		}
+		
+		return container;
+	}
+	
+	_checkContainerIsParent(container, element = this.table.element){
+		if(container === element){
+			return true;
+		}else{
+			return element.parentNode ? this._checkContainerIsParent(container, element.parentNode) : false;
+		}
+	}
+	
+	renderCallback(callback){
+		this.renderedCallback = callback;
+	}
+	
+	containerEventCoords(e){
+		var touch = !(e instanceof MouseEvent);
+		
+		var x = touch ? e.touches[0].pageX : e.pageX;
+		var y = touch ? e.touches[0].pageY : e.pageY;
+		
+		if(this.container !== document.body){
+			let parentOffset = Helpers.elOffset(this.container);
+			
+			x -= parentOffset.left;
+			y -= parentOffset.top;
+		}
+		
+		return {x, y};
+	}
+	
+	elementPositionCoords(element, position = "right"){
+		var offset = Helpers.elOffset(element),
+		containerOffset, x, y;
+		
+		if(this.container !== document.body){
+			containerOffset = Helpers.elOffset(this.container);
+			
+			offset.left -= containerOffset.left;
+			offset.top -= containerOffset.top;
+		}
+		
+		switch(position){
+			case "right":
+				x = offset.left + element.offsetWidth;
+				y = offset.top - 1;
+				break;
+			
+			case "bottom":
+				x = offset.left;
+				y = offset.top + element.offsetHeight;
+				break;
+			
+			case "left":
+				x = offset.left;
+				y = offset.top - 1;
+				break;
+			
+			case "top":
+				x = offset.left;
+				y = offset.top;
+				break;
+			
+			case "center":
+				x = offset.left + (element.offsetWidth / 2);
+				y = offset.top + (element.offsetHeight / 2);
+				break;
+			
+		}
+		
+		return {x, y, offset};
+	}
+	
+	show(origin, position){
+		var x, y, parentEl, parentOffset, coords;
+		
+		if(this.destroyed || this.table.destroyed){
+			return this;
+		}
+		
+		if(origin instanceof HTMLElement){
+			parentEl = origin;
+			coords = this.elementPositionCoords(origin, position);
+			
+			parentOffset = coords.offset;
+			x = coords.x;
+			y = coords.y;
+			
+		}else if(typeof origin === "number"){
+			parentOffset = {top:0, left:0};
+			x = origin;
+			y = position;
+		}else{
+			coords = this.containerEventCoords(origin);
+			
+			x = coords.x;
+			y = coords.y;
+			
+			this.reversedX = false;
+		}
+		
+		this.element.style.top = y + "px";
+		this.element.style.left = x + "px";
+		
+		this.container.appendChild(this.element);
+		
+		if(typeof this.renderedCallback === "function"){
+			this.renderedCallback();
+		}
+		
+		this._fitToScreen(x, y, parentEl, parentOffset, position);
+		
+		this.visible = true;
+		
+		this.subscribe("table-destroy", this.destroyBinding);
+		
+		this.element.addEventListener("mousedown", (e) => {
+			e.stopPropagation();
+		});
+		
+		return this;
+	}
+	
+	_fitToScreen(x, y, parentEl, parentOffset, position){
+		var scrollTop = this.container === document.body ? document.documentElement.scrollTop : this.container.scrollTop;
+		
+		//move menu to start on right edge if it is too close to the edge of the screen
+		if((x + this.element.offsetWidth) >= this.container.offsetWidth || this.reversedX){
+			this.element.style.left = "";
+			
+			if(parentEl){
+				this.element.style.right = (this.container.offsetWidth - parentOffset.left) + "px";
+			}else{
+				this.element.style.right = (this.container.offsetWidth - x) + "px";
+			}
+			
+			this.reversedX = true;
+		}
+		
+		//move menu to start on bottom edge if it is too close to the edge of the screen
+		let offsetHeight = Math.max(this.container.offsetHeight, scrollTop ? this.container.scrollHeight : 0);
+		if((y + this.element.offsetHeight) > offsetHeight) {
+			if(parentEl){
+				switch(position){
+					case "bottom":
+						this.element.style.top = (parseInt(this.element.style.top) - this.element.offsetHeight - parentEl.offsetHeight - 1) + "px";
+						break;
+
+					default:
+						this.element.style.top = (parseInt(this.element.style.top) - this.element.offsetHeight + parentEl.offsetHeight + 1) + "px";
+				}
+
+			}else{
+				let menuHeight = this.element.offsetHeight;
+				if(menuHeight > offsetHeight){
+					this.element.style.top = "0px";
+					this.element.style.height = offsetHeight + "px";
+				}else{
+					let newTop = y - menuHeight;
+					if(newTop < 0){
+						newTop = offsetHeight - menuHeight;
+					}
+					this.element.style.top = newTop + "px";
+				}
+			}
+		}
+	}
+	
+	isVisible(){
+		return this.visible;
+	}
+	
+	hideOnBlur(callback){
+		this.blurable = true;
+		
+		if(this.visible){
+			setTimeout(() => {
+				if(this.visible){
+					this.table.rowManager.element.addEventListener("scroll", this.blurEvent);
+					this.subscribe("cell-editing", this.blurEvent);
+					document.body.addEventListener("click", this.blurEvent);
+					document.body.addEventListener("contextmenu", this.blurEvent);
+					document.body.addEventListener("mousedown", this.blurEvent);
+					window.addEventListener("resize", this.blurEvent);
+					document.body.addEventListener("keydown", this.escEvent);
+
+					this.blurEventsBound = true;
+				}
+			}, 100);
+			
+			this.blurCallback = callback;
+		}
+		
+		return this;
+	}
+	
+	/** @param {KeyboardEvent} e */
+	_escapeCheck(e){
+		if(e.key == 27){
+			this.hide();
+		}
+	}
+	
+	blockHide(){
+		this.hideable = false;
+	}
+	
+	restoreHide(){
+		this.hideable = true;
+	}
+	
+	hide(silent = false){
+		if(this.visible && this.hideable){
+			if(this.blurable && this.blurEventsBound){
+				document.body.removeEventListener("keydown", this.escEvent);
+				document.body.removeEventListener("click", this.blurEvent);
+				document.body.removeEventListener("contextmenu", this.blurEvent);
+				document.body.removeEventListener("mousedown", this.blurEvent);
+				window.removeEventListener("resize", this.blurEvent);
+				this.table.rowManager.element.removeEventListener("scroll", this.blurEvent);
+				this.unsubscribe("cell-editing", this.blurEvent);
+
+				this.blurEventsBound = false;
+			}
+			
+			if(this.childPopup){
+				this.childPopup.hide();
+			}
+			
+			if(this.parent){
+				this.parent.childPopup = null;
+			}
+			
+			if(this.element.parentNode){
+				this.element.parentNode.removeChild(this.element);
+			}
+			
+			this.visible = false;
+			
+			if(this.blurCallback && !silent){
+				this.blurCallback();
+			}
+			
+			this.unsubscribe("table-destroy", this.destroyBinding);
+		}
+		
+		return this;
+	}
+	
+	child(element){
+		if(this.childPopup){
+			this.childPopup.hide();
+		}
+		
+		this.childPopup = new Popup(this.table, element, this);
+		
+		return this.childPopup;
+	}
+}

package/src/js/core/tools/TableRegistry.js

@@ -0,0 +1,65 @@
+export default class TableRegistry {
+	static registry = {
+		tables:[],
+		
+		register(table){
+			TableRegistry.registry.tables.push(table);
+		},
+		
+		deregister(table){
+			var index = TableRegistry.registry.tables.indexOf(table);
+			
+			if(index > -1){
+				TableRegistry.registry.tables.splice(index, 1);
+			}
+		},
+		
+		lookupTable(query, silent){
+			var results = [],
+			matches, match;
+			
+			if(typeof query === "string"){
+				matches = document.querySelectorAll(query);
+				
+				if(matches.length){
+					for(var i = 0; i < matches.length; i++){
+						match = TableRegistry.registry.matchElement(matches[i]);
+						
+						if(match){
+							results.push(match);
+						}
+					}
+				}
+				
+			}else if((typeof HTMLElement !== "undefined" && query instanceof HTMLElement) || query instanceof TableRegistry){
+				match = TableRegistry.registry.matchElement(query);
+				
+				if(match){
+					results.push(match);
+				}
+			}else if(Array.isArray(query)){
+				query.forEach(function(item){
+					results = results.concat(TableRegistry.registry.lookupTable(item));
+				});
+			}else{
+				if(!silent){
+					console.warn("Table Connection Error - Invalid Selector", query);
+				}
+			}
+			
+			return results;
+		},
+		
+		matchElement(element){
+			return TableRegistry.registry.tables.find(function(table){
+				return element instanceof TableRegistry ? table === element : table.element === element;
+			});
+		}
+	};
+
+		
+	static findTable(query){
+		var results = TableRegistry.registry.lookupTable(query, true);
+		return Array.isArray(results) && !results.length ? false : results;
+	}
+}

package/src/js/modules/Accessor/Accessor.js

@@ -0,0 +1,115 @@
+import Module from '../../core/Module.js';
+import Helpers from '../../core/tools/Helpers.js';
+
+import defaultAccessors from './defaults/accessors.js';
+
+export default class Accessor extends Module{
+	
+	static moduleName = "accessor";
+
+	//load defaults
+	static accessors = defaultAccessors;
+
+	constructor(table){
+		super(table);
+
+		this.allowedTypes = ["", "data", "download", "clipboard", "print", "htmlOutput"]; //list of accessor types
+
+		this.registerColumnOption("accessor");
+		this.registerColumnOption("accessorParams");
+		this.registerColumnOption("accessorData");
+		this.registerColumnOption("accessorDataParams");
+		this.registerColumnOption("accessorDownload");
+		this.registerColumnOption("accessorDownloadParams");
+		this.registerColumnOption("accessorClipboard");
+		this.registerColumnOption("accessorClipboardParams");
+		this.registerColumnOption("accessorPrint");
+		this.registerColumnOption("accessorPrintParams");
+		this.registerColumnOption("accessorHtmlOutput");
+		this.registerColumnOption("accessorHtmlOutputParams");
+	}
+
+	initialize(){
+		this.subscribe("column-layout", this.initializeColumn.bind(this));
+		this.subscribe("row-data-retrieve", this.transformRow.bind(this));
+	}
+
+	//initialize column accessor
+	initializeColumn(column){
+		var match = false,
+		config = {};
+
+		this.allowedTypes.forEach((type) => {
+			var key = "accessor" + (type.charAt(0).toUpperCase() + type.slice(1)),
+			accessor;
+
+			if(column.definition[key]){
+				accessor = this.lookupAccessor(column.definition[key]);
+
+				if(accessor){
+					match = true;
+
+					config[key] = {
+						accessor:accessor,
+						params: column.definition[key + "Params"] || {},
+					};
+				}
+			}
+		});
+
+		if(match){
+			column.modules.accessor = config;
+		}
+	}
+
+	lookupAccessor(value){
+		var accessor = false;
+
+		//set column accessor
+		switch(typeof value){
+			case "string":
+				if(Accessor.accessors[value]){
+					accessor = Accessor.accessors[value];
+				}else{
+					console.warn("Accessor Error - No such accessor found, ignoring: ", value);
+				}
+				break;
+
+			case "function":
+				accessor = value;
+				break;
+		}
+
+		return accessor;
+	}
+
+	//apply accessor to row
+	transformRow(row, type){
+		var key = "accessor" + (type.charAt(0).toUpperCase() + type.slice(1)),
+		rowComponent = row.getComponent();
+
+		//clone data object with deep copy to isolate internal data from returned result
+		var data = Helpers.deepClone(row.data || {});
+
+		this.table.columnManager.traverse(function(column){
+			var value, accessor, params, colComponent;
+
+			if(column.modules.accessor){
+
+				accessor = column.modules.accessor[key] || column.modules.accessor.accessor || false;
+
+				if(accessor){
+					value = column.getFieldValue(data);
+
+					if(value != "undefined"){
+						colComponent = column.getComponent();
+						params = typeof accessor.params === "function" ? accessor.params(value, data, type, colComponent, rowComponent) : accessor.params;
+						column.setFieldValue(data, accessor.accessor(value, data, type, params, colComponent, rowComponent));
+					}
+				}
+			}
+		});
+
+		return data;
+	}
+}

package/src/js/modules/Accessor/defaults/accessors.js

@@ -0,0 +1,5 @@
+export default {
+	rownum:function(value, data, type, params, column, row){
+		return row.getPosition();
+	}
+};

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

@@ -0,0 +1,142 @@
+import Module from '../../core/Module.js';
+
+import defaultConfig from './defaults/config.js';
+import defaultURLGenerator from './defaults/urlGenerator.js';
+import defaultLoaderPromise from './defaults/loaderPromise.js';
+import defaultContentTypeFormatters from './defaults/contentTypeFormatters.js';
+
+export default class Ajax extends Module{
+
+	static moduleName = "ajax";
+
+	//load defaults
+	static defaultConfig = defaultConfig;
+	static defaultURLGenerator = defaultURLGenerator;
+	static defaultLoaderPromise = defaultLoaderPromise;
+	static contentTypeFormatters = defaultContentTypeFormatters;
+	
+	constructor(table){
+		super(table);
+		
+		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.ajaxURL){
+			this.setUrl(this.table.options.ajaxURL);
+		}
+
+
+		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(Object.assign({}, ajaxParams), params);
+		}		
+		
+		return params;
+	}
+	
+	requestDataCheck(data, params, config, silent){
+		return !!((!data && this.url) || typeof data === "string");
+	}
+	
+	requestData(url, params, config, silent, previousData){
+		var ajaxConfig;
+		
+		if(!previousData && this.requestDataCheck(url)){
+			if(url){
+				this.setUrl(url);
+			}
+			
+			ajaxConfig = this.generateConfig(config);
+			
+			return this.sendRequest(this.url, params, ajaxConfig);
+		}else{
+			return previousData;
+		}
+	}
+	
+	setDefaultConfig(config = {}){
+		this.config = Object.assign({}, Ajax.defaultConfig);
+
+		if(typeof config == "string"){
+			this.config.method = config;
+		}else{
+			Object.assign(this.config, config);
+		}
+	}
+	
+	//load config object
+	generateConfig(config = {}){
+		var ajaxConfig = Object.assign({}, this.config);
+		
+		if(typeof config == "string"){
+			ajaxConfig.method = config;
+		}else{
+			Object.assign(ajaxConfig, config);
+		}
+		
+		return ajaxConfig;
+	}
+	
+	//set request url
+	setUrl(url){
+		this.url = url;
+	}
+	
+	//get request url
+	getUrl(){
+		return this.url;
+	}
+	
+	//send ajax request
+	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, url, params, data);
+					}
+				
+					return data;
+				});
+		}else{
+			return Promise.reject();
+		}
+	}
+}

package/src/js/modules/Ajax/defaults/config.js

@@ -0,0 +1,3 @@
+export default {
+	method: "GET",
+};

package/src/js/modules/Ajax/defaults/contentTypeFormatters.js

@@ -0,0 +1,45 @@
+function generateParamsList(data, prefix){
+	var output = [];
+
+	prefix = prefix || "";
+
+	if(Array.isArray(data)){
+		data.forEach((item, i) => {
+			output = output.concat(generateParamsList(item, prefix ? prefix + "[" + i + "]" : i));
+		});
+	}else if (typeof data === "object"){
+		for (var key in data){
+			output = output.concat(generateParamsList(data[key], prefix ? prefix + "[" + key + "]" : key));
+		}
+	}else{
+		output.push({key:prefix, value:data});
+	}
+
+	return output;
+}
+
+export default {
+	"json":{
+		headers:{
+			'Content-Type': 'application/json',
+		},
+		body:function(url, config, params){
+			return JSON.stringify(params);
+		},
+	},
+	"form":{
+		headers:{
+		},
+		body:function(url, config, params){
+
+			var output = generateParamsList(params),
+			form = new FormData();
+
+			output.forEach(function(item){
+				form.append(item.key, item.value);
+			});
+
+			return form;
+		},
+	},
+};