Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jonathandion/ez-dom
ez-dom is a library to manipulate the DOM using composition
https://github.com/jonathandion/ez-dom
curry dom fp functionnal html javascript jquery-alternative
Last synced: about 1 month ago
JSON representation
ez-dom is a library to manipulate the DOM using composition
- Host: GitHub
- URL: https://github.com/jonathandion/ez-dom
- Owner: jonathandion
- Created: 2017-05-10T16:03:27.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-07-06T23:03:12.000Z (over 7 years ago)
- Last Synced: 2024-09-30T13:41:07.118Z (about 2 months ago)
- Topics: curry, dom, fp, functionnal, html, javascript, jquery-alternative
- Language: JavaScript
- Homepage:
- Size: 37.1 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/ez-dom)
> ez-dom is a library to manipulate the DOM using composition.
## Getting started
ez-dom promotes a functional programming (FP) style to manipulate the DOM. Most methods are auto-curried and data-last(dom element(s)).
#### Curried methods
cap iteratees to one argument:
`addClass`
`append`
`removeClass`
`toggleClass`
`css`
`html`
`trigger`
`setText`
Methods that cap iteratees to two argument:
`on`
Methods that are not curried:
`remove`, `ready`, `show`, `hide`, `offset`, `query`, `getText`
e.g :
`ez.remove(element)`
## Installation
npm
```js
npm install ez-dom
```
yarn
```js
yarn add ez-dom
```
```js
import * as ez from 'ez-dom'
```
or destructuring
```js
import { addClass } from 'ez-dom'
```
To reduce size all you need is to use bundler with tree shaking support like webpack 2 or Rollup.
You can do imports like below without actually including the entire library content.
```js
import ready from 'ez-dom/lib/dom/ready'
import query from 'ez-dom/lib/dom/query'
import addClass from 'ez-dom/lib/dom/addClass'
```
## Examples
```js
ez.ready(() => {
const body = ez.query('body')
const test = ez.query('.test')
const handleClick = function(e, el) {
e.preventDefault()
ez.addClass('bar', el)
console.log(e.detail) // Object {derp: "derp!"}
}
const addClassOnClick = ez.on(ez._, handleClick)
addClassOnClick('click')(body)
addClassOnClick('click', test)
const trigger = ez.trigger({ event : 'click', detail : { 'derp' : 'derp!' }})
trigger(body)
const applyStyle = ez.compose(
ez.addClass('elon'),
ez.css({ backgroundColor: 'red' })
)
applyStyle(ez.query('div'))
})
```
### API
#### query
`(selectors: any) => Array`
Query one or many element.
```js
const el = query('div')
```
#### ready
`(callback: Function) => void`
Specify a function to execute when the DOM is fully loaded.
```js
ez.ready(() => { console.log('ready!') })
```
#### addClass
`(classes: string, selectors: Array) => Array`
Adds the specified class(es) to each element in the set of matched elements.
```js
addClass('myClass')(element)
```
#### append
`(html: any, selectors: Array) => Array`
Insert content, specified by the parameter, to the end of each element in the set of matched elements.
```js
append(`
hi`)(element)
```
#### css
`(css: object, selectors: Array) => Array`
Set one or more CSS properties for every matched element.
```js
css({ backgroundColor: 'blue', fontSize: '20px' })(element)
```
#### getText
`(selectors: Array) => string`
Get the text of the first element
```js
getText(element)
```
#### hide
`(selectors: Array) => Array`
Hide the matched elements.
```js
hide(element)
```
#### html
`(selectors: Array) => string`
Get the HTML contents of the first element.
```js
const html = html(element)
```
#### offset
`(selectors: Array) => Object`
Get the current coordinates of the first element.
```js
const offset = offset(element)
```
#### on
`(event: string, callback: Function, selectors: Array) => Array`
Attach an event handler function for one or more events to the selected elements.
```js
on('click')(handleClick)(div)
```
#### remove
`(selectors: Function) => Array`
Remove the set of matched elements from the DOM.
```js
remove(element)
```
#### removeClass
`(classes: string selectors: Array) => Array`
Remove a single class, multiple classes, or all classes from each element in the set of matched elements
```js
removeClass('foo derp')(element)
```
#### setText
`(text: string, selectors: Array) => Array`
Set the text contents of the matched elements.
```js
setText('foo')(div)
```
#### show
`(selectors: Array) => Array`
Display the matched elements.
```js
show(div)
```
#### toggleClass
`(classes: string, selectors: Array) => Array`
Add or remove one or more classes from each element in the set of matched elements.
```js
toggleClass('myToggleClass')(div)
```
#### trigger
`({event, detail}: { event: string; detail: Object; }, selectors: Array ) => Array`
Execute all handlers and behaviors attached to the matched elements for the given event type.
```js
trigger({ event : 'click', detail : { 'test' : 'hi' } })(element)
```
### Placeholder
A special placeholder value used to specify "gaps" within curried functions, allowing partial application of any combination of arguments, regardless of their positions.
e.g:
```js
const addClassOnClick = ez.on(_, handleClick)
addClassOnClick('click')(body)
```
#### Browser support
ez-dom works on modern browsers such as Chrome, Firefox, and Safari.
# License
MIT