Hi
```
diff --git a/dist/ffnm.min.js b/dist/ffnm.min.js
index a15e105..98e0e67 100644
--- a/dist/ffnm.min.js
+++ b/dist/ffnm.min.js
@@ -1,2 +1,2 @@
-document.addEventListener("DOMContentLoaded",()=>{const e={class:["add","remove","toggle"]};let t=[],s=void 0;function a(e,t){let s=e.getAttribute(t),a=RegExp("^(\\w+):").exec(s)[1],c=RegExp(":(\\w+)\\(").exec(s)[1],o=RegExp("\\('(\\w[_-\\w0-9]+)',?").exec(s)[1],l=RegExp(", ?'([.#i\\w][_-\\w0-9]+)'\\)");return{functionParent:a,functionChild:c,value:o,target:null!==l.exec(s)?l.exec(s)[1]:void 0}}function c(e){return[...t].filter(t=>t.hasAttribute(e))}t=[],["i-click","i-scroll-up","i-scroll-down","i-hover"].map(s=>[...document.querySelectorAll(`[${s}]`)].map(a=>{let c=Object.keys(e).map(t=>e[t].map(e=>RegExp(`^${t}:${e}\\('.+'(, ?'[.#i\\w][_-\\w0-9]+')?\\)$`).test(a.getAttribute(s))).some(e=>e)).every(e=>e);return c?t.push(a):(console.error("FFNM: Bad syntax"),console.error(a)),c}).every(e=>e)).every(e=>e),c("i-click").forEach(e=>{let t=a(e,"i-click");switch(t.functionParent){case"class":[...document.querySelectorAll(t.target)].concat(void 0===t.target?e:void 0).forEach(s=>{void 0!==s&&e.addEventListener("click",()=>{switch(t.functionChild){case"add":s.classList.add(t.value);break;case"remove":s.classList.remove(t.value);break;case"toggle":s.classList.toggle(t.value)}})})}}),function(){let e=c("i-scroll-down"),t=c("i-scroll-up");window.addEventListener("scroll",()=>{let c=window.pageYOffset||document.documentElement.scrollTop;e.forEach(e=>{if(c>s){let t=a(e,"i-scroll-down");switch(t.functionParent){case"class":switch(t.functionChild){case"add":e.classList.add(t.value);break;case"remove":e.classList.remove(t.value)}}}}),t.forEach(e=>{if(c<=s){let t=a(e,"i-scroll-up");switch(t.functionParent){case"class":switch(t.functionChild){case"add":e.classList.add(t.value);break;case"remove":e.classList.remove(t.value)}}}}),s=c<=0?0:c},!1)}(),c("i-hover").forEach(e=>{let t=a(e,"i-hover");switch(t.functionParent){case"class":[...document.querySelectorAll(t.target)].concat(void 0===t.target?e:void 0).forEach(s=>{if(void 0!==s)switch(t.functionChild){case"add":e.addEventListener("mouseenter",()=>{s.classList.add(t.value)}),e.addEventListener("mouseout",()=>{s.classList.remove(t.value)});break;case"remove":e.addEventListener("mouseenter",()=>{s.classList.remove(t.value)}),e.addEventListener("mouseout",()=>{s.classList.add(t.value)});break;case"toggle":e.addEventListener("mouseenter",()=>{s.classList.toggle(t.value)}),e.addEventListener("mouseout",()=>{s.classList.toggle(t.value)})}})}})});
+document.addEventListener("DOMContentLoaded",()=>{const e={class:["add","remove","toggle"]};let t=[],s=void 0;function i(e,t){let s=e.getAttribute(t),i=RegExp("^(\\w+):").exec(s)[1],c=RegExp(":(\\w+)\\(").exec(s)[1],a=RegExp("\\('(\\w[_-\\w0-9]+)',?").exec(s)[1],o=RegExp(", ?'([.#i\\w][_-\\w0-9]+)'\\)");return{functionParent:i,functionChild:c,value:a,target:null!==o.exec(s)?o.exec(s)[1]:void 0}}function c(e){return[...t].filter(t=>t.hasAttribute(e))}function a(e){let t=e.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&t.right<=(window.innerWidth||document.documentElement.clientWidth)}t=[],["is-click","is-scroll-up","is-scroll-down","is-hover","is-view","is-visible","is-not-visible"].map(s=>[...document.querySelectorAll(`[${s}]`)].map(i=>{let c=Object.keys(e).map(t=>e[t].map(e=>RegExp(`^${t}:${e}\\('.+'(, ?'[.#i\\w][_-\\w0-9]+')?\\)$`).test(i.getAttribute(s))).some(e=>e)).every(e=>e);return c?t.push(i):(console.error("FFNM: Bad syntax"),console.error(i)),c}).every(e=>e)).every(e=>e),c("is-click").forEach(e=>{let t=i(e,"is-click");switch(t.functionParent){case"class":[...document.querySelectorAll(t.target)].concat(void 0===t.target?e:void 0).forEach(s=>{void 0!==s&&e.addEventListener("click",()=>{switch(t.functionChild){case"add":s.classList.add(t.value);break;case"remove":s.classList.remove(t.value);break;case"toggle":s.classList.toggle(t.value)}})})}}),function(){let e=c("is-scroll-down"),t=c("is-scroll-up");window.addEventListener("scroll",()=>{let c=window.pageYOffset||document.documentElement.scrollTop;e.forEach(e=>{if(c>s){let t=i(e,"is-scroll-down");switch(t.functionParent){case"class":switch(t.functionChild){case"add":e.classList.add(t.value);break;case"remove":e.classList.remove(t.value)}}}}),t.forEach(e=>{if(c<=s){let t=i(e,"is-scroll-up");switch(t.functionParent){case"class":switch(t.functionChild){case"add":e.classList.add(t.value);break;case"remove":e.classList.remove(t.value)}}}}),s=c<=0?0:c},!1)}(),c("is-hover").forEach(e=>{let t=i(e,"is-hover");switch(t.functionParent){case"class":[...document.querySelectorAll(t.target)].concat(void 0===t.target?e:void 0).forEach(s=>{if(void 0!==s)switch(t.functionChild){case"add":e.addEventListener("mouseenter",()=>{s.classList.add(t.value)}),e.addEventListener("mouseout",()=>{s.classList.remove(t.value)});break;case"remove":e.addEventListener("mouseenter",()=>{s.classList.remove(t.value)}),e.addEventListener("mouseout",()=>{s.classList.add(t.value)});break;case"toggle":e.addEventListener("mouseenter",()=>{s.classList.toggle(t.value)}),e.addEventListener("mouseout",()=>{s.classList.toggle(t.value)})}})}}),function(){let e=c("is-visible"),t=c("is-not-visible");window.addEventListener("scroll",()=>{e.forEach(e=>{if(a(e)){let t=i(e,"is-visible");switch(t.functionParent){case"class":switch(t.functionChild){case"add":e.classList.add(t.value);break;case"remove":e.classList.remove(t.value)}}}}),t.forEach(e=>{if(!a(e)){let t=i(e,"is-not-visible");switch(t.functionParent){case"class":switch(t.functionChild){case"add":e.classList.add(t.value),console.log("date");break;case"remove":e.classList.remove(t.value)}}}})},!1)}()});
//# sourceMappingURL=ffnm.min.js.map
diff --git a/package.json b/package.json
index bcfd8af..894ab89 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "ffnm",
- "version": "1.0.0",
+ "version": "1.3.0",
"description": "Simple plugin to avoid writing Javascript in trivial tasks.",
"main": "gulpfile.js",
"dependencies": {
diff --git a/src/core.js b/src/core.js
index f5e04eb..8f61156 100644
--- a/src/core.js
+++ b/src/core.js
@@ -3,7 +3,7 @@ document.addEventListener('DOMContentLoaded', () => {
//===
// VARIABLES
//===
- const EVENTS = ['i-click', 'i-scroll-up', 'i-scroll-down', 'i-hover'];
+ const EVENTS = ['is-click', 'is-scroll-up', 'is-scroll-down', 'is-hover', 'is-view', 'is-visible', 'is-not-visible'];
const FUNCTION_TREE = {
'class': ['add', 'remove', 'toggle']
};
@@ -47,7 +47,7 @@ document.addEventListener('DOMContentLoaded', () => {
/**
* Method return params
* return JSON - {'functionParent': '', 'functionChild': '', 'value': '', 'target': ''}
- * example - i-click="class:add('show', '#menu')"
+ * example - is-click="class:add('show', '#menu')"
* return {'functionParent': 'class', 'functionChild': 'add', 'value': 'show', 'target': '#menu'}
*/
function splitParams(element, attribute) {
@@ -71,11 +71,11 @@ document.addEventListener('DOMContentLoaded', () => {
}
/**
- * Method add events i-click
+ * Method add events is-click
* return void
*/
function addEventClick() {
- let eventClick = 'i-click';
+ let eventClick = 'is-click';
return getElementsValidatesByEvent(eventClick).forEach((element) => {
let params = splitParams(element, eventClick);
switch(params.functionParent) {
@@ -103,12 +103,12 @@ document.addEventListener('DOMContentLoaded', () => {
}
/**
- * Method add events i-scroll
+ * Method add events is-scroll
* return void
*/
function addEventScroll() {
- let eventScrollDown = 'i-scroll-down';
- let eventScrollUp = 'i-scroll-up';
+ let eventScrollDown = 'is-scroll-down';
+ let eventScrollUp = 'is-scroll-up';
let elementsDown = getElementsValidatesByEvent(eventScrollDown);
let elementsUp = getElementsValidatesByEvent(eventScrollUp);
window.addEventListener("scroll", () => {
@@ -155,11 +155,11 @@ document.addEventListener('DOMContentLoaded', () => {
/**
- * Method add events i-hover
+ * Method add events is-hover
* return void
*/
function addEventHover() {
- let eventHover = 'i-hover';
+ let eventHover = 'is-hover';
return getElementsValidatesByEvent(eventHover).forEach((element) => {
let params = splitParams(element, eventHover);
switch(params.functionParent) {
@@ -206,6 +206,68 @@ document.addEventListener('DOMContentLoaded', () => {
});
}
+ /**
+ * Method that checks if an element is visible in the viewport
+ * return bool
+ */
+ function isInViewport (element) {
+ let distance = element.getBoundingClientRect();
+ return distance.top >= 0 &&
+ distance.left >= 0 &&
+ distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+ distance.right <= (window.innerWidth || document.documentElement.clientWidth);
+ };
+
+ /**
+ * Method that manages the events is-visible and is-not-visible
+ * return void
+ */
+ function addEventVisible() {
+ let eventVisible = 'is-visible';
+ let eventNotVisible = 'is-not-visible';
+ let elementsVisibles = getElementsValidatesByEvent(eventVisible);
+ let elementsNotVisibles = getElementsValidatesByEvent(eventNotVisible);
+ window.addEventListener("scroll", () => {
+ // Visible
+ elementsVisibles.forEach((element) => {
+ if (isInViewport(element)) {
+ let params = splitParams(element, eventVisible);
+ switch(params.functionParent) {
+ case 'class':
+ switch(params.functionChild) {
+ case 'add':
+ element.classList.add(params.value);
+ break;
+ case 'remove':
+ element.classList.remove(params.value);
+ break;
+ }
+ break;
+ }
+ }
+ });
+ // Not visible
+ elementsNotVisibles.forEach((element) => {
+ if (!isInViewport(element)) {
+ let params = splitParams(element, eventNotVisible);
+ switch(params.functionParent) {
+ case 'class':
+ switch(params.functionChild) {
+ case 'add':
+ element.classList.add(params.value);
+ console.log('date')
+ break;
+ case 'remove':
+ element.classList.remove(params.value);
+ break;
+ }
+ break;
+ }
+ }
+ });
+ }, false);
+ }
+
//===
// INIT
//===
@@ -213,4 +275,5 @@ document.addEventListener('DOMContentLoaded', () => {
addEventClick();
addEventScroll();
addEventHover();
+ addEventVisible();
});
diff --git a/test/i-click.html b/test/is-click.html
similarity index 61%
rename from test/i-click.html
rename to test/is-click.html
index 3e3d304..c376b0c 100644
--- a/test/i-click.html
+++ b/test/is-click.html
@@ -2,7 +2,7 @@
Test syntax
+ Test is-click
- Mi nav
- add
- remove
- toggle
+ Mi nav
+ add
+ remove
+ toggle
diff --git a/test/i-hover.html b/test/is-hover.html
similarity index 81%
rename from test/i-hover.html
rename to test/is-hover.html
index 08129ab..069ca6a 100644
--- a/test/i-hover.html
+++ b/test/is-hover.html
@@ -2,7 +2,7 @@
Test i-hover
+ Test is-hover
- Place the cursor over this text
+ Place the cursor over this text
Quisque id diam vel quam elementum pulvinar etiam non quam?
Ac, feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.
-
+
Nunc aliquet bibendum enim, facilisis gravida neque convallis a cras.
diff --git a/test/i-scroll.html b/test/is-scroll.html
similarity index 99%
rename from test/i-scroll.html
rename to test/is-scroll.html
index f26a896..2c8b065 100644
--- a/test/i-scroll.html
+++ b/test/is-scroll.html
@@ -2,7 +2,7 @@
Test i-scroll
+ Test is-scroll
- Mi nav
-
+ Mi nav
+
Ullamcorper morbi tincidunt ornare massa, eget egestas purus viverra accumsan in nisl nisi, scelerisque eu ultrices. Sapien et ligula ullamcorper malesuada proin libero nunc, consequat interdum varius sit amet, mattis.
diff --git a/test/is-visible.html b/test/is-visible.html
new file mode 100644
index 0000000..b3e8bea
--- /dev/null
+++ b/test/is-visible.html
@@ -0,0 +1,47 @@
+
+
+
+ Test is-visible
+
+
+
+
Please scroll down
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/test/validate.html b/test/validate.html
index ee46cc5..6165e2a 100644
--- a/test/validate.html
+++ b/test/validate.html
@@ -7,97 +7,110 @@
- add
- remove
- toggle
+ add
+ remove
+ toggle
- add
- remove
- toggle
+ add
+ remove
+ toggle
- add
- remove
- toggle
+ add
+ remove
+ toggle
- add
- remove
- toggle
+ add
+ remove
+ toggle
- add
- remove
- toggle
+ add
+ remove
+ toggle
- add
- remove
- toggle
+ add
+ remove
+ toggle
- add
- remove
- toggle
+ add
+ remove
+ toggle
- add
- remove
- toggle
+ add
+ remove
+ toggle
- add
- remove
- toggle
+ add
+ remove
+ toggle
- add
- remove
- toggle
+ add
+ remove
+ toggle
- add
- remove
- toggle
+ add
+ remove
+ toggle
- add
- remove
- toggle
+ add
+ remove
+ toggle
- add
- remove
- toggle
+ add
+ remove
- add
- remove
- toggle
+ add
+ remove
- add
- remove
- toggle
+ add
+ remove
+
+ add
+ remove
+
+
+
+ add
+ remove
+
+
+
+ add
+ remove
+
+
+
- add
+ add