@financial-times/o-viewport - npm Package Compare versions

Comparing version 5.0.1 to 5.1.0

CHANGELOG.md

 # Changelog
 
+## [5.1.0](https://www.github.com/Financial-Times/origami/compare/o-viewport-v5.0.1...o-viewport-v5.1.0) (2021-11-24)
+
+
+### Features
+
+* allow npm 8 in engines config ([eeb1cae](https://www.github.com/Financial-Times/origami/commit/eeb1cae6e7f0379e647f2b41240b1f294997d528))
+
 ### [5.0.1](https://www.github.com/Financial-Times/origami/compare/o-viewport-v5.0.0...o-viewport-v5.0.1) (2021-09-21)
@@ -4,0 +11,0 @@

main.js

@@ -143,2 +143,3 @@ import utils from './src/utils.js';
  * Start listening for an event(s).
+ *
  * @param {string} eventType - The event to start listening for. One of `resize`, `scroll`, `orientation`, `visibility` or `all`.
@@ -174,2 +175,3 @@ * @example
  * Stop listening for an event(s).
+ *
  * @param {string} eventType - The event to stop listening for. One of `resize`, `scroll`, `orientation`, `visibility` or `all`.
@@ -176,0 +178,0 @@ * @example

package.json

 {
   "name": "@financial-times/o-viewport",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "description": "Utility for attaching debounced listeners to resize, scroll, orientation and visibility events on window",
@@ -20,3 +20,5 @@ "keywords": [
     "start": "npx serve ./demos/local",
-    "build": "npm_config_yes=true npx \"origami-build-tools@^11\" install && npm_config_yes=true npx \"origami-build-tools@^11\" demo"
+    "build": "bash ../../scripts/component/build.bash",
+    "test": "bash ../../scripts/component/test.bash",
+    "lint": "bash ../../scripts/component/lint.bash"
   },
@@ -27,3 +29,3 @@ "peerDependencies": {
   "engines": {
-    "npm": "^7"
+    "npm": "^7 || ^8"
   },
@@ -33,3 +35,5 @@ "volta": {
     "npm": "7.11.1"
-  }
+  },
+  "percy": true,
+  "private": false
 }

README.md

@@ -65,4 +65,4 @@ # o-viewport [![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](#licence)
 ```js
-oViewport.getSize(); // {width: 100, height: 100} without scrollbars
-oViewport.getSize(true); // {width: 108, height: 100} including scrollbar width
+oViewport.getSize(); // {width: 108, height: 100} including scrollbar width
+oViewport.getSize(true); // {width: 100, height: 100} without scrollbars
 ```
@@ -69,0 +69,0 @@

src/utils.js

@@ -7,5 +7,5 @@ import * as Utils from '@financial-times/o-utils';
  *
- * @param {string} eventType
- * @param {object} data
- * @param {EventTarget} target
+ * @param {string} eventType the name of the event
+ * @param {object} data the payload of the event
+ * @param {EventTarget} target the target of the event
  */
@@ -16,27 +16,36 @@ function broadcast(eventType, data, target) {
 	if (debug) {
+		// eslint-disable-next-line no-console
 		console.log('o-viewport', eventType, data);
 	}
 
-	target.dispatchEvent(new CustomEvent('oViewport.' + eventType, {
-		detail: data,
-		bubbles: true
-	}));
+	target.dispatchEvent(
+		new CustomEvent('oViewport.' + eventType, {
+			detail: data,
+			bubbles: true,
+		})
+	);
 }
 
 /**
-* Get the viewport height.
-* @param {boolean} ignoreScrollbars [false] - set to true to discount scrollbar height.
-* @return {number}
-*/
+ * Get the viewport height.
+ *
+ * @param {boolean} ignoreScrollbars [false] - set to true to discount scrollbar height.
+ * @returns {number} viewport height
+ */
 function getHeight(ignoreScrollbars) {
-	return ignoreScrollbars ? document.documentElement.clientHeight : Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+	return ignoreScrollbars
+		? document.documentElement.clientHeight
+		: Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
 }
 
 /**
-* Get the viewport width.
-* @param {boolean} ignoreScrollbars [false] - set to true to discount scrollbar width
-* @return {number}
-*/
+ * Get the viewport width.
+ *
+ * @param {boolean} ignoreScrollbars [false] - set to true to discount scrollbar width
+ * @returns {number} viewport width
+ */
 function getWidth(ignoreScrollbars) {
-	return ignoreScrollbars ? document.documentElement.clientWidth : Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
+	return ignoreScrollbars
+		? document.documentElement.clientWidth
+		: Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
 }
@@ -46,16 +55,18 @@
  * Viewport size.
- * @typedef {Object} Size
- * @property {number} height
- * @property {number} width
+ *
+ * @typedef {object} Size
+ * @property {number} height viewport height
+ * @property {number} width viewport width
  */
 
 /**
-* Get the viewport width and height.
-* @param {boolean} ignoreScrollbars [false] - set to true to discount scrollbar width/height.
-* @return {Size}
-*/
+ * Get the viewport width and height.
+ *
+ * @param {boolean} ignoreScrollbars [false] - set to true to discount scrollbar width/height.
+ * @returns {Size} viewport width and height object
+ */
 function getSize(ignoreScrollbars) {
 	return {
 		height: getHeight(ignoreScrollbars),
-		width: getWidth(ignoreScrollbars)
+		width: getWidth(ignoreScrollbars),
 	};
@@ -66,3 +77,4 @@ }
  * Scroll position.
- * @typedef {Object} ScrollPosition
+ *
+ * @typedef {object} ScrollPosition
  * @property {number} height - `document.body.scrollHeight`
@@ -75,3 +87,3 @@ * @property {number} width - `document.body.scrollWidth`
 /**
- * @return {ScrollPosition}
+ * @returns {ScrollPosition} current scroll info
  */
@@ -83,3 +95,3 @@ function getScrollPosition() {
 		left: window.pageXOffset || window.scrollX,
-		top: window.pageYOffset || window.scrollY
+		top: window.pageYOffset || window.scrollY,
 	};
@@ -89,3 +101,3 @@ }
 /**
- * @return {string} - 'portrait' or 'landscape'
+ * @returns {string} - 'portrait' or 'landscape'
  */
@@ -95,7 +107,9 @@ function getOrientation() {
 	if (orientation) {
-		return typeof orientation === 'string' ?
-			orientation.split('-')[0] :
-			orientation.type.split('-')[0];
+		return typeof orientation === 'string'
+			? orientation.split('-')[0]
+			: orientation.type.split('-')[0];
 	} else if (window.matchMedia) {
-		return window.matchMedia('(orientation: portrait)').matches ? 'portrait' : 'landscape';
+		return window.matchMedia('(orientation: portrait)').matches
+			? 'portrait'
+			: 'landscape';
 	} else {
@@ -107,3 +121,3 @@ return getHeight() >= getWidth() ? 'portrait' : 'landscape';
 /**
- * @return {boolean} - true if the viewport is visible
+ * @returns {boolean} - true if the viewport is visible
  */
@@ -115,3 +129,3 @@ function getVisibility() {
 export default {
-	debug: function() {
+	debug: function () {
 		debug = true;
@@ -127,3 +141,3 @@ },
 	debounce: Utils.debounce,
-	throttle: Utils.throttle
+	throttle: Utils.throttle,
 };

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

18540

increased by3.56%

Lines of code

315

increased by1.29%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes