Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| e3e100c437 | |||
| b9bb0d694b | |||
| e02334b46e | |||
| a6efdf85d4 | |||
| b306334ca5 | |||
| e8cbe46659 | |||
| ea2e148395 |
61
README.md
61
README.md
@ -12,7 +12,7 @@
|
|||||||
<article class="open"></article>
|
<article class="open"></article>
|
||||||
```
|
```
|
||||||
|
|
||||||
Simple utility to **avoid writing Javascript** when working with **classes**. It only takes up **3.2Kb**!
|
Simple utility to **avoid writing Javascript** when working with **classes**. It only takes up **3.8Kb**!
|
||||||
|
|
||||||
- Simplifies the **click**.
|
- Simplifies the **click**.
|
||||||
|
|
||||||
@ -40,7 +40,7 @@ Simple utility to **avoid writing Javascript** when working with **classes**. It
|
|||||||
Add to your `<head>` the following tag.
|
Add to your `<head>` the following tag.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<script src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@v1.3.0/dist/ffnm.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@1.4.0/dist/ffnm.min.js" integrity="sha384-WsAoFj8H5Jl3+nG7ON5XXiozrADpSLshx/XdN7xu2GUVkJEZB5C3AGrFtdi6tARh" crossorigin="anonymous"></script>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Examples
|
### Examples
|
||||||
@ -206,7 +206,7 @@ Add to your `<head>` the following tag.
|
|||||||
Añade a tu `<head>` la siguiente etiqueta.
|
Añade a tu `<head>` la siguiente etiqueta.
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<script src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@v1.3.0/dist/ffnm.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@1.4.0/dist/ffnm.min.js" integrity="sha384-lAUBI0wOuUBOb4gGjqjeuJlFgrl1YixuQdG/OngLda/8+ZPThlN2xk+EJAkl7gEd" crossorigin="anonymous"></script>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Ejemplos de uso
|
### Ejemplos de uso
|
||||||
@ -307,6 +307,61 @@ Añade a tu `<head>` la siguiente etiqueta.
|
|||||||
<button id="button">Hi</div>
|
<button id="button">Hi</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
#### Visible
|
||||||
|
|
||||||
|
##### Añade la clase `ver` en el `div` cuando es visible.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div is-visible="class:add('ver')"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
##### Quita la clase `ver` en el `div` cuando es visible.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div is-visible="class:remove('ver')"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
##### Intercambia la clase `ver` cuando el `div` es visible.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div is-visible="class:toggle('ver')"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
##### Añade la clase `ver` en `#boton` cuando el `div` es visible.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div is-visible="class:toggle('ver', '#boton')"></div>
|
||||||
|
<button id="boton">Hi</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### No visible
|
||||||
|
|
||||||
|
##### Añade la clase `ver` en el `div` cuando no es visible.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div is-not-visible="class:add('ver')"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
##### Quita la clase `ver` en el `div` cuando no es visible.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div is-not-visible="class:remove('ver')"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
##### Intercambia la clase `ver` cuando el `div` no es visible.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div is-not-visible="class:toggle('ver')"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
##### Añade la clase `ver` en `#boton` cuando el `div` no es visible.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div is-not-visible="class:toggle('ver', '#boton')"></div>
|
||||||
|
<button id="boton">Hi</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Development
|
## Development
|
||||||
|
|||||||
2
dist/ffnm.min.js
vendored
2
dist/ffnm.min.js
vendored
@ -1,2 +1,2 @@
|
|||||||
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)}()});
|
const EVENTS=["is-click","is-scroll-up","is-scroll-down","is-hover","is-visible","is-not-visible"],FUNCTION_TREE={class:["add","remove","toggle"]};let elementsValidates=[],lastScrollTop=void 0;function validateSyntax(){return elementsValidates=[],EVENTS.map(e=>[...document.querySelectorAll(`[${e}]`)].map(t=>{let s=Object.keys(FUNCTION_TREE).map(s=>FUNCTION_TREE[s].map(a=>RegExp(`^${s}:${a}\\('.+'(, ?'[.#i\\w][_-\\w0-9]+')?\\)$`).test(t.getAttribute(e))).some(e=>e)).every(e=>e);return s?elementsValidates.push(t):(console.error("FFNM: Bad syntax"),console.error(t)),s}).every(e=>e)).every(e=>e)}function splitParams(e,t){let s=e.getAttribute(t),a=RegExp("^(\\w+):").exec(s)[1],l=RegExp(":(\\w+)\\(").exec(s)[1],i=RegExp("\\('(\\w[_-\\w0-9]+)',?").exec(s)[1],n=RegExp(", ?'([.#i\\w][_-\\w0-9]+)'\\)");return{functionParent:a,functionChild:l,value:i,target:null!==n.exec(s)?n.exec(s)[1]:void 0}}function getElementsValidatesByEvent(e){return[...elementsValidates].filter(t=>t.hasAttribute(e))}function addEventClick(){return getElementsValidatesByEvent("is-click").forEach(e=>{let t=splitParams(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 addEventScroll(){let e=getElementsValidatesByEvent("is-scroll-down"),t=getElementsValidatesByEvent("is-scroll-up");window.addEventListener("scroll",()=>{let s=window.pageYOffset||document.documentElement.scrollTop;e.forEach(e=>{if(s>lastScrollTop){let t=splitParams(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(s<=lastScrollTop){let t=splitParams(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)}}}}),lastScrollTop=s<=0?0:s},!1)}function addEventHover(){return getElementsValidatesByEvent("is-hover").forEach(e=>{let t=splitParams(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 addEventVisible(){let e=getElementsValidatesByEvent("is-visible"),t=getElementsValidatesByEvent("is-not-visible");const s=new IntersectionObserver(e=>{e.forEach(e=>{let t=e.target;if(e.isIntersecting){let e=splitParams(t,"is-visible");switch(e.functionParent){case"class":switch(e.functionChild){case"add":t.classList.add(e.value);break;case"remove":t.classList.remove(e.value)}}}})});e.forEach(e=>{s.observe(e)});const a=new IntersectionObserver(e=>{e.forEach(e=>{let t=e.target;if(!e.isIntersecting){let e=splitParams(t,"is-not-visible");switch(e.functionParent){case"class":switch(e.functionChild){case"add":t.classList.add(e.value);break;case"remove":t.classList.remove(e.value)}}}})});t.forEach(e=>{a.observe(e)})}document.addEventListener("DOMContentLoaded",()=>{validateSyntax(),addEventClick(),addEventScroll(),addEventHover(),addEventVisible()});
|
||||||
//# sourceMappingURL=ffnm.min.js.map
|
//# sourceMappingURL=ffnm.min.js.map
|
||||||
|
|||||||
12
gulpfile.js
12
gulpfile.js
@ -19,7 +19,15 @@ const DIST_JS = 'ffnm.min.js';
|
|||||||
|
|
||||||
// JS concat + sourcemaps + babel + min
|
// JS concat + sourcemaps + babel + min
|
||||||
function js(cb) {
|
function js(cb) {
|
||||||
return src([SRC_PATH + 'core.js'])
|
return src([
|
||||||
|
SRC_PATH + 'globals.js',
|
||||||
|
SRC_PATH + 'syntax.js',
|
||||||
|
SRC_PATH + 'events/click.js',
|
||||||
|
SRC_PATH + 'events/scroll.js',
|
||||||
|
SRC_PATH + 'events/hover.js',
|
||||||
|
SRC_PATH + 'events/visible.js',
|
||||||
|
SRC_PATH + 'core.js'
|
||||||
|
])
|
||||||
.pipe(sourcemaps.init())
|
.pipe(sourcemaps.init())
|
||||||
.pipe(concat(DIST_JS))
|
.pipe(concat(DIST_JS))
|
||||||
.pipe(uglify())
|
.pipe(uglify())
|
||||||
@ -37,7 +45,7 @@ const build = series(js);
|
|||||||
// gulp dev
|
// gulp dev
|
||||||
exports.dev = function () {
|
exports.dev = function () {
|
||||||
build();
|
build();
|
||||||
watch(SRC_PATH + '*.js', js);
|
watch(SRC_PATH + '**/*.js', js);
|
||||||
}
|
}
|
||||||
|
|
||||||
// gulp
|
// gulp
|
||||||
|
|||||||
272
src/core.js
272
src/core.js
@ -1,279 +1,15 @@
|
|||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
|
||||||
//===
|
|
||||||
// VARIABLES
|
|
||||||
//===
|
|
||||||
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']
|
|
||||||
};
|
|
||||||
let elementsValidates = [];
|
|
||||||
let lastScrollTop = undefined;
|
|
||||||
|
|
||||||
//===
|
|
||||||
// FUNCTIONS
|
|
||||||
//===
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Method that validates syntax and reports.
|
|
||||||
* return - Bool
|
|
||||||
*/
|
|
||||||
function validateSyntax() {
|
|
||||||
elementsValidates = [];
|
|
||||||
// Check all event syntax
|
|
||||||
return EVENTS.map((event) => {
|
|
||||||
// Check element FUNCTION_TREE
|
|
||||||
return [...document.querySelectorAll(`[${event}]`)].map((element) => {
|
|
||||||
// Check KEY FUNCTION_TREE
|
|
||||||
let checked = Object.keys(FUNCTION_TREE).map((key) => {
|
|
||||||
// Check METHODS FUNCTION_TREE
|
|
||||||
return FUNCTION_TREE[key].map((method) => {
|
|
||||||
return RegExp(`^${key}:${method}\\('.+'(, ?'[.#i\\w][_-\\w0-9]+')?\\)$`).test(element.getAttribute(event));
|
|
||||||
}).some(method => method);
|
|
||||||
}).every(key => key);
|
|
||||||
if(checked) {
|
|
||||||
// Save element validate
|
|
||||||
elementsValidates.push(element);
|
|
||||||
} else {
|
|
||||||
// Notify error
|
|
||||||
console.error('FFNM: Bad syntax');
|
|
||||||
console.error(element);
|
|
||||||
}
|
|
||||||
return checked;
|
|
||||||
}).every(item => item);
|
|
||||||
}).every(event => event);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Method return params
|
|
||||||
* return JSON - {'functionParent': '', 'functionChild': '', 'value': '', 'target': ''}
|
|
||||||
* example - is-click="class:add('show', '#menu')"
|
|
||||||
* return {'functionParent': 'class', 'functionChild': 'add', 'value': 'show', 'target': '#menu'}
|
|
||||||
*/
|
|
||||||
function splitParams(element, attribute) {
|
|
||||||
let params = element.getAttribute(attribute);
|
|
||||||
let functionParent = RegExp("^(\\w+):").exec(params)[1];
|
|
||||||
let functionChild = RegExp(":(\\w+)\\(").exec(params)[1];
|
|
||||||
let value = RegExp("\\(\'(\\w[_-\\w0-9]+)\',?").exec(params)[1];
|
|
||||||
let resultTarget = RegExp(", ?\'([.#i\\w][_-\\w0-9]+)\'\\)");
|
|
||||||
let target = resultTarget.exec(params) !== null ? resultTarget.exec(params)[1] : undefined;
|
|
||||||
return {'functionParent': functionParent, 'functionChild': functionChild, 'value': value, 'target': target};
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Method that returns all validated elements filtered by an event
|
|
||||||
* return Array
|
|
||||||
*/
|
|
||||||
function getElementsValidatesByEvent(nameEvent) {
|
|
||||||
return [...elementsValidates].filter(element => {
|
|
||||||
return element.hasAttribute(nameEvent);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Method add events is-click
|
|
||||||
* return void
|
|
||||||
*/
|
|
||||||
function addEventClick() {
|
|
||||||
let eventClick = 'is-click';
|
|
||||||
return getElementsValidatesByEvent(eventClick).forEach((element) => {
|
|
||||||
let params = splitParams(element, eventClick);
|
|
||||||
switch(params.functionParent) {
|
|
||||||
case 'class':
|
|
||||||
[...document.querySelectorAll(params.target)].concat(params.target === undefined ? element : undefined).forEach((item) => {
|
|
||||||
if (item !== undefined) {
|
|
||||||
element.addEventListener('click', () => {
|
|
||||||
switch(params.functionChild) {
|
|
||||||
case 'add':
|
|
||||||
item.classList.add(params.value);
|
|
||||||
break;
|
|
||||||
case 'remove':
|
|
||||||
item.classList.remove(params.value);
|
|
||||||
break;
|
|
||||||
case 'toggle':
|
|
||||||
item.classList.toggle(params.value);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Method add events is-scroll
|
|
||||||
* return void
|
|
||||||
*/
|
|
||||||
function addEventScroll() {
|
|
||||||
let eventScrollDown = 'is-scroll-down';
|
|
||||||
let eventScrollUp = 'is-scroll-up';
|
|
||||||
let elementsDown = getElementsValidatesByEvent(eventScrollDown);
|
|
||||||
let elementsUp = getElementsValidatesByEvent(eventScrollUp);
|
|
||||||
window.addEventListener("scroll", () => {
|
|
||||||
let posScroll = window.pageYOffset || document.documentElement.scrollTop;
|
|
||||||
// Scroll down
|
|
||||||
elementsDown.forEach((element) => {
|
|
||||||
if (posScroll > lastScrollTop) {
|
|
||||||
let params = splitParams(element, eventScrollDown);
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
// Scroll up
|
|
||||||
elementsUp.forEach((element) => {
|
|
||||||
if (posScroll <= lastScrollTop) {
|
|
||||||
let params = splitParams(element, eventScrollUp);
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
lastScrollTop = posScroll <= 0 ? 0 : posScroll; // For Mobile or negative scrolling
|
|
||||||
}, false);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Method add events is-hover
|
|
||||||
* return void
|
|
||||||
*/
|
|
||||||
function addEventHover() {
|
|
||||||
let eventHover = 'is-hover';
|
|
||||||
return getElementsValidatesByEvent(eventHover).forEach((element) => {
|
|
||||||
let params = splitParams(element, eventHover);
|
|
||||||
switch(params.functionParent) {
|
|
||||||
case 'class':
|
|
||||||
[...document.querySelectorAll(params.target)].concat(params.target === undefined ? element : undefined).forEach((item) => {
|
|
||||||
if (item !== undefined) {
|
|
||||||
// Enter
|
|
||||||
switch(params.functionChild) {
|
|
||||||
case 'add':
|
|
||||||
// Enter
|
|
||||||
element.addEventListener('mouseenter', () => {
|
|
||||||
item.classList.add(params.value);
|
|
||||||
});
|
|
||||||
// Out
|
|
||||||
element.addEventListener('mouseout', () => {
|
|
||||||
item.classList.remove(params.value);
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case 'remove':
|
|
||||||
// Enter
|
|
||||||
element.addEventListener('mouseenter', () => {
|
|
||||||
item.classList.remove(params.value);
|
|
||||||
});
|
|
||||||
// Out
|
|
||||||
element.addEventListener('mouseout', () => {
|
|
||||||
item.classList.add(params.value);
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case 'toggle':
|
|
||||||
// Enter
|
|
||||||
element.addEventListener('mouseenter', () => {
|
|
||||||
item.classList.toggle(params.value);
|
|
||||||
});
|
|
||||||
// Out
|
|
||||||
element.addEventListener('mouseout', () => {
|
|
||||||
item.classList.toggle(params.value);
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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
|
// INIT
|
||||||
//===
|
//===
|
||||||
|
|
||||||
|
// Syntax
|
||||||
validateSyntax();
|
validateSyntax();
|
||||||
|
// Events
|
||||||
addEventClick();
|
addEventClick();
|
||||||
addEventScroll();
|
addEventScroll();
|
||||||
addEventHover();
|
addEventHover();
|
||||||
addEventVisible();
|
addEventVisible();
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|||||||
36
src/events/click.js
Normal file
36
src/events/click.js
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
|
||||||
|
//===
|
||||||
|
// FUNCTIONS
|
||||||
|
//===
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Method add events is-click
|
||||||
|
* return void
|
||||||
|
*/
|
||||||
|
function addEventClick() {
|
||||||
|
let eventClick = 'is-click';
|
||||||
|
return getElementsValidatesByEvent(eventClick).forEach((element) => {
|
||||||
|
let params = splitParams(element, eventClick);
|
||||||
|
switch(params.functionParent) {
|
||||||
|
case 'class':
|
||||||
|
[...document.querySelectorAll(params.target)].concat(params.target === undefined ? element : undefined).forEach((item) => {
|
||||||
|
if (item !== undefined) {
|
||||||
|
element.addEventListener('click', () => {
|
||||||
|
switch(params.functionChild) {
|
||||||
|
case 'add':
|
||||||
|
item.classList.add(params.value);
|
||||||
|
break;
|
||||||
|
case 'remove':
|
||||||
|
item.classList.remove(params.value);
|
||||||
|
break;
|
||||||
|
case 'toggle':
|
||||||
|
item.classList.toggle(params.value);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
57
src/events/hover.js
Normal file
57
src/events/hover.js
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
|
||||||
|
//===
|
||||||
|
// FUNCTIONS
|
||||||
|
//===
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Method add events is-hover
|
||||||
|
* return void
|
||||||
|
*/
|
||||||
|
function addEventHover() {
|
||||||
|
let eventHover = 'is-hover';
|
||||||
|
return getElementsValidatesByEvent(eventHover).forEach((element) => {
|
||||||
|
let params = splitParams(element, eventHover);
|
||||||
|
switch(params.functionParent) {
|
||||||
|
case 'class':
|
||||||
|
[...document.querySelectorAll(params.target)].concat(params.target === undefined ? element : undefined).forEach((item) => {
|
||||||
|
if (item !== undefined) {
|
||||||
|
// Enter
|
||||||
|
switch(params.functionChild) {
|
||||||
|
case 'add':
|
||||||
|
// Enter
|
||||||
|
element.addEventListener('mouseenter', () => {
|
||||||
|
item.classList.add(params.value);
|
||||||
|
});
|
||||||
|
// Out
|
||||||
|
element.addEventListener('mouseout', () => {
|
||||||
|
item.classList.remove(params.value);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'remove':
|
||||||
|
// Enter
|
||||||
|
element.addEventListener('mouseenter', () => {
|
||||||
|
item.classList.remove(params.value);
|
||||||
|
});
|
||||||
|
// Out
|
||||||
|
element.addEventListener('mouseout', () => {
|
||||||
|
item.classList.add(params.value);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'toggle':
|
||||||
|
// Enter
|
||||||
|
element.addEventListener('mouseenter', () => {
|
||||||
|
item.classList.toggle(params.value);
|
||||||
|
});
|
||||||
|
// Out
|
||||||
|
element.addEventListener('mouseout', () => {
|
||||||
|
item.classList.toggle(params.value);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
56
src/events/scroll.js
Normal file
56
src/events/scroll.js
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
|
||||||
|
//===
|
||||||
|
// FUNCTIONS
|
||||||
|
//===
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Method add events is-scroll
|
||||||
|
* return void
|
||||||
|
*/
|
||||||
|
function addEventScroll() {
|
||||||
|
let eventScrollDown = 'is-scroll-down';
|
||||||
|
let eventScrollUp = 'is-scroll-up';
|
||||||
|
let elementsDown = getElementsValidatesByEvent(eventScrollDown);
|
||||||
|
let elementsUp = getElementsValidatesByEvent(eventScrollUp);
|
||||||
|
window.addEventListener("scroll", () => {
|
||||||
|
let posScroll = window.pageYOffset || document.documentElement.scrollTop;
|
||||||
|
// Scroll down
|
||||||
|
elementsDown.forEach((element) => {
|
||||||
|
if (posScroll > lastScrollTop) {
|
||||||
|
let params = splitParams(element, eventScrollDown);
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// Scroll up
|
||||||
|
elementsUp.forEach((element) => {
|
||||||
|
if (posScroll <= lastScrollTop) {
|
||||||
|
let params = splitParams(element, eventScrollUp);
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
lastScrollTop = posScroll <= 0 ? 0 : posScroll; // For Mobile or negative scrolling
|
||||||
|
}, false);
|
||||||
|
}
|
||||||
|
|
||||||
69
src/events/visible.js
Normal file
69
src/events/visible.js
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
|
||||||
|
//===
|
||||||
|
// FUNCTIONS
|
||||||
|
//===
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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);
|
||||||
|
|
||||||
|
// Visible
|
||||||
|
const onIntersectionVisible = (entries) => {
|
||||||
|
entries.forEach((entry) => {
|
||||||
|
let element = entry.target;
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const observerVisible = new IntersectionObserver(onIntersectionVisible);
|
||||||
|
elementsVisibles.forEach((element) => {
|
||||||
|
observerVisible.observe(element);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Not visible
|
||||||
|
const onIntersectionNotVisible = (entries) => {
|
||||||
|
entries.forEach((entry) => {
|
||||||
|
let element = entry.target;
|
||||||
|
if (!entry.isIntersecting) {
|
||||||
|
let params = splitParams(element, eventNotVisible);
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const observerNotVisible = new IntersectionObserver(onIntersectionNotVisible);
|
||||||
|
elementsNotVisibles.forEach((element) => {
|
||||||
|
observerNotVisible.observe(element);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
10
src/globals.js
Normal file
10
src/globals.js
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
|
||||||
|
//===
|
||||||
|
// VARIABLES
|
||||||
|
//===
|
||||||
|
const EVENTS = ['is-click', 'is-scroll-up', 'is-scroll-down', 'is-hover', 'is-visible', 'is-not-visible'];
|
||||||
|
const FUNCTION_TREE = {
|
||||||
|
'class': ['add', 'remove', 'toggle']
|
||||||
|
};
|
||||||
|
let elementsValidates = [];
|
||||||
|
let lastScrollTop = undefined;
|
||||||
61
src/syntax.js
Normal file
61
src/syntax.js
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
|
||||||
|
//===
|
||||||
|
// FUNCTIONS
|
||||||
|
//===
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Method that validates syntax and reports.
|
||||||
|
* return - Bool
|
||||||
|
*/
|
||||||
|
function validateSyntax() {
|
||||||
|
elementsValidates = [];
|
||||||
|
// Check all event syntax
|
||||||
|
return EVENTS.map((event) => {
|
||||||
|
// Check element FUNCTION_TREE
|
||||||
|
return [...document.querySelectorAll(`[${event}]`)].map((element) => {
|
||||||
|
// Check KEY FUNCTION_TREE
|
||||||
|
let checked = Object.keys(FUNCTION_TREE).map((key) => {
|
||||||
|
// Check METHODS FUNCTION_TREE
|
||||||
|
return FUNCTION_TREE[key].map((method) => {
|
||||||
|
return RegExp(`^${key}:${method}\\('.+'(, ?'[.#i\\w][_-\\w0-9]+')?\\)$`).test(element.getAttribute(event));
|
||||||
|
}).some(method => method);
|
||||||
|
}).every(key => key);
|
||||||
|
if(checked) {
|
||||||
|
// Save element validate
|
||||||
|
elementsValidates.push(element);
|
||||||
|
} else {
|
||||||
|
// Notify error
|
||||||
|
console.error('FFNM: Bad syntax');
|
||||||
|
console.error(element);
|
||||||
|
}
|
||||||
|
return checked;
|
||||||
|
}).every(item => item);
|
||||||
|
}).every(event => event);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Method return params
|
||||||
|
* return JSON - {'functionParent': '', 'functionChild': '', 'value': '', 'target': ''}
|
||||||
|
* example - is-click="class:add('show', '#menu')"
|
||||||
|
* return {'functionParent': 'class', 'functionChild': 'add', 'value': 'show', 'target': '#menu'}
|
||||||
|
*/
|
||||||
|
function splitParams(element, attribute) {
|
||||||
|
let params = element.getAttribute(attribute);
|
||||||
|
let functionParent = RegExp("^(\\w+):").exec(params)[1];
|
||||||
|
let functionChild = RegExp(":(\\w+)\\(").exec(params)[1];
|
||||||
|
let value = RegExp("\\(\'(\\w[_-\\w0-9]+)\',?").exec(params)[1];
|
||||||
|
let resultTarget = RegExp(", ?\'([.#i\\w][_-\\w0-9]+)\'\\)");
|
||||||
|
let target = resultTarget.exec(params) !== null ? resultTarget.exec(params)[1] : undefined;
|
||||||
|
return {'functionParent': functionParent, 'functionChild': functionChild, 'value': value, 'target': target};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Method that returns all validated elements filtered by an event
|
||||||
|
* return Array
|
||||||
|
*/
|
||||||
|
function getElementsValidatesByEvent(nameEvent) {
|
||||||
|
return [...elementsValidates].filter(element => {
|
||||||
|
return element.hasAttribute(nameEvent);
|
||||||
|
});
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user