viki-web-utils

Web utilities used by the Viki web app

Installation

npm install -S viki-web-utils

Documentation

For full documentation, see it the docs page 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

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

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

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

// 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

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