tabulator-tables 6.5.0 → 6.5.1

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

@@ -0,0 +1,302 @@
+import Module from '../../core/Module.js';
+
+export default class Menu extends Module{
+
+	static moduleName = "menu";
+	
+	constructor(table){
+		super(table);
+		
+		this.menuContainer = null;
+		this.nestedMenuBlock = false;
+		
+		this.currentComponent = null;
+		this.rootPopup = null;
+		
+		this.columnSubscribers = {};
+		
+		// this.registerTableOption("menuContainer", undefined); //deprecated
+		
+		this.registerTableOption("rowContextMenu", false);
+		this.registerTableOption("rowClickMenu", false);
+		this.registerTableOption("rowDblClickMenu", false);
+		this.registerTableOption("groupContextMenu", false);
+		this.registerTableOption("groupClickMenu", false);
+		this.registerTableOption("groupDblClickMenu", false);
+		
+		this.registerColumnOption("headerContextMenu");
+		this.registerColumnOption("headerClickMenu");
+		this.registerColumnOption("headerDblClickMenu");
+		this.registerColumnOption("headerMenu");
+		this.registerColumnOption("headerMenuIcon");
+		this.registerColumnOption("contextMenu");
+		this.registerColumnOption("clickMenu");
+		this.registerColumnOption("dblClickMenu");
+		
+	}
+	
+	initialize(){
+		this.deprecatedOptionsCheck();
+		this.initializeRowWatchers();
+		this.initializeGroupWatchers();
+		
+		this.subscribe("column-init", this.initializeColumn.bind(this));
+	}
+	
+	deprecatedOptionsCheck(){
+		// if(!this.deprecationCheck("menuContainer", "popupContainer")){
+		// 	this.table.options.popupContainer = this.table.options.menuContainer;
+		// }
+	}	
+	
+	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(this.table.options.rowClickMenu){
+			this.subscribe("row-click", this.loadMenuEvent.bind(this, this.table.options.rowClickMenu));
+		}
+		
+		if(this.table.options.rowDblClickMenu){
+			this.subscribe("row-dblclick", this.loadMenuEvent.bind(this, this.table.options.rowDblClickMenu));
+		}
+	}
+	
+	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));
+		}
+		
+		if(this.table.options.groupDblClickMenu){
+			this.subscribe("group-dblclick", this.loadMenuEvent.bind(this, this.table.options.groupDblClickMenu));
+		}
+	}
+
+	initializeColumn(column){
+		var	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.headerDblClickMenu && !this.columnSubscribers.headerDblClickMenu){
+			this.columnSubscribers.headerDblClickMenu = this.loadMenuTableColumnEvent.bind(this, "headerDblClickMenu");
+			this.subscribe("column-dblclick", this.columnSubscribers.headerDblClickMenu);
+		}
+		
+		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);
+		}
+		
+		if(def.dblClickMenu && !this.columnSubscribers.dblClickMenu){
+			this.columnSubscribers.dblClickMenu = this.loadMenuTableCellEvent.bind(this, "dblClickMenu");
+			this.subscribe("cell-dblclick", this.columnSubscribers.dblClickMenu);
+		}
+	}
+	
+	initializeColumnHeaderMenu(column){
+		var icon = column.definition.headerMenuIcon,
+		headerMenuEl;
+		
+		headerMenuEl = document.createElement("span");
+		headerMenuEl.classList.add("tabulator-header-popup-button");
+		
+		if(icon){
+			if(typeof icon === "function"){
+				icon = icon(column.getComponent());
+			}
+			
+			if(icon instanceof HTMLElement){
+				headerMenuEl.appendChild(icon);
+			}else{
+				headerMenuEl.innerHTML = icon;
+			}
+		}else{
+			headerMenuEl.innerHTML = "⋮";
+		}
+		
+		headerMenuEl.addEventListener("click", (e) => {
+			e.stopPropagation();
+			e.preventDefault();
+			
+			this.loadMenuEvent(column.definition.headerMenu, e, column);
+		});
+		
+		column.titleElement.insertBefore(headerMenuEl, column.titleElement.firstChild);
+	}
+	
+	loadMenuTableCellEvent(option, e, cell){
+		if(cell._cell){
+			cell = cell._cell;
+		}
+		
+		if(cell.column.definition[option]){
+			this.loadMenuEvent(cell.column.definition[option], e, cell);
+		}
+	}
+	
+	loadMenuTableColumnEvent(option, e, column){
+		if(column._column){
+			column = column._column;
+		}
+		
+		if(column.definition[option]){
+			this.loadMenuEvent(column.definition[option], e, column);
+		}
+	}
+	
+	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, e, component.getComponent()) : menu;
+		
+		this.loadMenu(e, component, menu);
+	}
+	
+	loadMenu(e, component, menu, parentEl, parentPopup){
+		var touch = !(e instanceof MouseEvent),		
+		menuEl = document.createElement("div"),
+		popup;
+		
+		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
+				if(this.rootPopup){
+					return;
+				}
+			}else{
+				this.nestedMenuBlock = setTimeout(() => {
+					this.nestedMenuBlock = false;
+				}, 100);
+			}
+			
+			if(this.rootPopup){
+				this.rootPopup.hide();	
+			}
+			
+			this.rootPopup = popup = this.popup(menuEl);
+			
+		}else{
+			popup = parentPopup.child(menuEl);
+		}
+		
+		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) => {
+						e.stopPropagation();
+					});
+				}else{
+					if(item.menu && item.menu.length){
+						itemEl.addEventListener("click", (e) => {
+							e.stopPropagation();
+							this.loadMenu(e, component, item.menu, itemEl, popup);
+						});
+					}else{
+						if(item.action){
+							itemEl.addEventListener("click", (e) => {
+								item.action(e, component.getComponent());
+							});
+						}
+					}
+				}
+				
+				if(item.menu && item.menu.length){
+					itemEl.classList.add("tabulator-menu-item-submenu");
+				}
+			}
+			
+			menuEl.appendChild(itemEl);
+		});
+		
+		menuEl.addEventListener("click", (e) => {
+			if(this.rootPopup){
+				this.rootPopup.hide();
+			}
+		});
+		
+		popup.show(parentEl || e);
+		
+		if(popup === this.rootPopup){
+			this.rootPopup.hideOnBlur(() => {
+				this.rootPopup = null;
+				
+				if(this.currentComponent){
+					this.dispatch("menu-closed", menu, popup);
+					this.dispatchExternal("menuClosed", this.currentComponent.getComponent());
+					this.currentComponent = null;
+				}
+			});
+			
+			this.currentComponent = component;
+			
+			this.dispatch("menu-opened", menu, popup);
+			this.dispatchExternal("menuOpened", component.getComponent());
+		}
+	}
+}

package/src/js/modules/MoveColumns/MoveColumns.js

@@ -0,0 +1,311 @@
+import Module from '../../core/Module.js';
+import Helpers from '../../core/tools/Helpers.js';
+
+export default class MoveColumns extends Module{
+
+	static moduleName = "moveColumn";
+	
+	constructor(table){
+		super(table);
+		
+		this.placeholderElement = this.createPlaceholderElement();
+		this.hoverElement = false; //floating column header element
+		this.checkTimeout = false; //click check timeout holder
+		this.checkPeriod = 250; //period to wait on mousedown to consider this a move and not a click
+		this.moving = false; //currently moving column
+		this.toCol = false; //destination column
+		this.toColAfter = false; //position of moving column relative to the destination column
+		this.startX = 0; //starting position within header element
+		this.autoScrollMargin = 40; //auto scroll on edge when within margin
+		this.autoScrollStep = 5; //auto scroll distance in pixels
+		this.autoScrollTimeout = false; //auto scroll timeout
+		this.touchMove = false;
+		
+		this.moveHover = this.moveHover.bind(this);
+		this.endMove = this.endMove.bind(this);
+		
+		this.registerTableOption("movableColumns", false); //enable movable columns
+	}
+	
+	createPlaceholderElement(){
+		var el = document.createElement("div");
+		
+		el.classList.add("tabulator-col");
+		el.classList.add("tabulator-col-placeholder");
+		
+		return el;
+	}
+	
+	initialize(){
+		if(this.table.options.movableColumns){
+			this.subscribe("column-init", this.initializeColumn.bind(this));
+			this.subscribe("alert-show", this.abortMove.bind(this));
+		}
+	}
+
+	abortMove(){
+		clearTimeout(this.checkTimeout);
+	}
+	
+	initializeColumn(column){
+		var self = this,
+		config = {},
+		colEl;
+
+		if(!column.modules.frozen && !column.isGroup && !column.isRowHeader){
+			colEl = column.getElement();
+			
+			config.mousemove = function(e){
+				if(column.parent === self.moving.parent){
+					if((((self.touchMove ? e.touches[0].pageX : e.pageX) - Helpers.elOffset(colEl).left) + self.table.columnManager.contentsElement.scrollLeft) > (column.getWidth() / 2)){
+						if(self.toCol !== column || !self.toColAfter){
+							colEl.parentNode.insertBefore(self.placeholderElement, colEl.nextSibling);
+							self.moveColumn(column, true);
+						}
+					}else{
+						if(self.toCol !== column || self.toColAfter){
+							colEl.parentNode.insertBefore(self.placeholderElement, colEl);
+							self.moveColumn(column, false);
+						}
+					}
+				}
+			}.bind(self);
+			
+			colEl.addEventListener("mousedown", function(e){
+				self.touchMove = false;
+				if(e.which === 1){
+					self.checkTimeout = setTimeout(function(){
+						self.startMove(e, column);
+					}, self.checkPeriod);
+				}
+			});
+			
+			colEl.addEventListener("mouseup", function(e){
+				if(e.which === 1){
+					if(self.checkTimeout){
+						clearTimeout(self.checkTimeout);
+					}
+				}
+			});
+			
+			self.bindTouchEvents(column);
+		}
+		
+		column.modules.moveColumn = config;
+	}
+	
+	bindTouchEvents(column){
+		var colEl = column.getElement(),
+		startXMove = false, //shifting center position of the cell
+		nextCol, prevCol, nextColWidth, prevColWidth, nextColWidthLast, prevColWidthLast;
+		
+		colEl.addEventListener("touchstart", (e) => {
+			this.checkTimeout = setTimeout(() => {
+				this.touchMove = true;
+				nextCol = column.nextColumn();
+				nextColWidth = nextCol ? nextCol.getWidth()/2 : 0;
+				prevCol = column.prevColumn();
+				prevColWidth = prevCol ? prevCol.getWidth()/2 : 0;
+				nextColWidthLast = 0;
+				prevColWidthLast = 0;
+				startXMove = false;
+				
+				this.startMove(e, column);
+			}, this.checkPeriod);
+		}, {passive: true});
+		
+		colEl.addEventListener("touchmove", (e) => {
+			var diff, moveToCol;
+			
+			if(this.moving){
+				this.moveHover(e);
+				
+				if(!startXMove){
+					startXMove = e.touches[0].pageX;
+				}
+				
+				diff = e.touches[0].pageX - startXMove;
+				
+				if(diff > 0){
+					if(nextCol && diff - nextColWidthLast > nextColWidth){
+						moveToCol = nextCol;
+						
+						if(moveToCol !== column){
+							startXMove = e.touches[0].pageX;
+							moveToCol.getElement().parentNode.insertBefore(this.placeholderElement, moveToCol.getElement().nextSibling);
+							this.moveColumn(moveToCol, true);
+						}
+					}
+				}else{
+					if(prevCol && -diff - prevColWidthLast >  prevColWidth){
+						moveToCol = prevCol;
+						
+						if(moveToCol !== column){
+							startXMove = e.touches[0].pageX;
+							moveToCol.getElement().parentNode.insertBefore(this.placeholderElement, moveToCol.getElement());
+							this.moveColumn(moveToCol, false);
+						}
+					}
+				}
+				
+				if(moveToCol){
+					nextCol = moveToCol.nextColumn();
+					nextColWidthLast = nextColWidth;
+					nextColWidth = nextCol ? nextCol.getWidth() / 2 : 0;
+					prevCol = moveToCol.prevColumn();
+					prevColWidthLast = prevColWidth;
+					prevColWidth = prevCol ? prevCol.getWidth() / 2 : 0;
+				}
+			}
+		}, {passive: true});
+		
+		colEl.addEventListener("touchend", (e) => {
+			if(this.checkTimeout){
+				clearTimeout(this.checkTimeout);
+			}
+			if(this.moving){
+				this.endMove(e);
+			}
+		});
+	}
+	
+	startMove(e, column){
+		var element = column.getElement(),
+		headerElement = this.table.columnManager.getContentsElement(),
+		headersElement = this.table.columnManager.getHeadersElement();
+		
+		//Prevent moving columns when range selection is active
+		if(this.table.modules.selectRange && this.table.modules.selectRange.columnSelection){
+			if(this.table.modules.selectRange.mousedown && this.table.modules.selectRange.selecting === "column"){
+				return;
+			}
+		}
+
+		this.moving = column;
+		this.startX = (this.touchMove ? e.touches[0].pageX : e.pageX) - Helpers.elOffset(element).left;
+		
+		this.table.element.classList.add("tabulator-block-select");
+		
+		//create placeholder
+		this.placeholderElement.style.width = column.getWidth() + "px";
+		this.placeholderElement.style.height = column.getHeight() + "px";
+		
+		element.parentNode.insertBefore(this.placeholderElement, element);
+		element.parentNode.removeChild(element);
+		
+		//create hover element
+		this.hoverElement = element.cloneNode(true);
+		this.hoverElement.classList.add("tabulator-moving");
+		
+		headerElement.appendChild(this.hoverElement);
+		
+		this.hoverElement.style.left = "0";
+		this.hoverElement.style.bottom = (headerElement.clientHeight - headersElement.offsetHeight) + "px";
+		
+		if(!this.touchMove){
+			this._bindMouseMove();
+			
+			document.body.addEventListener("mousemove", this.moveHover);
+			document.body.addEventListener("mouseup", this.endMove);
+		}
+		
+		this.moveHover(e);
+
+		this.dispatch("column-moving", e, this.moving);
+	}
+	
+	_bindMouseMove(){
+		this.table.columnManager.columnsByIndex.forEach(function(column){
+			if(column.modules.moveColumn.mousemove){
+				column.getElement().addEventListener("mousemove", column.modules.moveColumn.mousemove);
+			}
+		});
+	}
+	
+	_unbindMouseMove(){
+		this.table.columnManager.columnsByIndex.forEach(function(column){
+			if(column.modules.moveColumn.mousemove){
+				column.getElement().removeEventListener("mousemove", column.modules.moveColumn.mousemove);
+			}
+		});
+	}
+	
+	moveColumn(column, after){
+		var movingCells = this.moving.getCells();
+		
+		this.toCol = column;
+		this.toColAfter = after;
+		
+		if(after){
+			column.getCells().forEach(function(cell, i){
+				var cellEl = cell.getElement(true);
+				
+				if(cellEl.parentNode && movingCells[i]){
+					cellEl.parentNode.insertBefore(movingCells[i].getElement(), cellEl.nextSibling);
+				}
+			});
+		}else{
+			column.getCells().forEach(function(cell, i){
+				var cellEl = cell.getElement(true);
+				
+				if(cellEl.parentNode && movingCells[i]){
+					cellEl.parentNode.insertBefore(movingCells[i].getElement(), cellEl);
+				}
+			});
+		}
+	}
+	
+	endMove(e){
+		if(e.which === 1 || this.touchMove){
+			this._unbindMouseMove();
+			
+			this.placeholderElement.parentNode.insertBefore(this.moving.getElement(), this.placeholderElement.nextSibling);
+			this.placeholderElement.parentNode.removeChild(this.placeholderElement);
+			this.hoverElement.parentNode.removeChild(this.hoverElement);
+			
+			this.table.element.classList.remove("tabulator-block-select");
+			
+			if(this.toCol){
+				this.table.columnManager.moveColumnActual(this.moving, this.toCol, this.toColAfter);
+			}
+
+			this.moving = false;
+			this.toCol = false;
+			this.toColAfter = false;
+			
+			if(!this.touchMove){
+				document.body.removeEventListener("mousemove", this.moveHover);
+				document.body.removeEventListener("mouseup", this.endMove);
+			}
+		}
+	}
+	
+	moveHover(e){
+		var columnHolder = this.table.columnManager.getContentsElement(),
+		scrollLeft = columnHolder.scrollLeft,
+		xPos = ((this.touchMove ? e.touches[0].pageX : e.pageX) - Helpers.elOffset(columnHolder).left) + scrollLeft,
+		scrollPos;
+		
+		this.hoverElement.style.left = (xPos - this.startX) + "px";
+		
+		if(xPos - scrollLeft < this.autoScrollMargin){
+			if(!this.autoScrollTimeout){
+				this.autoScrollTimeout = setTimeout(() => {
+					scrollPos = Math.max(0,scrollLeft-5);
+					this.table.rowManager.getElement().scrollLeft = scrollPos;
+					this.autoScrollTimeout = false;
+				}, 1);
+			}
+		}
+		
+		if(scrollLeft + columnHolder.clientWidth - xPos < this.autoScrollMargin){
+			if(!this.autoScrollTimeout){
+				this.autoScrollTimeout = setTimeout(() => {
+					scrollPos = Math.min(columnHolder.clientWidth, scrollLeft+5);
+					this.table.rowManager.getElement().scrollLeft = scrollPos;
+					this.autoScrollTimeout = false;
+				}, 1);
+			}
+		}
+	}
+}