tabulator-tables 6.5.0 → 6.5.1

package/src/js/modules/Edit/defaults/editors/range.js

@@ -0,0 +1,81 @@
+//input element with type of number
+export default function(cell, onRendered, success, cancel, editorParams){
+	var cellValue = cell.getValue(),
+	input = document.createElement("input");
+	
+	input.setAttribute("type", "range");
+	
+	if (typeof editorParams.max != "undefined") {
+		input.setAttribute("max", editorParams.max);
+	}
+	
+	if (typeof editorParams.min != "undefined") {
+		input.setAttribute("min", editorParams.min);
+	}
+	
+	if (typeof editorParams.step != "undefined") {
+		input.setAttribute("step", editorParams.step);
+	}
+	
+	//create and style input
+	input.style.padding = "4px";
+	input.style.width = "100%";
+	input.style.boxSizing = "border-box";
+	
+	if(editorParams.elementAttributes && typeof editorParams.elementAttributes == "object"){
+		for (let key in editorParams.elementAttributes){
+			if(key.charAt(0) == "+"){
+				key = key.slice(1);
+				input.setAttribute(key, input.getAttribute(key) + editorParams.elementAttributes["+" + key]);
+			}else{
+				input.setAttribute(key, editorParams.elementAttributes[key]);
+			}
+		}
+	}
+	
+	input.value = cellValue;
+	
+	onRendered(function () {
+		if(cell.getType() === "cell"){
+			input.focus({preventScroll: true});
+			input.style.height = "100%";
+		}
+	});
+	
+	function onChange(){
+		var value = input.value;
+		
+		if(!isNaN(value) && value !==""){
+			value = Number(value);
+		}
+		
+		if(value != cellValue){
+			if(success(value)){
+				cellValue = value; //persist value if successfully validated incase editor is used as header filter
+			}
+		}else{
+			cancel();
+		}
+	}
+	
+	//submit new value on blur
+	input.addEventListener("blur", function(e){
+		onChange();
+	});
+	
+	//submit new value on enter
+	input.addEventListener("keydown", function(e){
+		switch(e.key){
+			case "Enter":
+			// case "Tab":
+				onChange();
+				break;
+			
+			case "Escape":
+				cancel();
+				break;
+		}
+	});
+	
+	return input;
+}

package/src/js/modules/Edit/defaults/editors/star.js

@@ -0,0 +1,146 @@
+//star rating
+export default function(cell, onRendered, success, cancel, editorParams){
+	var self = this,
+	element = cell.getElement(),
+	value = cell.getValue(),
+	maxStars = element.getElementsByTagName("svg").length || 5,
+	size = element.getElementsByTagName("svg")[0] ? element.getElementsByTagName("svg")[0].getAttribute("width") : 14,
+	stars = [],
+	starsHolder = document.createElement("div"),
+	star = document.createElementNS('http://www.w3.org/2000/svg', "svg");
+
+
+	//change star type
+	function starChange(val){
+		stars.forEach(function(star, i){
+			if(i < val){
+				if(self.table.browser == "ie"){
+					star.setAttribute("class", "tabulator-star-active");
+				}else{
+					star.classList.replace("tabulator-star-inactive", "tabulator-star-active");
+				}
+
+				star.innerHTML = '<polygon fill="#488CE9" stroke="#014AAE" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 29.274,197.007 188.165,173.919 "/>';
+			}else{
+				if(self.table.browser == "ie"){
+					star.setAttribute("class", "tabulator-star-inactive");
+				}else{
+					star.classList.replace("tabulator-star-active", "tabulator-star-inactive");
+				}
+
+				star.innerHTML = '<polygon fill="#010155" stroke="#686868" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 29.274,197.007 188.165,173.919 "/>';
+			}
+		});
+	}
+
+	//build stars
+	function buildStar(i){
+
+		var starHolder =  document.createElement("span");
+		var nextStar = star.cloneNode(true);
+
+		stars.push(nextStar);
+
+		starHolder.addEventListener("mouseenter", function(e){
+			e.stopPropagation();
+			e.stopImmediatePropagation();
+			starChange(i);
+		});
+
+		starHolder.addEventListener("mousemove", function(e){
+			e.stopPropagation();
+			e.stopImmediatePropagation();
+		});
+
+		starHolder.addEventListener("click", function(e){
+			e.stopPropagation();
+			e.stopImmediatePropagation();
+			success(i);
+			element.blur();
+		});
+
+		starHolder.appendChild(nextStar);
+		starsHolder.appendChild(starHolder);
+
+	}
+
+	//handle keyboard navigation value change
+	function changeValue(val){
+		value = val;
+		starChange(val);
+	}
+
+	//style cell
+	element.style.whiteSpace = "nowrap";
+	element.style.overflow = "hidden";
+	element.style.textOverflow = "ellipsis";
+
+	//style holding element
+	starsHolder.style.verticalAlign = "middle";
+	starsHolder.style.display = "inline-block";
+	starsHolder.style.padding = "4px";
+
+	//style star
+	star.setAttribute("width", size);
+	star.setAttribute("height", size);
+	star.setAttribute("viewBox", "0 0 512 512");
+	star.setAttribute("xml:space", "preserve");
+	star.style.padding = "0 1px";
+
+	if(editorParams.elementAttributes && typeof editorParams.elementAttributes == "object"){
+		for (let key in editorParams.elementAttributes){
+			if(key.charAt(0) == "+"){
+				key = key.slice(1);
+				starsHolder.setAttribute(key, starsHolder.getAttribute(key) + editorParams.elementAttributes["+" + key]);
+			}else{
+				starsHolder.setAttribute(key, editorParams.elementAttributes[key]);
+			}
+		}
+	}
+
+	//create correct number of stars
+	for(var i=1;i<= maxStars;i++){
+		buildStar(i);
+	}
+
+	//ensure value does not exceed number of stars
+	value = Math.min(parseInt(value), maxStars);
+
+	// set initial styling of stars
+	starChange(value);
+
+	starsHolder.addEventListener("mousemove", function(e){
+		starChange(0);
+	});
+
+	starsHolder.addEventListener("click", function(e){
+		success(0);
+	});
+
+	element.addEventListener("blur", function(e){
+		cancel();
+	});
+
+	//allow key based navigation
+	element.addEventListener("keydown", function(e){
+		switch(e.key){
+			case "ArrowRight":
+				changeValue(value + 1);
+				break;
+
+			case "ArrowLeft":
+				changeValue(value - 1);
+				break;
+
+			case "Enter":
+				success(value);
+				break;
+
+			case "Escape":
+				cancel();
+				break;
+		}
+	});
+
+	return starsHolder;
+}

package/src/js/modules/Edit/defaults/editors/textarea.js

