tabulator-tables 6.5.0 → 6.5.1

package/src/js/modules/Popup/Popup.js

@@ -0,0 +1,227 @@
+import Module from '../../core/Module.js';
+
+export default class Popup extends Module{
+	
+	static moduleName = "popup";
+	
+	constructor(table){
+		super(table);
+		
+		this.columnSubscribers = {};
+		
+		this.registerTableOption("rowContextPopup", false);
+		this.registerTableOption("rowClickPopup", false);
+		this.registerTableOption("rowDblClickPopup", false);
+		this.registerTableOption("groupContextPopup", false);
+		this.registerTableOption("groupClickPopup", false);
+		this.registerTableOption("groupDblClickPopup", false);
+		
+		this.registerColumnOption("headerContextPopup");
+		this.registerColumnOption("headerClickPopup");
+		this.registerColumnOption("headerDblClickPopup");
+		this.registerColumnOption("headerPopup");
+		this.registerColumnOption("headerPopupIcon");
+		this.registerColumnOption("contextPopup");
+		this.registerColumnOption("clickPopup");
+		this.registerColumnOption("dblClickPopup");
+
+		this.registerComponentFunction("cell", "popup", this._componentPopupCall.bind(this));
+		this.registerComponentFunction("column", "popup", this._componentPopupCall.bind(this));
+		this.registerComponentFunction("row", "popup", this._componentPopupCall.bind(this));
+		this.registerComponentFunction("group", "popup", this._componentPopupCall.bind(this));
+		
+	}
+	
+	initialize(){
+		this.initializeRowWatchers();
+		this.initializeGroupWatchers();
+		
+		this.subscribe("column-init", this.initializeColumn.bind(this));
+	}
+
+	_componentPopupCall(component, contents, position){
+		this.loadPopupEvent(contents, null, component, position);
+	}
+	
+	initializeRowWatchers(){
+		if(this.table.options.rowContextPopup){
+			this.subscribe("row-contextmenu", this.loadPopupEvent.bind(this, this.table.options.rowContextPopup));
+			this.table.on("rowTapHold", this.loadPopupEvent.bind(this, this.table.options.rowContextPopup));
+		}
+		
+		if(this.table.options.rowClickPopup){
+			this.subscribe("row-click", this.loadPopupEvent.bind(this, this.table.options.rowClickPopup));
+		}
+
+		if(this.table.options.rowDblClickPopup){
+			this.subscribe("row-dblclick", this.loadPopupEvent.bind(this, this.table.options.rowDblClickPopup));
+		}
+	}
+	
+	initializeGroupWatchers(){
+		if(this.table.options.groupContextPopup){
+			this.subscribe("group-contextmenu", this.loadPopupEvent.bind(this, this.table.options.groupContextPopup));
+			this.table.on("groupTapHold", this.loadPopupEvent.bind(this, this.table.options.groupContextPopup));
+		}
+		
+		if(this.table.options.groupClickPopup){
+			this.subscribe("group-click", this.loadPopupEvent.bind(this, this.table.options.groupClickPopup));
+		}
+
+		if(this.table.options.groupDblClickPopup){
+			this.subscribe("group-dblclick", this.loadPopupEvent.bind(this, this.table.options.groupDblClickPopup));
+		}
+	}
+
+	initializeColumn(column){
+		var def = column.definition;
+		
+		//handle column events
+		if(def.headerContextPopup && !this.columnSubscribers.headerContextPopup){
+			this.columnSubscribers.headerContextPopup = this.loadPopupTableColumnEvent.bind(this, "headerContextPopup");
+			this.subscribe("column-contextmenu", this.columnSubscribers.headerContextPopup);
+			this.table.on("headerTapHold", this.loadPopupTableColumnEvent.bind(this, "headerContextPopup"));
+		}
+		
+		if(def.headerClickPopup && !this.columnSubscribers.headerClickPopup){
+			this.columnSubscribers.headerClickPopup = this.loadPopupTableColumnEvent.bind(this, "headerClickPopup");
+			this.subscribe("column-click", this.columnSubscribers.headerClickPopup);
+		
+		
+		}if(def.headerDblClickPopup && !this.columnSubscribers.headerDblClickPopup){
+			this.columnSubscribers.headerDblClickPopup = this.loadPopupTableColumnEvent.bind(this, "headerDblClickPopup");
+			this.subscribe("column-dblclick", this.columnSubscribers.headerDblClickPopup);
+		}
+		
+		if(def.headerPopup){
+			this.initializeColumnHeaderPopup(column);
+		}
+		
+		//handle cell events
+		if(def.contextPopup && !this.columnSubscribers.contextPopup){
+			this.columnSubscribers.contextPopup = this.loadPopupTableCellEvent.bind(this, "contextPopup");
+			this.subscribe("cell-contextmenu", this.columnSubscribers.contextPopup);
+			this.table.on("cellTapHold", this.loadPopupTableCellEvent.bind(this, "contextPopup"));
+		}
+		
+		if(def.clickPopup && !this.columnSubscribers.clickPopup){
+			this.columnSubscribers.clickPopup = this.loadPopupTableCellEvent.bind(this, "clickPopup");
+			this.subscribe("cell-click", this.columnSubscribers.clickPopup);
+		}
+
+		if(def.dblClickPopup && !this.columnSubscribers.dblClickPopup){
+			this.columnSubscribers.dblClickPopup = this.loadPopupTableCellEvent.bind(this, "dblClickPopup");
+			this.subscribe("cell-click", this.columnSubscribers.dblClickPopup);
+		}
+	}
+	
+	initializeColumnHeaderPopup(column){
+		var icon = column.definition.headerPopupIcon,
+		headerPopupEl;
+		
+		headerPopupEl = document.createElement("span");
+		headerPopupEl.classList.add("tabulator-header-popup-button");
+
+		if(icon){
+			if(typeof icon === "function"){
+				icon = icon(column.getComponent());
+			}
+
+			if(icon instanceof HTMLElement){
+				headerPopupEl.appendChild(icon);
+			}else{
+				headerPopupEl.innerHTML = icon;
+			}
+		}else{
+			headerPopupEl.innerHTML = "⋮";
+		}
+		
+		headerPopupEl.addEventListener("click", (e) => {
+			e.stopPropagation();
+			e.preventDefault();
+			
+			this.loadPopupEvent(column.definition.headerPopup, e, column);
+		});
+		
+		column.titleElement.insertBefore(headerPopupEl, column.titleElement.firstChild);
+	}
+	
+	loadPopupTableCellEvent(option, e, cell){
+		if(cell._cell){
+			cell = cell._cell;
+		}
+		
+		if(cell.column.definition[option]){
+			this.loadPopupEvent(cell.column.definition[option], e, cell);
+		}
+	}
+	
+	loadPopupTableColumnEvent(option, e, column){
+		if(column._column){
+			column = column._column;
+		}
+		
+		if(column.definition[option]){
+			this.loadPopupEvent(column.definition[option], e, column);
+		}
+	}
+	
+	loadPopupEvent(contents, e, component, position){
+		var renderedCallback;
+
+		function onRendered(callback){
+			renderedCallback = callback;
+		}
+		
+		if(component._group){
+			component = component._group;
+		}else if(component._row){
+			component = component._row;
+		}
+		
+		contents = typeof contents == "function" ? contents.call(this.table, e, component.getComponent(),  onRendered) : contents;
+		
+		this.loadPopup(e, component, contents, renderedCallback, position);
+	}
+	
+	loadPopup(e, component, contents, renderedCallback, position){
+		var touch = !(e instanceof MouseEvent),
+		contentsEl, popup;
+		
+		if(contents instanceof HTMLElement){
+			contentsEl = contents;
+		}else{
+			contentsEl = document.createElement("div");
+			contentsEl.innerHTML = contents;
+		}
+		
+		contentsEl.classList.add("tabulator-popup");
+
+		contentsEl.addEventListener("click", (e) =>{
+			e.stopPropagation();
+		});
+
+		if(!touch){
+			e.preventDefault();
+		}
+		
+		popup = this.popup(contentsEl);
+
+		if(typeof renderedCallback === "function"){
+			popup.renderCallback(renderedCallback);
+		}
+
+		if(e){
+			popup.show(e);
+		}else{
+			popup.show(component.getElement(), position || "center");
+		}
+
+		
+		popup.hideOnBlur(() => {
+			this.dispatchExternal("popupClosed", component.getComponent());
+		});
+
+		this.dispatchExternal("popupOpened", component.getComponent());
+	}
+}

