tabulator-tables 5.0.8 → 5.1.1

package/src/js/modules/Import/defaults/importers/csv.js

@@ -0,0 +1,63 @@
+function csvImporter(input){
+    var data = [],
+    row = 0, 
+    col = 0,
+    inQuote = false;
+    
+    //Iterate over each character
+    for (let index = 0; index < input.length; index++) {
+        let char = input[index], 
+        nextChar = input[index+1];      
+        
+        //Initialize empty row
+        if(!data[row]){
+            data[row] = [];
+        }
+
+        //Initialize empty column
+        if(!data[row][col]){
+            data[row][col] = "";
+        }
+        
+        //Handle quotation mark inside string
+        if (char == '"' && inQuote && nextChar == '"') { 
+            data[row][col] += char; 
+            index++;
+            continue; 
+        }
+        
+        //Begin / End Quote
+        if (char == '"') { 
+            inQuote = !inQuote;
+            continue;
+        }
+        
+        //Next column (if not in quote)
+        if (char == ',' && !inQuote) { 
+            col++;
+            continue; 
+        }
+        
+        //New row if new line and not in quote (CRLF) 
+        if (char == '\r' && nextChar == '\n' && !inQuote) { 
+            col = 0; 
+            row++; 
+            index++; 
+            continue; 
+        }
+        
+        //New row if new line and not in quote (CR or LF) 
+        if ((char == '\r' || char == '\n') && !inQuote) { 
+            col = 0;
+            row++;
+            continue; 
+        }
+
+        //Normal Character, append to column
+        data[row][col] += char;
+    }
+
+    return data;
+}
+
+export default csvImporter;

package/src/js/modules/Import/defaults/importers/json.js

@@ -0,0 +1,8 @@
+export default function(input){
+    try {
+        return JSON.parse(input);
+    } catch(e) {
+        console.warn("JSON Import Error - File contents is invalid JSON", e);
+        return Promise.reject();
+    }
+}

package/src/js/modules/Import/defaults/importers.js

@@ -0,0 +1,7 @@
+import csv from './importers/csv.js';
+import json from './importers/json.js';
+
+export default {
+	csv:csv,
+	json:json,
+};

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

@@ -84,6 +84,11 @@ class Interaction extends Module{
 				tap:null,
 				tapDbl:null,
 				tapHold:null,
+			},
+			group:{
+				tap:null,
+				tapDbl:null,
+				tapHold:null,
 			}
 		}
 

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

@@ -13,7 +13,7 @@ class Keybindings extends Module{
 		this.keyupBinding = false;
 		this.keydownBinding = false;
 
-		this.registerTableOption("keybindings", []); //array for keybindings
+		this.registerTableOption("keybindings", {}); //array for keybindings
 		this.registerTableOption("tabEndNewRow", false); //create new row when tab to end of table
 	}
 
