@flourish/controls - npm Package Compare versions

Comparing version 4.0.0 to 5.0.0

cypress/fixtures/ui-styles.js

@@ -63,3 +63,3 @@ (function (global, factory) {
 		font_weight: "bold",
-		padding: 0.4,
+		height: 2
 	});
@@ -104,10 +104,11 @@
 		this._styles.select(this._selector + ".fl-control .button")
-			.style("padding", this._state.padding + "rem " + (this._state.padding * 2) + "rem");
+			.style("height", this._state.height + "rem")
+			.style("padding", "0 0.5em");
 
-		this._styles.select(this._selector + " .list-item")
-			.style("padding", Math.max(this._state.padding, 0.5) + "rem");
+		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 + "-dropdown .main")
-			.style("padding", this._state.padding + "rem " + (this._state.padding * 1.5) + "rem");
-
 		this._styles.select(this._selector + "-slider .slider-end-labels")
@@ -118,3 +119,3 @@ .style("font-size", this._state.font_size + "rem")
 		this._styles.select(this._selector + "-slider")
-			.style("padding", this._state.padding + "rem 0");
+			.style("height", this._state.height + "rem");
 
@@ -751,3 +752,3 @@ // Some additional styling for slider controls
 			.style("white-space", "nowrap")
-			.style("box-sizing", "content-box")
+			.style("margin", "0 2px 0 0 !important")
 			.style("background-color", background_color)
@@ -827,3 +828,3 @@ .style("color", text_color)
 
-		this._styles.select(this._selector + " .main")
+		this._styles.select(this._selector + " select")
 			.style("display", "inline-block")
@@ -834,2 +835,3 @@ .style("cursor", "pointer")
 			.style("position", "relative")
+			.style("font-family", "inherit")
 			.style("background-color", background_color)
@@ -841,6 +843,4 @@ .style("color", text_color)
 
-		this._styles.select(this._selector + " .main .symbol")
-			.style("float", "right")
-			.select("div")
-			.style("border-top-color", text_color + " !important");
+		this._styles.select(this._selector + ":after")
+			.style("right", this._state.border_style == "bottom" ? null : this._state.border_width + 5 + "px");
 
@@ -847,0 +847,0 @@ this._styles.select(this._selector + " .main .current")

cypress/integration/test.spec.js

