Skip to content

add treshold option, fixed cs #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
digitalkaoz wants to merge 1 commit into
base: master
Choose a base branch
from
Open

add treshold option, fixed cs #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions .eslintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,7 +230,7 @@
],
"linebreak-style": [
2,
"windows"
"unix"
],
"max-nested-callbacks": [
2,
Expand Down Expand Up @@ -367,4 +367,4 @@
"prefer-template": 2,
"require-yield": 2
}
}
}
94 changes: 53 additions & 41 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,20 @@ A module for testing if a DOM element is visible in the viewport, then triggers

Using ES6:

import Scrollmap from 'scrollmap';
```javascript
import Scrollmap from 'scrollmap';
```

Using a CDN via jsDelivr:

<script src="https://cdn.jsdelivr.net/npm/scrollmap@1.6.5/cdn/scrollmap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/scrollmap@1.6.5/cdn/scrollmap.js"></script>
```html
<script src="https://cdn.jsdelivr.net/npm/scrollmap@1.6.5/cdn/scrollmap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/scrollmap@1.6.5/cdn/scrollmap.js"></script>
```

********************************************

##Method - trigger(options, callback)
## Method - trigger(options, callback)

**Description:**
A method for adding triggers when element is visible in the viewport.
Expand All @@ -36,24 +40,29 @@ as long as the scroll event is happening.

**alwaysRunOnTrigger (boolean)**: by default the triggered element callback will only be executed one time. Setting to true will re-trigger the callback everytime the element has been in and out of the viewport.

**treshold (number)**: add this much pixels to calculation to the visibility check (useful if you want to execute code just before the element becomes visible)

**callback (object)**:
This is the function which will be exectued when the element is detected in the viewport. To reference the node, pass it
into the callback as an argument.

**EXAMPLE**

Scrollmap.trigger({
target: '.collection-list .items',
surfaceVisible: 0.5,
runOnScroll: true,
alwaysRunOnTrigger: true
}, (element) => {
$(element).addClass("visible");
});
```javascript
Scrollmap.trigger({
target: '.collection-list .items',
surfaceVisible: 0.5,
runOnScroll: true,
alwaysRunOnTrigger: true,
treshold: 200
}, (element) => {
$(element).addClass("visible");
});
```

********************************************

##Method - sequence(options, callback)
## Method - sequence(options, callback)

**Description:**
A method for staggering an array of triggers.
Expand All @@ -71,52 +80,55 @@ can get the item and index of the array as arguments

**EXAMPLE**

