makeup-expander - npm Package Compare versions

Comparing version 0.6.1 to 0.7.0-0

index.js

		@@ -174,2 +174,12 @@ 'use strict';
		}, {
		key: 'cancelAsync',
		value: function cancelAsync() {
		this.expandOnClick = false;
		this.expandOnFocus = false;
		this.expandOnHover = false;
		this.collapseOnClickOut = false;
		this.collapseOnFocusOut = false;
		this.collapseOnMouseOut = false;
		}
		}, {
		key: 'expandOnClick',
		@@ -176,0 +186,0 @@ set: function set(bool) {

package.json

		{
		"name": "makeup-expander",
		"description": "Creates the basic interactivity for an element that expands and collapses another element.",
		"version": "0.6.1",
		"version": "0.7.0-0",
		"main": "index.js",
		@@ -6,0 +6,0 @@ "repository": "https://github.com/makeup-js/makeup-expander.git",

README.md

		@@ -26,6 +26,4 @@ # makeup-expander

		## Basic Example
		## Example

		In the most basic use case, the interactive host element is an adjacent sibling of the content that it expands. We leverage the aria-expanded state to hide and show the overlay with CSS.

		```html
		@@ -72,58 +70,10 @@ <div class="expander">

		## Nested Example

		In this example, the interactive host element and the content that it expands are not siblings. We cannot leverage aria-expanded to hide and show the overlay with CSS. Instead we must leverage a class on the root element of the widget. This class is defined in the widget options.

		```html
		<div class="widget">
		<span class="widget__button">
		<button class="expander__host">Click for Flyout</button>
		</span>
		<div class="expander__content">
		<p>Any kind of HTML control can go inside...</p>
		<p>A link: <a id="foo" href="http://www.ebay.com">www.ebay.com</a></p>
		<p>A button: <button>Click Me</button></p>
		<p>An input: <input type="text" aria-label="Dummy textbox"></p>
		<p>A checkbox: <input type="checkbox" aria-label="Dummy checkbox"></p>
		</div>
		</div>
		```

		```js
		// import the module
		const Expander = require('makeup-expander');

		// get an element reference
		const widgetEl = document.querySelector('.widget');

		// options
		const options = {
		expandOnClick: true,
		expandedClass: 'widget--expanded'
		};

		// get widget instance
		const widget = new Expander(widgetEl, options);
		```

		Clicking the button will now toggle it's aria-expanded state and toggle the expanded class on the root element. CSS can be used to display the content accordingly, for example:

		```css
		.expander__content {
		display: none;
		}

		.widget--expanded .expander__content {
		display: block;
		}
		```

		## Params

		* `el`: the root widget el
		* `options.autoCollapse`: applies one or more collapse behaviors (`collapseOnClickOut`, `collapseOnFocusOut`, `collapseOnMouseOut`) based on expand behaviour (default: false)
		* `options.autoCollapse`: applies a collapse behavior (`collapseOnClick`, `collapseOnFocusOut`, `collapseOnMouseOut`) based on expand behaviour (default: false)
		* `options.collapseOnClickOut`: whether the content should collapse when clicking outside of content (default: false)
		* `options.collapseOnFocusOut`: whether the content should collapse when focus leaves the content (default: false)
		* `options.collapseOnMouseOut`: whether the content should collapse when mouse leaves the content (default: false)
		* `options.contentSelector`: the query selector for the content element in relation to the widget (default: '.expander__content')
		* `options.contentSelector`: the query selector for the expandee element in relation to the widget (default: '.expander__content')
		* `options.expandOnClick`: whether the host should be click activated (default: false)
		@@ -135,3 +85,2 @@ * `options.expandOnFocus`: whether the host should be focus activated (default: false)
		* `options.expandedClass`: the class which will be used on the root element to signify expanded state. Example: `foo--expanded`; this mirrors the `aria-expanded="true"` setting on the host element
		* `options.simulateSpacebarClick`: whether to force a click event on spacebar, in the case that the host does not natively trigger one (default: false)

		@@ -138,0 +87,0 @@ ## Properties

makeup-expander - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics