Merge pull request #10 from manGoweb/pr/component/in-view

Pr/component/in view

lerna.json

@@ -2,7 +2,8 @@
   "packages": [
     "packages/*",
     "sass-base",
-    "scripts-base"
+    "scripts-base",
+    "scripts-components/*"
   ],
   "version": "0.0.5"
 }

sass-base/package.json

@@ -5,7 +5,8 @@
   "main": "index.sass",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": ":"
+    "build": ":",
+    "prepublish": "npm run build"
   },
   "repository": {
     "type": "git",

scripts-base/README.md

@@ -127,9 +127,10 @@ You can import these and use them via `initializeComponents` side by side with y
 
 ```typescript
 import { Shapes } from `@mangoweb/scripts-base`
+import { InView } from `@mangoweb/in-view`
 ```
 
 There are currently these:
-- `Emitter`
-- `InView`
-- `Shapes`
+- Emitter
+- [InView](https://www.npmjs.com/package/@mangoweb/in-view)
+- Shapes

scripts-base/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@mangoweb/scripts-base",
   "version": "0.0.9",
-  "description": "Simple component model for small to meduim sites. Usable from JS & TS.",
+  "description": "Simple component model for small to medium sites. Usable from JS & TS.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "tsc",
     "eslint:lint": "eslint \"src/**/*.{ts,tsx}\" ",
-    "eslint:fix": "eslint --fix \"src/**/*.{ts,tsx}\" "
+    "eslint:fix": "eslint --fix \"src/**/*.{ts,tsx}\" ",
+    "prepublish": "npm run build"
   },
   "repository": {
     "type": "git",

scripts-base/src/components/index.ts

@@ -1,4 +1,3 @@
 export * from './Emitter'
 export * from './Example'
-export * from './InView'
 export * from './Shapes'

scripts-components/in-view/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+	extends:  [
+		'@mangoweb/eslint-config-ts',
+	]
+};

scripts-components/in-view/.gitignore

@@ -0,0 +1 @@
+lib

scripts-components/in-view/.npmignore

@@ -0,0 +1 @@
+tsconfig.json

scripts-components/in-view/.prettierrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+	...require('@mangoweb/prettier-config')
+}

scripts-components/in-view/README.md

@@ -0,0 +1,30 @@
+# InView
+
+The manGoweb InView component. Watches elements entering and leaving viewport.
+
+## Installation
+
+`$ npm install @mangoweb/in-view @mangoweb/scripts-base`
+
+This is a [`@mangoweb/scripts-base`](https://www.npmjs.com/package/@mangoweb/scripts-base) component.
+
+## Usage
+
+In your template:
+```html
+<script>
+	window.initComponents = (window.initComponents || []).push({
+		name: 'InView',
+		place: '#targetWrapper', // Element you want to watch or a wrapper
+		data: { // Optional
+			targets: '.target', // Watched children
+			threshold: 0, // Area of a target required to be inside viewport
+
+			isAboveViewClass: 'isAboveView', // Class added to a target element when seen above viewport
+			isInViewClass: 'isInView', // Target seen in viewport
+			isBelowViewClass: 'isBelowView', // Target seen below viewport
+			isSeenClass: 'isSeen', // Target seen in viewport at least once
+		}
+	})
+</script>
+```