Add call event

Author: hum-n

package.json

@@ -1,6 +1,6 @@
 {
   "name": "modularscroll",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Dead simple elements in viewport detection.",
   "repository": "modularorg/modularscroll",
   "author": "Antoine Boulanger <hello@antoineboulanger.com> (https://antoineboulanger.com)",

readme.md

@@ -49,31 +49,51 @@ this.scroll = new modularScroll({
 ```js
 import modularScroll from 'modularscroll';
 
-this.scroll = new modularScroll({});
+this.scroll = new modularScroll();
 
 this.scroll.update();
 ```
 
+#### With events
+```js
+import modularScroll from 'modularscroll';
+
+this.scroll = new modularScroll();
+
+this.scroll.on('call', (func) => {
+    this.call(...func); // Using modularJS
+});
+```
+```html
+<div data-scroll data-scroll-call="function, module">Trigger</div>
+```
+
 ## Options
 | Option | Type | Default | Description |
 | ------ | ---- | ------- | ----------- |
-| `el` | `object` | `document` | Scroll container element |
-| `name` | `string` | `'scroll'` | Data attributes name |
-| `class` | `string` | `'is-inview'` | Elements in-view class |
-| `offset` | `number` | `0` | In-view trigger offset |
-| `repeat` | `boolean` | `false` | Repeat in-view detection |
+| `el` | `object` | `document` | Scroll container element. |
+| `name` | `string` | `'scroll'` | Data attributes name. |
+| `class` | `string` | `'is-inview'` | Elements in-view class. |
+| `offset` | `number` | `0` | In-view trigger offset. |
+| `repeat` | `boolean` | `false` | Repeat in-view detection. |
 
 ## Attributes
 | Attribute | Values | Description |
 | --------- | ------ | ----------- |
-| `data-scroll` |  | Detect if in-view |
-| `data-scroll-class` | `string` | Element in-view class  |
-| `data-scroll-offset` | `number` | Element in-view trigger offset |
-| `data-scroll-repeat` | `true`, `false` | Element in-view detection repeat |
+| `data-scroll` |  | Detect if in-view. |
+| `data-scroll-class` | `string` | Element in-view class.  |
+| `data-scroll-offset` | `number` | Element in-view trigger offset. |
+| `data-scroll-repeat` | `true`, `false` | Element in-view detection repeat. |
+| `data-scroll-call` | `string` | Element in-view trigger call event. |
 
 ## Methods
 | Method | Description |
 | --------- | ----------- |
-| `init()` | Reinit the scroll |
-| `update()` | Update elements position  |
-| `destroy()` | Destroy the scroll events |
+| `init()` | Reinit the scroll. |
+| `update()` | Update elements position.  |
+| `destroy()` | Destroy the scroll events. |
+
+## Events
+| Event | Arguments | Description |
+| ----- | --------- | ----------- |
+| `call` | `func` | Trigger if in-view. Returns your `string` or `array` if contains `,`. |

src/main.js

@@ -10,6 +10,7 @@ export default class {
 
         Object.assign(this, this.defaults, options);
 
+        this.namespace = 'modular';
         this.windowHeight = window.innerHeight;
         this.els = [];
         this.scrollPosition = 0;
@@ -35,6 +36,7 @@ export default class {
             let bottom = top + el.offsetHeight;
             let offset = parseInt(el.dataset[this.name + '-offset']) || parseInt(this.offset);
             let repeat = el.dataset[this.name + '-repeat'];
+            let call = el.dataset[this.name + '-call'];
 
             if(repeat == 'false') {
                 repeat = false;
@@ -51,7 +53,8 @@ export default class {
                 bottom: bottom,
                 offset: offset,
                 repeat: repeat,
-                inView: false
+                inView: false,
+                call: call
             }
         });
 
@@ -115,6 +118,14 @@ export default class {
         }
 
         el.el.classList.add(el.class);
+
+        if (el.call) {
+            this.callValue = el.call.split(',').map(item => item.trim());
+            if (this.callValue.length == 1) this.callValue = this.callValue[0];
+
+            const callEvent = new Event(this.namespace + 'call');
+            window.dispatchEvent(callEvent);
+        }
     }
 
     setOutOfView(el, i) {
@@ -134,6 +145,17 @@ export default class {
         this.frame = false;
     }
 
+    on(event, func) {
+        window.addEventListener(this.namespace + event, () => {
+            switch (event) {
+                case 'call':
+                    return func(this.callValue);
+                default:
+                    return func();
+            }
+        }, false);
+    }
+
     destroy() {
         window.removeEventListener('scroll', this.checkScroll, false);
         window.removeEventListener('resize', this.checkResize, false);