@@ -0,0 +1,123 @@
+import maskInput from '../../inputMask.js';
+
+//resizable text area element
+export default function(cell, onRendered, success, cancel, editorParams){
+	var cellValue = cell.getValue(),
+	vertNav = editorParams.verticalNavigation || "hybrid",
+	value = String(cellValue !== null && typeof cellValue !== "undefined"  ? cellValue : ""),
+	input = document.createElement("textarea"),
+	scrollHeight = 0;
+
+	//create and style input
+	input.style.display = "block";
+	input.style.padding = "2px";
+	input.style.height = "100%";
+	input.style.width = "100%";
+	input.style.boxSizing = "border-box";
+	input.style.whiteSpace = "pre-wrap";
+	input.style.resize = "none";
+
+	if(editorParams.elementAttributes && typeof editorParams.elementAttributes == "object"){
+		for (let key in editorParams.elementAttributes){
+			if(key.charAt(0) == "+"){
+				key = key.slice(1);
+				input.setAttribute(key, input.getAttribute(key) + editorParams.elementAttributes["+" + key]);
+			}else{
+				input.setAttribute(key, editorParams.elementAttributes[key]);
+			}
+		}
+	}
+
+	input.value = value;
+
+	onRendered(function(){
+		if(cell.getType() === "cell"){
+			input.focus({preventScroll: true});
+			input.style.height = "100%";
+
+			input.scrollHeight;
+			input.style.height = input.scrollHeight + "px";
+			cell.getRow().normalizeHeight();
+
+			if(editorParams.selectContents){
+				input.select();
+			}
+		}
+	});
+
+	function onChange(e){
+
+		if(((cellValue === null || typeof cellValue === "undefined") && input.value !== "") || input.value !== cellValue){
+
+			if(success(input.value)){
+				cellValue = input.value; //persist value if successfully validated incase editor is used as header filter
+			}
+
+			setTimeout(function(){
+				cell.getRow().normalizeHeight();
+			},300);
+		}else{
+			cancel();
+		}
+	}
+
+	//submit new value on blur or change
+	input.addEventListener("change", onChange);
+	input.addEventListener("blur", onChange);
+
+	input.addEventListener("keyup", function(){
+
+		input.style.height = "";
+
+		var heightNow = input.scrollHeight;
+
+		input.style.height = heightNow + "px";
+
+		if(heightNow != scrollHeight){
+			scrollHeight = heightNow;
+			cell.getRow().normalizeHeight();
+		}
+	});
+
+	input.addEventListener("keydown", function(e){
+
+		switch(e.key){
+
+			case "Enter":
+				if(e.shiftKey && editorParams.shiftEnterSubmit){
+					onChange(e);
+				}
+				break;
+
+			case "Escape":
+				cancel();
+				break;
+
+			case "ArrowUp":
+				if(vertNav == "editor" || (vertNav == "hybrid" && input.selectionStart)){
+					e.stopImmediatePropagation();
+					e.stopPropagation();
+				}
+
+				break;
+
+			case "ArrowDown":
+				if(vertNav == "editor" || (vertNav == "hybrid" && input.selectionStart !== input.value.length)){
+					e.stopImmediatePropagation();
+					e.stopPropagation();
+				}
+				break;
+
+			case "End":
+			case "Home":
+				e.stopPropagation();
+				break;
+		}
+	});
+
+	if(editorParams.mask){
+		maskInput(input, editorParams);
+	}
+
+	return input;
+}

package/src/js/modules/Edit/defaults/editors/tickCross.js

@@ -0,0 +1,95 @@
+//checkbox
+export default function(cell, onRendered, success, cancel, editorParams){
+	var value = cell.getValue(),
+	input = document.createElement("input"),
+	tristate = editorParams.tristate,
+	indetermValue = typeof editorParams.indeterminateValue === "undefined" ? null : editorParams.indeterminateValue,
+	indetermState = false,
+	trueValueSet = Object.keys(editorParams).includes("trueValue"),
+	falseValueSet = Object.keys(editorParams).includes("falseValue");
+	
+	input.setAttribute("type", "checkbox");
+	input.style.marginTop = "5px";
+	input.style.boxSizing = "border-box";
+	
+	if(editorParams.elementAttributes && typeof editorParams.elementAttributes == "object"){
+		for (let key in editorParams.elementAttributes){
+			if(key.charAt(0) == "+"){
+				key = key.slice(1);
+				input.setAttribute(key, input.getAttribute(key) + editorParams.elementAttributes["+" + key]);
+			}else{
+				input.setAttribute(key, editorParams.elementAttributes[key]);
+			}
+		}
+	}
+	
+	input.value = value;
+	
+	if(tristate && (typeof value === "undefined" || value === indetermValue || value === "")){
+		indetermState = true;
+		input.indeterminate = true;
+	}
+	
+	if(this.table.browser != "firefox" && this.table.browser != "safari"){ //prevent blur issue on mac firefox
+		onRendered(function(){
+			if(cell.getType() === "cell"){
+				input.focus({preventScroll: true});
+			}
+		});
+	}
+	
+	input.checked = trueValueSet ? value === editorParams.trueValue : (value === true || value === "true" || value === "True" || value === 1);
+	
+	function setValue(blur){
+		var checkedValue = input.checked;
+		
+		if(trueValueSet && checkedValue){
+			checkedValue = editorParams.trueValue;
+		}else if(falseValueSet && !checkedValue){
+			checkedValue = editorParams.falseValue;
+		}
+		
+		if(tristate){
+			if(!blur){
+				if(input.checked && !indetermState){
+					input.checked = false;
+					input.indeterminate = true;
+					indetermState = true;
+					return indetermValue;
+				}else{
+					indetermState = false;
+					return checkedValue;
+				}
+			}else{
+				if(indetermState){
+					return indetermValue;
+				}else{
+					return checkedValue;
+				}
+			}
+		}else{
+			return checkedValue;
+		}
+	}
+	
+	//submit new value on blur
+	input.addEventListener("change", function(e){
+		success(setValue());
+	});
+
+	input.addEventListener("blur", function(e){
+		success(setValue(true));
+	});
+	
+	//submit new value on enter
+	input.addEventListener("keydown", function(e){
+		if(e.key == "Enter"){
+			success(setValue());
+		}
+		if(e.key == "Escape"){
+			cancel();
+		}
+	});
+	
+	return input;
+}

