open-index/open-npm huggingface dataset:
npm package: @superherocheesecake/adaptive
Description: Read the document and provide JS with the same breakpoints that where defined in CSS
Author: Superhero Cheesecake
Latest version: 1.2.2

# Adaptive

Read the document and provide JS with the same breakpoints that where defined in CSS

## NPM installation

```javascript
npm i --save @superherocheesecake/adaptive
```

#### Require the module

```javascript
import { adaptive } from '@superherocheesecake/adaptive');
```

## Events

#### isMediaQueryActive(name)

```javascript
adaptive.addEventListerner("change:mediaquery", [handler]);
```

## Methods

#### isMediaQueryActive(name)

```javascript
adaptive.isMediaQueryActive("regular");
```

## CSS setup

Adaptive will look for a string reference in the html before pseudo element.
That string needs to start with 'adaptive:'.

```css
@media (max-width: 1024px) {
  html:before {
    position: absolute;
    display: none;
    content: "adaptive:regular";
  }
}
```
npm package: @superherocheesecake/cookie
Description: Small helper for Cookie management
Author: Superhero Cheesecake
Latest version: 3.0.5

# Cookie

Small helper for Cookie management

## Get the package
```javascript
npm i --save @superherocheesecake/cookie
```

## Import
```javascript
import { cookie } from '@superherocheesecake/cookie';
```

## Basic Usage
```javascript
cookie.set(name, value, options); 
cookie.get(name); // returned values will always be strings
cookie.remove(name);
```

## Options

#### path

default is  `/`

`path=path`

#### domain

`domain=domain`

#### max-age

`max-age=max-age-in-seconds`

#### expires

Use this if you want to set an expiry date. If you don't set this value it will be a session cookie.

`expires=date-in-GMTString-format`

#### samesite

`samesite='secure'|'lax'`

## Methods

#### Convert days to UTC
```javascript
cookie.daysToUTC(30);
```
npm package: @superherocheesecake/ease
Description: Custom easings
Author: Superhero Cheesecake
Latest version: 1.1.6

# Ease

Custom easings

## Installation

```javascript
npm i --save @superherocheesecake/ease
```

## Use it

```javascript
import {lerp, sine, ...} from '@superherocheesecake/ease';
```

## lerp

linear ease

```javascript
// import
import {lerp} from '@superherocheesecake/ease';

// onUpdate
const start = lerp(start, end, multiplier);
```

## lerpAngle

linear ease, angle values in radians.

```javascript
// import
import {lerpAngle} from '@superherocheesecake/ease';

// onUpdate
const start = lerpAngle(start, end, multiplier);
```

## berp

boing-like ease

```javascript
// import
import {berp} from '@superherocheesecake/ease';

// onUpdate
const start = berp(start, end, multiplier);
```

## clerp

circular linear ease

```javascript
// import
import {clerp} from '@superherocheesecake/ease';

// onUpdate
const start = clerp(start, end, multiplier);
```

## hermite

easeInOut

```javascript
// import
import {hermite} from '@superherocheesecake/ease';

// onUpdate
const start = hermite(start, end, multiplier);
```

## coserp

easeIn

```javascript
// import
import {coserp} from '@superherocheesecake/ease';

// onUpdate
const start = coserp(start, end, multiplier);
```

## sinerp

easeOut

```javascript
// import
import {sinerp} from '@superherocheesecake/ease';

// onUpdate
const start = sinerp(start, end, multiplier);
```

## Spring

elastic ease

```javascript
// import
import {Spring} from '@superherocheesecake/ease';

// inInitialize
const spring = new Spring(0.92, 30.0, 0.4); // damp, mass, stiffness

// onUpdate
const start = spring.update(start, end);
```
npm package: @superherocheesecake/environment
Description: Check the Environment based upon a regex pattern in the hostname
Author: Superhero Cheesecake
Latest version: 1.0.8

Check the Environment based upon a regex pattern in the hostname

## NPM installation
```javascript
npm i --save @superherocheesecake/environment
```

#### Require the module
```javascript
import { environment } from '@superherocheesecake/environment';
```

## Basic usage

```javascript
var isLocal = environment.isLocal();
var isDevelopment = environment.isDevelopment();
var isStaging = environment.isStaging();
var isAcceptance = environment.isAcceptance();
var isProduction = environment.isProduction();

var rules = environment.getRulesForEnvironment();
```

## Define your own pattern

```javascript
Environment.define(environment, rules);
```
npm package: @superherocheesecake/event-dispatcher
Description: Global EventDispatcher
Author: Superhero Cheesecake
Latest version: 1.1.4

# EventDispatcher

Global EventDispatcher

## NPM installation
```javascript
npm i --save @superherocheesecake/event-dispatcher
```

## Common practice
Most likely you will extend your own class.

```javascript
import EventDispatcher from '@superherocheesecake/event-dispatcher';

class Module extends EventDispatcher {
    // ...
}
```

## Methods

#### dispatchEvent(type, payload)
Payload can be any type of value. 

```javascript
this.dispatchEvent('eventName', {key: value});
```

#### addEventListener(type, listener)
```javascript
this.addEventListener('eventName', listener);
```

#### addEventListenerOnce(type, listener)
```javascript
this.addEventListenerOnce('eventName', listener);
```

#### removeEventListener(type, listener)
```javascript
this.removeEventListener('eventName', listener);
```

#### hasEventListener(type, listener)
```javascript
this.hasEventListener('eventName', listener);
```
npm package: @superherocheesecake/loaders-howler-loader
Description: Use as a loader for @superherocheesecake/loader.
Author: Superhero Cheesecake
Latest version: 2.0.4

# Sound Howler loader
Use as a loader for @superherocheesecake/loader.

## Usage
Give an array with [.ogg, .mp3] (that order) in the source. Returns a Howl intance. 

## Example

```javascript
    import { loader } from '@superherocheesecake/loader';
    import HowlerLoader from '@superherocheesecake/loaders-howler-loader';

    loader.use([
        ...
        {test: /\.(ogg|mp3)$/, loader: HowlerLoader},
        ...
    ]);

    loader.queue([
        {id: 'sound', source: [file.ogg, file.mp3], loader: HowlerLoader}
    ]);
```
npm package: @superherocheesecake/loaders-image-xhr-loader
Description: Use as a loader for @superherocheesecake/loader.
Author: Superhero Cheesecake
Latest version: 2.0.1

# image XHR loader
Use as a loader for @superherocheesecake/loader.

## Usage
Set a image URL to the source, returns Image instance. 

## Example

```javascript
    import { loader } from '@superherocheescake/loader';
    import ImageXHRLoader from '@superherocheescake/loaders-image-xhr-loader';

    loader.use([
        ...
        {test: /\.(jpg)$/, loader: ImageXHRLoader},
        ...
    ]);

    loader.queue([
        {id: 'image', source: 'file.jpg', loader: ImageXHRLoader}
    ]);
```
npm package: @superherocheesecake/loaders-object-loader
Description: Use as a loader for @superherocheesecake/loader.
Author: Superhero Cheesecake
Latest version: 2.0.0

# JSON XHR loader
Use as a loader for @superherocheesecake/loader.

## Usage
Set 'source' to a JSON response. 

## Example

```javascript
    import { loader } from '@superherocheescake/loader';
    import ObjectLoader from '@superherocheescake/loaders-object-loader';

    loader.use([
        ...
        {test: /\.(json)$/, loader: ObjectLoader},
        ...
    ]);

    loader.queue([
        {id: 'json', source: 'file.json', loader: ObjectLoader}
    ]);
```
npm package: @superherocheesecake/local-storage
Description: Will check if local storage is available. If it's not available it will just fail silently.
Author: Superhero Cheesecake
Latest version: 2.0.3

# LocalStorage

Will check if local storage is available.
If it's not available it will just fail silently. 

## NPM installation
```javascript
npm i --save @superherocheesecake/local-storage
```

#### Import the module
```javascript
import { localStorage } from '@superherocheesecake/local-storage';
```

## Basic usage
```javascript
localStorage.set(key, value);
localStorage.get(key);
localStorage.remove(key);
```
npm package: @superherocheesecake/next-resize-manager
Description: Global module that caches the browser diminsions and triggers resize events.
Author: Superhero Cheesecake
Latest version: 2.0.1

# next-resize-manager

Global module that caches the browser diminsions and triggers resize events.

## NPM installation

```javascript
npm i --save @superherocheesecake/next-resize-manager
```
#### Import the module
```javascript
import { resizeManager } from '@superherocheesecake/next-resize-manager';
```

## Events

#### Listening to the events

```javascript
resizeManager.addEventListener('resize', this._resizeHandler);
resizeManager.addEventListener('resize:complete', this._resizeCompleteHandler);
```

## Properties

#### Get viewport dimensions

```javascript
const viewportWidth = resizeManager.viewportWidth;
const viewportHeight = resizeManager.viewportHeight;
```

#### Get document dimensions

```javascript
const documentWidth = resizeManager.documentWidth;
const documentHeight = resizeManager.documentHeight;
```

#### Get and set the remBase

```javascript
// get
const remBase = resizeManager.remBase;

// set
resizeManager.remBase = [int];
```

## Methods 

#### Use rem

If no base is given, it will ue the current remBase

```javascript
resizeManager.rem(size [, base]);
```

#### Force the value to update

```javascript
resizeManager.updateViewportDimensions();
resizeManager.updateDocumentDimensions();
resizeManager.updateDocumentFontSize();
```
npm package: @superherocheesecake/next-transition
Description: Transition from one Component to the next.
Author: Superhero Cheesecake
Latest version: 1.0.6

# next-transition

Transition from one Component to the next. 

## NPM installation
```javascript
npm i --save @superherocheesecake/next-transition
```

#### Import the module
```javascript
import Transition from '@superherocheesecake/next-transition';
```

## Basic usage
Add any React `Component` as Child of the `Transition` Component. `Fragment` should be a `String` and is past to the lifecycle methods as `transitionData`; Instead of using something like `<Component />` you can also use `{this.props.children}`. Make sure the `key` prop on the passed child matches the `fragment` prop on the transition component. The `fragment` string should be unique for the passed view.

```javascript
render() {
    const { Component, pageProps, router } = this.props;
    return (
        <Transition fragment={router.pathname}>
            <Component key={router.pathname} {...pageProps} />
        </Transition>
    );
}
```

The following extra lifecycle Methods will be available on the Component. The transitionData is an object containing the current fragment and the previous fragment.

```javascript
class MyComponent extends React.Component {
    /* 
     * immediateTransitionIn won't wait for the previous 
     * Component to trigger the callback in the transitionOut.
     */
    immediateTransitionIn(transitionData) {
        const { fragment, previousFragment } = transitionData;
        // ...
    }
    
    /*
     * transitionIn will wait for the previous Component to 
     * trigger the callback from the transitionOut. 
     */
    transitionIn(transitionData) {
        // ...
    }

    /* transitionOut needs to call the callback when this 
     * Component is done animating out. It will remove the 
     * current Component and trigger the transitionIn of 
     * the New Component.
     */
    transitionOut(callback, transitionData) {
        // ...
    }
}
```
npm package: @superherocheesecake/orientation-observer
Description: Observes the page orientation (landscape / portrait)
Author: Superhero Cheesecake
Latest version: 2.0.7

# OrientationObserver

Observes the page orientation (landscape / portrait)

```javascript
// npm installation
npm i --save @superherocheesecake/orientation-observer

// require the module
import { orientationObserver } from '@superherocheesecake/orientation-observer';

// listen for changes
orientationObserver.addEventListener('update', this._orientationObserverUpdateHandler);

_orientationObserverUpdateHandler(options) {
    // options.orientation
}

// or just fetch it
const orientation = OrientationObserver.getOrientation();
```
npm package: @superherocheesecake/popup
Description: Trigger popup and open in the center of current window
Author: Superhero Cheesecake
Latest version: 1.0.6

# Popup

Trigger popup and open in the center of current window

## Usage

```javascript
import { popup } from '@superherocheesecake/popup';

popup.open(url, title, w, h[, leftCorrection, topCorrection]);
```
npm package: @superherocheesecake/resize-manager
Description: Global module that caches the browser diminsions and triggers resize events.
Author: Superhero Cheesecake
Latest version: 2.0.3

# ResizeManager

Global module that caches the browser diminsions and triggers resize events.

## NPM installation

```javascript
npm i --save @superherocheesecake/resize-manager
```

## Properties

#### Get viewport dimensions

```javascript
const viewportWidth = resizeManager.viewportWidth;
const viewportHeight = resizeManager.viewportHeight;
```

#### Get document dimensions

```javascript
const documentWidth = resizeManager.documentWidth;
const documentHeight = resizeManager.documentHeight;
```

#### Get and set the remBase

```javascript
// get
const remBase = resizeManager.remBase;

// set
resizeManager.remBase = [int];
```

#### Get documentFontSize

```javascript
// get
const documentFontSize = resizeManager.documentFontSize;
```

## Methods 

#### Use rem

If no base is given, it will ue the current remBase

```javascript
resizeManager.rem(size [, base]);
```

#### Force the value to update

```javascript
resizeManager.updateViewportDimensions();
resizeManager.updateDocumentDimensions();
resizeManager.updateDocumentFontSize();
```

## Events

#### Listening to the events

```javascript
resizeManager.addEventListener('resize', this._resizeHandler);
resizeManager.addEventListener('resize:complete', this._resizeCompleteHandler);
```

# Changelog

#### 2.0.0

- Moved to new NPM server
- Removed Bowser
- API changes

#### 1.0.0

- Converted to a NPM package
- Updated dependencies
- Added ESLint and updated the code according to our code conventions

#### 0.0.6

- Support for Rems

#### 0.0.3

- Update values at 'resize:complete' event
npm package: @superherocheesecake/size-utils
Description: A collecion of reusable methods used when calculating sizes
Author: Superhero Cheesecake
Latest version: 1.0.10

# SizeUtils

A collecion of reusable methods used when calculating sizes

## Cover
```javascript
import { sizeUtils } from '@superherocheesecake/size-utils';

const s = sizeUtils.cover(containerWidth, containerHeight, elementWidth, elementHeight);
```

## Contain
```javascript
import { sizeUtils } from '@superherocheesecake/size-utils';

const s = sizeUtils.contain(containerWidth, containerHeight, elementWidth, elementHeight);
```

## Alternative

Unpreferred implementation

```javascript
import { sizeUtils, SIZE_UTILS_COVER } from '@superherocheesecake/size-utils';

const s = sizeUtils.getSize(containerWidth, containerHeight, elementWidth, elementHeight, SIZE_UTILS_COVER);
```
npm package: @superherocheesecake/social-sharer
Description: Easy sharing to social media
Author: Superhero Cheesecake
Latest version: 2.0.9

# SocialSharer

Easy sharing to social media

## Usage

```javascript
import { facebook, twitter, linkedin } from '@superherocheesecake/social-sharer';

facebook.share(url);
twitter.share(message);
linkedin.share(url, title, description);
```
npm package: @superherocheesecake/spritesheet
Description: Spritesheet can be used to create a simple spritesheet canvas element.
Author: Superhero Cheesecake
Latest version: 1.0.4

# Spritesheet

Spritesheet can be used to create a simple spritesheet canvas element.

Sprites should be generated with Texturepacker, using the EaselJS template.

## Create a spritesheet

```javascript
const options = {
    devicePixelRatio: devicePixelRatio,
    el: canvas,
    images: [images], // array
    frames: [frames], // array
    order: [data.animations['name'].frames] // optional
};
const spritesheet = new Spritesheet(options);
```

## Methods

#### frame(int)

Tell Spritesheet which frame to show

```javascript
spritesheet.frame(0);
```

Combined with TweenMax (GSAP 2)

```javascript
TweenMax.fromTo(spritesheet, 1, {frame:0}, {frame:100, roundProps:['frame'], ease:Power0.easeNone});
```

#### getCanvas()

If no canvas-element is added to the options, then Spritesheet will create one.

```javascript
const canvasElement = spritesheet.getCanvas();
```

#### close()

Clean up after using it. 

