Compare commits
9 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 3fc6ff1c78 | |||
| dac40e8d61 | |||
| 6f965ce6c3 | |||
| 988c7c15dd | |||
| b5fe682764 | |||
| 732dcfca57 | |||
| 4b01ca94bb | |||
| 91338f9185 | |||
| 0284ebc9c4 |
27
README.md
27
README.md
@ -1,23 +1,28 @@
|
|||||||
# FFNM (Front-End for the next master)
|
# FFNM (Front-End for the next master)
|
||||||
|
|
||||||
Simple utility to **avoid writing Javascript** when working with **classes**. It only takes up **2Kb**!
|
``` html
|
||||||
|
<button i-click="class:add('open', 'article')">open</button>
|
||||||
|
|
||||||
Simplifies the click
|
<article></article>
|
||||||
|
```
|
||||||
|
👇 🖱 **Click!** 👇
|
||||||
|
``` html
|
||||||
|
<button i-click="class:add('open', 'article')">open</button>
|
||||||
|
|
||||||
Modify others
|
<article class="open"></article>
|
||||||
|
```
|
||||||
|
|
||||||
Simplifies the scroll
|
Simple utility to **avoid writing Javascript** when working with **classes**. It only takes up **2.5Kb**!
|
||||||
|
|
||||||
Scroll up
|
- Simplifies the **click**.
|
||||||
|
|
||||||
Scroll down
|
- Simplifies the **scroll**.
|
||||||
|
|
||||||
Simplifies Hover
|
|
||||||
|
|
||||||
|
- Simplifies **hover**.
|
||||||
|
|
||||||
## DEMOS
|
## DEMOS
|
||||||
|
|
||||||
[Click](https://codepen.io/androsfenollosa/pen/dyGdRVE)
|
[Click](https://codepen.io/androsfenollosa/pen/dyGdRVE) | [Scroll](https://codepen.io/androsfenollosa/pen/xxZQxNV)
|
||||||
|
|
||||||
## Documentation
|
## Documentation
|
||||||
|
|
||||||
@ -33,7 +38,7 @@ Simplifies Hover
|
|||||||
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.1/dist/ffnm.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@v1.2.3/dist/ffnm.min.js"></script>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Examples
|
### Examples
|
||||||
@ -144,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.1/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
2
dist/ffnm.min.js
vendored
@ -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+)',?").exec(c)[1],o=RegExp(", *'([#,.,a-zA-Z]\\w*)'\\)");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(e).forEach(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)}})})}}),window.addEventListener("scroll",()=>{let e=window.pageYOffset||document.documentElement.scrollTop;[...document.querySelectorAll("[i-scroll-down]")].forEach(t=>{if(e>c){let e=s(t,"i-scroll-down");switch(e.functionParent){case"class":switch(e.functionChild){case"add":t.classList.add(e.value);break;case"remove":t.classList.remove(e.value)}}}}),[...document.querySelectorAll("[i-scroll-up]")].forEach(t=>{if(e<=c){let e=s(t,"i-scroll-up");switch(e.functionParent){case"class":switch(e.functionChild){case"add":t.classList.add(e.value);break;case"remove":t.classList.remove(e.value)}}}}),c=e<=0?0:e},!1),[...document.querySelectorAll("[i-hover]")].forEach(e=>{let t=s(e,"i-hover");switch(t.functionParent){case"class":[...document.querySelectorAll(t.target)].concat(e).forEach(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
|
||||||
|
|||||||
@ -1 +0,0 @@
|
|||||||
{"paddingVertical":"56px","paddingHorizontal":"56px","backgroundImage":null,"backgroundImageSelection":null,"backgroundMode":"color","backgroundColor":"rgba(171,184,195,0)","dropShadow":true,"dropShadowOffsetY":"20px","dropShadowBlurRadius":"68px","theme":"monokai","windowTheme":"none","language":"htmlmixed","fontFamily":"Hack","fontSize":"14px","lineHeight":"133%","windowControls":true,"widthAdjustment":true,"lineNumbers":false,"firstLineNumber":1,"exportSize":"2x","watermark":false,"squaredImage":false,"hiddenCharacters":false,"name":"","width":680}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
BIN
media/scroll.png
BIN
media/scroll.png
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
102
src/core.js
102
src/core.js
@ -28,7 +28,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
let checked = Object.keys(FUNCTION_TREE).map((key) => {
|
let checked = Object.keys(FUNCTION_TREE).map((key) => {
|
||||||
// Check METHODS FUNCTION_TREE
|
// Check METHODS FUNCTION_TREE
|
||||||
return FUNCTION_TREE[key].map((method) => {
|
return FUNCTION_TREE[key].map((method) => {
|
||||||
return RegExp(`^${key}:${method}\\('.+'(, *'[.#i\\w][_-\\w0-9]+')?\\)$`).test(element.getAttribute(event));
|
return RegExp(`^${key}:${method}\\('.+'(, ?'[.#i\\w][_-\\w0-9]+')?\\)$`).test(element.getAttribute(event));
|
||||||
}).some(method => method);
|
}).some(method => method);
|
||||||
}).every(key => key);
|
}).every(key => key);
|
||||||
if(checked) {
|
if(checked) {
|
||||||
@ -52,25 +52,36 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
*/
|
*/
|
||||||
function splitParams(element, attribute) {
|
function splitParams(element, attribute) {
|
||||||
let params = element.getAttribute(attribute);
|
let params = element.getAttribute(attribute);
|
||||||
let functionParent = RegExp(`^(\\w+):`).exec(params)[1];
|
let functionParent = RegExp("^(\\w+):").exec(params)[1];
|
||||||
let functionChild = RegExp(`:(\\w+)\\(`).exec(params)[1];
|
let functionChild = RegExp(":(\\w+)\\(").exec(params)[1];
|
||||||
let value = RegExp(`\\(\'(\\w+)\',?`).exec(params)[1];
|
let value = RegExp("\\(\'(\\w[_-\\w0-9]+)\',?").exec(params)[1];
|
||||||
let resultTarget = RegExp(`, *\'([#,.,a-zA-Z]\\w*)\'\\)`);
|
let resultTarget = RegExp(", ?\'([.#i\\w][_-\\w0-9]+)\'\\)");
|
||||||
let target = resultTarget.exec(params) !== null ? resultTarget.exec(params)[1] : undefined;
|
let target = resultTarget.exec(params) !== null ? resultTarget.exec(params)[1] : undefined;
|
||||||
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':
|
||||||
[...document.querySelectorAll(params.target)].concat(element).forEach((item) => {
|
[...document.querySelectorAll(params.target)].concat(params.target === undefined ? element : undefined).forEach((item) => {
|
||||||
|
if (item !== undefined) {
|
||||||
element.addEventListener('click', () => {
|
element.addEventListener('click', () => {
|
||||||
switch(params.functionChild) {
|
switch(params.functionChild) {
|
||||||
case 'add':
|
case 'add':
|
||||||
@ -84,6 +95,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
}
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
@ -97,10 +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 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
|
||||||
[...document.querySelectorAll(`[${eventScrollDown}]`)].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) {
|
||||||
@ -118,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) {
|
||||||
@ -146,43 +160,45 @@ 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':
|
||||||
[...document.querySelectorAll(params.target)].concat(element).forEach((item) => {
|
[...document.querySelectorAll(params.target)].concat(params.target === undefined ? element : undefined).forEach((item) => {
|
||||||
// Enter
|
if (item !== undefined) {
|
||||||
switch(params.functionChild) {
|
// Enter
|
||||||
case 'add':
|
switch(params.functionChild) {
|
||||||
// Enter
|
case 'add':
|
||||||
element.addEventListener('mouseenter', () => {
|
// Enter
|
||||||
item.classList.add(params.value);
|
element.addEventListener('mouseenter', () => {
|
||||||
});
|
item.classList.add(params.value);
|
||||||
// Out
|
});
|
||||||
element.addEventListener('mouseout', () => {
|
// Out
|
||||||
item.classList.remove(params.value);
|
element.addEventListener('mouseout', () => {
|
||||||
});
|
item.classList.remove(params.value);
|
||||||
break;
|
});
|
||||||
case 'remove':
|
break;
|
||||||
// Enter
|
case 'remove':
|
||||||
element.addEventListener('mouseenter', () => {
|
// Enter
|
||||||
item.classList.remove(params.value);
|
element.addEventListener('mouseenter', () => {
|
||||||
});
|
item.classList.remove(params.value);
|
||||||
// Out
|
});
|
||||||
element.addEventListener('mouseout', () => {
|
// Out
|
||||||
item.classList.add(params.value);
|
element.addEventListener('mouseout', () => {
|
||||||
});
|
item.classList.add(params.value);
|
||||||
break;
|
});
|
||||||
case 'toggle':
|
break;
|
||||||
// Enter
|
case 'toggle':
|
||||||
element.addEventListener('mouseenter', () => {
|
// Enter
|
||||||
item.classList.toggle(params.value);
|
element.addEventListener('mouseenter', () => {
|
||||||
});
|
item.classList.toggle(params.value);
|
||||||
// Out
|
});
|
||||||
element.addEventListener('mouseout', () => {
|
// Out
|
||||||
item.classList.toggle(params.value);
|
element.addEventListener('mouseout', () => {
|
||||||
});
|
item.classList.toggle(params.value);
|
||||||
break;
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
|
|||||||
@ -11,7 +11,7 @@
|
|||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<p i-hover="class:add('uppercase', '.text__-hover')">Place the cursor over this text</p>
|
<p i-hover="class:add('uppercase', '.text__1--hover')">Place the cursor over this text</p>
|
||||||
<p class="text__1--hover">
|
<p class="text__1--hover">
|
||||||
Quisque id diam vel quam elementum pulvinar etiam non quam?
|
Quisque id diam vel quam elementum pulvinar etiam non quam?
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
Reference in New Issue
Block a user