package/src/js/modules/Print/Print.js

@@ -0,0 +1,136 @@
+import Module from '../../core/Module.js';
+
+export default class Print extends Module{
+
+	static moduleName = "print";
+
+	constructor(table){
+		super(table);
+
+		this.element = false;
+		this.manualBlock = false;
+		this.beforeprintEventHandler = null;
+		this.afterprintEventHandler = null;
+
+		this.registerTableOption("printAsHtml", false); //enable print as html
+		this.registerTableOption("printFormatter", false); //printing page formatter
+		this.registerTableOption("printHeader", false); //page header contents
+		this.registerTableOption("printFooter", false); //page footer contents
+		this.registerTableOption("printStyled", true); //enable print as html styling
+		this.registerTableOption("printRowRange", "visible"); //restrict print to visible rows only
+		this.registerTableOption("printConfig", {}); //print config options
+
+		this.registerColumnOption("print");
+		this.registerColumnOption("titlePrint");
+	}
+
+	initialize(){
+		if(this.table.options.printAsHtml){
+			this.beforeprintEventHandler = this.replaceTable.bind(this);
+			this.afterprintEventHandler = this.cleanup.bind(this);
+
+			window.addEventListener("beforeprint", this.beforeprintEventHandler );
+			window.addEventListener("afterprint", this.afterprintEventHandler);
+			this.subscribe("table-destroy", this.destroy.bind(this));
+		}
+
+		this.registerTableFunction("print", this.printFullscreen.bind(this));
+	}
+
+	destroy(){
+		if(this.table.options.printAsHtml){
+			window.removeEventListener( "beforeprint", this.beforeprintEventHandler );
+			window.removeEventListener( "afterprint", this.afterprintEventHandler );
+		}
+	}
+
+	///////////////////////////////////
+	///////// Table Functions /////////
+	///////////////////////////////////
+
+	///////////////////////////////////
+	///////// Internal Logic //////////
+	///////////////////////////////////
+
+	replaceTable(){
+		if(!this.manualBlock){
+			this.element = document.createElement("div");
+			this.element.classList.add("tabulator-print-table");
+
+			this.element.appendChild(this.table.modules.export.generateTable(this.table.options.printConfig, this.table.options.printStyled, this.table.options.printRowRange, "print"));
+
+			this.table.element.style.display = "none";
+
+			this.table.element.parentNode.insertBefore(this.element, this.table.element);
+		}
+	}
+
+	cleanup(){
+		document.body.classList.remove("tabulator-print-fullscreen-hide");
+
+		if(this.element && this.element.parentNode){
+			this.element.parentNode.removeChild(this.element);
+			this.table.element.style.display = "";
+		}
+	}
+
+	printFullscreen(visible, style, config){
+		var scrollX = window.scrollX,
+		scrollY = window.scrollY,
+		headerEl = document.createElement("div"),
+		footerEl = document.createElement("div"),
+		tableEl = this.table.modules.export.generateTable(typeof config != "undefined" ? config : this.table.options.printConfig, typeof style != "undefined" ? style : this.table.options.printStyled, visible || this.table.options.printRowRange, "print"),
+		headerContent, footerContent;
+
+		this.manualBlock = true;
+
+		this.element = document.createElement("div");
+		this.element.classList.add("tabulator-print-fullscreen");
+
+		if(this.table.options.printHeader){
+			headerEl.classList.add("tabulator-print-header");
+
+			headerContent = typeof this.table.options.printHeader == "function" ? this.table.options.printHeader.call(this.table) : this.table.options.printHeader;
+
+			if(typeof headerContent == "string"){
+				headerEl.innerHTML = headerContent;
+			}else{
+				headerEl.appendChild(headerContent);
+			}
+
+			this.element.appendChild(headerEl);
+		}
+
+		this.element.appendChild(tableEl);
+
+		if(this.table.options.printFooter){
+			footerEl.classList.add("tabulator-print-footer");
+
+			footerContent = typeof this.table.options.printFooter == "function" ? this.table.options.printFooter.call(this.table) : this.table.options.printFooter;
+
+
+			if(typeof footerContent == "string"){
+				footerEl.innerHTML = footerContent;
+			}else{
+				footerEl.appendChild(footerContent);
+			}
+
+			this.element.appendChild(footerEl);
+		}
+
+		document.body.classList.add("tabulator-print-fullscreen-hide");
+		document.body.appendChild(this.element);
+
+		if(this.table.options.printFormatter){
+			this.table.options.printFormatter(this.element, tableEl);
+		}
+
+		window.print();
+
+		this.cleanup();
+
+		window.scrollTo(scrollX, scrollY);
+
+		this.manualBlock = false;
+	}
+}