andros/FFNM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Performance improvements in other events

Browse Source
This commit is contained in:
Andros Fenollosa 2020-07-21 16:35:00 +02:00
parent dac40e8d61
commit 3fc6ff1c78
3 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -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 **2Kb**! Simple utility to **avoid writing Javascript** when working with **classes**. It only takes up **2.5Kb**!
- Simplifies the **click**. - Simplifies the **click**.
@ -38,7 +38,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.2.2/dist/ffnm.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@v1.2.3/dist/ffnm.min.js"></script>
``` ```
### Examples ### Examples
@ -149,7 +149,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.2.2/dist/ffnm.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@v1.2.3/dist/ffnm.min.js"></script>
``` ```
### Ejemplos de uso ### Ejemplos de uso

2
dist/ffnm.min.js vendored
View File

@ -1,2 +1,2 @@
document.addEventListener("DOMContentLoaded",()=>{const e={class:["add","remove","toggle"]};let t=[],c=void 0;function s(e,t){let c=e.getAttribute(t),s=RegExp("^(\\w+):").exec(c)[1],l=RegExp(":(\\w+)\\(").exec(c)[1],a=RegExp("\\('(\\w[_-\\w0-9]+)',?").exec(c)[1],o=RegExp(", ?'([.#i\\w][_-\\w0-9]+)'\\)");return{functionParent:s,functionChild:l,value:a,target:null!==o.exec(c)?o.exec(c)[1]:void 0}}t=[],["i-click","i-scroll-up","i-scroll-down","i-hover"].map(c=>[...document.querySelectorAll(`[${c}]`)].map(s=>{let l=Object.keys(e).map(t=>e[t].map(e=>RegExp(`^${t}:${e}\\('.+'(, ?'[.#i\\w][_-\\w0-9]+')?\\)$`).test(s.getAttribute(c))).some(e=>e)).every(e=>e);return l?t.push(s):(console.error("FFNM: Bad syntax"),console.error(s)),l}).every(e=>e)).every(e=>e),[...document.querySelectorAll("[i-click]")].forEach(e=>{let t=s(e,"i-click");switch(t.functionParent){case"class":[...document.querySelectorAll(t.target)].concat(void 0===t.target?e:void 0).forEach(c=>{void 0!==c&&e.addEventListener("click",()=>{switch(t.functionChild){case"add":c.classList.add(t.value);break;case"remove":c.classList.remove(t.value);break;case"toggle":c.classList.toggle(t.value)}})})}}),function(){let e=[...document.querySelectorAll("[i-scroll-down]")];window.addEventListener("scroll",()=>{let t=window.pageYOffset||document.documentElement.scrollTop;e.forEach(e=>{if(t>c){let t=s(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)}}}}),[...document.querySelectorAll("[i-scroll-up]")].forEach(e=>{if(t<=c){let t=s(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)}}}}),c=t<=0?0:t},!1)}(),[...document.querySelectorAll("[i-hover]")].forEach(e=>{let t=s(e,"i-hover");switch(t.functionParent){case"class":[...document.querySelectorAll(t.target)].concat(void 0===t.target?e:void 0).forEach(c=>{if(void 0!==c)switch(t.functionChild){case"add":e.addEventListener("mouseenter",()=>{c.classList.add(t.value)}),e.addEventListener("mouseout",()=>{c.classList.remove(t.value)});break;case"remove":e.addEventListener("mouseenter",()=>{c.classList.remove(t.value)}),e.addEventListener("mouseout",()=>{c.classList.add(t.value)});break;case"toggle":e.addEventListener("mouseenter",()=>{c.classList.toggle(t.value)}),e.addEventListener("mouseout",()=>{c.classList.toggle(t.value)})}})}})}); 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)})}})}})});
//# sourceMappingURL=ffnm.min.js.map //# sourceMappingURL=ffnm.min.js.map

21
src/core.js
View File

@ -60,13 +60,23 @@ document.addEventListener('DOMContentLoaded', () => {
return {'functionParent': functionParent, 'functionChild': functionChild, 'value': value, 'target': target}; 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 i-click * Method add events i-click
* return void * return void
*/ */
function addEventClick() { function addEventClick() {
let eventClick = 'i-click'; let eventClick = 'i-click';
return [...document.querySelectorAll(`[${eventClick}]`)].forEach((element) => { return getElementsValidatesByEvent(eventClick).forEach((element) => {
let params = splitParams(element, eventClick); let params = splitParams(element, eventClick);
switch(params.functionParent) { switch(params.functionParent) {
case 'class': case 'class':
@ -99,11 +109,12 @@ document.addEventListener('DOMContentLoaded', () => {
function addEventScroll() { function addEventScroll() {
let eventScrollDown = 'i-scroll-down'; let eventScrollDown = 'i-scroll-down';
let eventScrollUp = 'i-scroll-up'; let eventScrollUp = 'i-scroll-up';
let elements = [...document.querySelectorAll(`[${eventScrollDown}]`)]; let elementsDown = getElementsValidatesByEvent(eventScrollDown);
let elementsUp = getElementsValidatesByEvent(eventScrollUp);
window.addEventListener("scroll", () => { window.addEventListener("scroll", () => {
let posScroll = window.pageYOffset || document.documentElement.scrollTop; let posScroll = window.pageYOffset || document.documentElement.scrollTop;
// Scroll down // Scroll down
elements.forEach((element) => { elementsDown.forEach((element) => {
if (posScroll > lastScrollTop) { if (posScroll > lastScrollTop) {
let params = splitParams(element, eventScrollDown); let params = splitParams(element, eventScrollDown);
switch(params.functionParent) { switch(params.functionParent) {
@ -121,7 +132,7 @@ document.addEventListener('DOMContentLoaded', () => {
} }
}); });
// Scroll up // Scroll up
[...document.querySelectorAll(`[${eventScrollUp}]`)].forEach((element) => { elementsUp.forEach((element) => {
if (posScroll <= lastScrollTop) { if (posScroll <= lastScrollTop) {
let params = splitParams(element, eventScrollUp); let params = splitParams(element, eventScrollUp);
switch(params.functionParent) { switch(params.functionParent) {
@ -149,7 +160,7 @@ document.addEventListener('DOMContentLoaded', () => {
*/ */
function addEventHover() { function addEventHover() {
let eventHover = 'i-hover'; let eventHover = 'i-hover';
return [...document.querySelectorAll(`[${eventHover}]`)].forEach((element) => { return getElementsValidatesByEvent(eventHover).forEach((element) => {
let params = splitParams(element, eventHover); let params = splitParams(element, eventHover);
switch(params.functionParent) { switch(params.functionParent) {
case 'class': case 'class':