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

breakdancer

Package Overview
Dependencies
Maintainers
3
Versions
13
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

breakdancer - npm Package Compare versions

Comparing version 2.0.0 to 3.0.0

breakdancer.js
CHANGELOG.md
index.native.js
lib/breakdancer.js
lib/index.native.js
test.native.js

114

index.js

@@ -0,1 +1,2 @@

import Breakdancer from './breakdancer';
import get from 'propget';

@@ -24,11 +25,7 @@

*/
export default class Breakdancer {
constructor (specification, windows) {
export default class WebDancer extends Breakdancer {
constructor(specification, windows) {
super(specification);
this.window = windows || win;
//
// Setup our default values after the window has been set so we don't have
// any undefined references.
//
this.specification = this.normalize(specification);
this.breakpoint = this.currently();

@@ -38,21 +35,12 @@ }

/**
* Normalize the specification.
* Return the current view port.
*
* @param {Array|Object} specification Different breakpoints we need to know.
* @returns {Array} List of media query specifications
* @private
* @returns {Object} viewport
* @public
*/
normalize (specification) {
if (Array.isArray(specification)) return specification;
return Object.keys(specification).reduce(function reduce(memo, key) {
var breakpoint = specification[key];
//
// If there is no name specified, use the key as name.
//
breakpoint.name = breakpoint.name || key;
memo.push(breakpoint);
return memo;
}, []);
viewport() {
return {
height: this.height(),
width: this.width()
};
}

@@ -66,3 +54,3 @@

*/
width () {
width() {
return get(this.window, 'innerWidth')

@@ -80,3 +68,3 @@ || get(this.window, 'document.documentElement.clientWidth')

*/
height () {
height() {
return get(this.window, 'innerHeight')

@@ -87,74 +75,2 @@ || get(this.window, 'document.documentElement.clientHeight')

}
/**
* Check if the setup has changed since we've last checked the real estate.
*
* @param {Object} viewport The view port specification.
* @returns {Boolean} True if the breakpoint for the viewport has changed.
* @public
*/
changed (viewport) {
var breakpoint = this.breakpoint;
this.breakpoint = this.currently(viewport);
return this.breakpoint !== breakpoint;
}
/**
* Return the current view port.
*
* @returns {Object} viewport
* @public
*/
viewport () {
return {
height: this.height(),
width: this.width()
};
}
/**
* Check if a given specification matches our current set resolution.
*
* @param {Object} viewport The view port specification.
* @param {Object} specification The supplied specification.
* @returns {Boolean} True if viewport fits into the specification.
* @private
*/
matches (viewport, specification) {
viewport = viewport || this.viewport();
let matched = false;
if ('height' in specification) {
matched = viewport.height < specification.height;
if (!matched) return matched;
}
if ('width' in specification) {
matched = viewport.width < specification.width;
}
return matched;
}
/**
* Find out which breakpoint we're currently triggering.
*
* @param {Object} viewport The view port specification.
* @returns {String} The current breakpoint that we got triggered.
* @public
*/
currently (viewport) {
viewport = viewport || this.viewport();
for (var i = 0, l = this.specification.length; i < l; i++) {
var spec = this.specification[i];
if (this.matches(viewport, spec)) return spec.name;
}
return 'unknown';
}
}

146

lib/index.js

@@ -9,2 +9,6 @@ 'use strict';

var _breakdancer = require('./breakdancer');
var _breakdancer2 = _interopRequireDefault(_breakdancer);
var _propget = require('propget');

@@ -18,2 +22,6 @@

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
/**

@@ -41,40 +49,30 @@ * Small fallback for when the `window` global is not accessible in a given

var Breakdancer = function () {
function Breakdancer(specification, windows) {
_classCallCheck(this, Breakdancer);
var WebDancer = function (_Breakdancer) {
_inherits(WebDancer, _Breakdancer);
this.window = windows || win;
function WebDancer(specification, windows) {
_classCallCheck(this, WebDancer);
//
// Setup our default values after the window has been set so we don't have
// any undefined references.
//
this.specification = this.normalize(specification);
this.breakpoint = this.currently();
var _this = _possibleConstructorReturn(this, (WebDancer.__proto__ || Object.getPrototypeOf(WebDancer)).call(this, specification));
_this.window = windows || win;
_this.breakpoint = _this.currently();
return _this;
}
/**
* Normalize the specification.
* Return the current view port.
*
* @param {Array|Object} specification Different breakpoints we need to know.
* @returns {Array} List of media query specifications
* @private
* @returns {Object} viewport
* @public
*/
_createClass(Breakdancer, [{
key: 'normalize',
value: function normalize(specification) {
if (Array.isArray(specification)) return specification;
return Object.keys(specification).reduce(function reduce(memo, key) {
var breakpoint = specification[key];
//
// If there is no name specified, use the key as name.
//
breakpoint.name = breakpoint.name || key;
memo.push(breakpoint);
return memo;
}, []);
_createClass(WebDancer, [{
key: 'viewport',
value: function viewport() {
return {
height: this.height(),
width: this.width()
};
}

@@ -107,91 +105,7 @@

}
/**
* Check if the setup has changed since we've last checked the real estate.
*
* @param {Object} viewport The view port specification.
* @returns {Boolean} True if the breakpoint for the viewport has changed.
* @public
*/
}, {
key: 'changed',
value: function changed(viewport) {
var breakpoint = this.breakpoint;
this.breakpoint = this.currently(viewport);
return this.breakpoint !== breakpoint;
}
/**
* Return the current view port.
*
* @returns {Object} viewport
* @public
*/
}, {
key: 'viewport',
value: function viewport() {
return {
height: this.height(),
width: this.width()
};
}
/**
* Check if a given specification matches our current set resolution.
*
* @param {Object} viewport The view port specification.
* @param {Object} specification The supplied specification.
* @returns {Boolean} True if viewport fits into the specification.
* @private
*/
}, {
key: 'matches',
value: function matches(viewport, specification) {
viewport = viewport || this.viewport();
var matched = false;
if ('height' in specification) {
matched = viewport.height < specification.height;
if (!matched) return matched;
}
if ('width' in specification) {
matched = viewport.width < specification.width;
}
return matched;
}
/**
* Find out which breakpoint we're currently triggering.
*
* @param {Object} viewport The view port specification.
* @returns {String} The current breakpoint that we got triggered.
* @public
*/
}, {
key: 'currently',
value: function currently(viewport) {
viewport = viewport || this.viewport();
for (var i = 0, l = this.specification.length; i < l; i++) {
var spec = this.specification[i];
if (this.matches(viewport, spec)) return spec.name;
}
return 'unknown';
}
}]);
return Breakdancer;
}();
return WebDancer;
}(_breakdancer2.default);
exports.default = Breakdancer;
exports.default = WebDancer;

40

package.json
{
"name": "breakdancer",
"version": "2.0.0",
"version": "3.0.0",
"description": "A breakpoint tracking utility",

@@ -8,7 +8,9 @@ "main": "./lib",

"scripts": {
"test": "mocha --compilers js:babel-register ./test.js",
"lint": "godaddy-js-style-lint *.js",
"build": "babel index.js -d ./lib",
"lint": "eslint-godaddy *.js",
"test:web": "mocha --compilers js:babel-register ./test.js",
"test:native": "mocha --require react-native-mock/mock.js --compilers js:babel-register ./test.native.js",
"build": "babel index.js index.native.js breakdancer.js -d ./lib",
"prepublish": "npm run build",
"pretest": "npm run lint"
"pretest": "npm run lint",
"test": "npm run test:web && npm run test:native"
},

@@ -29,8 +31,16 @@ "repository": {

"devDependencies": {
"assume": "1.4.x",
"babel-cli": "6.18.x",
"babel-register": "6.9.x",
"godaddy-style": "3.1.x",
"mocha": "2.5.x",
"pre-commit": "1.1.x"
"assume": "^1.5.2",
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.24.0",
"babel-register": "^6.26.0",
"babelify": "^7.3.0",
"eslint": "^4.2.0",
"eslint-config-godaddy": "^2.0.0",
"eslint-plugin-json": "^1.2.0",
"eslint-plugin-mocha": "^4.11.0",
"mocha": "^4.0.0",
"pre-commit": "^1.2.2",
"react": "^15.4.2",
"react-native": "^0.42.3",
"react-native-mock": "^0.3.1"
},

@@ -44,5 +54,3 @@ "pre-commit": "lint, test",

"dependencies": {
"babel-preset-es2015": "6.9.x",
"babelify": "7.3.x",
"propget": "1.0.x"
"propget": "^1.1.0"
},

@@ -53,3 +61,7 @@ "babel": {

]
},
"peerDependencies": {
"react": "~15.4.1",
"react-native": "^0.42.3"
}
}

35

README.md

@@ -16,2 +16,4 @@ # breakdancer

- [.currently()](#currently)
- [.compareWidth()](#comparewidth)
- [.compareHeight()](#compareheight)
- [.breakpoint](#breakpoint)

@@ -37,2 +39,9 @@ - [License](#license)

## Support
Breakdancer is tested and works on both `web` and `react-native` platforms.
Note that we don't specify `react-native` as a peer dependency in order to avoid
dependency issues on pure `web` projects, so make sure you have `react-native`
as a dependency.
## API

@@ -56,3 +65,3 @@

var breakpoints = new Breakdancer([
{
{
name: 'wrist',

@@ -64,3 +73,3 @@ width: 320

width: 800,
heigt: 600
height: 600
}

@@ -151,4 +160,26 @@ ]);

### compare()
Returns the difference between the current window and the given breakpoint in
the given dimension. This can be used to check if the window is "greater" than a
breakpoint. If either the given breakpoint or the given attribute do not exist,
a `TypeError` will be thrown.
```js
var breakpoints = new Breakdancer([{
name: 'wrist',
width: 320
}, {
name: 'palm',
width: 800,
height: 600
}]);
// let's assume the window is 500 px wide and 500 px tall.
console.log(breakpoints.compare('wrist', 'width')) // 180
console.log(breakpoints.compare('palm', 'height')) // -100
```
## License
[MIT](LICENSE)

28

test.js

@@ -1,2 +0,2 @@

import Breakdancer from './';
import Breakdancer from './index';
import assume from 'assume';

@@ -171,2 +171,28 @@

});
describe('#compare', function () {
var bd = new Breakdancer(specification, {
innerWidth: 1234,
innerHeight: 1000,
document: {
documentElement: {
clientHeight: 1337,
clientWidth: 1338
}
}
});
it('should throw an error when looking at an unspecified breakpoint', function () {
assume(bd.compare('hologram', 'width')).throws(TypeError);
});
it('should throw an error when the given dimension does not exist for the given breakpoint', function () {
assume(bd.compare('whatever', 'height')).throws(TypeError);
});
it('should return the difference in width between the current and specified breakpoint', function () {
assume(bd.compare('mobile', 'width')).equals(1234 - 400);
assume(bd.compare('mobile', 'height')).equals(1000 - 600);
});
});
});
.npmignore
SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc