├── .gitignore
├── .npmrc
├── .travis.yml
├── LICENSE
├── index.js
├── package.json
├── readme.md
└── test.js


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | npm-debug.log
4 | .npmignore
5 | package-lock.json
6 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | package-lock=false
2 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | node_js:
2 | - "6"
3 | - "7"
4 | sudo: false
5 | language: node_js
6 | script: "npm run test"
7 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Jon Gacnik
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | var Nanocomponent = require('nanocomponent')
 2 | var onIntersect = require('on-intersect')
 3 | 
 4 | module.exports = class MonoLazy extends Nanocomponent {
 5 |   constructor () {
 6 |     super()
 7 |     this.hasEntered = null
 8 |   }
 9 | 
10 |   load (element) {
11 |     if (this.hasEntered) return
12 |     this.stopObserving = onIntersect(element, function () {
13 |       this.hasEntered = true
14 |       if (this.onEnter) this.onEnter()
15 |       this.stopObserving()
16 |     }.bind(this))
17 |   }
18 | 
19 |   unload () {
20 |     if (this.stopObserving) this.stopObserving()
21 |   }
22 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "monolazy",
 3 |   "version": "0.0.0",
 4 |   "description": "monolazy",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "budo test.js"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "Jon Gacnik <jon@folderstudio.com> (http://jongacnik.com)",
11 |   "license": "MIT",
12 |   "dependencies": {
13 |     "nanocomponent": "^6.5.2",
14 |     "on-intersect": "^2.0.0"
15 |   },
16 |   "devDependencies": {
17 |     "budo": "^11.2.0",
18 |     "choo": "^6.10.3"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | <h1 align="center">monolazy</h1>
 2 | 
 3 | <div align="center">
 4 |   <a href="https://nodejs.org/api/documentation.html#documentation_stability_index">
 5 |     <img src="https://img.shields.io/badge/stability-experimental-orange.svg?style=flat-square" alt="Stability" />
 6 |   </a>
 7 |   <a href="https://www.npmjs.com/package/monolazy">
 8 |     <img src="https://img.shields.io/npm/v/monolazy.svg?style=flat-square" alt="NPM version" />
 9 |   </a>
10 | </div>
11 | 
12 | <br />
13 | 
14 | Extended [nanocomponent](https://github.com/choojs/nanocomponent) which provides a single `onEnter` callback using [on-intersect](https://github.com/yoshuawuyts/on-intersect) when component enters the viewport.
15 | 
16 | ## Usage
17 | 
18 | Extend `monolazy` the same way you extend `nanocomponent`
19 | 
20 | ```js
21 | var html = require('nanohtml')
22 | var MonoLazy = require('monolazy')
23 | 
24 | class TestComponent extends MonoLazy {
25 |   // implement onEnter, fires when element enters viewport
26 |   onEnter () {
27 |     this.rerender()
28 |   }
29 | 
30 |   // use the hasEntered property to determine if element has entered viewport
31 |   createElement () {
32 |     return html`<div>${this.hasEntered ? 'here i am' : 'patiently waiting'}</div>`
33 |   }
34 | }
35 | ```
36 | 
37 | ## Details
38 | 
39 | `monolazy` itself only implements `load` and `unload`. It is up to you to implement `onEnter` and `createElement` and any another methods!
40 | 
41 | If you need to implement your own `load`/`unload`, make sure you call the parent's `load`/`unload`:
42 | 
43 | ```js
44 | class TestComponent extends MonoLazy {
45 |   load (element) {
46 |     super.load(element)
47 |     // custom load here
48 |   }
49 | 
50 |   unload (element) {
51 |     super.unload(element)
52 |     // custom unload here
53 |   }
54 | 
55 |   onEnter () {
56 |     this.rerender()
57 |   }
58 | 
59 |   createElement () {
60 |     return html`<div>${this.hasEntered ? 'here i am' : 'patiently waiting'}</div>`
61 |   }
62 | }
63 | 
64 | ```
65 | 
66 | ## Polyfill
67 | 
68 | If you need to support browsers without [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API), you can use a [polyfill](https://www.npmjs.com/package/intersection-observer):
69 | 
70 | ```js
71 | require('intersection-observer')
72 | var MonoLazy = require('monolazy')
73 | ```
74 | 
75 | ## See Also
76 | 
77 | - [monoeq/monoimage](https://github.com/monoeq/monoimage)
78 | - [choojs/nanocomponent](https://github.com/choojs/nanocomponent)


--------------------------------------------------------------------------------
/test.js:
--------------------------------------------------------------------------------
 1 | var choo = require('choo')
 2 | var html = require('choo/html')
 3 | var MonoLazy = require('.')
 4 | 
 5 | class TestComponent extends MonoLazy {
 6 |   load (element) {
 7 |     super.load(element)
 8 |   }
 9 | 
10 |   onEnter () {
11 |     this.rerender()
12 |   }
13 | 
14 |   createElement () {
15 |     return html`<div>${this.hasEntered ? 'here i am' : 'patiently waiting'}</div>`
16 |   }
17 | }
18 | 
19 | var element = new TestComponent()
20 | 
21 | var app = choo()
22 | app.route('/', function (state, emit) {
23 |   return html`<body style="padding-top:150vh">${element.render()}</body>`
24 | })
25 | app.mount('body')
26 | 


--------------------------------------------------------------------------------