<commit_before># ember-ticketfly-accordion

_An [ARIA-compliant](https://www.w3.org/TR/wai-aria-practices-1.1/#accordion), easy-to-use
accordion system built from composable Ember components -- with
optional built-in animation through the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API)._

[![Latest NPM release][npm-badge]][npm-badge-url]
[![CircleCI Build Status][circle-badge]][circle-badge-url]
[![Test Coverage][coverage-badge]][coverage-badge-url]
[![Code Climate][codeclimate-badge]][codeclimate-badge-url]
[![Ember Observer Score][ember-observer-badge]][ember-observer-badge-url]
[![License][license-badge]][license-badge-url]
[![Dependencies][dependencies-badge]][dependencies-badge-url]
[![Dev Dependencies][devDependencies-badge]][devDependencies-badge-url]


## Installing

```sh
ember install ember-ticketfly-accordion
```

## Features

- Full WAI-ARIA Compliance for Accessibility Winning
- A robust callback API handling DOM events with closure actions.
- Optional, built-in, dependency-free and buttery-smooth animation through the Web Animations API.
- Semantic HTML
  + Tabs are comprised of `<button>` elements instead of anchor tags or divs.    

## Compatibility

This addon makes use of [contextual components](http://emberjs.com/blog/2016/01/15/ember-2-3-released.html#toc_contextual-components), and is therefore
intended to support versions of Ember >= `2.3.0`.


## Configuration

To provide `ember-ticketfly-accordion` with configuration options, define
them in a hash on the `'ember-ticketfly-accordion'` property of the object
exported from your `config/environment.js` file:

```js
ENV['ember-ticketfly-accordion'] = {
  // options go here
};
```

### Supported Options

#### Toggling Animation

Animation is enabled by default, and includes a super-lightweight implementation of
panel opening and closing built with the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) &mdash; with [support back
to IE 10](https://github.com/web-animations/web-animations-js/blob/master/docs/support.md#browser-support) thanks to the
thanks to the [W3C's `web-animations-next` polyfill](https://github.com/web-animations/web-animations-next)
(enabled in Ember by [the `ember-web-animations-next-polyfill` addon](https://github.com/web-animations/web-animations-next)).

To disable animation, simply set `animatable` to `false` on the root accordion component.

To customize animation, there are two approaches:

1. Overriding the addon's default implementation by passing your own functions to
the `animatePanelOpen` and `animatePanelClosed` properties on the root accordion component (One
or both can be overridden).

2. Configuring aspects of the addon's default implementation by setting `addonAnimationSettings` properties
in `config/environment.js` like so **(available settings are shown with their current defaults)**:

```js
ENV['ember-ticketfly-accordion'] = {
  useAddonAnimations: true,
  addonAnimationSettings: {
    panelClose: {
      duration: 390
      easing: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)' // ease-in-out-cubic
    },
    panelOpen: {
      duration: 390
      easing: 'cubic-bezier(0.215, 0.610, 0.355, 1)' // ease-out-cubic
    }
  }
};
```


## Usage


### Enabling MultiExpand Mode

By default, `ember-ticketfly-accordion` follows the standard accordion
interface pattern of allowing one panel to be expanded while
keeping the other panels closed.

But it's also flexible!

If you'd like to expand multiple panels simultaneously, simply set
`multiExpand` to `true` on the root `tf-accordion` component. From there,
each panel in an accordion will toggle open and closed independently of the others.  

### Actions and Action Arguments

The root `tf-accordion` component handles a number of events for its 
child panels. These are exposed callbacks that can be set with 
[Ember actions](https://guides.emberjs.com/v2.9.0/templates/actions/).  

**Please note that all actions are expected to be closure actions**, and so you must use
the `action` helper (i.e. `onPanelTabFocusIn=(action "panelTabFocusOut")`), or another template 
helper that facilitates curried functions (for example, [Ember Concurrency's `perform` helper](http://ember-concurrency.com/#/docs/writing-tasks).
 

#### Focus Event callbacks

In addition to expanding a panel's body when its tab element is 
clicked, accordions abide by the notion of shifting _focus_ on each
tab. You can hook in to both the `focus` and `focusOut` event of a panel 
tab by setting an action on the `onPanelTabFocusIn` and `onPanelTabFocusOut`
properties respectively.

Your handler will be called with the following arguments:

- `panelComponent` `{Object}`: the instance object of the `tf-accordion-panel`
  component from which the event was fired.

- `event` `{Object}`: the jQuery event of the action


#### Animation Callbacks

##### onPanelAnimatedOpen

***TODO: Document above and link here***

##### onPanelAnimatedClosed

***TODO: Document above and link here***

#### Panel Body Expansion Changes

`onPanelExpandChanged` fires when a `tf-accordion-panel-body` component detects a change
to its `isExpanded` attribute. 

When the action fires it sends two arguments: the panel-body's parent `tf-accordion-panel` component,
and whether or not the panel body is currently (i.e: newly) expanded (boolean).

#### Making use of Currying

Most of the time all you need is the relevant component, but sometimes your action 
requires more context than just that. This is where closure action currying
comes in handy. In those cases, you can pass any arguments you need from the template. For example:

```handlebars
{{tf-accordion onPanelTabFocusOut=(action "panelWasFocusedOut" shouldShowDialogOnFocusOut)}}
```
Then, inside your action handler:

```js
export default Ember.Route.extend({
  actions: {
    panelWasFocusedOut(panelComponent, event, shouldShowDialogOnFocusOut) {<commit_msg>fix placement of documenation section<commit_after># ember-ticketfly-accordion

_An [ARIA-compliant](https://www.w3.org/TR/wai-aria-practices-1.1/#accordion), easy-to-use
accordion system built from composable Ember components -- with
optional built-in animation through the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API)._

[![Latest NPM release][npm-badge]][npm-badge-url]
[![CircleCI Build Status][circle-badge]][circle-badge-url]
[![Test Coverage][coverage-badge]][coverage-badge-url]
[![Code Climate][codeclimate-badge]][codeclimate-badge-url]
[![Ember Observer Score][ember-observer-badge]][ember-observer-badge-url]
[![License][license-badge]][license-badge-url]
[![Dependencies][dependencies-badge]][dependencies-badge-url]
[![Dev Dependencies][devDependencies-badge]][devDependencies-badge-url]


## Installing

```sh
ember install ember-ticketfly-accordion
```

## Features

- Full WAI-ARIA Compliance for Accessibility Winning
- A robust callback API handling DOM events with closure actions.
- Optional, built-in, dependency-free and buttery-smooth animation through the Web Animations API.
- Semantic HTML
  + Tabs are comprised of `<button>` elements instead of anchor tags or divs.    

## Compatibility

This addon makes use of [contextual components](http://emberjs.com/blog/2016/01/15/ember-2-3-released.html#toc_contextual-components), and is therefore
intended to support versions of Ember >= `2.3.0`.


## Configuration

To provide `ember-ticketfly-accordion` with configuration options, define
them in a hash on the `'ember-ticketfly-accordion'` property of the object
exported from your `config/environment.js` file:

```js
ENV['ember-ticketfly-accordion'] = {
  // options go here
};
```

### Supported Options

#### Toggling Animation

Animation is enabled by default, and includes a super-lightweight implementation of
panel opening and closing built with the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) &mdash; with [support back
to IE 10](https://github.com/web-animations/web-animations-js/blob/master/docs/support.md#browser-support) thanks to the
thanks to the [W3C's `web-animations-next` polyfill](https://github.com/web-animations/web-animations-next)
(enabled in Ember by [the `ember-web-animations-next-polyfill` addon](https://github.com/web-animations/web-animations-next)).

To disable animation, simply set `animatable` to `false` on the root accordion component.

To customize animation, there are two approaches:

1. Overriding the addon's default implementation by passing your own functions to
the `animatePanelOpen` and `animatePanelClosed` properties on the root accordion component (One
or both can be overridden).

2. Configuring aspects of the addon's default implementation by setting `addonAnimationSettings` properties
in `config/environment.js` like so **(available settings are shown with their current defaults)**:

```js
ENV['ember-ticketfly-accordion'] = {
  useAddonAnimations: true,
  addonAnimationSettings: {
    panelClose: {
      duration: 390
      easing: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)' // ease-in-out-cubic
    },
    panelOpen: {
      duration: 390
      easing: 'cubic-bezier(0.215, 0.610, 0.355, 1)' // ease-out-cubic
    }
  }
};
```


## Usage


### Enabling MultiExpand Mode

By default, `ember-ticketfly-accordion` follows the standard accordion
interface pattern of allowing one panel to be expanded while
keeping the other panels closed.

But it's also flexible!

If you'd like to expand multiple panels simultaneously, simply set
`multiExpand` to `true` on the root `tf-accordion` component. From there,
each panel in an accordion will toggle open and closed independently of the others.  

### Actions and Action Arguments

The root `tf-accordion` component handles a number of events for its 
child panels. These are exposed callbacks that can be set with 
[Ember actions](https://guides.emberjs.com/v2.9.0/templates/actions/).  

**Please note that all actions are expected to be closure actions**, and so you must use
the `action` helper (i.e. `onPanelTabFocusIn=(action "panelTabFocusOut")`), or another template 
helper that facilitates curried functions (for example, [Ember Concurrency's `perform` helper](http://ember-concurrency.com/#/docs/writing-tasks).
 
#### Panel Body Expansion Changes

`onPanelExpandChanged` fires when a `tf-accordion-panel-body` component detects a change
to its `isExpanded` attribute. 

When the action fires it sends two arguments: the panel-body's parent `tf-accordion-panel` component,
and whether or not the panel body is currently (i.e: newly) expanded (boolean).
 

#### Focus Event callbacks

In addition to expanding a panel's body when its tab element is 
clicked, accordions abide by the notion of shifting _focus_ on each
tab. You can hook in to both the `focus` and `focusOut` event of a panel 
tab by setting an action on the `onPanelTabFocusIn` and `onPanelTabFocusOut`
properties respectively.

Your handler will be called with the following arguments:

- `panelComponent` `{Object}`: the instance object of the `tf-accordion-panel`
  component from which the event was fired.

- `event` `{Object}`: the jQuery event of the action


#### Animation Callbacks

##### onPanelAnimatedOpen

***TODO: Document above and link here***

##### onPanelAnimatedClosed

***TODO: Document above and link here***

#### Making use of Currying

Most of the time all you need is the relevant component, but sometimes your action 
requires more context than just that. This is where closure action currying
comes in handy. In those cases, you can pass any arguments you need from the template. For example:

```handlebars
{{tf-accordion onPanelTabFocusOut=(action "panelWasFocusedOut" shouldShowDialogOnFocusOut)}}
```
Then, inside your action handler:

```js
export default Ember.Route.extend({
  actions: {
    panelWasFocusedOut(panelComponent, event, shouldShowDialogOnFocusOut) {
{'fraction_non_alphanumeric': 0.10777842760464533, 'fraction_numerical': 0.009858801904921046, 'mean_word_length': 4.949304174950298, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 7, 'https://': 14, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '153455', 'n_tokens_mistral': 3714, 'n_tokens_neox': 3468, 'n_words': 1232}