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

Compare commits

base: andros:v1.3.0
Branches Tags
andros:master andros:dependabot/npm_and_yarn/decode-uri-component-0.2.2 andros:dependabot/npm_and_yarn/terser-4.8.1 andros:dependabot/npm_and_yarn/copy-props-2.0.5 andros:add-scroll
andros:v1.5.0 andros:v1.4.0 andros:v1.3.1 andros:v1.3.0 andros:v1.2.3 andros:v1.2.2 andros:v1.2.1 andros:v1.2.0 andros:v1.1.0 andros:v1.0.0
..
compare: andros:v1.3.1
Branches Tags
andros:dependabot/npm_and_yarn/decode-uri-component-0.2.2 andros:dependabot/npm_and_yarn/terser-4.8.1 andros:dependabot/npm_and_yarn/copy-props-2.0.5 andros:master andros:add-scroll
andros:v1.5.0 andros:v1.4.0 andros:v1.3.1 andros:v1.3.0 andros:v1.2.3 andros:v1.2.2 andros:v1.2.1 andros:v1.2.0 andros:v1.1.0 andros:v1.0.0

3 Commits
v1.3.0 ... v1.3.1

Author SHA1 Message Date
Andros Fenollosa
b306334ca5 Update README.md 2020-07-22 20:27:42 +02:00
Andros Fenollosa
e8cbe46659 Remove old code 2020-07-22 20:27:10 +02:00
Andros Fenollosa
ea2e148395 Update README.md 2020-07-22 20:09:56 +02:00
2 changed files with 58 additions and 4 deletions
Expand all files Collapse all files

59
README.md
View File

@ -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@v1.3.1/dist/ffnm.min.js"></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@v1.3.1/dist/ffnm.min.js"></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

3
src/core.js
View File

@ -3,7 +3,7 @@ document.addEventListener('DOMContentLoaded', () => {
//=== //===
// VARIABLES // VARIABLES
//=== //===
const EVENTS = ['is-click', 'is-scroll-up', 'is-scroll-down', 'is-hover', 'is-view', 'is-visible', 'is-not-visible']; const EVENTS = ['is-click', 'is-scroll-up', 'is-scroll-down', 'is-hover', 'is-visible', 'is-not-visible'];
const FUNCTION_TREE = { const FUNCTION_TREE = {
'class': ['add', 'remove', 'toggle'] 'class': ['add', 'remove', 'toggle']
}; };
@ -255,7 +255,6 @@ document.addEventListener('DOMContentLoaded', () => {
switch(params.functionChild) { switch(params.functionChild) {
case 'add': case 'add':
element.classList.add(params.value); element.classList.add(params.value);
console.log('date')
break; break;
case 'remove': case 'remove':
element.classList.remove(params.value); element.classList.remove(params.value);