breakdancer - npm Package Compare versions

Comparing version 1.1.3 to 1.2.0

breakdancer.js

@@ -97,2 +97,28 @@ /**
   }
+
+  /**
+   * Returns the difference between the current width and the given breakpoint. 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.
+   *
+   *
+   * @param {String} breakpoint to be compared
+   * @param {String} property height or width
+   * @throws {TypeError} If not given breakpoint and property do not exist within the given spec
+   * @returns {Number} different between current and specified properties
+   * @public
+   */
+  compare(breakpoint, property) {
+    const desiredSpec = this.specification.filter(spec => spec.name === breakpoint)[0];
+
+    if (!desiredSpec) {
+      return new TypeError(`${breakpoint} is not part of the given specifications`);
+    }
+
+    if (!desiredSpec[property]) {
+      return new TypeError(`${breakpoint}.${property} is not part of the given specifications`);
+    }
+
+    return this[property]() - desiredSpec[property];
+  }
 }

CHANGELOG.md

 # CHANGELOG
 
+### 1.2.0
+
+- [#14] Implement `compare` method to compare current window size to any breakpoint
+- Bump the dependencies.
+
 ### 1.1.3
@@ -14,1 +19,6 @@
 - [#11], [#12] Removed `react-native` from peerDependencies.
+
+[#11]: https://github.com/godaddy/breakdancer/pull/11
+[#12]: https://github.com/godaddy/breakdancer/pull/12
+[#13]: https://github.com/godaddy/breakdancer/pull/13
+[#14]: https://github.com/godaddy/breakdancer/pull/14

lib/breakdancer.js

@@ -122,2 +122,33 @@ 'use strict';
     }
+
+    /**
+     * Returns the difference between the current width and the given breakpoint. 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.
+     *
+     *
+     * @param {String} breakpoint to be compared
+     * @param {String} property height or width
+     * @throws {TypeError} If not given breakpoint and property do not exist within the given spec
+     * @returns {Number} different between current and specified properties
+     * @public
+     */
+
+  }, {
+    key: 'compare',
+    value: function compare(breakpoint, property) {
+      var desiredSpec = this.specification.filter(function (spec) {
+        return spec.name === breakpoint;
+      })[0];
+
+      if (!desiredSpec) {
+        return new TypeError(breakpoint + ' is not part of the given specifications');
+      }
+
+      if (!desiredSpec[property]) {
+        return new TypeError(breakpoint + '.' + property + ' is not part of the given specifications');
+      }
+
+      return this[property]() - desiredSpec[property];
+    }
   }]);
@@ -124,0 +155,0 @@

package.json

 {
   "name": "breakdancer",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "A breakpoint tracking utility",
@@ -30,11 +30,11 @@ "main": "./lib",
   "devDependencies": {
-    "assume": "1.5.x",
-    "babel-cli": "6.24.x",
-    "babel-register": "6.24.x",
+    "assume": "^1.5.2",
+    "babel-cli": "^6.26.0",
+    "babel-register": "^6.26.0",
     "eslint": "^4.2.0",
-    "eslint-config-godaddy": "^1.1.0",
+    "eslint-config-godaddy": "^2.0.0",
     "eslint-plugin-json": "^1.2.0",
     "eslint-plugin-mocha": "^4.11.0",
-    "mocha": "3.4.x",
-    "pre-commit": "1.2.x",
+    "mocha": "^4.0.0",
+    "pre-commit": "^1.2.2",
     "react": "^15.6.1",
@@ -51,5 +51,5 @@ "react-native": "^0.46.1",
   "dependencies": {
-    "babel-preset-es2015": "6.24.x",
-    "babelify": "7.3.x",
-    "propget": "1.1.x"
+    "babel-preset-es2015": "^6.24.0",
+    "babelify": "^7.3.0",
+    "propget": "^1.1.0"
   },
@@ -56,0 +56,0 @@ "babel": {

README.md

@@ -16,2 +16,4 @@ # breakdancer
   - [.currently()](#currently)
+  - [.compareWidth()](#comparewidth)
+  - [.compareHeight()](#compareheight)
   - [.breakpoint](#breakpoint)
@@ -39,3 +41,3 @@ - [License](#license)
 
-Breakdance is tested and works on both `web` and `react-native` platforms.
+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
@@ -70,3 +72,3 @@ dependency issues on pure `web` projects, so make sure you have `react-native`
     width: 800,
-    heigt: 600
+    height: 600
   }
@@ -157,4 +159,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)

test.js

@@ -171,2 +171,28 @@ import Breakdancer from './index';
   });
+
+  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);
+    });
+  });
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

35202

increased by12.83%

Lines of code

732

increased by10.57%

Number of lines in readme file

181

increased by15.29%

Dependency changes

• + Addedua-parser-js@0.7.39(transitive)

• - Removedua-parser-js@0.7.40(transitive)

• Updatedbabel-preset-es2015@^6.24.0

• Updatedbabelify@^7.3.0

• Updatedpropget@^1.1.0