tabulator-tables 6.5.0 → 6.5.1

package/src/js/modules/Layout/defaults/modes/fitColumns.js

@@ -0,0 +1,171 @@
+//resize columns to fit
+export default function(columns, forced){
+	var totalWidth = this.table.rowManager.element.getBoundingClientRect().width; //table element width
+	var fixedWidth = 0; //total width of columns with a defined width
+	var flexWidth = 0; //total width available to flexible columns
+	var flexGrowUnits = 0; //total number of widthGrow blocks across all columns
+	var flexColWidth = 0; //desired width of flexible columns
+	var flexColumns = []; //array of flexible width columns
+	var fixedShrinkColumns = []; //array of fixed width columns that can shrink
+	var flexShrinkUnits = 0; //total number of widthShrink blocks across all columns
+	var overflowWidth = 0; //horizontal overflow width
+	var gapFill = 0; //number of pixels to be added to final column to close and half pixel gaps
+
+	function calcWidth(width){
+		var colWidth;
+
+		if(typeof(width) == "string"){
+			if(width.indexOf("%") > -1){
+				colWidth = (totalWidth / 100) * parseInt(width);
+			}else{
+				colWidth = parseInt(width);
+			}
+		}else{
+			colWidth = width;
+		}
+
+		return colWidth;
+	}
+
+	//ensure columns resize to take up the correct amount of space
+	function scaleColumns(columns, freeSpace, colWidth, shrinkCols){
+		var oversizeCols = [],
+		oversizeSpace = 0,
+		remainingSpace = 0,
+		nextColWidth = 0,
+		remainingFlexGrowUnits = flexGrowUnits,
+		gap = 0,
+		changeUnits = 0,
+		undersizeCols = [];
+
+		function calcGrow(col){
+			return (colWidth * (col.column.definition.widthGrow || 1));
+		}
+
+		function calcShrink(col){
+			return  (calcWidth(col.width) - (colWidth * (col.column.definition.widthShrink || 0)));
+		}
+
+		columns.forEach(function(col, i){
+			var width = shrinkCols ? calcShrink(col) : calcGrow(col);
+			if(col.column.minWidth >= width){
+				oversizeCols.push(col);
+			}else{
+				if(col.column.maxWidth && col.column.maxWidth < width){
+					col.width = col.column.maxWidth;
+					freeSpace -= col.column.maxWidth;
+
+					remainingFlexGrowUnits -= shrinkCols ? (col.column.definition.widthShrink || 1) : (col.column.definition.widthGrow || 1);
+
+					if(remainingFlexGrowUnits){
+						colWidth = Math.floor(freeSpace/remainingFlexGrowUnits);
+					}
+				}else{
+					undersizeCols.push(col);
+					changeUnits += shrinkCols ? (col.column.definition.widthShrink || 1) : (col.column.definition.widthGrow || 1);
+				}
+			}
+		});
+
+		if(oversizeCols.length){
+			oversizeCols.forEach(function(col){
+				oversizeSpace += shrinkCols ?  col.width - col.column.minWidth : col.column.minWidth;
+				col.width = col.column.minWidth;
+			});
+
+			remainingSpace = freeSpace - oversizeSpace;
+
+			nextColWidth = changeUnits ? Math.floor(remainingSpace/changeUnits) : remainingSpace;
+
+			gap = scaleColumns(undersizeCols, remainingSpace, nextColWidth, shrinkCols);
+		}else{
+			gap = changeUnits ? freeSpace - (Math.floor(freeSpace/changeUnits) * changeUnits) : freeSpace;
+
+			undersizeCols.forEach(function(column){
+				column.width = shrinkCols ? calcShrink(column) : calcGrow(column);
+			});
+		}
+
+		return gap;
+	}
+
+	if(this.table.options.responsiveLayout && this.table.modExists("responsiveLayout", true)){
+		this.table.modules.responsiveLayout.update();
+	}
+
+	//adjust for vertical scrollbar if present
+	if(this.table.rowManager.element.scrollHeight > this.table.rowManager.element.clientHeight){
+		totalWidth -= this.table.rowManager.element.offsetWidth - this.table.rowManager.element.clientWidth;
+	}
+
+	columns.forEach(function(column){
+		var width, minWidth, colWidth;
+
+		if(column.visible){
+
+			width = column.definition.width;
+			minWidth =  parseInt(column.minWidth);
+
+			if(width){
+
+				colWidth = calcWidth(width);
+
+				fixedWidth += colWidth > minWidth ? colWidth : minWidth;
+
+				if(column.definition.widthShrink){
+					fixedShrinkColumns.push({
+						column:column,
+						width:colWidth > minWidth ? colWidth : minWidth
+					});
+					flexShrinkUnits += column.definition.widthShrink;
+				}
+
+			}else{
+				flexColumns.push({
+					column:column,
+					width:0,
+				});
+				flexGrowUnits += column.definition.widthGrow || 1;
+			}
+		}
+	});
+
+	//calculate available space
+	flexWidth = totalWidth - fixedWidth;
+
+	//calculate correct column size
+	flexColWidth = Math.floor(flexWidth / flexGrowUnits);
+
+	//generate column widths
+	gapFill = scaleColumns(flexColumns, flexWidth, flexColWidth, false);
+
+	//increase width of last column to account for rounding errors
+	if(flexColumns.length && gapFill > 0){
+		flexColumns[flexColumns.length-1].width += gapFill;
+	}
+
+	//calculate space for columns to be shrunk into
+	flexColumns.forEach(function(col){
+		flexWidth -= col.width;
+	});
+
+	overflowWidth = Math.abs(gapFill) + flexWidth;
+
+	//shrink oversize columns if there is no available space
+	if(overflowWidth > 0 && flexShrinkUnits){
+		gapFill = scaleColumns(fixedShrinkColumns, overflowWidth, Math.floor(overflowWidth / flexShrinkUnits), true);
+	}
+
+	//decrease width of last column to account for rounding errors
+	if(gapFill && fixedShrinkColumns.length){
+		fixedShrinkColumns[fixedShrinkColumns.length-1].width -= gapFill;
+	}
+
+	flexColumns.forEach(function(col){
+		col.column.setWidth(col.width);
+	});
+
+	fixedShrinkColumns.forEach(function(col){
+		col.column.setWidth(col.width);
+	});
+}