package/src/js/modules/Edit/defaults/editors/time.js

@@ -0,0 +1,132 @@
+//input element
+export default function(cell, onRendered, success, cancel, editorParams){
+	var inputFormat = editorParams.format,
+	vertNav = editorParams.verticalNavigation || "editor",
+	DT = inputFormat ? (window.DateTime || luxon.DateTime) : null, 
+	newDatetime;
+	
+	//create and style input
+	var cellValue = cell.getValue(),
+	input = document.createElement("input");
+	
+	input.type = "time";
+	input.style.padding = "4px";
+	input.style.width = "100%";
+	input.style.boxSizing = "border-box";
+	
+	if(editorParams.elementAttributes && typeof editorParams.elementAttributes == "object"){
+		for (let key in editorParams.elementAttributes){
+			if(key.charAt(0) == "+"){
+				key = key.slice(1);
+				input.setAttribute(key, input.getAttribute(key) + editorParams.elementAttributes["+" + key]);
+			}else{
+				input.setAttribute(key, editorParams.elementAttributes[key]);
+			}
+		}
+	}
+	
+	cellValue = typeof cellValue !== "undefined" ? cellValue : "";
+	
+	if(inputFormat){
+		if(DT){
+			if(DT.isDateTime(cellValue)){
+				newDatetime = cellValue;
+			}else if(inputFormat === "x"){
+				newDatetime = DT.fromMillis(cellValue);
+			}else if(inputFormat === "iso"){
+				newDatetime = DT.fromISO(String(cellValue));
+			}else{
+				newDatetime = DT.fromFormat(String(cellValue), inputFormat);
+			}
+			
+			cellValue = newDatetime.toFormat("HH:mm");
+			
+		}else{
+			console.error("Editor Error - 'date' editor 'format' param is dependant on luxon.js");
+		}
+	}
+	
+	input.value = cellValue;
+	
+	onRendered(function(){
+		if(cell.getType() == "cell"){
+			input.focus({preventScroll: true});
+			input.style.height = "100%";
+			
+			if(editorParams.selectContents){
+				input.select();
+			}
+		}
+	});
+	
+	function onChange(){
+		var value = input.value,
+		luxTime;
+		
+		if(((cellValue === null || typeof cellValue === "undefined") && value !== "") || value !== cellValue){
+			
+			if(value && inputFormat){
+				luxTime = DT.fromFormat(String(value), "hh:mm");
+
+				switch(inputFormat){
+					case true:
+						value = luxTime;
+						break;
+
+					case "x":
+						value = luxTime.toMillis();
+						break;
+					
+					case "iso":
+						value = luxTime.toISO();
+						break;
+
+					default:
+						value = luxTime.toFormat(inputFormat);
+				}
+			}
+			
+			if(success(value)){
+				cellValue = input.value; //persist value if successfully validated incase editor is used as header filter
+			}
+		}else{
+			cancel();
+		}
+	}
+	
+	//submit new value on blur
+	input.addEventListener("blur", function(e) {
+		if (e.relatedTarget || e.rangeParent || e.explicitOriginalTarget !== input) {
+			onChange(); // only on a "true" blur; not when focusing browser's date/time picker
+		}
+	});
+	
+	//submit new value on enter
+	input.addEventListener("keydown", function(e){
+		switch(e.key){
+			// case "Tab":
+			case "Enter":
+				onChange();
+				break;
+			
+			case "Escape":
+				cancel();
+				break;
+			
+			case "End":
+			case "Home":
+				e.stopPropagation();
+				break;
+
+			case "ArrowUp":
+			case "ArrowDown":
+				if(vertNav == "editor"){
+					e.stopImmediatePropagation();
+					e.stopPropagation();
+				}
+				break;
+		}
+	});
+	
+	return input;
+}

package/src/js/modules/Edit/defaults/editors.js

@@ -0,0 +1,27 @@
+import input from './editors/input.js';
+import textarea from './editors/textarea.js';
+import number from './editors/number.js';
+import range from './editors/range.js';
+import date from './editors/date.js';
+import time from './editors/time.js';
+import datetime from './editors/datetime.js';
+import list from './editors/list.js';
+import star from './editors/star.js';
+import progress from './editors/progress.js';
+import tickCross from './editors/tickCross.js';
+import adaptable from './editors/adaptable.js';
+
+export default {
+	input:input,
+	textarea:textarea,
+	number:number,
+	range:range,
+	date:date,
+	time:time,
+	datetime:datetime,
+	list:list,
+	star:star,
+	progress:progress,
+	tickCross:tickCross,
+	adaptable:adaptable,
+};

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

@@ -0,0 +1,74 @@
+export default function maskInput(el, options){
+	var mask = options.mask,
+	maskLetter = typeof options.maskLetterChar !== "undefined" ? options.maskLetterChar : "A",
+	maskNumber = typeof options.maskNumberChar !== "undefined" ? options.maskNumberChar : "9",
+	maskWildcard = typeof options.maskWildcardChar !== "undefined" ? options.maskWildcardChar : "*";
+
+	function fillSymbols(index){
+		var symbol = mask[index];
+		if(typeof symbol !== "undefined" && symbol !== maskWildcard && symbol !== maskLetter && symbol !== maskNumber){
+			el.value = el.value + "" + symbol;
+			fillSymbols(index+1);
+		}
+	}
+
+	el.addEventListener("keydown", (e) => {
+		var index = el.value.length,
+		char = e.key;
+
+		if(e.key.length === 1 && !e.ctrlKey && !e.metaKey){
+			if(index >= mask.length){
+				e.preventDefault();
+				e.stopPropagation();
+				return false;
+			}else{
+				switch(mask[index]){
+					case maskLetter:
+						if(char.toUpperCase() == char.toLowerCase()){
+							e.preventDefault();
+							e.stopPropagation();
+							return false;
+						}
+						break;
+
+					case maskNumber:
+						if(isNaN(char)){
+							e.preventDefault();
+							e.stopPropagation();
+							return false;
+						}
+						break;
+
+					case maskWildcard:
+						break;
+
+					default:
+						if(char !== mask[index]){
+							e.preventDefault();
+							e.stopPropagation();
+							return false;
+						}
+				}
+			}
+		}
+
+		return;
+	});
+
+	el.addEventListener("keyup", (e) => {
+		if(e.key.length === 1){
+			if(options.maskAutoFill){
+				fillSymbols(el.value.length);
+			}
+		}
+	});
+
+
+	if(!el.placeholder){
+		el.placeholder = mask;
+	}
+
+	if(options.maskAutoFill){
+		fillSymbols(el.value.length);
+	}
+}