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

Add hover

Browse Source
This commit is contained in:
Andros Fenollosa 2020-07-17 11:11:53 +02:00
parent 37820b5bb4
commit ae1c78da16
4 changed files with 145 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
README.md
View File

@ -1,42 +1,19 @@
# FFNM (Front-End for the next master)
Simple utility to **avoid writing Javascript** when working with **classes**. It only takes up **1,7 Kb**!
Simple utility to **avoid writing Javascript** when working with **classes**. It only takes up **2Kb**!
Simplifies the click
![Self click](media/self-click.png)
<p align="center">
👇👇👇👇👇👇
</p>
![Self clicked](media/self-clicked.png)
Modify others
![Other click](media/other-click.png)
<p align="center">
👇👇👇👇👇👇
</p>
![Other clicked](media/other-clicked.png)
Simplifies the scroll
![Other click](media/scroll.png)
<p align="center">
👇👇👇👇👇👇
</p>
Scroll up
![Other clicked](media/scroll-up.png)
Scroll down
![Other clicked](media/scroll-down.png)
Simplifies Hover
## DEMOS
@ -56,7 +33,7 @@ Scroll down
Add to your `<head>` the following tag.
```html
<script src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@v1.1.0/dist/ffnm.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@v1.2.0/dist/ffnm.min.js"></script>
```
### Examples
@ -130,6 +107,34 @@ Add to your `<head>` the following tag.
<nav i-scroll-down="class:remove('show')"></nav>
```
#### Hover
##### Add the class `show` to `div` when hover.
```html
<div i-hover="class:add('show')"></div>
```
##### Remove the `show` class from `div` when hover.
```html
<div i-hover="class:remove('show')"></div>
```
##### Toggle the `show` class from `div` when hover.
```html
<div i-hover="class:toggle('show')"></div>
```
##### Add the class `show` to `#button` when `div` hover.
```html
<div i-hover="class:toggle('show', '#button')"></div>
<button id="button">Hi</div>
```
---
## Spanish/Español
@ -139,7 +144,7 @@ Add to your `<head>` the following tag.
Añade a tu `<head>` la siguiente etiqueta.
```html
<script src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@v1.1.0/dist/ffnm.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@v1.2.0/dist/ffnm.min.js"></script>
```
### Ejemplos de uso
@ -213,6 +218,33 @@ Añade a tu `<head>` la siguiente etiqueta.
<nav i-scroll-down="class:remove('show')"></nav>
```
#### Hover
##### Añade la clase `show` al `div` cuando sea hover.
```html
<div i-hover="class:add('show')"></div>
```
##### Quita la clase `show` al `div` cuando sea hover.
```html
<div i-hover="class:remove('show')"></div>
```
##### Intercambia la clase `show` al `div` cuando sea hover.
```html
<div i-hover="class:toggle('show')"></div>
```
##### Añade la clase `show` a `#button` cuando `div` sea hover.
```html
<div i-hover="class:toggle('show', '#button')"></div>
<button id="button">Hi</div>
```
---
## Development

2
dist/ffnm.min.js vendored
View File

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

54
src/core.js
View File

@ -3,7 +3,7 @@ document.addEventListener('DOMContentLoaded', () => {
//===
// VARIABLES
//===
const EVENTS = ['i-click', 'i-scroll-up', 'i-scroll-down'];
const EVENTS = ['i-click', 'i-scroll-up', 'i-scroll-down', 'i-hover'];
const FUNCTION_TREE = {
'class': ['add', 'remove', 'toggle']
};
@ -139,10 +139,62 @@ document.addEventListener('DOMContentLoaded', () => {
}, false);
}
/**
* Method add events i-hover
* return void
*/
function addEventHover() {
let eventHover = 'i-hover';
return [...document.querySelectorAll(`[${eventHover}]`)].forEach((element) => {
let params = splitParams(element, eventHover);
switch(params.functionParent) {
case 'class':
[...document.querySelectorAll(params.target)].concat(element).forEach((item) => {
// 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;
}
});
}
//===
// INIT
//===
validateSyntax();
addEventClick();
addEventScroll();
addEventHover();
});

31
test/i-hover.html Normal file
View File

@ -0,0 +1,31 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Test i-hover</title>
<script src="../dist/ffnm.min.js"></script>
<style>
.uppercase {
text-transform: uppercase;
}
</style>
</head>
<body>
<p i-hover="class:add('uppercase', '.text')">Place the cursor over this text</p>
<p class="text">
Quisque id diam vel quam elementum pulvinar etiam non quam?
</p>
<p class="text">
Ac, feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.
</p>
<p class="text" i-hover="class:add('uppercase')">
Nunc aliquet bibendum enim, facilisis gravida neque convallis a cras.
</p>
<p class="text">
Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor.
</p>
<p class="text">
Volutpat consequat, mauris nunc congue nisi, vitae suscipit tellus mauris.
</p>
</body>
</html>