package/src/js/modules/Layout/defaults/modes/fitData.js

@@ -0,0 +1,10 @@
+//resize columns to fit data they contain
+export default function(columns, forced){
+	if(forced){
+		this.table.columnManager.renderer.reinitializeColumnWidths(columns);
+	}
+	
+	if(this.table.options.responsiveLayout && this.table.modExists("responsiveLayout", true)){
+		this.table.modules.responsiveLayout.update();
+	}
+}

package/src/js/modules/Layout/defaults/modes/fitDataGeneral.js

@@ -0,0 +1,10 @@
+//resize columns to fit data they contain and stretch row to fill table, also used for fitDataTable
+export default function(columns, forced){
+	columns.forEach(function(column){
+		column.reinitializeWidth();
+	});
+
+	if(this.table.options.responsiveLayout && this.table.modExists("responsiveLayout", true)){
+		this.table.modules.responsiveLayout.update();
+	}
+}

package/src/js/modules/Layout/defaults/modes/fitDataStretch.js

@@ -0,0 +1,40 @@
+//resize columns to fit data the contain and stretch last column to fill table
+export default function(columns, forced){
+	var colsWidth = 0,
+	tableWidth = this.table.rowManager.element.clientWidth,
+	gap = 0,
+	lastCol = false;
+
+	columns.forEach((column, i) => {
+		if(!column.widthFixed){
+			column.reinitializeWidth();
+		}
+
+		if(this.table.options.responsiveLayout ? column.modules.responsive.visible : column.visible){
+			lastCol = column;
+		}
+
+		if(column.visible){
+			colsWidth += column.getWidth();
+		}
+	});
+
+	if(lastCol){
+		gap = tableWidth - colsWidth + lastCol.getWidth();
+
+		if(this.table.options.responsiveLayout && this.table.modExists("responsiveLayout", true)){
+			lastCol.setWidth(0);
+			this.table.modules.responsiveLayout.update();
+		}
+
+		if(gap > 0){
+			lastCol.setWidth(gap);
+		}else{
+			lastCol.reinitializeWidth();
+		}
+	}else{
+		if(this.table.options.responsiveLayout && this.table.modExists("responsiveLayout", true)){
+			this.table.modules.responsiveLayout.update();
+		}
+	}
+}

package/src/js/modules/Layout/defaults/modes.js

@@ -0,0 +1,12 @@
+import fitData from './modes/fitData.js';
+import fitDataGeneral from './modes/fitDataGeneral.js';
+import fitDataStretch from './modes/fitDataStretch.js';
+import fitColumns from './modes/fitColumns.js';
+
+export default {
+	fitData:fitData,
+	fitDataFill:fitDataGeneral,
+	fitDataTable:fitDataGeneral,
+	fitDataStretch:fitDataStretch,
+	fitColumns:fitColumns ,
+};

package/src/js/modules/Localize/Localize.js