Scrollmap.trigger({
target: ".boxes",
surfaceVisible: 0.2
}, (element) => {
```javascript
Scrollmap.trigger({
target: ".boxes",
surfaceVisible: 0.2
}, (element) => {

//define the array of the elements to sequence
//define the array of the elements to sequence

const array = element.querySelectorAll(".box");
const array = element.querySelectorAll(".box");

//use the sequence method to define, interval and callback
//function.
//use the sequence method to define, interval and callback
//function.

Scrollmap.sequence(array, {
interval: 5,
order: "random"
}, (item) => {
Scrollmap.sequence(array, {
interval: 5,
order: "random"
}, (item) => {

//add any code to be triggered when
//the element is in the viewport
//add any code to be triggered when
//the element is in the viewport

item.classList.add("color-change");
item.classList.add("color-change");

});
});
});
});
```

********************************************

##Method - out(function)
## Method - out(function)

When the trigger is has been executed and the element is no longer in the viewport, the out method
can be chained to the trigger to execute the specified function.

**EXAMPLE**

Scrollmap.trigger({
target: ".boxes",
surfaceVisible: 0.2
}, (element) => {
element.classList.add("foo");
}).out((element) => {
element.classList.add("bar");
});

```javascript
Scrollmap.trigger({
target: ".boxes",
surfaceVisible: 0.2
}, (element) => {
element.classList.add("foo");
}).out((element) => {
element.classList.add("bar");
});
```
********************************************

##Hooks
## Hooks

**data-scrollmap-loaded (boolean):**
Once the element is initialized.
Expand Down
26 changes: 18 additions & 8 deletions dist/scrollmap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
* @namespace scrollMap
* @description store element points and check if
* elements are visible
*/
*/

var Scroll_Event_Trigger = function () {
function Scroll_Event_Trigger() {
Expand Down Expand Up @@ -157,7 +157,7 @@ var Scroll_Event_Trigger = function () {
}
}, {
key: "elementInViewport",
value: function elementInViewport(el, percetageOfElement) {
value: function elementInViewport(el, percetageOfElement, treshold) {

/*
* @desc check if element is in viewport
Expand All @@ -173,7 +173,7 @@ var Scroll_Event_Trigger = function () {
var rect = el.getBoundingClientRect();

var stats = {
top: rect.top - window.innerHeight,
top: rect.top - window.innerHeight + treshold,
bottom: rect.bottom + rect.height,
height: rect.height
};
Expand All @@ -188,7 +188,7 @@ var Scroll_Event_Trigger = function () {
}, {
key: "checkVisible",
value: function checkVisible(point) {
var viewport = this.elementInViewport(point.element, point.surfaceVisible);
var viewport = this.elementInViewport(point.element, point.surfaceVisible, point.treshold);

if (viewport) {
this.setTriggerIn(point);
Expand Down Expand Up @@ -234,8 +234,20 @@ var Scroll_Event_Trigger = function () {
value: function events() {
var _this2 = this;

var supportsPassive = false;

try {
var opts = Object.defineProperty({}, "passive", {
get: function get() {
supportsPassive = true;
}
});

window.addEventListener("test", null, opts);
} catch (e) {} // eslint-disable-line no-empty

// initial check on page load to see if elements are visible
window.addEventListener('load', function () {
window.addEventListener("load", function () {
_this2.points.forEach(function (point) {
_this2.checkVisible(point);
});
Expand All @@ -247,15 +259,13 @@ var Scroll_Event_Trigger = function () {
_this2.points.forEach(function (point) {
_this2.checkVisible(point);
});
});
}, supportsPassive ? { passive: true } : false);
}
}]);

return Scroll_Event_Trigger;
}();

;

var Scrollmap = new Scroll_Event_Trigger();

window.Scrollmap = Scrollmap;
Expand Down
62 changes: 31 additions & 31 deletions dist/trigger.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,44 @@
"use strict";

Object.defineProperty(exports, "__esModule", {
value: true
value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Trigger = function () {
function Trigger(element, options, callback) {
_classCallCheck(this, Trigger);

this.element = element;
this.surfaceVisible = 0.5;
this.callback = callback;
this.triggeredIn = false;
this.triggeredOut = false;
this.runOnScroll = false;
this.alwaysRunOnTrigger = false;
if (options) {
Object.assign(this, options);
}
}

_createClass(Trigger, [{
key: "onTriggerIn",
value: function onTriggerIn() {
this.callback(this.element);
return this;
}
}, {
key: "destroy",
value: function destroy() {
this.element = null;
this.isDestroyed = true;
}
}]);

return Trigger;
function Trigger(element, options, callback) {
_classCallCheck(this, Trigger);

this.element = element;
this.surfaceVisible = 0.5;
this.treshold = 0;
this.callback = callback;
this.triggeredIn = false;
this.triggeredOut = false;
this.runOnScroll = false;
this.alwaysRunOnTrigger = false;
if (options) {
Object.assign(this, options);
}
}

_createClass(Trigger, [{
key: "onTriggerIn",
value: function onTriggerIn() {
this.callback(this.element);
return this;
}
}, {
key: "destroy",
value: function destroy() {
this.element = null;
}
}]);

return Trigger;
}();

exports.default = Trigger;
12 changes: 7 additions & 5 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@
"description": "A module for testing if an element is visible in the viewport, then triggers callbacks on execution.",
"main": "./dist/scrollmap.js",
"scripts": {
"start": "set PROD_ENV=false&&webpack --progress --colors --watch",
"start": "PROD_ENV=false webpack --progress --colors --watch",
"watch": "./node_modules/.bin/webpack -d --watch --colors",
"build": "set PROD_ENV=true&&babel src -d dist",
"dev": "set PROD_ENV=false&&webpack-dev-server ./src/scrollmap.js --hot --watch --colors",
"cdn" : "set PROD_ENV=false&&webpack&&set PROD_ENV=true&&webpack -p",
"build": "PROD_ENV=true babel src -d dist",
"dev": "PROD_ENV=false webpack-dev-server ./src/scrollmap.js --hot --watch --colors",
"cdn": "PROD_ENV=false webpack && PROD_ENV=true webpack -p",
"lint": "eslint src"
},
"repository": {
Expand Down Expand Up @@ -47,7 +47,9 @@
"webpack-dev-server": "^2.4.2"
},
"babel": {
"presets": ["latest"]
"presets": [
"latest"
]
},
"keywords": [
"element",
Expand Down
Loading