Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

viki-web-utils

Package Overview
Dependencies
Maintainers
1
Versions
18
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

viki-web-utils - npm Package Compare versions

Comparing version 0.0.10 to 0.0.11

.eslintignore

4

dist/index.js
'use strict';
/**
@module Viki
**/
var ScrollTracker = require('./scroll_tracker/ScrollTracker');

@@ -4,0 +8,0 @@ var TabCounter = require('./tab_counter/TabCounter');

@@ -7,3 +7,12 @@ 'use strict';

/**
Counts number of times user has resized window in a session.
Resizing is debounded to prevent too many calls.
@memberof module:Viki
**/
var ResizeCounter = function () {
/**
@constructor
@param {function} callback to fire on every resize
**/
function ResizeCounter(onResizeCallback) {

@@ -14,6 +23,6 @@ var _this = this;

this.timeout;
this.timeout = null;
this.count = 0;
// Debounce resizing
window.addEventListener('resize', function (e) {
window.addEventListener('resize', function () {
clearTimeout(_this.timeout);

@@ -27,2 +36,7 @@ _this.timeout = setTimeout(function () {

/**
@returns {number} number of times user has resized window
**/
_createClass(ResizeCounter, [{

@@ -29,0 +43,0 @@ key: 'getCount',

@@ -8,5 +8,9 @@ 'use strict';

/**
Tracks how far user scrolls down a page in percentage
Keeps track of the furthest point on page that user has scrolled to
@memberof module:Viki
**/
var ScrollTracker = function () {
/**
@constructor
**/
function ScrollTracker() {

@@ -61,2 +65,3 @@ _classCallCheck(this, ScrollTracker);

Save scroll y coordinate
@param {Number} y y-coordinate to store
**/

@@ -72,2 +77,3 @@

Percentage of document that appears on user's viewport
@returns {Number}
**/

@@ -87,2 +93,9 @@

}
/**
Percentage of document that appears on user's viewport rounded to given granularity
@param {Number} [granularity=10] - granularity of rounding
@returns {Number}
**/
}, {

@@ -89,0 +102,0 @@ key: 'percentageSeenRounded',

@@ -13,5 +13,15 @@ 'use strict';

/**
Keeps track of how many tabs a user has open at one time using LocalStorage to store count
@extends TabCounter
@memberof module:Viki
**/
var LocalStorageTabCounter = function (_TabCounter) {
_inherits(LocalStorageTabCounter, _TabCounter);
/**
@constructor
@param {String} lsKey - Key for localStorage entry. Defaults to `tabCounter`
**/
function LocalStorageTabCounter(lsKey) {

@@ -25,6 +35,11 @@ _classCallCheck(this, LocalStorageTabCounter);

/**
@returns {number} - Number of tabs open in session
**/
_createClass(LocalStorageTabCounter, [{
key: 'getCount',
value: function getCount() {
return parseInt(localStorage.getItem(this.options.LS_KEY)) || 0;
return parseInt(localStorage.getItem(this.options.LS_KEY), 10) || 0;
}

@@ -31,0 +46,0 @@ }, {

@@ -9,4 +9,11 @@ 'use strict';

Keeps track of how many tabs a user has open at one time
@memberof module:Viki
**/
var TabCounter = function () {
/**
@constructor
@param {Object} options
@param {Function} options.getCount - callback to retrieve current tab count
@param {Function} options.saveCount(n) - callback to update tab count. Should take in a number.
**/
function TabCounter(options) {

@@ -21,3 +28,3 @@ _classCallCheck(this, TabCounter);

// increment count and save
// increment count and save
this.saveCount(this.count + 1);

@@ -29,2 +36,7 @@

/**
@returns {Number} number of tabs open
**/
_createClass(TabCounter, [{

@@ -35,2 +47,7 @@ key: 'getCount',

}
/**
@param {Number} count - number of tabs to save count
**/
}, {

@@ -37,0 +54,0 @@ key: 'saveCount',

23

package.json
{
"name": "viki-web-utils",
"version": "0.0.10",
"version": "0.0.11",
"description": "Utils used by the Viki web app",

@@ -9,7 +9,8 @@ "main": "dist/index.js",

"build": "babel src --presets babel-preset-es2015 --out-dir dist",
"prepublish": "npm run build"
"prepublish": "npm run build",
"build-docs": "./node_modules/.bin/jsdoc src/** --destination docs -c jsdoc.json -R README.md"
},
"repository": {
"type": "git",
"url": "git+https://github.com/piratefsh/viki-web-utils.git"
"url": "git+https://github.com/viki-org/viki-web-utils.git"
},

@@ -19,11 +20,7 @@ "author": "Sher Minn Chong <sherminn.chong@viki.com> (https://piratefsh.github.io)",

"bugs": {
"url": "https://github.com/piratefsh/viki-web-utils/issues"
"url": "https://github.com/viki-org/viki-web-utils/issues"
},
"homepage": "https://github.com/piratefsh/viki-web-utils#readme",
"homepage": "https://github.com/viki-org/viki-web-utils#readme",
"devDependencies": {
"babel-cli": "^6.24.0",
"babel-preset-es2015": "^6.24.0",
"babel-preset-es2016": "^6.22.0",
"jasmine": "^2.5.3",
"jasmine-core": "^2.5.2",
"babel-core": "^6.4.0",

@@ -35,4 +32,9 @@ "babel-eslint": "^4.1.6",

"babel-plugin-add-module-exports": "^0.1.2",
"babel-preset-es2015": "^6.24.0",
"babel-preset-es2016": "^6.22.0",
"docdash": "^0.4.0",
"eslint": "^1.10.3",
"eslint-config-airbnb": "^3.1.0",
"jasmine": "^2.5.3",
"jasmine-core": "^2.5.2",
"karma": "^0.13.19",

@@ -47,3 +49,6 @@ "karma-chrome-launcher": "^0.2.2",

"webpack": "^1.12.11"
},
"dependencies": {
"jsdoc": "^3.4.3"
}
}

@@ -9,6 +9,11 @@ # viki-web-utils

## ScrollTracker
---
## Documentation
For full documentation, see `/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
#### Usage

@@ -24,8 +29,36 @@ ```js

```
## TabCounter
//todo
## ResizeCounter
//todo
### 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
```
---
## Development

@@ -43,6 +76,7 @@

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

@@ -1,15 +0,18 @@

var LocalStorageTabCounter = require('../src/tab_counter/LocalStorageTabCounter');
/* eslint-env jasmine */
/* eslint func-names: 0 */
describe("LocalStorageTabCounter", function(){
beforeEach(function(){
localStorage.setItem('tabCounter', 0)
spyOn(window, 'addEventListener')
const LocalStorageTabCounter = require('../src/tab_counter/LocalStorageTabCounter');
describe('LocalStorageTabCounter', function () {
beforeEach(function () {
localStorage.setItem('tabCounter', 0);
spyOn(window, 'addEventListener');
});
afterEach(function(){
localStorage.setItem('tabCounter', 0)
afterEach(function () {
localStorage.setItem('tabCounter', 0);
});
describe("constructor", function(){
it("should increment and save count", function(){
describe('constructor', function () {
it('should increment and save count', function () {
this.tabCounter = new LocalStorageTabCounter();

@@ -19,10 +22,11 @@ expect(this.tabCounter.count).toBe(1);

it("should set before unload event listener", function(){
it('should set before unload event listener', function () {
this.tabCounter = new LocalStorageTabCounter(this.options);
expect(window.addEventListener).toHaveBeenCalledWith('beforeunload', this.tabCounter.beforePageUnload);
})
expect(window.addEventListener).toHaveBeenCalledWith('beforeunload',
this.tabCounter.beforePageUnload);
});
});
describe("getCount", function(){
it("should return current count", function(){
describe('getCount', function () {
it('should return current count', function () {
this.tabCounter = new LocalStorageTabCounter();

@@ -34,4 +38,4 @@ spyOn(localStorage, 'getItem').and.returnValue('2');

describe("saveCount", function(){
it("should save current count", function(){
describe('saveCount', function () {
it('should save current count', function () {
this.tabCounter = new LocalStorageTabCounter();

@@ -43,4 +47,4 @@ spyOn(localStorage, 'setItem');

it("should save current count with given LS_KEY", function(){
this.tabCounter = new LocalStorageTabCounter("customKey");
it('should save current count with given LS_KEY', function () {
this.tabCounter = new LocalStorageTabCounter('customKey');
spyOn(localStorage, 'setItem');

@@ -51,14 +55,13 @@ this.tabCounter.saveCount(4);

it("should save current count on page unload", function(){
it('should save current count on page unload', function () {
spyOn(localStorage, 'getItem').and.returnValue('1');
spyOn(localStorage, 'setItem');
this.tabCounter = new LocalStorageTabCounter();
this.tabCounter.beforePageUnload()
this.tabCounter.beforePageUnload();
expect(localStorage.setItem).toHaveBeenCalledWith('tabCounter', 1)
expect(this.tabCounter.getCount()).toBe(1)
expect(localStorage.setItem).toHaveBeenCalledWith('tabCounter', 1);
expect(this.tabCounter.getCount()).toBe(1);
});
});
});
});

@@ -1,16 +0,18 @@

var ResizeCounter = require('../src/resize_counter/ResizeCounter');
describe('ResizeCounter', function(){
/* eslint-env jasmine */
/* eslint func-names: 0 */
it('should set event listener on resize', function(){
const ResizeCounter = require('../src/resize_counter/ResizeCounter');
describe('ResizeCounter', function () {
it('should set event listener on resize', function () {
spyOn(window, 'addEventListener');
this.counter = new ResizeCounter(function(){});
expect(window.addEventListener).toHaveBeenCalledWith('resize', jasmine.any(Function))
this.counter = new ResizeCounter(function () {});
expect(window.addEventListener).toHaveBeenCalledWith('resize', jasmine.any(Function));
});
it('should clearTimeout and setTimeout on resize', function(){
it('should clearTimeout and setTimeout on resize', function () {
spyOn(window, 'setTimeout');
spyOn(window, 'clearTimeout');
this.counter = new ResizeCounter(function(){});
var timeoutId = this.counter.timeout
window.dispatchEvent(new Event('resize'))
this.counter = new ResizeCounter(function () {});
const timeoutId = this.counter.timeout;
window.dispatchEvent(new Event('resize'));
expect(clearTimeout).toHaveBeenCalledWith(timeoutId);

@@ -20,32 +22,31 @@ expect(setTimeout).toHaveBeenCalledWith(jasmine.any(Function), 300);

describe('on resize', function(){
beforeEach(function(){
jasmine.clock().install()
})
describe('on resize', function () {
beforeEach(function () {
jasmine.clock().install();
});
afterEach(function(){
jasmine.clock().uninstall()
})
afterEach(function () {
jasmine.clock().uninstall();
});
it('should call callback', function(){
this.callback = function() {};
spyOn(this, 'callback')
it('should call callback', function () {
this.callback = function () {};
spyOn(this, 'callback');
this.counter = new ResizeCounter(this.callback);
window.dispatchEvent(new Event('resize'))
window.dispatchEvent(new Event('resize'));
jasmine.clock().tick(300)
jasmine.clock().tick(300);
expect(this.callback).toHaveBeenCalled();
});
it('should increment count only once even after multiple successive resizes', function(){
this.counter = new ResizeCounter(function(){});
var timeoutId = this.counter.timeout
window.dispatchEvent(new Event('resize'))
window.dispatchEvent(new Event('resize'))
window.dispatchEvent(new Event('resize'))
window.dispatchEvent(new Event('resize'))
it('should increment count only once even after multiple successive resizes', function () {
this.counter = new ResizeCounter(function () {});
window.dispatchEvent(new Event('resize'));
window.dispatchEvent(new Event('resize'));
window.dispatchEvent(new Event('resize'));
window.dispatchEvent(new Event('resize'));
jasmine.clock().tick(300);
expect(this.counter.getCount()).toBe(1);
});
})
});
});
});

@@ -0,4 +1,7 @@

/* eslint-env jasmine */
/* eslint func-names: 0 */
const ScrollTracker = require('../src/scroll_tracker/ScrollTracker');
describe('ScrollTracker', function(){
describe('ScrollTracker', function () {
describe('constructor', () => {

@@ -14,3 +17,3 @@ it('sets default values for instance properties', () => {

});
})
});

@@ -20,9 +23,9 @@ describe('init', () => {

window.scrollY = 0;
const tracker = new ScrollTracker();
spyOn(tracker, 'store')
spyOn(tracker, 'store');
window.scrollY = 50;
tracker.init()
tracker.init();
expect(tracker.store).toHaveBeenCalledWith(50);

@@ -32,13 +35,13 @@ });

it('sets scroll handler', () => {
spyOn(window, 'addEventListener')
spyOn(window, 'addEventListener');
const tracker = new ScrollTracker();
tracker.init();
expect(window.addEventListener).toHaveBeenCalledWith('scroll', tracker.scrollTrackHandler)
expect(window.addEventListener).toHaveBeenCalledWith('scroll', tracker.scrollTrackHandler);
});
})
});
describe('scrollTrackHandler', function(){
describe('scrollTrackHandler', function () {
beforeEach(() => {
this.tracker = new ScrollTracker();
})
});

@@ -54,6 +57,6 @@ it('is called when scroll event is fired', () => {

it('calls window.requestAnimationFrame', () => {
it('calls window.requestAnimationFrame', () => {
spyOn(window, 'requestAnimationFrame');
this.tracker.init();
window.dispatchEvent(new Event('scroll'));

@@ -63,4 +66,4 @@ expect(window.requestAnimationFrame).toHaveBeenCalled();

it('saves coordinate of scroll position when window is scrolled in a different direction', () => {
spyOn(window, 'requestAnimationFrame').and.callFake((fn) => { fn() });
it('saves coordinate of scroll position when window is scrolled in a different direction', () => {
spyOn(window, 'requestAnimationFrame').and.callFake((fn) => { fn(); });

@@ -70,3 +73,3 @@ window.scrollY = 0;

this.tracker.init();
spyOn(this.tracker, 'store')
spyOn(this.tracker, 'store');
expect(this.tracker.direction).toEqual(1);

@@ -76,3 +79,3 @@ expect(this.tracker.lastPos).toEqual(Infinity);

window.scrollY = 100;
this.tracker.waiting = true
this.tracker.waiting = true;
window.dispatchEvent(new Event('scroll'));

@@ -82,3 +85,3 @@ expect(this.tracker.lastPos).toEqual(100);

window.scrollY = 50;
this.tracker.waiting = true
this.tracker.waiting = true;
window.dispatchEvent(new Event('scroll'));

@@ -89,4 +92,4 @@ expect(this.tracker.direction).toEqual(-1);

it('saves coordinate of last scroll position with no change in direction', () => {
spyOn(window, 'requestAnimationFrame').and.callFake((fn) => { fn() });
it('saves coordinate of last scroll position with no change in direction', () => {
spyOn(window, 'requestAnimationFrame').and.callFake((fn) => { fn(); });

@@ -96,3 +99,3 @@ window.scrollY = 0;

this.tracker.init();
spyOn(this.tracker, 'store')
spyOn(this.tracker, 'store');
expect(this.tracker.direction).toEqual(1);

@@ -102,9 +105,9 @@ expect(this.tracker.lastPos).toEqual(Infinity);

window.scrollY = 10;
this.tracker.waiting = true
this.tracker.waiting = true;
window.dispatchEvent(new Event('scroll'));
expect(this.tracker.direction).toEqual(1);
expect(this.tracker.lastPos).toEqual(10);
window.scrollY = 100;
this.tracker.waiting = true
this.tracker.waiting = true;
window.dispatchEvent(new Event('scroll'));

@@ -114,3 +117,3 @@ expect(this.tracker.direction).toEqual(1);

});
})
});

@@ -121,6 +124,6 @@ describe('percentageSeen', () => {

this.tracker = new ScrollTracker();
})
});
it('returns 100% when scrollY is 0 and innerHeight is 100 out of a doc with height 100', () => {
window.innerHeight = 100
spyOn(document.documentElement, 'getBoundingClientRect').and.returnValue({ height: 100 })
window.innerHeight = 100;
spyOn(document.documentElement, 'getBoundingClientRect').and.returnValue({ height: 100 });
expect(this.tracker.percentageSeen()).toEqual(100);

@@ -130,4 +133,4 @@ });

it('returns 5% when scrollY is 0 and innerHeight is 50 out of a doc with height 1000', () => {
window.innerHeight = 50
spyOn(document.documentElement, 'getBoundingClientRect').and.returnValue({ height: 1000 })
window.innerHeight = 50;
spyOn(document.documentElement, 'getBoundingClientRect').and.returnValue({ height: 1000 });
expect(this.tracker.percentageSeen()).toEqual(5);

@@ -138,4 +141,4 @@ });

window.scrollY = 50;
window.innerHeight = 50
spyOn(document.documentElement, 'getBoundingClientRect').and.returnValue({ height: 1000 })
window.innerHeight = 50;
spyOn(document.documentElement, 'getBoundingClientRect').and.returnValue({ height: 1000 });
expect(this.tracker.percentageSeen()).toEqual(10);

@@ -146,6 +149,5 @@ });

window.scrollY = 0;
const tracker = new ScrollTracker();
window.scrollY = 100;
window.innerHeight = 100
spyOn(document.documentElement, 'getBoundingClientRect').and.returnValue({ height: 1000 })
window.innerHeight = 100;
spyOn(document.documentElement, 'getBoundingClientRect').and.returnValue({ height: 1000 });
expect(this.tracker.percentageSeen()).toEqual(20);

@@ -158,3 +160,3 @@ });

this.tracker = new ScrollTracker();
})
});

@@ -164,3 +166,3 @@ it('rounds 0% to 0%', () => {

expect(this.tracker.percentageSeenRounded()).toEqual(0);
})
});

@@ -170,3 +172,3 @@ it('rounds 5% to 10%', () => {

expect(this.tracker.percentageSeenRounded()).toEqual(10);
})
});

@@ -176,3 +178,3 @@ it('rounds 4% to 0%', () => {

expect(this.tracker.percentageSeenRounded()).toEqual(0);
})
});

@@ -182,3 +184,3 @@ it('rounds 30% to 30%', () => {

expect(this.tracker.percentageSeenRounded()).toEqual(30);
})
});

@@ -188,3 +190,3 @@ it('rounds 99% to 100%', () => {

expect(this.tracker.percentageSeenRounded()).toEqual(100);
})
});

@@ -194,3 +196,3 @@ it('rounds 0% to 0% with granularity 20', () => {

expect(this.tracker.percentageSeenRounded(20)).toEqual(0);
})
});

@@ -200,3 +202,3 @@ it('rounds 5% to 0% with granularity 20', () => {

expect(this.tracker.percentageSeenRounded(20)).toEqual(0);
})
});

@@ -206,3 +208,3 @@ it('rounds 14% to 0% with granularity 30', () => {

expect(this.tracker.percentageSeenRounded(30)).toEqual(0);
})
});

@@ -212,3 +214,3 @@ it('rounds 14% to 20% with granularity 20', () => {

expect(this.tracker.percentageSeenRounded(20)).toEqual(20);
})
});

@@ -218,4 +220,4 @@ it('rounds 70% to 80% for granularity 20', () => {

expect(this.tracker.percentageSeenRounded(20)).toEqual(80);
})
});
});
});

@@ -1,28 +0,31 @@

var TabCounter = require('../src/tab_counter/TabCounter');
/* eslint-env jasmine */
/* eslint func-names: 0 */
describe("TabCounter", function(){
beforeEach(function(){
global.window = { addEventListener: function() {} };
const TabCounter = require('../src/tab_counter/TabCounter');
spyOn(window, 'addEventListener')
describe('TabCounter', function () {
beforeEach(function () {
global.window = { addEventListener: () => {} };
this.options = function(){
var count = 2;
spyOn(window, 'addEventListener');
this.options = (function () {
let count = 2;
return {
getCount: function(){
return count;
getCount: () => {
return count;
},
saveCount: function(c){
saveCount: (c) => {
count = c;
}
}
}();
},
};
})();
});
afterEach(function(){
delete global.window
afterEach(function () {
delete global.window;
});
describe("constructor", function(){
it("should increment and save count", function(){
describe('constructor', function () {
it('should increment and save count', function () {
this.tabCounter = new TabCounter(this.options);

@@ -32,11 +35,24 @@ expect(this.tabCounter.count).toBe(3);

it("should set before unload event listener", function(){
it('should set before unload event listener', function () {
this.tabCounter = new TabCounter(this.options);
expect(window.addEventListener).toHaveBeenCalledWith('beforeunload', this.tabCounter.beforePageUnload);
})
expect(window.addEventListener).toHaveBeenCalledWith('beforeunload',
this.tabCounter.beforePageUnload);
});
});
describe("getCount", function(){
it("should return current count", function(){
this.tabCounter = new TabCounter({getCount: function(){return 55}, saveCount: function(){}});
describe('beforePageUnload', function () {
it('should call saveCount with decremented count when event is called', function () {
this.tabCounter = new TabCounter(this.options);
spyOn(this.tabCounter, 'saveCount');
expect(this.tabCounter.count).toEqual(3);
this.tabCounter.beforePageUnload();
expect(this.tabCounter.saveCount).toHaveBeenCalledWith(2);
});
});
describe('getCount', function () {
it('should return current count', function () {
this.tabCounter = new TabCounter({
getCount: () => {return 55;},
saveCount: () => {} });
expect(this.tabCounter.getCount()).toBe(55);

@@ -46,6 +62,8 @@ });

describe("saveCount", function(){
it("should save current count", function(){
var count = 1;
this.tabCounter = new TabCounter({saveCount: function(c){count = c}, getCount: function(){return count}});
describe('saveCount', function () {
it('should save current count', function () {
let count = 1;
this.tabCounter = new TabCounter({
saveCount: (c) => { count = c;},
getCount: () => {return count;} });
this.tabCounter.saveCount(3);

@@ -56,2 +74,2 @@ expect(this.tabCounter.count).toBe(3);

});
});
});

@@ -1,20 +0,22 @@

var Viki = require('../src/index.js')
/* eslint-env jasmine */
/* eslint func-names: 0 */
describe('index', function(){
const Viki = require('../src/index.js');
it('should have TabCounter', function(){
describe('index', function () {
it('should have TabCounter', function () {
expect(Viki.TabCounter).toEqual(jasmine.any(Function));
})
});
it('should have LocalStorageTabCounter', function(){
it('should have LocalStorageTabCounter', function () {
expect(Viki.LocalStorageTabCounter).toEqual(jasmine.any(Function));
})
});
it('should have ScrollTracker', function(){
it('should have ScrollTracker', function () {
expect(Viki.ScrollTracker).toEqual(jasmine.any(Function));
})
});
it('should have ResizeCounter', function(){
it('should have ResizeCounter', function () {
expect(Viki.ResizeCounter).toEqual(jasmine.any(Function));
})
})
});
});

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc