@mangoweb/in-view - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

package.json

 {
   "name": "@mangoweb/in-view",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Watches elements entering and leaving viewport.",
@@ -11,3 +11,4 @@ "main": "lib/index.js",
     "eslint:lint": "eslint \"src/**/*.{ts,tsx}\" ",
-    "eslint:fix": "eslint --fix \"src/**/*.{ts,tsx}\" "
+    "eslint:fix": "eslint --fix \"src/**/*.{ts,tsx}\" ",
+    "prepublish": "npm run build"
   },
@@ -38,5 +39,7 @@ "repository": {
   "dependencies": {
-    "@mangoweb/scripts-base": "0.0.5",
-    "isinview": "^2.0.4-0"
+    "isinview": "^2.1.0"
+  },
+  "peerDependencies": {
+    "@mangoweb/scripts-base": "0.0.8"
   }
 }

README.md

@@ -7,5 +7,5 @@ # InView
 
-`$ npm install @mangoweb/in-view`
+`$ npm install @mangoweb/in-view @mangoweb/scripts-base`
 
-Works best with [`@mangoweb/scripts-base`](https://www.npmjs.com/package/@mangoweb/scripts-base).
+This is a [`@mangoweb/scripts-base`](https://www.npmjs.com/package/@mangoweb/scripts-base) component.
 
@@ -12,0 +12,0 @@ ## Usage

src/index.ts

@@ -25,4 +25,4 @@ import { Component, ComponentInitializationError } from '@mangoweb/scripts-base'
 
-	public constructor(el: HTMLElement, data: InViewData) {
-		super(el, data)
+	public constructor(el: HTMLElement, props: InViewData) {
+		super(el, props)
 
@@ -33,12 +33,12 @@ if (!isSupported()) {
 
-		this.targets = this.data.targets ? this.getChildren(this.data.targets) : this.el
+		this.targets = this.props.targets ? this.getChildren(this.props.targets) : this.el
 
-		if (this.data.threshold) {
-			this.options.threshold = this.data.threshold
+		if (this.props.threshold) {
+			this.options.threshold = this.props.threshold
 		}
 
-		this.isAboveViewClass = this.getProp('isAboveViewClass', 'is-aboveView')
-		this.isInViewClass = this.getProp('isInViewClass', 'is-inView')
-		this.isBelowViewClass = this.getProp('isBelowViewClass', 'is-belowView')
-		this.isSeenClass = this.getProp('isSeenClass', 'is-seen')
+		this.isAboveViewClass = this.getPropOrElse('isAboveViewClass', 'is-aboveView')
+		this.isInViewClass = this.getPropOrElse('isInViewClass', 'is-inView')
+		this.isBelowViewClass = this.getPropOrElse('isBelowViewClass', 'is-belowView')
+		this.isSeenClass = this.getPropOrElse('isSeenClass', 'is-seen')
 	}
@@ -51,3 +51,3 @@
 				target.classList.add(this.isSeenClass)
-				this.togglePositionClasses(target, details)
+				this.updatePositionClasses(target, details)
 			},
@@ -57,20 +57,14 @@ this.options
 
-		isOutOfView(
-			this.targets,
-			(target, details) => {
-				this.togglePositionClasses(target, details)
-			},
-			this.options
-		)
+		isOutOfView(this.targets, this.updatePositionClasses, this.options)
 	}
 
-	private togglePositionClasses(target: Element, details: IsInView.Details) {
-		this.toggleClass(target, this.isAboveViewClass, details.isAboveView)
-		this.toggleClass(target, this.isInViewClass, details.isInView)
-		this.toggleClass(target, this.isBelowViewClass, details.isBelowView)
+	protected updatePositionClasses = (target: Element, details: IsInView.Details) => {
+		this.updateClass(target, this.isAboveViewClass, details.isAboveView)
+		this.updateClass(target, this.isInViewClass, details.isInView)
+		this.updateClass(target, this.isBelowViewClass, details.isBelowView)
 	}
 
-	private toggleClass(target: Element, className: string, force: boolean) {
+	protected updateClass(target: Element, className: string, present: boolean) {
 		if (className) {
-			if (force) {
+			if (present) {
 				target.classList.add(className)
@@ -77,0 +71,0 @@ } else {

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

Worsened metrics

Total package byte prevSize

4452

decreased by-59.4%

Number of package files

5

decreased by-44.44%

Lines of code

66

decreased by-58.75%

Dependency changes

• + Added@mangoweb/scripts-base@0.0.8(transitive)

• - Removed@mangoweb/scripts-base@0.0.5

• - Removed@mangoweb/scripts-base@0.0.5(transitive)

• Updatedisinview@^2.1.0