<commit_before>#flexpoint

Flexpoint is designed to make it easier for you to make style changes based on ambient data in the page and browser.

##What is Ambient Data?
Ambient data relates to the state of your page and browser. Things like how far the user has scrolled down the page, what's currently visible on the screen, how wide the browser window is, etc. 

##Getting Started
To start off, simply include flexpoint.js and the plugins that you'd like to use in your page. Then make one call to flexpoint.init() and pass it the config object. The config object is explained in more detail below in the "JavaScript API" section.

Flexpoint in and of itself doesn't provide any functionality. All the magic happens in the plugins. I've worked hard to make plugin creation as simple and straightforward as possible, please see the "Creating Plugins" section below for more info.

###Examples
- [Sticky Header (scrollTop)](http://codepen.io/amwmedia/pen/dikcr/)

---

##The Config Object

`flexpoint.init` takes a single object that configures all the classes that you want flexpoint to apply and what plugins should be used when applying them. In the example below, a class of `scroll-header` will be applied to the body tag when the user scrolls 100px down the page. The `scrollTop` plugin will control this and the `min` value is part of the `scrollTop` plugin's supported config values. The plugin author can support any number of options, so you'll need to consult the plugin's documentation to know how each plugin can be used. The `scrollTop` plugin is provided as an example plugin in the flexpoint repo.

```javascript
flexpoint.init({
    'scroll-header': {
        'scrollTop': {
            min: 100
        }
    }
})
```

Now all that is left is to apply styles to the page that take advantage of this body class! *It's THAT simple!*

---

##JavaScript API

flexpoint has a JavaScript API which is used to configure flexpoint. It can also be used to hook into the flexpoint event bus.

###`flexpoint.init(config[, delay]);`
- `config`: Object
- `delay`: Number

The use of `init` was covered in `The Config Object` above. The optional `delay` parameter can be used to tell flexpoint how frequently you'd like to allow flexpoint to do an update. If set to 0, flexpoint will still limit the updates to once per requestAnimationFrame. This prevents overloading the browser by executing more often that could possibly be necessary.

---

###`flexpoint.on(event, class, handler);`
- `event`: String
- `class`: String
- `handler`: Function(event, class)

`on` is used to execute code when 1 of 3 events occur (enter, leave, update). `enter` is when a class goes from being inactive to active, `leave` is when a class goes from active to inactive, and `update` is every time flexpoint updates while the class is active. In the example below we execute `doSomething()` when the scroll-header class becomes active.

The handler gets passed 2 strings, the event, and the class.

```javascript
flexpoint.on('enter', 'scroll-header', doSomething);
```

---

###`flexpoint.off(event, class, handler);`
- `event`: String
- `class`: String
- `handler`: Function(event, class)

`off` is the opposite of `on` and is used to unregister handlers from an event and class.

```javascript
flexpoint.off('enter', 'scroll-header', doSomething);
```
---

###`flexpoint.isActive(class);`
- `class`: String

`returns`: boolean<commit_msg>Added browser compatibility specs<commit_after>#flexpoint

Flexpoint is designed to make it easier for you to make style changes based on ambient data in the page and browser.

###What is Ambient Data?
Ambient data relates to the state of your page and browser. Things like how far the user has scrolled down the page, what's currently visible on the screen, how wide the browser window is, etc. 

###Getting Started
To start off, simply include flexpoint.js and the plugins that you'd like to use in your page. Then make one call to flexpoint.init() and pass it the config object. The config object is explained in more detail below in the "JavaScript API" section.

Flexpoint in and of itself doesn't provide any functionality. All the magic happens in the plugins. I've worked hard to make plugin creation as simple and straightforward as possible, please see the "Creating Plugins" section below for more info.

###Examples
- [Sticky Header (scrollTop)](http://codepen.io/amwmedia/pen/dikcr/)

###Browser Compatibility
- Chrome
- Firefox
- IE 9+
- IE 8 (with [es5-shim](https://github.com/es-shims/es5-shim))

---

##The Config Object

`flexpoint.init` takes a single object that configures all the classes that you want flexpoint to apply and what plugins should be used when applying them. In the example below, a class of `scroll-header` will be applied to the body tag when the user scrolls 100px down the page. The `scrollTop` plugin will control this and the `min` value is part of the `scrollTop` plugin's supported config values. The plugin author can support any number of options, so you'll need to consult the plugin's documentation to know how each plugin can be used. The `scrollTop` plugin is provided as an example plugin in the flexpoint repo.

```javascript
flexpoint.init({
    'scroll-header': {
        'scrollTop': {
            min: 100
        }
    }
})
```

Now all that is left is to apply styles to the page that take advantage of this body class! *It's THAT simple!*

---

##JavaScript API

flexpoint has a JavaScript API which is used to configure flexpoint. It can also be used to hook into the flexpoint event bus.

###`flexpoint.init(config[, delay]);`
- `config`: Object
- `delay`: Number

The use of `init` was covered in `The Config Object` above. The optional `delay` parameter can be used to tell flexpoint how frequently you'd like to allow flexpoint to do an update. If set to 0, flexpoint will still limit the updates to once per requestAnimationFrame. This prevents overloading the browser by executing more often that could possibly be necessary.

---

###`flexpoint.on(action, class, handler);`
- `action`: String
- `class`: String
- `handler`: Function(action, class)

`on` is used to execute code when 1 of 3 actions occur (enter, leave, update). `enter` is when a class goes from being inactive to active, `leave` is when a class goes from active to inactive, and `update` is every time flexpoint updates while the class is active. In the example below we execute `doSomething()` when the scroll-header class becomes active.

The handler gets passed 2 strings, the action, and the class.

```javascript
flexpoint.on('enter', 'scroll-header', doSomething);
```

---

###`flexpoint.off(action, class, handler);`
- `action`: String
- `class`: String
- `handler`: Function(action, class)

`off` is the opposite of `on` and is used to unregister handlers from an event and class.

```javascript
flexpoint.off('enter', 'scroll-header', doSomething);
```
---

###`flexpoint.isActive(class);`
- `class`: String

`returns`: boolean
{'fraction_non_alphanumeric': 0.08645327236353244, 'fraction_numerical': 0.003429551300371535, 'mean_word_length': 4.211466865227104, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 1, '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': '5638000', 'n_tokens_mistral': 1922, 'n_tokens_neox': 1819, 'n_words': 1010}