@flourish/controls - npm Package Compare versions

Comparing version 3.0.1 to 4.0.0

package.json

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

README.md

 # Flourish controls
 
-Add interchangeable controls (dropdown, buttons or slider) to a page.
+Add interchangeable controls (dropdown, buttons or slider) and controls container to a page.
 
@@ -9,7 +9,13 @@ ## How to install
 
-Add one or more control objects to your template state:
+Add one or more control objects to your template state as well an object for the controls container
 
 ``` js
 export var state = {
-	controls: {},
+	controls_container: {},
+	buttons_control: {
+		control_type: "buttons"
+	},
+	dropdown_control: {
+		control_type: "dropdown"
+	},
 	...
@@ -19,12 +25,34 @@ }
 
-Import `@flourish/controls` into your `template.yml` settings.
+Add settings for the controls container in `template.yml`.
 
+``` yaml
+  - property: controls_container
+    import: "@flourish/controls/container"
+```
 
+This will add a controls container alignment and spacing options in the settings.
+
+Then import `@flourish/controls` for each controls instance.
+
+``` yaml
+- property: buttons_control
+    import: "@flourish/controls"
+- property: dropdown_control
+    import: "@flourish/controls"
+```
+
 ## Basics
 
-Initialise the control outside any function:
+Initialise the controls container and individual controls outside any function:
 
 ``` js
-import initControls from "@flourish/controls";
-var control = initControls(state.controls);
+import { createControlsContainer, createControls } from "@flourish/controls";
+
+var buttons_control = initControls(state.buttons_control);
+var dropdown_control = initControls(state.dropdown_control)
+
+var controls_container = createControlsContainer(state.controls_container)
+	.appendTo(layout.getSection("controls"))
+	.add([buttons_control, dropdown_control]);
+
 ```
@@ -50,11 +78,25 @@
 
-var control = init(state.controls, getParser, getFormatter);
+var buttons_control = init(state.buttons_control, getParser, getFormatter);
 ```
 
-Append the control to a container and add an on change handler: `controls.appendTo(container).on("change", update);`. This is usually done in the `draw` function.
+Add an on change handler to each controls instance: `buttons_control.on("change", update);`. This is usually done in the `draw` function.
 
-In `update` you typically want to update the set of `options` and then call the controls own `update` method: `controls.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();`.
 
-## Methods
+## Controls container methods
 
+### `appendTo(parent_container)`
+
+Appends the controls container to the `parent_container` DOM node (this should usually be `layout.getSection("controls")`). Returns the controls container object.
+
+### `add([controls_instances])`
+
+Takes an array of controls instances and appends these to the controls container. Returns the controls container object.
+
+### `update()`
+
+This updates the controls container and all the appended controls instances (calling their individual `update()` methods). Returns the controls container object.
+
+## Controls methods
+
 ### `appendTo(parent_container, [bounding_container])`
@@ -61,0 +103,0 @@

RELEASE_NOTES.md

@@ -0,1 +1,5 @@
+# 4.0.0
+* Add controls container function with new named exports [BREAKING]
+* Update README with new recommended initialisation flow [BREAKING]
+
 # 3.0.1
@@ -2,0 +6,0 @@ * Fix slider-label bug

src/index.js

@@ -8,4 +8,4 @@ import { select } from "d3-selection";
 import { getRemToPx } from "./lib/remToPx";
+import { controlsContainer } from "./container";
 
-
 var DEFAULTS = Object.freeze({
@@ -54,3 +54,3 @@ control_type: "dropdown",
 
-function init(state) {
+function createControls(state) {
 	var control_obj = {};
@@ -206,3 +206,6 @@ var parser = defaultParser;
 
+function createControlsContainer(state) {
+	return new controlsContainer(state);
+}
 
-export default init;
+export { createControlsContainer, createControls };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

302219

increased by69.9%

Number of package files

29

increased by11.54%

Lines of code

4759

increased by2.99%

Number of lines in readme file

151

increased by38.53%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes