# viki-web-utils
Web utilities used by the Viki web app

## Installation
```
npm install -S viki-web-utils
```

---

## [Documentation](http://dev.viki.com/viki-web-utils/docs/)
For full documentation, see it [the docs page](http://dev.viki.com/viki-web-utils/docs/) or in `/docs` directory.

### ScrollTracker
Keeps track of the furthest point on page that user has scrolled to (in percentage). Returns most updated value everytime `percentageSeen()` is called.

#### Usage

```js
import Viki from 'viki-web-utils';

const tracker = new Viki.ScrollTracker();
tracker.init();

console.log('percentage of page seen', tracker.percentageSeen()) // e.g. 5
console.log('percentage of page seen rounded to granularity of 10', tracker.percentageSeenRounded(10)) // e.g. 10
```

### LocalStorageTabCounter
Keeps track of number of tabs user has open in current session. Saves current count to user's localStorage.

#### Usage
```js
import Viki from 'viki-web-utils';

const counter = new Viki.LocalStorageTabCounter();

// open 2 tabs with current session

console.log(counter.getCount()) // 2
```

### ResizeCounter
Tracks number of times user has resized the window. Debounced at 300ms to prevent too many function calls.

#### Usage
```js
import Viki from 'viki-web-utils';

const counter = new Viki.ResizeCounter(function() {
  // do something, maybe fire an event
});

// resize browser window

console.log(counter.getCount()) // e.g. 1

```

### BlockedResourceChecker
Tests if a resource is blocked on client side. Returns a Promise on test that is passed in `blocked` and `resource` values.

#### Usage

```js

// create checker
const checker = new BlockedResourceChecker('https://badresource.blah');

// test resource returns a Promise
checker
  .test()
  .then((res) => {
    console.log(res.resource, res.blocked) // https://badresource.blah true
  });
```

### PerformanceTimingTracker
Pulls information from the client's performance timing API, and allows for augmentation on the information along with retrieving all the stats as a JSON object.
If the target browser does not support the performance timing API, an empty JSON object is returned instead.

#### Usage
```js
import Viki from 'viki-web-utils';

let performanceTracker = new Viki.PerformanceTimingTracker();

// Set a custom metric - with a string key and another value of any type
performanceTracker.set('customDeferFullyLoaded', Date.now());

// Retrieve a custom or present metric in browser performance api
// If the value is not present, null is returned
// View more @ https://www.w3.org/TR/resource-timing-1/#h-performanceresourcetiming
console.log(performanceTracker.get('redirectStart'));

// Set a new metric value that is the numerical difference between two currently tracked values
performanceTracker.setDifferenceAsValue('customDeferFullyLoaded', 'redirectStart');

// Retrieve all metric data as a json object
console.log(performanceTracker.extractMetrics());

```

---

## Development

Install dependencies
```
npm install
```

Run tests
```
npm run test
```

Karma wil prompt you to open browser on Google Chrome. To trigger tests, modify and save any src file.

Build and publishing
```
npm run build
npm run build-docs // generates JSDoc documentation to /docs dir
npm publish //script automatically builds before publish
```