# Auto Init

> Initialize every registered component with one function call.

## Introduction

Auto Init starts all of the registered Expressive components with a single call. The IIFE bundle exposes it as `Expressive.AutoInit`.

Importing the JavaScript installs a few document-level behaviors (Forms, Chips, Slider, Cards, and ExpandingCard), but it does **not** call `AutoInit()` for you. Call it after the DOM is ready. This documentation site does that in `docs.js` on `DOMContentLoaded`.

## Initialization

```
document.addEventListener('DOMContentLoaded', function() {
  Expressive.AutoInit();
});
```

Or pass a root element and per-component options. The option keys are the component names from the table below.

```
Expressive.AutoInit(document.body, {
  Menu: {
    // pass options for Menu here
  },
  FloatingActionButton: {
    // pass options for FloatingActionButton here
  }
});
```

From the module build:

```
import { AutoInit, Tooltip } from './js/expressive.mjs';

AutoInit();

const element = document.querySelector('.custom-tooltip');
Tooltip.init(element, { position: 'top' });
```

## Options

`AutoInit(context, options)` takes two arguments:

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `context` | Element | `document.body` | DOM element to search within for components. |
| `options` | Object | `{}` | Options for each component, keyed by name. See that component’s page for its own options. |

Calling `AutoInit()` again on the same elements is safe: each component’s constructor destroys any existing instance on that element before creating a new one.

## Components

These are the components `AutoInit()` starts, and the selector each one claims. Elements that also have `no-autoinit` are skipped.

| Name | Selector |
| --- | --- |
| `Autocomplete` | `.autocomplete` |
| `ButtonGroup` | `.button-group` |
| `Cards` | `.cards` |
| `Carousel` | `.carousel` |
| `Chips` | `.chips` |
| `Datepicker` | `.datepicker` |
| `Menu` | `.menu-trigger` |
| `Lightbox` | `.lightboxed` |
| `NavigationRail` | `.navigation-rail` |
| `ScrollSpy` | `.scrollspy` |
| `FormSelect` | `select` |
| `NavigationDrawer` | `.navigation-drawer` |
| `Tabs` | `.tabs` |
| `Timepicker` | `.timepicker` |
| `Tooltip` | `.tooltipped` |
| `FloatingActionButton` | `.fab` |

Snackbar, CharacterCounter, and Range stay out of this table. Range still starts itself when the bundle loads. Forms, Chips, Cards, and ExpandingCard also run an import-time `Init()`; Chips and Cards appear in the table as well so a later `AutoInit()` can pick up elements added after load.

## Ignoring Elements

If you want `AutoInit()` to skip an element, add the class `no-autoinit`. Initialize that element yourself with the component’s `init` method when you need options other than the defaults.

```
<a class="button tooltipped no-autoinit" data-tooltip="Hi">Hover</a>

Expressive.Tooltip.init(
  document.querySelector('.tooltipped.no-autoinit'),
  { position: 'top' }
);
```