tabulator-tables 5.1.7 → 5.2.1

package/src/js/core/tools/DataLoader.js

@@ -4,55 +4,11 @@ export default class DataLoader extends CoreFeature{
 	constructor(table){
 		super(table);
 
-		this.loaderElement = this.createLoaderElement(); //loader message div
-		this.msgElement = this.createMsgElement(); //message element
-		this.loadingElement = null;
-		this.errorElement = null;
-
-		this.requestOrder = 0; //prevent requests comming out of sequence if overridden by another load request
+		this.requestOrder = 0; //prevent requests coming out of sequence if overridden by another load request
 		this.loading = false;
 	}
 
-	initialize(){
-		var template;
-
-		this.loaderElement.appendChild(this.msgElement);
-
-		if(this.table.options.dataLoaderLoading){
-			if(typeof this.table.options.dataLoaderLoading == "string"){
-				template = document.createElement('template');
-				template.innerHTML = this.table.options.dataLoaderLoading.trim();
-				this.loadingElement = template.firstElementChild;
-			}else{
-				this.loadingElement = this.table.options.dataLoaderLoading;
-			}
-		}
-
-		if(this.table.options.dataLoaderError){
-			if(typeof this.table.options.dataLoaderError == "string"){
-				template = document.createElement('template');
-				template.innerHTML = this.table.options.dataLoaderError.trim();
-				this.errorElement = template.firstElementChild;
-			}else{
-				this.errorElement = this.table.options.dataLoaderError;
-			}
-		}
-	}
-
-	createLoaderElement(){
-		var el = document.createElement("div");
-		el.classList.add("tabulator-loader");
-		return el;
-	}
-
-	createMsgElement(){
-		var el = document.createElement("div");
-
-		el.classList.add("tabulator-loader-msg");
-		el.setAttribute("role", "alert");
-
-		return el;
-	}
+	initialize(){}
 
 	load(data, params, config, replace, silent){
 		var requestNo = ++this.requestOrder;
@@ -68,7 +24,7 @@ export default class DataLoader extends CoreFeature{
 			this.loading = true;
 
 			if(!silent){
-				this.showLoader();
+				this.alertLoader();
 			}
 
 			//get params for request
@@ -86,7 +42,7 @@ export default class DataLoader extends CoreFeature{
 				var rowData = this.chain("data-loaded", response, null, response);
 
 				if(requestNo == this.requestOrder){
-					this.hideLoader();
+					this.clearAlert();
 
 					if(rowData !== false){
 						this.dispatchExternal("dataLoaded", rowData);
@@ -100,11 +56,11 @@ export default class DataLoader extends CoreFeature{
 				this.dispatchExternal("dataLoadError", error);
 
 				if(!silent){
-					this.showError();
+					this.alertError();
 				}
 				
 				setTimeout(() => {
-					this.hideLoader();
+					this.clearAlert();
 				}, this.table.options.dataLoaderErrorTimeout);
 			})
 			.finally(() => {
@@ -146,47 +102,19 @@ export default class DataLoader extends CoreFeature{
 		this.requestOrder++;
 	}
 
-	showLoader(){
+	alertLoader(){
 		var shouldLoad = typeof this.table.options.dataLoader === "function" ? this.table.options.dataLoader() : this.table.options.dataLoader;
 
 		if(shouldLoad){
-			this.hideLoader();
-
-			while(this.msgElement.firstChild) this.msgElement.removeChild(this.msgElement.firstChild);
-
-			this.msgElement.classList.remove("tabulator-error");
-			this.msgElement.classList.add("tabulator-loading");
-
-			if(this.loadingElement){
-				this.msgElement.appendChild(this.loadingElement);
-			}else{
-				this.msgElement.innerHTML = this.langText("data|loading");
-			}
-
-			this.table.element.appendChild(this.loaderElement);
+			this.table.alertManager.alert(this.table.options.dataLoaderLoading || this.langText("data|loading"));
 		}
 	}
 
-	showError(){
-		this.hideLoader();
-
-		while(this.msgElement.firstChild) this.msgElement.removeChild(this.msgElement.firstChild);
-		this.msgElement.classList.remove("tabulator-loading");
-		this.msgElement.classList.add("tabulator-error");
-
-		if(this.errorElement){
-			this.msgElement.appendChild(this.errorElement);
-		}else{
-			this.msgElement.innerHTML = this.langText("data|error");
-		}
-
-		this.table.element.appendChild(this.loaderElement);
+	alertError(){
+		this.table.alertManager.alert(this.table.options.dataLoaderError || this.langText("data|error"), "error");
 	}
 
-
-	hideLoader(){
-		if(this.loaderElement.parentNode){
-			this.loaderElement.parentNode.removeChild(this.loaderElement);
-		}
+	clearAlert(){
+		this.table.alertManager.clear();
 	}
 }

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

@@ -88,7 +88,7 @@ export default class InteractionManager extends CoreFeature {
 		if(this.pseudoTrackers[key].target !== target){
 			
 			if(this.pseudoTrackers[key].target){
-				this.dispatch(key + "-mouseleave", e, target);
+				this.dispatch(key + "-mouseleave", e, this.pseudoTrackers[key].target);
 			}
 			
 			this.pseudoMouseLeave(key, e);

package/src/js/core/tools/ModuleBinder.js

@@ -2,23 +2,23 @@ import * as coreModules from '../modules/core.js';
 import TableRegistry from './TableRegistry.js';
 
 export default class ModuleBinder {
-
+	
 	constructor(tabulator, modules){
 		this.bindStaticFuctionality(tabulator);
 		this.bindModules(tabulator, coreModules, true);
-
+		
 		if(modules){
 			this.bindModules(tabulator, modules);
 		}
 	}
-
+	
 	bindStaticFuctionality(tabulator){
 		tabulator.moduleBindings = {};
-
+		
 		tabulator.extendModule = function(name, property, values){
 			if(tabulator.moduleBindings[name]){
 				var source = tabulator.moduleBindings[name][property];
-
+				
 				if(source){
 					if(typeof values == "object"){
 						for(let key in values){
@@ -34,65 +34,72 @@ export default class ModuleBinder {
 				console.warn("Module Error - module does not exist:", name);
 			}
 		};
-
+		
 		tabulator.registerModule = function(modules){
 			if(!Array.isArray(modules)){
 				modules = [modules];
 			}
-
+			
 			modules.forEach((mod) => {
 				tabulator.registerModuleBinding(mod)
 			});
 		}
-
+		
 		tabulator.registerModuleBinding = function(mod){
 			tabulator.moduleBindings[mod.moduleName] = mod;
 		};
-
+		
 		tabulator.findTable = function(query){
 			var results = TableRegistry.lookupTable(query, true);
 			return Array.isArray(results) && !results.length ? false : results;
 		}
-
+		
 		//ensure that module are bound to instantiated function
 		tabulator.prototype.bindModules = function(){
-			var orderedMods = [],
+			var orderedStartMods = [],
+			orderedEndMods = [],
 			unOrderedMods = [];
-
+			
 			this.modules = {};
-
+			
 			for(var name in tabulator.moduleBindings){
 				let mod = tabulator.moduleBindings[name];
 				let module = new mod(this);
-
+				
 				this.modules[name] = module;
-
+				
 				if(mod.prototype.moduleCore){
 					this.modulesCore.push(module);
 				}else{
 					if(mod.moduleInitOrder){
-						orderedMods.push(module);
+						if(mod.moduleInitOrder < 0){
+							orderedStartMods.push(module);
+						}else{
+							orderedEndMods.push(module);
+						}
+						
 					}else{
 						unOrderedMods.push(module);
 					}
 				}
 			}
-
-			orderedMods.sort((a, b) => a.moduleInitOrder > b.moduleInitOrder ? 1 : -1);
-
-			this.modulesRegular = orderedMods.concat(unOrderedMods);
+			
+			orderedStartMods.sort((a, b) => a.moduleInitOrder > b.moduleInitOrder ? 1 : -1);
+			orderedEndMods.sort((a, b) => a.moduleInitOrder > b.moduleInitOrder ? 1 : -1);
+			
+			this.modulesRegular = orderedStartMods.concat(unOrderedMods.concat(orderedEndMods));
 		}
 	}
-
+	
 	bindModules(tabulator, modules, core){
 		var mods = Object.values(modules);
-
+		
 		if(core){
 			mods.forEach((mod) => {
 				mod.prototype.moduleCore = true;
 			});
 		}
-
+		
 		tabulator.registerModule(mods);
 	}
 }

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

@@ -0,0 +1,251 @@
+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.renderedCallback = null;
+        
+        this.visible = false;
+        
+        this.element.classList.add("tabulator-popup-container");
+        
+        this.blurEvent = this.hide.bind(this, false);
+        this.escEvent = this._escapeCheck.bind(this);
+    }
+    
+    _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;
+        }
+        
+        return {x, y, offset};
+    }
+    
+    show(origin, position){
+        var x, y, parentEl, parentOffset, containerOffset, coords;
+        
+        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;
+        
+        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
+        if((y + this.element.offsetHeight) > Math.max(this.container.offsetHeight, scrollTop ? this.container.scrollHeight : 0)) {
+            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{
+                this.element.style.top = (parseInt(this.element.style.top) - this.element.offsetHeight) + "px";
+            }
+        }
+    }
+    
+    isVisible(){
+        return this.visible;
+    }
+    
+    hideOnBlur(callback){
+        this.blurable = true;
+        
+        if(this.visible){
+            setTimeout(() => {
+                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);
+                window.addEventListener("resize", this.blurEvent);
+                document.body.addEventListener("keydown", this.escEvent);
+            }, 100);
+            
+            this.blurCallback = callback;
+        }
+        
+        return this;
+    }
+    
+    _escapeCheck(e){
+        if(e.keyCode == 27){
+            this.hide();
+        }
+    }
+    
+    hide(silent = false){
+        if(this.visible){
+            if(this.blurable){
+                document.body.removeEventListener("keydown", this.escEvent);
+                document.body.removeEventListener("click", this.blurEvent);
+                document.body.removeEventListener("contextmenu", this.blurEvent);
+                window.removeEventListener("resize", this.blurEvent);
+                this.table.rowManager.element.removeEventListener("scroll", this.blurEvent);
+                this.unsubscribe("cell-editing", this.blurEvent);
+            }
+            
+            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();
+            }
+        }
+        
+        return this;
+    }
+    
+    child(element){
+        if(this.childPopup){
+            this.childPopup.hide();
+        }
+        
+        this.childPopup = new Popup(this.table, element, this);
+        
+        return this.childPopup;
+    }
+}

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

@@ -212,7 +212,7 @@ class ColumnCalcs extends Module{
 
 		if(this.botInitialized){
 			this.botInitialized = false;
-			this.table.footerManager.remove(this.botElement);
+			this.footerRemove(this.botElement);
 			changed = true;
 		}
 
@@ -230,7 +230,7 @@ class ColumnCalcs extends Module{
 
 	initializeBottomRow(){
 		if(!this.botInitialized){
-			this.table.footerManager.prepend(this.botElement);
+			this.footerPrepend(this.botElement);
 			this.botInitialized = true;
 		}
 	}

package/src/js/modules/Edit/Edit.js

@@ -404,13 +404,7 @@ class Edit extends Module{
 
 			cellEl = cell.getElement();
 
-			if(cancel){
-				if(cell.column.modules.validate && this.table.modExists("validate")){
-					this.table.modules.validate.cellValidate(cell);
-				}
-			}else{
-				cellEl.classList.remove("tabulator-validation-fail");
-			}
+			this.dispatch("edit-editor-clear", cell, cancel);
 
 			cellEl.classList.remove("tabulator-editing");
 
@@ -543,14 +537,10 @@ class Edit extends Module{
 			return;
 		}
 
-		//handle successfull value change
+		//handle successful value change
 		function success(value){
 			if(self.currentCell === cell){
-				var valid = true;
-
-				if(cell.column.modules.validate && self.table.modExists("validate") && self.table.options.validationMode != "manual"){
-					valid = self.table.modules.validate.validate(cell.column.modules.validate, cell, value);
-				}
+				var valid = self.chain("edit-success", [cell, value], true, true);
 
 				if(valid === true || self.table.options.validationMode === "highlight"){
 					self.clearEditor();
@@ -568,19 +558,11 @@ class Edit extends Module{
 
 					cell.setValue(value, true);
 
-					if(valid !== true){
-						element.classList.add("tabulator-validation-fail");
-						self.table.externalEvents.dispatch("validationFailed", cell.getComponent(), value, valid);
-						return false;
-					}
-
-					return true;
+					return valid === true;
 				}else{
 					self.invalidEdit = true;
-					element.classList.add("tabulator-validation-fail");
 					self.focusCellNoEvent(cell, true);
 					rendered();
-					self.table.externalEvents.dispatch("validationFailed", cell.getComponent(), value, valid);
 					return false;
 				}
 			}else{
@@ -638,6 +620,7 @@ class Edit extends Module{
 					cell.column.definition.cellEditing.call(this.table, component);
 				}
 
+				this.dispatch("cell-editing", cell);
 				this.dispatchExternal("cellEditing", component);
 
 				params = typeof cell.column.modules.edit.params === "function" ? cell.column.modules.edit.params(component) : cell.column.modules.edit.params;
@@ -704,9 +687,7 @@ class Edit extends Module{
 		if(cell.modules.edit && cell.modules.edit.edited){
 			cell.modules.edit.edited = false;
 
-			if(cell.modules.validate){
-				cell.modules.validate.invalid = false;
-			}
+			this.dispatch("edit-edited-clear", cell);
 		}
 
 		editIndex = this.editedCells.indexOf(cell);