@flourish/controls - npm Package Compare versions

Comparing version 2.0.2 to 2.1.0

package.json

		{
		"name": "@flourish/controls",
		"version": "2.0.2",
		"version": "2.1.0",
		"description": "Switchable dropdown/buttons/slider control",
		@@ -5,0 +5,0 @@ "main": "controls.js",

README.md

		@@ -13,3 +13,3 @@ # Flourish controls
		export var state = {
		control: {},
		controls: {},
		...
		@@ -28,3 +28,3 @@ }
		import initControls from "@flourish/controls";
		var control = initControls(state.control);
		var control = initControls(state.controls);
		```
		@@ -50,3 +50,3 @@

		var control = init(state.control, getParser, getFormatter);
		var control = init(state.controls, getParser, getFormatter);
		```
		@@ -60,6 +60,8 @@

		### `appendTo(container)`
		### `appendTo(container, [bounding_container])`

		Appends the control to the `container` DOM node and injects CSS into the `head` if necessary. Returns the control object.
		Appends the control to the `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.

		Returns the control object.

		### `getSortedIndex()`
		@@ -66,0 +68,0 @@

RELEASE_NOTES.md

		@@ -0,1 +1,4 @@
		# 2.1.0
		* Add bounding container to dropdown to stop cutting off

		# 2.0.2
		@@ -2,0 +5,0 @@ * Add overflow to dropdown

src/controls/dropdown.js

		@@ -8,2 +8,3 @@ import { select } from "d3-selection";
		var dropdown_obj = {};
		var bounding_container = document.body;

		@@ -33,5 +34,7 @@ // Add dropdown elements to container
		dropdown_list.style("overflow", "auto");
		var overspill = dropdown_list.node().getBoundingClientRect().bottom - window.innerHeight;
		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 = window.innerHeight - dropdown_list.node().getBoundingClientRect().top - 30;
		var new_height = bounding_bb.bottom - list_bb.top - 30;
		if (new_height > MIN_HEIGHT) dropdown_list.style("max-height", new_height + "px");
		@@ -42,3 +45,3 @@ else dropdown_list
		}
		if (dropdown_list.node().getBoundingClientRect().right > window.innerWidth) {
		if (list_bb.right > window.innerWidth) {
		dropdown_list.style("right", 0);
		@@ -93,3 +96,4 @@ }

		dropdown_obj.appendedToDOM = function() {
		dropdown_obj.appendedToDOM = function(_bounding_container) {
		if (_bounding_container) bounding_container = _bounding_container;
		document.querySelector("body").addEventListener("click", clickHandler, false);
		@@ -96,0 +100,0 @@ return dropdown_obj;

src/index.js

		@@ -78,6 +78,6 @@ import { select } from "d3-selection";

		control_obj.appendTo = function(parent) {
		control_obj.appendTo = function(parent_container, bounding_container) {
		injectCSS();
		select(parent).node().appendChild(container);
		dropdown_obj.appendedToDOM();
		select(parent_container).node().appendChild(container);
		dropdown_obj.appendedToDOM(bounding_container);
		return control_obj;
		@@ -84,0 +84,0 @@ };

controls.js

Sorry, the diff of this file is too big to display

New alerts