@@ -25,17 +25,8 @@ class Keybindings extends Module{
 		this.pressedKeys = [];
 
 		if(bindings !== false){
-
-			for(let key in Keybindings.bindings){
-				mergedBindings[key] = Keybindings.bindings[key];
-			}
-
-			if(Object.keys(bindings).length){
-
-				for(let key in bindings){
-					mergedBindings[key] = bindings[key];
-				}
-			}
+			Object.assign(mergedBindings, Keybindings.bindings)
+			Object.assign(mergedBindings, bindings)
 
 			this.mapBindings(mergedBindings);
 			this.bindEvents();
@@ -53,7 +44,11 @@ class Keybindings extends Module{
 					}
 
 					bindings[key].forEach((binding) => {
-						this.mapBinding(key, binding);
+						var bindingList = Array.isArray(binding) ?  binding : [binding];
+						
+						bindingList.forEach((item) => {
+							this.mapBinding(key, item);
+						});						
 					});
 				}
 			}else{
@@ -88,7 +83,7 @@ class Keybindings extends Module{
 				break;
 
 				default:
-				symbol = parseInt(symbol);
+				symbol = isNaN(symbol) ? symbol.toUpperCase().charCodeAt(0) : parseInt(symbol);
 				binding.keys.push(symbol);
 
 				if(!this.watchKeys[symbol]){

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

@@ -7,7 +7,7 @@ export default {
 	scrollPageDown:34,
 	scrollToStart:36,
 	scrollToEnd:35,
-	undo:"ctrl + 90",
-	redo:"ctrl + 89",
-	copyToClipboard:"ctrl + 67",
+	undo:["ctrl + 90", "meta + 90"],
+	redo:["ctrl + 89", "meta + 89"],
+	copyToClipboard:["ctrl + 67", "meta + 89"],
 };

package/src/js/modules/Localize/defaults/langs.js

@@ -22,6 +22,12 @@ export default {
 			"next":"Next",
 			"next_title":"Next Page",
 			"all":"All",
+			"counter":{
+				"showing": "Showing",
+				"of": "of",
+				"rows": "rows",
+				"pages": "pages",
+			}
 		},
 		"headerFilters":{
 			"default":"filter column...",

package/src/js/modules/Menu/Menu.js

@@ -2,164 +2,194 @@ import Module from '../../core/Module.js';
 import Helpers from '../../core/tools/Helpers.js';
 
 class Menu extends Module{
-
+	
 	constructor(table){
 		super(table);
-
+		
+		this.menuContainer = null;
 		this.menuElements = [];
 		this.blurEvent = this.hideMenu.bind(this);
 		this.escEvent = this.escMenu.bind(this);
 		this.nestedMenuBlock = false;
 		this.positionReversedX = false;
-
+		
+		this.currentComponent = null;
+		
+		this.columnSubscribers = {};
+		
 		this.registerTableOption("rowContextMenu", false);
 		this.registerTableOption("rowClickMenu", false);
 		this.registerTableOption("groupContextMenu", false);
 		this.registerTableOption("groupClickMenu", false);
-
+		this.registerTableOption("menuContainer", false);
+		
 		this.registerColumnOption("headerContextMenu");
+		this.registerColumnOption("headerClickMenu");
 		this.registerColumnOption("headerMenu");
 		this.registerColumnOption("contextMenu");
 		this.registerColumnOption("clickMenu");
 	}
-
+	
 	initialize(){
-		this.subscribe("cell-layout", this.layoutCell.bind(this));
+		this.lookupMenuContainer();
+		
+		this.initializeRowWatchers();
+		this.initializeGroupWatchers();
+		
 		this.subscribe("column-init", this.initializeColumn.bind(this));
-		this.subscribe("row-init", this.initializeRow.bind(this));
 	}
-
-	layoutCell(cell){
-		if(cell.column.definition.contextMenu || cell.column.definition.clickMenu){
-			this.initializeCell(cell);
+	
+	lookupMenuContainer(){
+		
+		this.menuContainer = this.table.options.menuContainer;
+		
+		if(typeof this.menuContainer === "string"){
+			this.menuContainer = document.querySelector(this.menuContainer);
+			
+			if(!this.menuContainer){
+				console.warn("Menu Error - no container element found matching selector:",  this.table.options.menuContainer , "(defaulting to document body)");
+			}
+		}else if (this.menuContainer === true){
+			this.menuContainer = this.table.element;
+		}
+		
+		if(this.menuContainer && !this.checkMenuContainerIsParent(this.menuContainer)){
+			this.menuContainer = false;
+			console.warn("Menu Error - container element does not contain this table:",  this.table.options.menuContainer , "(defaulting to document body)");
+		}
+		
+		if(!this.menuContainer){
+			this.menuContainer = document.body;
 		}
 	}
-
-	initializeColumn(column){
-		var def = column.definition;
-
-		if(def.headerContextMenu || def.headerClickMenu || def.headerMenu){
-			this.initializeColumnHeader(column);
+	
+	checkMenuContainerIsParent(container, element = this.table.element){
+		if(container === element){
+			return true;
+		}else{
+			return element.parentNode ? this.checkMenuContainerIsParent(container, element.parentNode) : false;
 		}
 	}
-
-	initializeColumnHeader(column){
-		var headerMenuEl;
-
-		if(column.definition.headerContextMenu){
-			column.getElement().addEventListener("contextmenu", this.LoadMenuEvent.bind(this, column, column.definition.headerContextMenu));
-			this.tapHold(column, column.definition.headerContextMenu);
+	
+	initializeRowWatchers(){
+		if(this.table.options.rowContextMenu){
+			this.subscribe("row-contextmenu", this.loadMenuEvent.bind(this, this.table.options.rowContextMenu));
+			this.table.on("rowTapHold", this.loadMenuEvent.bind(this, this.table.options.rowContextMenu));
 		}
-
-		// if(column.definition.headerClickMenu){
-		// 	column.getElement().addEventListener("click", this.LoadMenuEvent.bind(this, column, column.definition.headerClickMenu));
-		// }
-
-		if(column.definition.headerMenu){
-
-			headerMenuEl = document.createElement("span");
-			headerMenuEl.classList.add("tabulator-header-menu-button");
-			headerMenuEl.innerHTML = "⋮";
-
-			headerMenuEl.addEventListener("click", (e) => {
-				e.stopPropagation();
-				e.preventDefault();
-
-				this.LoadMenuEvent(column, column.definition.headerMenu, e);
-			});
-
-			column.titleElement.insertBefore(headerMenuEl, column.titleElement.firstChild);
+		
+		if(this.table.options.rowClickMenu){
+			this.subscribe("row-click", this.loadMenuEvent.bind(this, this.table.options.rowClickMenu));
 		}
 	}
-
-	LoadMenuEvent(component, menu, e){
-		menu = typeof menu == "function" ? menu.call(this.table, component.getComponent(), e) : menu;
-
-		// if(component instanceof Cell){
-		// 	e.stopImmediatePropagation();
-		// }
-
-		this.loadMenu(e, component, menu);
+	
+	initializeGroupWatchers(){
+		if(this.table.options.groupContextMenu){
+			this.subscribe("group-contextmenu", this.loadMenuEvent.bind(this, this.table.options.groupContextMenu));
+			this.table.on("groupTapHold", this.loadMenuEvent.bind(this, this.table.options.groupContextMenu));
+		}
+		
+		if(this.table.options.groupClickMenu){
+			this.subscribe("group-click", this.loadMenuEvent.bind(this, this.table.options.groupClickMenu));
+		}
 	}
-
-	tapHold(component, menu){
-		var element = component.getElement(),
-		tapHold = null,
-		loaded = false;
-
-		element.addEventListener("touchstart", (e) => {
-			clearTimeout(tapHold);
-			loaded = false;
-
-			tapHold = setTimeout(() => {
-				clearTimeout(tapHold);
-				tapHold = null;
-				loaded = true;
-
-				this.LoadMenuEvent(component, menu, e);
-			}, 1000);
-
-		}, {passive: true});
-
-		element.addEventListener("touchend", (e) => {
-			clearTimeout(tapHold);
-			tapHold = null;
-
-			if(loaded){
-				e.preventDefault();
-			}
+	
+	initializeColumn(column){
+		var options = ["headerContextMenu", "headerClickMenu"],
+		def = column.definition;
+		
+		//handle column events
+		if(def.headerContextMenu && !this.columnSubscribers.headerContextMenu){
+			this.columnSubscribers.headerContextMenu = this.loadMenuTableColumnEvent.bind(this, "headerContextMenu");
+			this.subscribe("column-contextmenu", this.columnSubscribers.headerContextMenu);
+			this.table.on("headerTapHold", this.loadMenuTableColumnEvent.bind(this, "headerContextMenu"))
+		}
+		
+		if(def.headerClickMenu && !this.columnSubscribers.headerClickMenu){
+			this.columnSubscribers.headerClickMenu = this.loadMenuTableColumnEvent.bind(this, "headerClickMenu");
+			this.subscribe("column-click", this.columnSubscribers.headerClickMenu);
+		}
+		
+		if(def.headerMenu){
+			this.initializeColumnHeaderMenu(column);
+		}
+		
+		//handle cell events
+		if(def.contextMenu && !this.columnSubscribers.contextMenu){
+			this.columnSubscribers.contextMenu = this.loadMenuTableCellEvent.bind(this, "contextMenu");
+			this.subscribe("cell-contextmenu", this.columnSubscribers.contextMenu);
+			this.table.on("cellTapHold", this.loadMenuTableCellEvent.bind(this, "contextMenu"))
+		}
+		
+		if(def.clickMenu && !this.columnSubscribers.clickMenu){
+			this.columnSubscribers.clickMenu = this.loadMenuTableCellEvent.bind(this, "clickMenu");
+			this.subscribe("cell-click", this.columnSubscribers.clickMenu);
+		}
+	}
+	
+	initializeColumnHeaderMenu(column){
+		var headerMenuEl;
+		
+		headerMenuEl = document.createElement("span");
+		headerMenuEl.classList.add("tabulator-header-menu-button");
+		headerMenuEl.innerHTML = "⋮";
+		
+		headerMenuEl.addEventListener("click", (e) => {
+			e.stopPropagation();
+			e.preventDefault();
+			
+			this.loadMenuEvent(column.definition.headerMenu, e, column);
 		});
+		
+		column.titleElement.insertBefore(headerMenuEl, column.titleElement.firstChild);
 	}
-
-	initializeCell(cell){
-		if(cell.column.definition.contextMenu){
-			cell.getElement(true).addEventListener("contextmenu", this.LoadMenuEvent.bind(this, cell, cell.column.definition.contextMenu));
-			this.tapHold(cell, cell.column.definition.contextMenu);
+	
+	loadMenuTableCellEvent(option, e, cell){
+		if(cell._cell){
+			cell = cell._cell;
 		}
-
-		if(cell.column.definition.clickMenu){
-			cell.getElement(true).addEventListener("click", this.LoadMenuEvent.bind(this, cell, cell.column.definition.clickMenu));
+		
+		if(cell.column.definition[option]){
+			this.loadMenuEvent(cell.column.definition[option], e, cell);
 		}
 	}
-
-	initializeRow(row){
-		if(this.table.options.rowContextMenu){
-			row.getElement().addEventListener("contextmenu", this.LoadMenuEvent.bind(this, row, this.table.options.rowContextMenu));
-			this.tapHold(row, this.table.options.rowContextMenu);
+	
+	loadMenuTableColumnEvent(option, e, column){
+		if(column._column){
+			column = column._column;
 		}
-
-		if(this.table.options.rowClickMenu){
-			row.getElement().addEventListener("click", this.LoadMenuEvent.bind(this, row, this.table.options.rowClickMenu));
+		
+		if(column.definition[option]){
+			this.loadMenuEvent(column.definition[option], e, column);
 		}
 	}
-
-	initializeGroup (group){
-		if(this.table.options.groupContextMenu){
-			group.getElement().addEventListener("contextmenu", this.LoadMenuEvent.bind(this, group, this.table.options.groupContextMenu));
-			this.tapHold(group, this.table.options.groupContextMenu);
-		}
-
-		if(this.table.options.groupClickMenu){
-			group.getElement().addEventListener("click", this.LoadMenuEvent.bind(this, group, this.table.options.groupClickMenu));
+	
+	loadMenuEvent(menu, e, component){
+		if(component._group){
+			component = component._group;
+		}else if(component._row){
+			component = component._row;
 		}
+		
+		menu = typeof menu == "function" ? menu.call(this.table, component.getComponent(), e) : menu;
+		
+		this.loadMenu(e, component, menu);
 	}
-
+	
 	loadMenu(e, component, menu, parentEl){
-
 		var touch = !(e instanceof MouseEvent);
-
+		
 		var menuEl = document.createElement("div");
 		menuEl.classList.add("tabulator-menu");
-
+		
 		if(!touch){
 			e.preventDefault();
 		}
-
+		
 		//abort if no menu set
 		if(!menu || !menu.length){
 			return;
 		}
-
+		
 		if(!parentEl){
 			if(this.nestedMenuBlock){
 				//abort if child menu already open
@@ -171,35 +201,35 @@ class Menu extends Module{
 					this.nestedMenuBlock = false;
 				}, 100)
 			}
-
+			
 			this.hideMenu();
 			this.menuElements = [];
 		}
-
+		
 		menu.forEach((item) => {
 			var itemEl = document.createElement("div"),
 			label = item.label,
 			disabled = item.disabled;
-
+			
 			if(item.separator){
 				itemEl.classList.add("tabulator-menu-separator");
 			}else{
 				itemEl.classList.add("tabulator-menu-item");
-
+				
 				if(typeof label == "function"){
 					label = label.call(this.table, component.getComponent());
 				}
-
+				
 				if(label instanceof Node){
 					itemEl.appendChild(label);
 				}else{
 					itemEl.innerHTML = label;
 				}
-
+				
 				if(typeof disabled == "function"){
 					disabled = disabled.call(this.table, component.getComponent());
 				}
-
+				
 				if(disabled){
 					itemEl.classList.add("tabulator-menu-item-disabled");
 					itemEl.addEventListener("click", (e) => {
@@ -220,57 +250,67 @@ class Menu extends Module{
 						}
 					}
 				}
-
+				
 				if(item.menu && item.menu.length){
 					itemEl.classList.add("tabulator-menu-item-submenu");
 				}
 			}
-
+			
 			menuEl.appendChild(itemEl);
 		});
-
+		
 		menuEl.addEventListener("click", (e) => {
 			this.hideMenu();
 		});
-
+		
 		this.menuElements.push(menuEl);
 		this.positionMenu(menuEl, parentEl, touch, e);
+		
+		this.currentComponent = component
+		
+		this.dispatchExternal("menuOpened", component.getComponent())
 	}
-
+	
 	hideOldSubMenus(menuEl){
 		var index = this.menuElements.indexOf(menuEl);
-
+		
 		if(index > -1){
 			for(let i = this.menuElements.length - 1; i > index; i--){
 				var el = this.menuElements[i];
-
+				
 				if(el.parentNode){
 					el.parentNode.removeChild(el);
 				}
-
+				
 				this.menuElements.pop();
 			}
 		}
 	}
-
+	
 	positionMenu(element, parentEl, touch, e){
-		var docHeight = Math.max(document.body.offsetHeight, window.innerHeight),
-		x, y, parentOffset;
-
+		var x, y, parentOffset;
+		
 		if(!parentEl){
 			x = touch ? e.touches[0].pageX : e.pageX;
 			y = touch ? e.touches[0].pageY : e.pageY;
-
+			
+			if(this.menuContainer !== document.body){
+				parentOffset = Helpers.elOffset(this.menuContainer);
+				
+				x -= parentOffset.left;
+				y -= parentOffset.top;
+			}
+			
 			this.positionReversedX = false;
 		}else{
 			parentOffset = Helpers.elOffset(parentEl);
 			x = parentOffset.left + parentEl.offsetWidth;
 			y = parentOffset.top - 1;
 		}
-
+		
 		element.style.top = y + "px";
 		element.style.left = x + "px";
-
+		
 		setTimeout(() => {
 			this.table.rowManager.element.addEventListener("scroll", this.blurEvent);
 			document.body.addEventListener("click", this.blurEvent);
@@ -278,56 +318,61 @@ class Menu extends Module{
 			window.addEventListener("resize", this.blurEvent);
 			document.body.addEventListener("keydown", this.escEvent);
 		}, 100);
-
-		document.body.appendChild(element);
-
-		//move menu to start on bottom edge if it is too close to the edge of the screen
-		if((y + element.offsetHeight) >= docHeight){
-			element.style.top = "";
-
+		
+		this.menuContainer.appendChild(element);
+		
+		//move menu to start on right edge if it is too close to the edge of the screen
+		if((x + element.offsetWidth) >= this.menuContainer.offsetWidth || this.positionReversedX){
+			element.style.left = "";
+			
 			if(parentEl){
-				element.style.bottom = (docHeight - parentOffset.top - parentEl.offsetHeight - 1) + "px";
+				element.style.right = (this.menuContainer.offsetWidth - parentOffset.left) + "px";
 			}else{
-				element.style.bottom = (docHeight - y) + "px";
+				element.style.right = (this.menuContainer.offsetWidth - x) + "px";
 			}
+			
+			this.positionReversedX = true;
 		}
-
-		//move menu to start on right edge if it is too close to the edge of the screen
-		if((x + element.offsetWidth) >= document.body.offsetWidth || this.positionReversedX){
-			element.style.left = "";
-
+		
+		//move menu to start on bottom edge if it is too close to the edge of the screen
+		if((y + element.offsetHeight) >= this.menuContainer.offsetHeight){
+			element.style.top = "";
+			
 			if(parentEl){
-				element.style.right = (document.documentElement.offsetWidth - parentOffset.left) + "px";
+				element.style.bottom = (this.menuContainer.offsetHeight - parentOffset.top - parentEl.offsetHeight - 1) + "px";
 			}else{
-				element.style.right = (document.documentElement.offsetWidth - x) + "px";
+				element.style.bottom = (this.menuContainer.offsetHeight - y) + "px";
 			}
-
-			this.positionReversedX = true;
 		}
 	}
-
+	
 	isOpen(){
 		return !!this.menuElements.length;
 	}
-
+	
 	escMenu(e){
 		if(e.keyCode == 27){
 			this.hideMenu();
 		}
 	}
-
-	hideMenu(){
+	
+	hideMenu(){	
 		this.menuElements.forEach((menuEl) => {
 			if(menuEl.parentNode){
 				menuEl.parentNode.removeChild(menuEl);
 			}
 		});
-
+		
 		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);
+		
+		if(this.currentComponent){
+			this.dispatchExternal("menuClosed", this.currentComponent.getComponent());
+			this.currentComponent = null;
+		}
 	}
 }