```javascript
spritesheet.close();
```
npm package: @superherocheesecake/tracking
Description: Implement Tracking - Google Tag Manager or Google Analytics
Author: Superhero Cheesecake
Latest version: 2.0.14

Implement Tracking - Google Tag Manager or Google Analytics

## NPM installation
```javascript
npm i --save @superherocheesecake/tracking
```

#### Require the module

```javascript
import { gTag } from '@superherocheesecake/tracking';
// or
import { googleTagManager } from '@superherocheesecake/tracking';
```

## Basic usage in superherojs

```javascript
events: {
    'click [data-measure]' : '_analyticsClickHandler'
},

onInitialized() {
    gTag.debug = true;
    gTag.delimiter = ':';
    gTag.ua = 'UA-xxxxxxxx-x';
    gTag.buttonAttribute = 'data-measure';
    gTag.pathPrefix = '/virtual/';
},

_analyticsClickHandler(e) {
    gTag.trackButton(e.delegateTarget);
}
```

## Methods

#### trackButton(event)
Usualy called form within the ApplicationView. Just pass the event, most of the times this method is all you need.
```html 
<button data-measure="[category]:[action]:[label]"></button>
```
```javascript
Tracking.trackButton(e.delegateTarget);
```

#### trackClick(event)
Usualy called from within Javascript to track JS click Events
```javascript
Tracking.trackClick({category: 'category', action: 'action', label: 'label'});
```

#### trackEvent(event)
Usualy called from within Javascript to track custom Events (ie: Flow / Errors / Form validation) or just when you need more control over the GoogleTagManager.
```javascript
Tracking.trackEvent({category: 'category', action: 'action', label: 'label'});
```

#### trackPageView(string [, bool])
Usualy called form within the ApplicationRouter
```javascript
Tracking.trackPageView('pathName' [, allowSameView]);
```


## Script references

#### GTag
```html
<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id={{tracking_id}}"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', '{{tracking_id}}', {'anonymize_ip': true, 'send_page_view': false});
</script>
```

#### Google Tag Manager
```html
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','{{tracking_id}}');</script>
<!-- End Google Tag Manager -->
```


## Testing Tools
* [Dataslayer Chrome Plugin](https://chrome.google.com/webstore/detail/dataslayer/ikbablmmjldhamhcldjjigniffkkjgpo)
* [Google Analytics Debugger Chrome Plugin](https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna?hl=en)
* [Facebook Pixel Helper Chrome Plugin](https://chrome.google.com/webstore/detail/facebook-pixel-helper/fdgfkebogiimcoedlicjlajpkdmockpc?hl=en)
npm package: @superherocheesecake/youtube-manager
Description: Small helper that will load the Youtube script the moment you need it.  Your application will initially load faster, because you don't have to wait for this third party API to finish loading.
Author: Superhero Cheesecake
Latest version: 3.0.4

# YoutubeManager

Small helper that will load the Youtube script the moment you need it. 
Your application will initially load faster, because you don't have to wait for this third party API to finish loading.

## NPM installation

```javascript
npm i --save @superherocheesecake/youtube-manager
```

## Load

```javascript
import YoutubeManager from '@superherocheesecake/youtube-manager';

const youtubeManager = new YoutubeManager();
youtubeManager.addEventListenerOnce('ready', this._youtubeReadyHandler);
youtubeManager.load();
```

## Youtube API Usage

```javascript
_youtubeReadyHandler: function() {
    this.player = new YT.Player('[#ID]', {
        videoId: [YOUTUBE ID],
        playerVars: {autoplay: 1, showinfo: 0},
        width: [WIDTH],
        height: [HEIGHT],
    });
    this.player.addEventListener('onStateChange', this._onStateChangeHandler);
},

_onStateChangeHandler: function(e) {
    switch(e.data) {
        case YT.PlayerState.ENDED:
            console.log('ended');
            break;
        case YT.PlayerState.PLAYING:
            console.log('playing');
            break;
        case YT.PlayerState.PAUSED:
            console.log('paused');
            break;
        case YT.PlayerState.BUFFERING:
            console.log('buffering');
            break;
        case YT.PlayerState.CUED:
            console.log('cued');
            break;
    }
}
```