@@ -0,0 +1,184 @@
+import Module from '../../core/Module.js';
+
+import Helpers from '../../core/tools/Helpers.js';
+
+import defaultLangs from './defaults/langs.js';
+
+export default class Localize extends Module{
+
+	static moduleName = "localize";
+
+	//load defaults
+	static langs = defaultLangs;
+
+	constructor(table){
+		super(table);
+
+		this.locale = "default"; //current locale
+		this.lang = false; //current language
+		this.bindings = {}; //update events to call when locale is changed
+		this.langList = {};
+
+		this.registerTableOption("locale", false); //current system language
+		this.registerTableOption("langs", {});
+	}
+
+	initialize(){
+		this.langList = Helpers.deepClone(Localize.langs);
+
+		if(this.table.options.columnDefaults.headerFilterPlaceholder !== false){
+			this.setHeaderFilterPlaceholder(this.table.options.columnDefaults.headerFilterPlaceholder);
+		}
+
+		for(let locale in this.table.options.langs){
+			this.installLang(locale, this.table.options.langs[locale]);
+		}
+
+		this.setLocale(this.table.options.locale);
+
+		this.registerTableFunction("setLocale", this.setLocale.bind(this));
+		this.registerTableFunction("getLocale", this.getLocale.bind(this));
+		this.registerTableFunction("getLang", this.getLang.bind(this));
+	}
+
+	//set header placeholder
+	setHeaderFilterPlaceholder(placeholder){
+		this.langList.default.headerFilters.default = placeholder;
+	}
+
+	//setup a lang description object
+	installLang(locale, lang){
+		if(this.langList[locale]){
+			this._setLangProp(this.langList[locale], lang);
+		}else{
+			this.langList[locale] = lang;
+		}
+	}
+
+	_setLangProp(lang, values){
+		for(let key in values){
+			if(lang[key] && typeof lang[key] == "object"){
+				this._setLangProp(lang[key], values[key]);
+			}else{
+				lang[key] = values[key];
+			}
+		}
+	}
+
+	//set current locale
+	setLocale(desiredLocale){
+		desiredLocale = desiredLocale || "default";
+
+		//fill in any matching language values
+		function traverseLang(trans, path){
+			for(var prop in trans){
+				if(typeof trans[prop] == "object"){
+					if(!path[prop]){
+						path[prop] = {};
+					}
+					traverseLang(trans[prop], path[prop]);
+				}else{
+					path[prop] = trans[prop];
+				}
+			}
+		}
+
+		//determining correct locale to load
+		if(desiredLocale === true && navigator.language){
+			//get local from system
+			desiredLocale = navigator.language.toLowerCase();
+		}
+
+		if(desiredLocale){
+			//if locale is not set, check for matching top level locale else use default
+			if(!this.langList[desiredLocale]){
+				let prefix = desiredLocale.split("-")[0];
+
+				if(this.langList[prefix]){
+					console.warn("Localization Error - Exact matching locale not found, using closest match: ", desiredLocale, prefix);
+					desiredLocale = prefix;
+				}else{
+					console.warn("Localization Error - Matching locale not found, using default: ", desiredLocale);
+					desiredLocale = "default";
+				}
+			}
+		}
+
+		this.locale = desiredLocale;
+
+		//load default lang template
+		this.lang = Helpers.deepClone(this.langList.default || {});
+
+		if(desiredLocale != "default"){
+			traverseLang(this.langList[desiredLocale], this.lang);
+		}
+
+		this.dispatchExternal("localized", this.locale, this.lang);
+
+		this._executeBindings();
+	}
+
+	//get current locale
+	getLocale(locale){
+		return this.locale;
+	}
+
+	//get lang object for given local or current if none provided
+	getLang(locale){
+		return locale ? this.langList[locale] : this.lang;
+	}
+
+	//get text for current locale
+	getText(path, value){
+		var fillPath = value ? path + "|" + value : path,
+		pathArray = fillPath.split("|"),
+		text = this._getLangElement(pathArray, this.locale);
+
+		// if(text === false){
+		// 	console.warn("Localization Error - Matching localized text not found for given path: ", path);
+		// }
+
+		return text || "";
+	}
+
+	//traverse langs object and find localized copy
+	_getLangElement(path, locale){
+		var root = this.lang;
+
+		path.forEach(function(level){
+			var rootPath;
+
+			if(root){
+				rootPath = root[level];
+
+				if(typeof rootPath != "undefined"){
+					root = rootPath;
+				}else{
+					root = false;
+				}
+			}
+		});
+
+		return root;
+	}
+
+	//set update binding
+	bind(path, callback){
+		if(!this.bindings[path]){
+			this.bindings[path] = [];
+		}
+
+		this.bindings[path].push(callback);
+
+		callback(this.getText(path), this.lang);
+	}
+
+	//iterate through bindings and trigger updates
+	_executeBindings(){
+		for(let path in this.bindings){
+			this.bindings[path].forEach((binding) => {
+				binding(this.getText(path), this.lang);
+			});
+		}
+	}
+}

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

@@ -0,0 +1,37 @@
+export default {
+	"default":{ //hold default locale text
+		"groups":{
+			"item":"item",
+			"items":"items",
+		},
+		"columns":{
+		},
+		"data":{
+			"loading":"Loading",
+			"error":"Error",
+		},
+		"pagination":{
+			"page_size":"Page Size",
+			"page_title":"Show Page",
+			"first":"First",
+			"first_title":"First Page",
+			"last":"Last",
+			"last_title":"Last Page",
+			"prev":"Prev",
+			"prev_title":"Prev Page",
+			"next":"Next",
+			"next_title":"Next Page",
+			"all":"All",
+			"counter":{
+				"showing": "Showing",
+				"of": "of",
+				"rows": "rows",
+				"pages": "pages",
+			}
+		},
+		"headerFilters":{
+			"default":"filter column...",
+			"columns":{}
+		}
+	},
+};