@@ -33,5 +33,5 @@ /* eslint-disable no-undef */
 		return cy.window().then(({ document, controls, uiStyles }) => {
-			var controls_1 = controls(state.controls_1);
-			var controls_2 = controls(state.controls_2);
-			var controls_3 = controls(state.controls_3);
+			var controls_1 = controls.createControls(state.controls_1);
+			var controls_2 = controls.createControls(state.controls_2);
+			var controls_3 = controls.createControls(state.controls_3);
 
@@ -44,3 +44,3 @@ var controlsStyle = uiStyles.createGeneralControlsStyle(state.controls_style, ".fl-control"),
 				.value(state.selected)
-				.on("change", function (d) {
+				.on("change", function () {
 					state.selected = controls_1.value();
@@ -53,3 +53,3 @@ update();
 				.value(state.selected)
-				.on("change", function (d) {
+				.on("change", function () {
 					state.selected = controls_2.value();
@@ -63,3 +63,3 @@ update();
 
-				.on("change", function (d) {
+				.on("change", function () {
 					state.selected = controls_3.value();
@@ -110,3 +110,3 @@ update();
 			var font_sizes = [0.5, 1, 4];
-			var swatch_sizes = [0.1, 1, 3];
+			var swatch_sizes = [1, 2, 4];
 
@@ -117,3 +117,3 @@ cy.get(font_sizes).each(font_size => {
 						state.controls_style.font_size = font_size;
-						state.controls_style.padding = swatch_size;
+						state.controls_style.height = swatch_size;
 						updateControls({ control_containers, control_styles });
@@ -151,3 +151,3 @@
 			var font_sizes = [0.5, 1, 2, 2.5];
-			var swatch_sizes = [0.1, 1, 2];
+			var swatch_sizes = [1, 2, 4];
 			var previous_offset = null;
@@ -161,6 +161,5 @@
 						state.controls_style.font_size = font_size;
-						state.controls_style.padding = swatch_size;
+						state.controls_style.height = swatch_size;
 						previous_offset = null;
 						updateControls(control_containers);
-
 						cy.get(".fl-controls-container")
@@ -171,2 +170,3 @@ .then($controls_containers => {
 										.then($control => {
+											console.log("Testing font_size: " + font_size + " with swatch_size: " + swatch_size);
 											if (previous_offset === null) {
@@ -176,3 +176,3 @@ previous_offset = $control.offset().top;
 											else {
-												cy.expect($control.offset().top).eq(previous_offset);
+												cy.expect($control.offset().top).closeTo(previous_offset, 0.5);
 											}
@@ -179,0 +179,0 @@ });

package.json

 {
   "name": "@flourish/controls",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "description": "Switchable dropdown/buttons/slider control",
@@ -13,4 +13,5 @@ "main": "controls.js",
     "prepare": "npm run build && npm run minify",
-    "minify": "uglifyjs -m -o controls.min.js controls.js",
-    "lint": "eslint src"
+    "minify": "terser -m -o controls.min.js controls.js",
+    "lint": "eslint src",
+    "cypress:open": "flcypress open"
   },
@@ -25,8 +26,9 @@ "author": "Kiln Enterprises Ltd",
     "@flourish/js2css": "^1.0.0",
-    "@flourish/pocket-knife": "^0.3.2",
-    "@flourish/slider": "^1.4.0",
-    "d3-selection": "^1.4.0",
-    "rollup": "^1.26.0",
-    "rollup-plugin-node-resolve": "^4.2.4",
-    "uglify-js": "^3.6.4"
+    "@flourish/pocket-knife": "^0.8.0",
+    "@flourish/slider": "^1.4.1",
+    "@rollup/plugin-node-resolve": "^13.0.4",
+    "d3-selection": "^1.0.0",
+    "d3-time-format": "^2.3.0",
+    "rollup": "^2.56.2",
+    "terser": "^5.7.1"
   },
@@ -36,4 +38,4 @@ "devDependencies": {
     "@flourish/eslint-plugin-flourish": "^0.7.2",
-    "cypress": "^7.3.0",
-    "eslint": "^5.16.0",
+    "cypress": "^8.3.0",
+    "eslint": "^7.32.0",
     "pre-commit": "^1.2.2"
@@ -40,0 +42,0 @@ },

README.md

@@ -81,3 +81,3 @@ # Flourish controls
 
-In `update` you typically want to update the set of `options` and then call the controls own `update` method: `buttons_control.options(options).update();`.
+In `update` you typically want to update the set of `options` and then call the controls own `update` method: `buttons_control.options(options).update();`. If you're using this module alongside `@flourish/ui-styles` you should call the update method from the ui-styles object first (this will ensure the dropdown icon correctly matches the size and color styles set in the ui-styles panel).
 
@@ -100,5 +100,5 @@ ## Controls container methods
 
-### `appendTo(parent_container, [bounding_container])`
+### `appendTo(parent_container)`
 
-Appends the control to the `parent_container` DOM node and injects CSS into the `head` if necessary. The optional `bounding_container` makes sure the dropdown list will never overflow outside that container.
+Appends the control to the `parent_container` DOM node and injects CSS into the `head` if necessary.
 
@@ -105,0 +105,0 @@ Returns the control object.

RELEASE_NOTES.md

@@ -0,1 +1,6 @@
+# 5.0.0
+* Use browsers' native `select` element for dropdown [BREAKING]
+* Adopt ES6 [BREAKING]
+* Controls are now set by height instead of padding [BREAKING]
+
 # 4.0.0
@@ -2,0 +7,0 @@ * Add controls container function with new named exports [BREAKING]

rollup.config.js

@@ -1,2 +0,2 @@
-import nodeResolve from "rollup-plugin-node-resolve";
+import nodeResolve from "@rollup/plugin-node-resolve";
 
@@ -3,0 +3,0 @@ export default {

src/controls/dropdown.js

@@ -5,75 +5,23 @@ import { select } from "d3-selection";
 
-var MIN_HEIGHT = 90;
+
 function createDropdown(control_obj, state, container) {
 	var dropdown_obj = {};
-	var bounding_container = document.body;
 
 	// Add dropdown elements to container
-	var dropdown = select(container).append("div").attr("class", "fl-control fl-control-dropdown");
-	var dropdown_node = dropdown.node();
-	var dropdown_main = dropdown.append("div").attr("class", "main");
-	var dropdown_current = dropdown_main.append("span").attr("class", "current");
-	dropdown_main.append("span").attr("class", "symbol").style("width", "10px")
-		.append("div")
-		.style("border-left", "5px solid transparent")
-		.style("border-right", "5px solid transparent")
-		.style("border-bottom", "5px solid transparent")
-		.style("border-top-style", "solid")
-		.style("border-top-width", "5px")
-		.style("top", "50%")
-		.style("position", "absolute")
-		.style("margin-top", "-2.5px");
-	var dropdown_list = dropdown.append("div").attr("class", "list");
+	var dropdown_wrapper = select(container).append("div")
+		.attr("class", "fl-control fl-control-dropdown");
 
-	var showDropdownList = function() {
-		dropdown.classed("open", true);
-		dropdown_list.style("top", "100%");
-		dropdown_list.style("bottom", null);
-		dropdown_list.style("display", null);
-		dropdown_list.style("overflow", "auto");
-		var bounding_bb = bounding_container.getBoundingClientRect();
-		var list_bb = dropdown_list.node().getBoundingClientRect();
-		var overspill = list_bb.bottom - bounding_bb.bottom;
-		if (overspill > 0) {
-			var new_height = bounding_bb.bottom - list_bb.top - 30;
-			if (new_height > MIN_HEIGHT) dropdown_list.style("max-height", new_height + "px");
-			else dropdown_list
-				.style("top", "auto")
-				.style("bottom", "100%");
-		}
-		if (list_bb.right > window.innerWidth) {
-			dropdown_list.style("right", 0);
-		}
-	};
+	const dropdown = dropdown_wrapper.append("select")
+		.on("change", function() {
+			const data = dropdown.select("option:checked").datum();
+			const index = data.options_index;
+			control_obj.index(index);
+			control_obj.trigger("change");
+		});
 
-	var hideDropdownList = function() {
-		dropdown.classed("open", false);
-		dropdown_list.style("right", null);
-		dropdown_list.style("max-height", null);
-		dropdown_list.style("display", "none");
-	};
-
-	var toggleDropdownList = function() {
-		if (dropdown.classed("open")) hideDropdownList();
-		else showDropdownList();
-	};
-
-	dropdown_main.on("click", function() { toggleDropdownList(); });
-
-	var clickHandler = function() {
-		if (!dropdown.classed("open")) return; // If already closed, nothing to close
-		var el = event.target;
-		var parent = el.parentElement;
-		while (parent) {
-			if (el === dropdown_node) return; // We've clicked the dropdown, don't close it here
-			el = parent;
-			parent = el.parentElement;
-		}
-		hideDropdownList(); // Clicked somewhere else, hide the dropdown
-	};
-
 	var showControl = function(longest_text_width) {
 		var dropdown_width = "100%";
+
 		if (state.dropdown_width_mode == "auto") {
-			dropdown_width = Math.min(longest_text_width + 40, remToPx(20)) + "px";
+			dropdown_width = (Math.min(longest_text_width + 40, remToPx(20)) + remToPx(1)) + "px";
 		}
@@ -83,25 +31,13 @@ else if (state.dropdown_width_mode == "fixed") {
 		}
+
 		container.style.width = state.dropdown_width_mode == "full" ? dropdown_width : "";
-		dropdown.style("width", dropdown_width).style("display", state.dropdown_width_mode !== "full" ? "inline-table" : null);
-		dropdown.select(".main").style("width", dropdown_width);
+
+		dropdown_wrapper.style("width", dropdown_width)
+			.style("display", state.dropdown_width_mode !== "full" ? "inline-table" : null);
 	};
 
 	var hideControl = function() {
-		hideDropdownList();
-		dropdown.style("display", "none");
+		dropdown_wrapper.style("display", "none");
 	};
 
-
-	dropdown_obj.appendedToDOM = function(_bounding_container) {
-		if (_bounding_container) bounding_container = _bounding_container;
-		document.querySelector("body").addEventListener("click", clickHandler, false);
-		return dropdown_obj;
-	};
-
-
-	dropdown_obj.removedFromDOM = function() {
-		document.querySelector("body").removeEventListener("click", clickHandler);
-		return dropdown_obj;
-	};
-
 	dropdown_obj.show = showControl;
@@ -112,3 +48,2 @@ dropdown_obj.hide = hideControl;
 	dropdown_obj.update = function(sorted_options) {
-		dropdown_list.text("");
 		var dropdown_font_size = window.getComputedStyle(dropdown.node()).fontSize;
@@ -120,26 +55,21 @@ if (!control_obj.n_options || state.control_type !== "dropdown") {
 
-		var longest_text = "";
-		dropdown_list.text("")
-			.selectAll(".list-item")
-			.data(sorted_options)
-			.enter()
-			.append("div")
-			.attr("class", "list-item")
-			.text(function(d) {
-				if (d.display.length > longest_text.length) longest_text = d.display;
-				return d.display;
-			})
-			.on("click", function(d) {
-				hideDropdownList();
-				var i = d.options_index;
-				if (i === control_obj.index()) return;
-				control_obj.index(i);
-				dropdown_current.text(d.display).attr("title", d.display);
-				control_obj.trigger("change");
-			});
-		var longest_text_width = getTextWidth(longest_text, dropdown_font_size + " sans-serif");
-		var sorted_index = control_obj.getSortedIndex();
-		var value = sorted_options[sorted_index].display;
-		dropdown_current.text(value).attr("title", value);
+		const options = dropdown.selectAll("option").data(sorted_options, d => d.value);
+		options.exit().remove();
 
+		var options_enter = options.enter()
+			.append("option")
+			.text(d => d.display)
+			.attr("value", d => d.value);
+
+		let longest_text_width = 0;
+		const font = dropdown_font_size + " sans-serif";
+
+		if (state.dropdown_width_mode === "auto") {
+			options.merge(options_enter)
+				.each(function(d) {
+					const text_width = getTextWidth(d.display, font);
+					longest_text_width = Math.max(longest_text_width, text_width);
+				});
+		}
+
 		showControl(longest_text_width);
@@ -146,0 +76,0 @@

src/controls/slider.js

@@ -41,6 +41,6 @@ import { select } from "d3-selection";
 		.snap(true)
-		.on("change", function(i) {
+		.on("change", function(d) {
 			var is_playing = timer_id !== null;
 			if (is_playing) clearTimer();
-			sliderChangeFunction(i);
+			sliderChangeFunction(d);
 			if (is_playing) setNextTick();
@@ -131,3 +131,3 @@ });
 	var showControl = function() {
-		slider_holder.style("display", "inline-block");
+		slider_holder.style("display", "inline-flex");
 		setWidths();
@@ -134,0 +134,0 @@ setHandles();

src/index.js

@@ -87,6 +87,5 @@ import { select } from "d3-selection";
 
-	control_obj.appendTo = function(parent_container, bounding_container) {
+	control_obj.appendTo = function(parent_container) {
 		injectCSS();
 		select(parent_container).node().appendChild(container);
-		dropdown_obj.appendedToDOM(bounding_container);
 		return control_obj;
@@ -106,4 +105,2 @@ };
 		if (container.parentElement) container.parentElement.removeChild(container);
-		dropdown_obj.removedFromDOM();
-
 		return control_obj;
@@ -110,0 +107,0 @@ };

src/lib/css.js

@@ -28,4 +28,8 @@ import createStylesheet from "@flourish/js2css";
 		.style("width", "100%")
+		.style("display", "block")
 		.style("cursor", " pointer", "");
 
+	s.select(".fl-controls-slider svg")
+		.style("display", "block");
+
 	s.select(".slider-play:hover")
@@ -36,3 +40,4 @@ .style("opacity", "0.6");
 		.style("width", "100%")
-		.style("bottom", "0");
+		.style("bottom", "0")
+		.style("align-items", "center");
 
@@ -46,8 +51,10 @@ s.select(".fl-control")
 	s.select(".fl-control .button")
-		.style("display", "inline-block")
+		.style("display", "inline-flex")
+		.style("align-items", "center")
 		.style("background", "#eee")
-		.style("padding", "0.5em")
+		.style("padding", "0 0.5em")
 		.style("margin-right", "0.25em")
 		.style("margin-bottom", "0.25em")
-		.style("line-height", "1em");
+		.style("line-height", "1em")
+		.style("box-sizing", "border-box");
 
@@ -59,2 +66,3 @@ s.select(".fl-control.grouped:not(.hidden)")
 		.style("display", "table-cell")
+		.style("vertical-align", "middle")
 		.style("margin", "0")
@@ -68,35 +76,28 @@ .style("text-align", "center");
 		.style("line-height", "1em")
-		.select(".list")
-		.style("display", "none")
+		.style("position", "relative");
+
+	s.select(".fl-control-dropdown::after")
+		.style("display", "block")
+		.style("content", "''")
+		.style("width", "10px")
+		.style("height", "10px")
+		.style("background", "transparent")
 		.style("position", "absolute")
-		.style("background-color", "white")
-		.style("z-index", "100")
-		.style("border", "1px solid #eee")
-		.select(".list-item")
-		.style("text-align", "start")
-		.style("cursor", "pointer")
-		.style("padding", "0.5rem");
+		.style("right", "5px")
+		.style("top", "50%")
+		.style("pointer-events", "none")
+		.style("transform", "translateY(calc(-50% + 3px))")
+		.style("border-left", "5px solid transparent")
+		.style("border-right", "5px solid transparent")
+		.style("border-top", "5px solid")
+		.style("box-sizing", "border-box");
 
-	s.select(".fl-control-dropdown.open .list")
-		.style("display", "block");
+	s.select(".fl-control-dropdown select")
+		.style("-webkit-appearance", "none")
+		.style("-webkit-border-radius", "0px")
+		.style("width", "100%");
 
-	s.select(".fl-control-dropdown .main")
-		.style("position", "relative")
-		.style("text-align", "start")
-		.style("display", "flex")
-		.style("justify-content", "space-between");
-
-	s.select(".fl-control-dropdown .symbol")
-		.style("float", "right")
-		.select("div")
-		.style("border-top-color", "#333333");
-
 	return s.print();
 }
 
-// https://stackoverflow.com/a/21626701
-function makeBackgroundString(svg_string) {
-	return "url('data:image/svg+xml;base64," + window.btoa(svg_string) + "')";
-}
-
 var css_injected = false;
@@ -123,2 +124,2 @@
 
-export { injectCSS, makeBackgroundString };
+export { injectCSS };

No alert changes

Improved metrics

Total package byte prevSize

322419

increased by6.68%

Lines of code

5339

increased by12.19%

Worsened metrics

Dependency count

8

increased by14.29%

Dependency changes

• + Added@rollup/plugin-node-resolve@^13.0.4

• + Addedd3-time-format@^2.3.0

• + Addedterser@^5.7.1

• + Added@flourish/pocket-knife@0.8.0(transitive)

• + Added@jridgewell/gen-mapping@0.3.8(transitive)

• + Added@jridgewell/resolve-uri@3.1.2(transitive)

• + Added@jridgewell/set-array@1.2.1(transitive)

• + Added@jridgewell/source-map@0.3.6(transitive)

• + Added@jridgewell/sourcemap-codec@1.5.0(transitive)

• + Added@jridgewell/trace-mapping@0.3.25(transitive)

• + Added@rollup/plugin-node-resolve@13.3.0(transitive)

• + Added@rollup/pluginutils@3.1.0(transitive)

• + Added@types/estree@0.0.39(transitive)

• + Added@types/resolve@1.17.1(transitive)

• + Addedacorn@8.14.0(transitive)

• + Addedbuffer-from@1.1.2(transitive)

• + Addedcommander@2.20.3(transitive)

• + Addeddeepmerge@4.3.1(transitive)

• + Addedestree-walker@1.0.1(transitive)

• + Addedfsevents@2.3.3(transitive)

• + Addedis-builtin-module@3.2.1(transitive)

• + Addedpicomatch@2.3.1(transitive)

• + Addedrollup@2.79.2(transitive)

• + Addedsource-map@0.6.1(transitive)

• + Addedsource-map-support@0.5.21(transitive)

• + Addedterser@5.37.0(transitive)

• - Removedrollup-plugin-node-resolve@^4.2.4

• - Removeduglify-js@^3.6.4

• - Removed@flourish/pocket-knife@0.3.2(transitive)

• - Removed@types/estree@1.0.6(transitive)

• - Removed@types/resolve@0.0.8(transitive)

• - Removedacorn@7.4.1(transitive)

• - Removedrollup@1.32.1(transitive)

• - Removedrollup-plugin-node-resolve@4.2.4(transitive)

• - Removeduglify-js@3.19.3(transitive)

• Updated@flourish/pocket-knife@^0.8.0

• Updated@flourish/slider@^1.4.1

• Updatedd3-selection@^1.0.0

• Updatedrollup@^2.56.2