<commit_before># Showcaser

[![Dependency Status](https://david-dm.org/latitudegeo/showcaser.svg)](https://david-dm.org/latitudegeo/showcaser) [![npm version](https://badge.fury.io/js/showcaser.svg)](https://badge.fury.io/js/showcaser)

A Material Design inspired showcase view that highlights any element on your page.

[Check out the demo](https://latitudegeo.github.io/showcaser/)

![Showcaser](https://cloud.githubusercontent.com/assets/6355370/21340975/c8db80fc-c63e-11e6-9038-382dacddceba.PNG)

## Installation

If you're using a module bundler such as [Webpack](https://webpack.github.io/) or [Browserify](http://browserify.org/), you can use npm to install Showcaser:
```bash
npm install --save showcaser
```
and then you can simply `import`/`require` Showcaser:
```javascript
import Showcaser from 'showcaser'
```

If you would like to load Showcaser using a `script` tag, grab the latest version from the [dist](dist) folder and include it in your page:
```html
<body>
...
<script src="showcaser.min.js"></script>
</body>
```

## Usage

Check out the [demo source code](docs/scripts.js) for more examples:
```javascript
const myElement = document.getElementById("cool-element");

Showcaser.showcase(myElement, "Here's Showcaser!");
```

## API

### Methods

This document uses Typescript-like definitions to describe interfaces. You can take a look at our Typescript definition file at [dist/showcaser.d.ts](dist/showcaser.d.ts).

#### Start showcase
Showcaser allows you to link multiple showcase steps together using a 'queue' concept. If there is currently a showcase being displayed, subsequent calls to `Showcaser.showcase()` will add the new showcase step to an internal queue. Closing a showcase step using the 'next' button will cause the next showcase step to be popped off the queue and displayed to the user, until there are no more items left in the queue.

If you don't include the `element` parameter, Showcaser will display a full-screen showcase instead.
```js
Showcaser.showcase(text: string, element?: HTMLElement, options?: ShowcaseOptions): void
```

#### Close showcase step
This will close the current step. If there is another step in the queue, it will be started.
```js
Showcaser.close(): void
```<commit_msg>Update README.md usage example to reflect new API<commit_after># Showcaser

[![Dependency Status](https://david-dm.org/latitudegeo/showcaser.svg)](https://david-dm.org/latitudegeo/showcaser) [![npm version](https://badge.fury.io/js/showcaser.svg)](https://badge.fury.io/js/showcaser)

A Material Design inspired showcase view that highlights any element on your page.

[Check out the demo](https://latitudegeo.github.io/showcaser/)

![Showcaser](https://cloud.githubusercontent.com/assets/6355370/21340975/c8db80fc-c63e-11e6-9038-382dacddceba.PNG)

## Installation

If you're using a module bundler such as [Webpack](https://webpack.github.io/) or [Browserify](http://browserify.org/), you can use npm to install Showcaser:
```bash
npm install --save showcaser
```
and then you can simply `import`/`require` Showcaser:
```javascript
import Showcaser from 'showcaser'
```

If you would like to load Showcaser using a `script` tag, grab the latest version from the [dist](dist) folder and include it in your page:
```html
<body>
...
<script src="showcaser.min.js"></script>
</body>
```

## Usage

Check out the [demo source code](docs/scripts.js) for more examples:
```javascript
const myElement = document.getElementById("cool-element");

Showcaser.showcase("Here's Showcaser!", myElement);
```

## API

### Methods

This document uses Typescript-like definitions to describe interfaces. You can take a look at our Typescript definition file at [dist/showcaser.d.ts](dist/showcaser.d.ts).

#### Start showcase
Showcaser allows you to link multiple showcase steps together using a 'queue' concept. If there is currently a showcase being displayed, subsequent calls to `Showcaser.showcase()` will add the new showcase step to an internal queue. Closing a showcase step using the 'next' button will cause the next showcase step to be popped off the queue and displayed to the user, until there are no more items left in the queue.

If you don't include the `element` parameter, Showcaser will display a full-screen showcase instead.
```js
Showcaser.showcase(text: string, element?: HTMLElement, options?: ShowcaseOptions): void
```

#### Close showcase step
This will close the current step. If there is another step in the queue, it will be started.
```js
Showcaser.close(): void
```
{'fraction_non_alphanumeric': 0.1191423519009726, 'fraction_numerical': 0.013262599469496022, 'mean_word_length': 5.123139377537212, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 11, 'https://': 14, 'lorem ipsum': 0, 'www.': 0, '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': '5762206', 'n_tokens_mistral': 1429, 'n_tokens_neox': 1326, 'n_words': 501}