@flourish/ui-styles 6.0.0 → 6.0.2

package/ui-styles.js

@@ -9,7 +9,7 @@
 		return this;
 	}
 
-	Stylesheet.prototype.select = function(selector) {
+	Stylesheet.prototype.select = function (selector) {
 		if (!selector) return this;
 		var declaration = new Declaration(selector);
 		declaration.parent = this;
@@ -18,16 +18,16 @@
 		return declaration;
 	};
 
-	Stylesheet.prototype.addDeclaration = function(declaration) {
+	Stylesheet.prototype.addDeclaration = function (declaration) {
 		this.declarations.push(declaration);
 		return this;
 	};
 
-	Stylesheet.prototype.print = function() {
+	Stylesheet.prototype.print = function () {
 		var text = "";
-		this.declarations.forEach(function(declaration) {
+		this.declarations.forEach(function (declaration) {
 			text += declaration.selector + " {\n";
-			declaration.styles.forEach(function(style) {
+			declaration.styles.forEach(function (style) {
 				text += "\t" + style[0] + ": " + style[1] + ";\n";
 			});
 			text += "}\n\n";
@@ -35,7 +35,7 @@
 		return text;
 	};
 
-	Stylesheet.prototype.clear = function() {
+	Stylesheet.prototype.clear = function () {
 		this.declarations = [];
 		return this;
 	};
@@ -46,25 +46,28 @@
 		return this;
 	}
 
-	Declaration.prototype.style = function(property, _value) {
+	Declaration.prototype.style = function (property, _value) {
 		var value = typeof value_ == "function" ? _value() : _value;
-		if (value !== "" && value !== null && value !== undefined) this.styles.push([property, value]);
+		if (value !== "" && value !== null && value !== undefined)
+			this.styles.push([property, value]);
 		return this;
 	};
 
-	Declaration.prototype.select = function(selector) {
+	Declaration.prototype.select = function (selector) {
 		return this.parent.select(this.selector + " " + selector);
 	};
 
 	var DEFAULTS$3 = Object.freeze({
 		font_size: 1,
 		font_weight: "bold",
-		height: 2
+		height: 2,
 	});
 
 	function GeneralControlsStyle(state_, selector_, layout_) {
 		this._state = state_;
-		for (var key in DEFAULTS$3) {	if (this._state[key] === undefined) this._state[key] = DEFAULTS$3[key]; }
+		for (var key in DEFAULTS$3) {
+			if (this._state[key] === undefined) this._state[key] = DEFAULTS$3[key];
+		}
 
 		this._layout = layout_ || {};
 
@@ -75,44 +78,49 @@
 		return this;
 	}
 
-	GeneralControlsStyle.prototype._createStylesheet = function() {
+	GeneralControlsStyle.prototype._createStylesheet = function () {
 		this._stylesheet = document.createElement("style");
 		this._stylesheet.className = "fl-ui-styles-controls";
 		document.head.appendChild(this._stylesheet);
 	};
 
-	GeneralControlsStyle.prototype.update = function() {
+	GeneralControlsStyle.prototype.update = function () {
 		this._styles.clear();
 
-		this._styles.select(this._selector + ".hidden")
-			.style("display", "none");
+		this._styles.select(this._selector + ".hidden").style("display", "none");
 
-		this._styles.select(this._selector)
+		this._styles
+			.select(this._selector)
 			.style("vertical-align", "middle")
 			.style("position", "relative")
 			.style("font-size", this._state.font_size + "rem")
 			.style("font-weight", this._state.font_weight);
 
-		this._styles.select(".fl-controls-title")
+		this._styles
+			.select(".fl-controls-title")
 			.style("font-size", this._state.font_size + "rem")
 			.style("font-weight", this._state.font_weight)
 			.style("vertical-align", "middle");
 
-		this._styles.select(this._selector + ".fl-control .button")
+		this._styles
+			.select(this._selector + ".fl-control .button")
 			.style("height", this._state.height + "rem")
 			.style("padding", "0 0.5em");
 
-		this._styles.select(this._selector + "-dropdown select")
+		this._styles
+			.select(this._selector + "-dropdown select")
 			.style("height", this._state.height + "rem")
 			.style("font-size", this._state.font_size + "rem")
 			.style("font-weight", this._state.font_weight)
 			.style("padding", 0 + " " + this._state.height * 0.1 + "rem");
 
-		this._styles.select(this._selector + "-slider .slider-end-labels")
+		this._styles
+			.select(this._selector + "-slider .slider-end-labels")
 			.style("font-size", this._state.font_size + "rem")
 			.style("font-weight", this._state.font_weight);
 
-		this._styles.select(this._selector + "-slider")
+		this._styles
+			.select(this._selector + "-slider")
 			.style("height", this._state.height + "rem");
 
 		// Some additional styling for slider controls
@@ -621,8 +629,33 @@
 	  each: proto.each
 	};
 
+	// This is an exception because mocha doesn't run in a browser context, so some
+	// browser methods aren't available.
+	const is_browser =
+		typeof window !== "undefined" &&
+		typeof document !== "undefined" &&
+		typeof document.createElement === "function" &&
+		typeof document.body?.appendChild === "function" &&
+		typeof HTMLElement !== "undefined";
+
 	const canvas = document.createElement("canvas");
-	canvas.getContext("2d");
+	const ctx = canvas.getContext("2d");
+
+	const tnums_svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+	const tnums_text_element = document.createElementNS(
+		"http://www.w3.org/2000/svg",
+		"text",
+	);
+	tnums_svg.appendChild(tnums_text_element);
+	if (is_browser) {
+		canvas.style.position = "fixed";
+		canvas.style.left = "1000vw";
+		tnums_svg.style.position = "fixed";
+		tnums_svg.style.left = "1000vw";
+		document.body.appendChild(canvas);
+		document.body.appendChild(tnums_svg);
+	}
+	let is_browser_supporting_tnums_in_canvas = null;
 
 	function getTextDirection() {
 		return window.getComputedStyle(document.body).direction || "ltr";
@@ -641,6 +674,71 @@
 		return c ? c.toString() : false;
 	}
 
+	function checkBrowserTnumSupport() {
+		const test_tnum_string = "0123456789.,£";
+		const no_tnum_canvas = document.createElement("canvas");
+		const tnum_canvas = document.createElement("canvas");
+		const no_tnum_ctx = no_tnum_canvas.getContext("2d");
+		const tnum_ctx = tnum_canvas.getContext("2d");
+
+		no_tnum_canvas.setAttribute(
+			"style",
+			"font-feature-settings: normal; font-variant-numeric: normal; position: fixed; left: 1000vw;",
+		);
+		tnum_canvas.setAttribute(
+			"style",
+			'font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; position: fixed; left: 1000vw;',
+		);
+
+		no_tnum_ctx.font = tnum_ctx.font = ctx.font;
+
+		document.body.appendChild(no_tnum_canvas);
+		document.body.appendChild(tnum_canvas);
+
+		const width_no_tnum = no_tnum_ctx.measureText(test_tnum_string).width;
+		const width_tnum = tnum_ctx.measureText(test_tnum_string).width;
+
+		is_browser_supporting_tnums_in_canvas = width_no_tnum !== width_tnum;
+
+		document.body.removeChild(no_tnum_canvas);
+		document.body.removeChild(tnum_canvas);
+
+		return is_browser_supporting_tnums_in_canvas;
+	}
+
+	ctx.measureTextWithTnums = function (text) {
+		if (!is_browser) return ctx.measureText(text);
+		const computed_style = window.getComputedStyle(this.canvas);
+		const is_tnums_style_set =
+			(computed_style.fontFeatureSettings || "").includes("tnum") ||
+			(computed_style.fontVariantNumeric || "").includes("tabular-nums");
+
+		// No tnums set for this text, so measure using canvas
+		if (!is_tnums_style_set) return this.measureText(text);
+
+		// Tnums are set, check if browser supports it
+		if (is_browser_supporting_tnums_in_canvas === null) checkBrowserTnumSupport();
+
+		// Browser supports tnums in canvas, measure text
+		if (is_browser_supporting_tnums_in_canvas) return this.measureText(text);
+
+		// Browser does not support tnums in canvas, measure text using svg instead
+		tnums_text_element.textContent = text;
+		tnums_text_element.setAttribute(
+			"style",
+			`font: ${ctx.font}; font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums; position: fixed; left: 1000vw;`,
+		);
+
+		let svg_text_width = tnums_text_element.getBBox().width;
+
+		// measureText in order to return a full TextMetrics object with the svg measured width
+		const measured_text = this.measureText(text);
+		return {
+			...measured_text,
+			width: svg_text_width,
+		};
+	};
+
 	var DEFAULTS$2 = Object.freeze({
 		background: null,
 		font_color: null,
@@ -654,12 +752,14 @@
 		border_width: 1,
 		border_transparency: 0.25,
 		border_color: null,
-		border_radius: 3
+		border_radius: 3,
 	});
 
 	function ButtonStyle(state_, selector_, layout_) {
 		this._state = state_;
-		for (var key in DEFAULTS$2) {	if (this._state[key] === undefined) this._state[key] = DEFAULTS$2[key]; }
+		for (var key in DEFAULTS$2) {
+			if (this._state[key] === undefined) this._state[key] = DEFAULTS$2[key];
+		}
 
 		this._layout = layout_ || {};
 
@@ -670,24 +770,34 @@
 		return this;
 	}
 
-	ButtonStyle.prototype._createStylesheet = function() {
+	ButtonStyle.prototype._createStylesheet = function () {
 		this._stylesheet = document.createElement("style");
 		this._stylesheet.className = "fl-ui-styles-button";
 		document.head.appendChild(this._stylesheet);
 	};
 
-	ButtonStyle.prototype.update = function() {
+	ButtonStyle.prototype.update = function () {
 		this._styles.clear();
 
-		var background_color = this._state.background || (this._layout.background_color_enabled ? this._layout.background_color || "#ffffff" : "#ffffff");
-		var text_color = this._state.font_color || this._layout.font_color || "#333333";
-		var border_color = hexToRgba(this._state.border_color || text_color, this._state.border_transparency);
+		var background_color =
+			this._state.background ||
+			(this._layout.background_color_enabled
+				? this._layout.background_color || "#ffffff"
+				: "#ffffff");
+		var text_color =
+			this._state.font_color || this._layout.font_color || "#333333";
+		var border_color = hexToRgba(
+			this._state.border_color || text_color,
+			this._state.border_transparency,
+		);
 		var read_direction = getTextDirection();
 
-		this._styles.select(this._selector + ".fl-control.hidden")
+		this._styles
+			.select(this._selector + ".fl-control.hidden")
 			.style("display", "none");
 
-		this._styles.select(this._selector + ".fl-control .button")
+		this._styles
+			.select(this._selector + ".fl-control .button")
 			.style("overflow", "hidden")
 			.style("white-space", "nowrap")
 			.style("margin", "0 2px 0 0 !important")
@@ -696,15 +806,18 @@
 			.style("border", this._state.border_width + "px solid " + border_color)
 			.style("border-radius", this._state.border_radius + "px");
 
-		this._styles.select(this._selector + ".fl-control .button:hover")
+		this._styles
+			.select(this._selector + ".fl-control .button:hover")
 			.style("background-color", this._state.background_hover || background_color)
 			.style("color", this._state.font_color_hover || text_color);
 
-		this._styles.select(this._selector + ".fl-control .button.selected")
+		this._styles
+			.select(this._selector + ".fl-control .button.selected")
 			.style("background-color", this._state.background_selected)
 			.style("color", this._state.font_color_selected);
 
-		this._styles.select(this._selector + ".grouped.fl-control .button")
+		this._styles
+			.select(this._selector + ".grouped.fl-control .button")
 			.style("border-right", "none")
 			.style("border-radius", "0")
 			.style("margin", "0");
@@ -713,14 +826,38 @@
 		var left_most_button_selector = is_rtl ? ":last-child" : ":first-child";
 		var right_most_button_selector = is_rtl ? ":first-child" : ":last-child";
 
-		this._styles.select(this._selector + ".grouped.fl-control .button" + left_most_button_selector)
-			.style("border-radius", this._state.border_radius + "px 0 0 " + this._state.border_radius + "px");
-
-		this._styles.select(this._selector + ".grouped.fl-control .button" + right_most_button_selector)
-			.style("border-radius", "0 " + this._state.border_radius + "px " + this._state.border_radius + "px 0")
-			.style("border-right", this._state.border_width + "px solid " + border_color);
-
-		this._styles.select(this._selector + ".grouped.fl-control.fixed-width:not(.hidden)")
+		this._styles
+			.select(
+				this._selector +
+					".grouped.fl-control .button" +
+					left_most_button_selector,
+			)
+			.style(
+				"border-radius",
+				this._state.border_radius + "px 0 0 " + this._state.border_radius + "px",
+			);
+
+		this._styles
+			.select(
+				this._selector +
+					".grouped.fl-control .button" +
+					right_most_button_selector,
+			)
+			.style(
+				"border-radius",
+				"0 " +
+					this._state.border_radius +
+					"px " +
+					this._state.border_radius +
+					"px 0",
+			)
+			.style(
+				"border-right",
+				this._state.border_width + "px solid " + border_color,
+			);
+
+		this._styles
+			.select(this._selector + ".grouped.fl-control.fixed-width:not(.hidden)")
 			.style("width", this._state.grouped_width + "%");
 
 		this._stylesheet.innerHTML = this._styles.print();
@@ -734,12 +871,14 @@
 		border_width: 1,
 		border_color: null,
 		border_transparency: 0.25,
-		border_radius: 3
+		border_radius: 3,
 	});
 
 	function DropdownStyle(state_, selector_, layout_) {
 		this._state = state_;
-		for (var key in DEFAULTS$1) {	if (this._state[key] === undefined) this._state[key] = DEFAULTS$1[key]; }
+		for (var key in DEFAULTS$1) {
+			if (this._state[key] === undefined) this._state[key] = DEFAULTS$1[key];
+		}
 
 		this._layout = layout_ || {};
 
@@ -750,36 +889,42 @@
 		return this;
 	}
 
-	DropdownStyle.prototype._createStylesheet = function() {
+	DropdownStyle.prototype._createStylesheet = function () {
 		this._stylesheet = document.createElement("style");
 		this._stylesheet.className = "fl-ui-styles-dropdown";
 		document.head.appendChild(this._stylesheet);
 	};
 
-	DropdownStyle.prototype.update = function() {
+	DropdownStyle.prototype.update = function () {
 		this._styles.clear();
 
 		const background_color = this._state.background || "transparent";
-		const user_defined_text_color = this._state.font_color || this._layout.font_color;
+		const user_defined_text_color =
+			this._state.font_color || this._layout.font_color;
 		const text_color = user_defined_text_color || "inherit";
 		let border_color;
 		if (this._state.border_color) {
-			border_color = hexToRgba(this._state.border_color, this._state.border_transparency);
-		}
-		else if (user_defined_text_color) {
-			border_color = hexToRgba(user_defined_text_color, this._state.border_transparency);
-		}
-		else {
+			border_color = hexToRgba(
+				this._state.border_color,
+				this._state.border_transparency,
+			);
+		} else if (user_defined_text_color) {
+			border_color = hexToRgba(
+				user_defined_text_color,
+				this._state.border_transparency,
+			);
+		} else {
 			border_color = "currentColor";
 		}
 
-		this._styles.select(this._selector + " .heading")
+		this._styles
+			.select(this._selector + " .heading")
 			.style("margin-bottom", "0.4em");
 
-		this._styles.select(this._selector)
-			.style("pointer-events", "all");
+		this._styles.select(this._selector).style("pointer-events", "all");
 
-		this._styles.select(this._selector + " select")
+		this._styles
+			.select(this._selector + " select")
 			.style("display", "inline-block")
 			.style("cursor", "pointer")
 			.style("overflow", "hidden")
@@ -788,15 +933,37 @@
 			.style("font-family", "inherit")
 			.style("background-color", background_color)
 			.style("color", text_color)
-			.style("border", this._state.border_style == "bottom" ? this._state.border_width + "px solid transparent" : this._state.border_width + "px solid " + border_color)
-			.style("border-bottom", this._state.border_style == "bottom" ? this._state.border_width + "px solid " + border_color : null)
-			.style("border-radius", this._state.border_style == "bottom" ? null : this._state.border_radius + "px");
-
-		this._styles.select(this._selector + ":after")
-			.style("right", this._state.border_style == "bottom" ? null : this._state.border_width + 5 + "px")
+			.style(
+				"border",
+				this._state.border_style == "bottom"
+					? this._state.border_width + "px solid transparent"
+					: this._state.border_width + "px solid " + border_color,
+			)
+			.style(
+				"border-bottom",
+				this._state.border_style == "bottom"
+					? this._state.border_width + "px solid " + border_color
+					: null,
+			)
+			.style(
+				"border-radius",
+				this._state.border_style == "bottom"
+					? null
+					: this._state.border_radius + "px",
+			);
+
+		this._styles
+			.select(this._selector + ":after")
+			.style(
+				"right",
+				this._state.border_style == "bottom"
+					? null
+					: this._state.border_width + 5 + "px",
+			)
 			.style("color", text_color);
 
-		this._styles.select(this._selector + " .main .current")
+		this._styles
+			.select(this._selector + " .main .current")
 			.style("line-height", "1em")
 			.style("height", "100%")
 			.style("max-width", "88%")
@@ -804,7 +971,8 @@
 			.style("overflow", "hidden")
 			.style("vertical-align", "top");
 
-		this._styles.select(this._selector + " .list")
+		this._styles
+			.select(this._selector + " .list")
 			.style("top", "2px")
 			.style("min-width", "100%")
 			.style("padding", "2px")
@@ -819,22 +987,31 @@
 			.style("font-weight", "normal")
 			.style("color", text_color);
 
-		this._styles.select(this._selector + ".open .list")
+		this._styles
+			.select(this._selector + ".open .list")
 			.style("display", "block")
 			.style("border", this._state.border_width + "px solid " + border_color)
 			.style("background-color", background_color)
 			.style("z-index", "1")
 			.style("animation", "dropdown-out 200ms");
 
-		this._styles.select(this._selector + " .list-item:hover")
+		this._styles
+			.select(this._selector + " .list-item:hover")
 			.style("opacity", "0.6");
 
-		this._styles.select(this._selector + " .list-item.selected, " + this._selector + " .list-item.selected:hover")
+		this._styles
+			.select(
+				this._selector +
+					" .list-item.selected, " +
+					this._selector +
+					" .list-item.selected:hover",
+			)
 			.style("opacity", "1")
 			.style("cursor", "default");
 
 		if (this._state.border_style == "bottom") {
-			this._styles.select(this._selector + " .main")
+			this._styles
+				.select(this._selector + " .main")
 				.style("padding-left", 0)
 				.style("padding-right", "0.1rem");
 		}
@@ -856,12 +1033,14 @@
 		track_height: 0.2,
 		margin: 4.5,
 
-		play_button: true
+		play_button: true,
 	});
 
 	function SliderStyle(state_, selector_, layout_) {
 		this._state = state_;
-		for (var key in DEFAULTS) {	if (this._state[key] === undefined) this._state[key] = DEFAULTS[key]; }
+		for (var key in DEFAULTS) {
+			if (this._state[key] === undefined) this._state[key] = DEFAULTS[key];
+		}
 
 		this._layout = layout_ || {};
 
@@ -872,66 +1051,79 @@
 		return this;
 	}
 
-	SliderStyle.prototype._createStylesheet = function() {
+	SliderStyle.prototype._createStylesheet = function () {
 		this._stylesheet = document.createElement("style");
 		this._stylesheet.className = "fl-ui-styles-slider";
 		document.head.appendChild(this._stylesheet);
 	};
 
-	SliderStyle.prototype.update = function() {
+	SliderStyle.prototype.update = function () {
 		this._styles.clear();
 
 		var track_color = this._state.track_color || "#dddddd";
-		var text_color = this._state.font_color || this._layout.font_color || "currentColor";
+		var text_color =
+			this._state.font_color || this._layout.font_color || "currentColor";
 		var slider_color = "currentColor"; // So that handle can inherit layout text color via this parent
-		var handle_color = this._state.handle_color || this._layout.font_color || "currentColor";
-		var play_color = this._state.play_color || this._layout.font_color || "currentColor";
+		var handle_color =
+			this._state.handle_color || this._layout.font_color || "currentColor";
+		var play_color =
+			this._state.play_color || this._layout.font_color || "currentColor";
 
 		var handle_radius = Math.round(remToPx(this._state.handle_height));
 		var track_height = remToPx(this._state.track_height);
 
-		this._styles.select(this._selector + " .fl-controls-slider")
+		this._styles
+			.select(this._selector + " .fl-controls-slider")
 			.style("height", handle_radius * 2 + "px");
 
-		this._styles.select(this._selector + " .slider-play")
+		this._styles
+			.select(this._selector + " .slider-play")
 			.style("fill", play_color)
 			.style("width", handle_radius + "px")
 			.style("height", handle_radius + "px")
 			.style("display", this._state.play_button ? null : "none");
 
-		this._styles.select(this._selector + " .slider-label")
+		this._styles
+			.select(this._selector + " .slider-label")
 			.style("padding-inline-start", "0.3rem")
 			.style("box-sizing", "content-box")
 			.style("color", text_color);
 
-		this._styles.select(this._selector + " input[type=range]")
+		this._styles
+			.select(this._selector + " input[type=range]")
 			.style("-webkit-appearance", "none")
 			.style("color", slider_color)
 			.style("background-color", "transparent");
 
 		// Chrome/Edge
-		this._styles.select(this._selector + " input[type=range]::-webkit-slider-runnable-track")
+		this._styles
+			.select(
+				this._selector + " input[type=range]::-webkit-slider-runnable-track",
+			)
 			.style("-webkit-appearance", "none")
 			.style("background", track_color)
 			.style("border-radius", "100px")
 			.style("height", track_height + "px");
 
-		this._styles.select(this._selector + " input[type=range]::-webkit-slider-thumb")
+		this._styles
+			.select(this._selector + " input[type=range]::-webkit-slider-thumb")
 			.style("-webkit-appearance", "none")
 			.style("width", handle_radius + "px")
 			.style("height", handle_radius + "px")
 			.style("border-radius", "100px")
 			.style("background", handle_color)
-			.style("margin-top", -handle_radius/2 + track_height/2 + "px");
+			.style("margin-top", -handle_radius / 2 + track_height / 2 + "px");
 
 		// Firefox
-		this._styles.select(this._selector + " input[type=range]::-moz-range-track")
+		this._styles
+			.select(this._selector + " input[type=range]::-moz-range-track")
 			.style("-webkit-appearance", "none")
 			.style("background", track_color)
 			.style("border-radius", "100px")
 			.style("height", track_height + "px");
 
-		this._styles.select(this._selector + " input[type=range]::-moz-range-thumb")
+		this._styles
+			.select(this._selector + " input[type=range]::-moz-range-thumb")
 			.style("-webkit-appearance", "none")
 			.style("width", handle_radius + "px")
 			.style("height", handle_radius + "px")