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 numberDiff line numberDiff line change
Expand Up@@ -230,7 +230,7 @@
],
"linebreak-style": [
2,
"windows"
"unix"
],
"max-nested-callbacks": [
2,
Expand DownExpand 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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=falsewebpack --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=truebabel src -d dist",
"dev": "PROD_ENV=falsewebpack-dev-server ./src/scrollmap.js --hot --watch --colors",
"cdn": "PROD_ENV=falsewebpack && PROD_ENV=truewebpack -p",
"lint": "eslint src"
},
"repository": {
Expand DownExpand Up@@ -47,7 +47,9 @@
"webpack-dev-server": "^2.4.2"
},
"babel": {
"presets": ["latest"]
"presets": [
"latest"
]
},
"keywords": [
"element",
Expand Down
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
add treshold option, fixed cs by digitalkaoz · Pull Request #1 · benobee/scrollmap · GitHub
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 numberDiff line numberDiff line change
Expand Up@@ -230,7 +230,7 @@
 ],
 "linebreak-style": [
 2,
 "windows"
 "unix"
 ],
 "max-nested-callbacks": [
 2,
Expand DownExpand 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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=falsewebpack --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=truebabel src -d dist",
 "dev": "PROD_ENV=falsewebpack-dev-server ./src/scrollmap.js --hot --watch --colors",
 "cdn": "PROD_ENV=falsewebpack && PROD_ENV=truewebpack -p",
 "lint": "eslint src"
 },
 "repository": {
Expand DownExpand Up@@ -47,7 +47,9 @@
 "webpack-dev-server": "^2.4.2"
 },
 "babel": {
 "presets": ["latest"]
 "presets": [
 "latest"
 ]
 },
 "keywords": [
 "element",
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
add treshold option, fixed cs by digitalkaoz · Pull Request #1 · benobee/scrollmap · GitHub
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 numberDiff line numberDiff line change
Expand Up@@ -230,7 +230,7 @@
 ],
 "linebreak-style": [
 2,
 "windows"
 "unix"
 ],
 "max-nested-callbacks": [
 2,
Expand DownExpand 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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=falsewebpack --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=truebabel src -d dist",
 "dev": "PROD_ENV=falsewebpack-dev-server ./src/scrollmap.js --hot --watch --colors",
 "cdn": "PROD_ENV=falsewebpack && PROD_ENV=truewebpack -p",
 "lint": "eslint src"
 },
 "repository": {
Expand DownExpand Up@@ -47,7 +47,9 @@
 "webpack-dev-server": "^2.4.2"
 },
 "babel": {
 "presets": ["latest"]
 "presets": [
 "latest"
 ]
 },
 "keywords": [
 "element",
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
add treshold option, fixed cs by digitalkaoz · Pull Request #1 · benobee/scrollmap · GitHub
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 numberDiff line numberDiff line change
Expand Up@@ -230,7 +230,7 @@
 ],
 "linebreak-style": [
 2,
 "windows"
 "unix"
 ],
 "max-nested-callbacks": [
 2,
Expand DownExpand 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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=falsewebpack --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=truebabel src -d dist",
 "dev": "PROD_ENV=falsewebpack-dev-server ./src/scrollmap.js --hot --watch --colors",
 "cdn": "PROD_ENV=falsewebpack && PROD_ENV=truewebpack -p",
 "lint": "eslint src"
 },
 "repository": {
Expand DownExpand Up@@ -47,7 +47,9 @@
 "webpack-dev-server": "^2.4.2"
 },
 "babel": {
 "presets": ["latest"]
 "presets": [
 "latest"
 ]
 },
 "keywords": [
 "element",
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
add treshold option, fixed cs by digitalkaoz · Pull Request #1 · benobee/scrollmap · GitHub
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 numberDiff line numberDiff line change
Expand Up@@ -230,7 +230,7 @@
 ],
 "linebreak-style": [
 2,
 "windows"
 "unix"
 ],
 "max-nested-callbacks": [
 2,
Expand DownExpand 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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=falsewebpack --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=truebabel src -d dist",
 "dev": "PROD_ENV=falsewebpack-dev-server ./src/scrollmap.js --hot --watch --colors",
 "cdn": "PROD_ENV=falsewebpack && PROD_ENV=truewebpack -p",
 "lint": "eslint src"
 },
 "repository": {
Expand DownExpand Up@@ -47,7 +47,9 @@
 "webpack-dev-server": "^2.4.2"
 },
 "babel": {
 "presets": ["latest"]
 "presets": [
 "latest"
 ]
 },
 "keywords": [
 "element",
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
add treshold option, fixed cs by digitalkaoz · Pull Request #1 · benobee/scrollmap · GitHub
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 numberDiff line numberDiff line change
Expand Up@@ -230,7 +230,7 @@
 ],
 "linebreak-style": [
 2,
 "windows"
 "unix"
 ],
 "max-nested-callbacks": [
 2,
Expand DownExpand 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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=falsewebpack --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=truebabel src -d dist",
 "dev": "PROD_ENV=falsewebpack-dev-server ./src/scrollmap.js --hot --watch --colors",
 "cdn": "PROD_ENV=falsewebpack && PROD_ENV=truewebpack -p",
 "lint": "eslint src"
 },
 "repository": {
Expand DownExpand Up@@ -47,7 +47,9 @@
 "webpack-dev-server": "^2.4.2"
 },
 "babel": {
 "presets": ["latest"]
 "presets": [
 "latest"
 ]
 },
 "keywords": [
 "element",
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
add treshold option, fixed cs by digitalkaoz · Pull Request #1 · benobee/scrollmap · GitHub
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 numberDiff line numberDiff line change
Expand Up@@ -230,7 +230,7 @@
 ],
 "linebreak-style": [
 2,
 "windows"
 "unix"
 ],
 "max-nested-callbacks": [
 2,
Expand DownExpand 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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=falsewebpack --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=truebabel src -d dist",
 "dev": "PROD_ENV=falsewebpack-dev-server ./src/scrollmap.js --hot --watch --colors",
 "cdn": "PROD_ENV=falsewebpack && PROD_ENV=truewebpack -p",
 "lint": "eslint src"
 },
 "repository": {
Expand DownExpand Up@@ -47,7 +47,9 @@
 "webpack-dev-server": "^2.4.2"
 },
 "babel": {
 "presets": ["latest"]
 "presets": [
 "latest"
 ]
 },
 "keywords": [
 "element",
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
add treshold option, fixed cs by digitalkaoz · Pull Request #1 · benobee/scrollmap · GitHub
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 numberDiff line numberDiff line change
Expand Up@@ -230,7 +230,7 @@
 ],
 "linebreak-style": [
 2,
 "windows"
 "unix"
 ],
 "max-nested-callbacks": [
 2,
Expand DownExpand 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 numberDiff line numberDiff 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 numberDiff line numberDiff 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=falsewebpack --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=truebabel src -d dist",
 "dev": "PROD_ENV=falsewebpack-dev-server ./src/scrollmap.js --hot --watch --colors",
 "cdn": "PROD_ENV=falsewebpack && PROD_ENV=truewebpack -p",
 "lint": "eslint src"
 },
 "repository": {
Expand DownExpand Up@@ -47,7 +47,9 @@
 "webpack-dev-server": "^2.4.2"
 },
 "babel": {
 "presets": ["latest"]
 "presets": [
 "latest"
 ]
 },
 "keywords": [
 "element",
Expand Down
Loading