ChirashiJS

v6.0.0
Need help reading this?

forEach

Iterates over items and apply callback on each one.

forEach(items: any, callback: forEachCallback, forceOrder: [boolean]): (Array | NodeList | HTMLCollection)
Parameters
items (any) The iterable.
callback (forEachCallback) The callback to call for each iteratee.
forceOrder ([boolean] (default false) ) Respect items order.
Returns
(Array | NodeList | HTMLCollection): items for chaining.
Example
//esnext
import { forEach } from 'chirashi'

const items = forEach([0, 1, 2], (item, i) => console.log(`${i}: ${item + 1}`)) //returns: [0, 1, 2]
// logs:
//   2: 3
//   1: 2
//   0: 1
forEach(items, (item, i) => console.log(`${i}: ${item + 1}`), true) //returns: [0, 1, 2]
// logs:
//   0: 1
//   1: 2
//   2: 3
forEach(0, (item, i) => console.log(`${i}: ${item + 1}`)) //returns: [0]
//   0: 1
//es5
var items = Chirashi.forEach([0, 1, 2], function (item, i) { console.log(i+': '+(item + 1)) }) //returns: [0, 1, 2]
// logs:
//   2: 3
//   1: 2
//   0: 1
Chirashi.forEach(items, function (item, i) { console.log(i+': '+(item + 1)) }, true) //returns: [0, 1, 2]
// logs:
//   0: 1
//   1: 2
//   2: 3
Chirashi.forEach(0, function (item, i) { console.log(i+': '+(item + 1)) }) //returns: [0]
// logs:
//   0: 1

forEachCallback

Callback to apply on item.

forEachCallback
Parameters
item (any)
index (number) Index of item in items.

forElements

Iterates over dom elements and apply callback on each one.

forElements(elements: (string | Array | NodeList | HTMLCollection | window | document | HTMLElement | SVGElement | Text), callback: forElementsCallback, forceOrder: [boolean]): (Array | NodeList | HTMLCollection)
Parameters
elements ((string | Array | NodeList | HTMLCollection | window | document | HTMLElement | SVGElement | Text)) The iterable, selector or elements.
callback (forElementsCallback) The function to call for each element.
forceOrder ([boolean] (default false) ) Respect elements order.
Returns
(Array | NodeList | HTMLCollection): items for chaining.
Example
//esnext
import { createElement, append, forElements } from 'chirashi'
const sushi = createElement('.sushi')
const unagi = createElement('.unagi')
const yakitori = createElement('.yakitori')
const sashimi = createElement('.sashimi')
append(document.body, [sushi, unagi, yakitori, sashimi])
forElements('div', console.log) //returns: [<div class="sushi"></div>, <div class="unagi"></div>, <div class="yakitori"></div>, <div class="sashimi"></div>]
// logs:
// <div class="sashimi"></div> 3
// <div class="yakitori"></div> 2
// <div class="unagi"></div> 1
// <div class="sushi"></div> 0
forElements([yakitori, sashimi], console.log, true) //returns: [<div class="yakitori"></div>, <div class="sashimi"></div>]
// logs:
// <div class="yakitori"></div> 0
// <div class="sashimi"></div> 1
//es5
var sushi = Chirashi.createElement('.sushi')
var unagi = Chirashi.createElement('.unagi')
var yakitori = Chirashi.createElement('.yakitori')
var sashimi = Chirashi.createElement('.sashimi')
Chirashi.append(document.body, [sushi, unagi, yakitori, sashimi])
Chirashi.forElements('div', console.log) //returns: [<div class="sushi"></div>, <div class="unagi"></div>, <div class="yakitori"></div>, <div class="sashimi"></div>]
// logs:
// <div class="sashimi"></div> 3
// <div class="yakitori"></div> 2
// <div class="unagi"></div> 1
// <div class="sushi"></div> 0
Chirashi.forElements([yakitori, sashimi], console.log, true) //returns: [<div class="yakitori"></div>, <div class="sashimi"></div>]
// logs:
// <div class="yakitori"></div> 0
// <div class="sashimi"></div> 1

forElementsCallback

Callback to apply on element.

forElementsCallback
Parameters
element ((window | document | HTMLElement | SVGElement | Text))
index (number) Index of element in elements.

forIn

Iterates over object's keys and apply callback on each one.

forIn(object: Object, callback: forInCallback, forceOrder: [boolean]): Object
Parameters
object (Object) The iterable.
callback (forInCallback) The function to call for each key-value pair.
forceOrder ([boolean] (default false) ) Respect keys order.
Returns
Object: object - The iterable for chaining.
Example
//esnext
import { forIn } from 'chirashi'
const californiaRoll = { name: 'California Roll', price: 4.25, recipe: ['avocado', 'cucumber', 'crab', 'mayonnaise', 'sushi rice', 'seaweed'] }
forIn(californiaRoll, (key, value) => {
  console.log(`${key} -> ${value}`)
}) //returns: { name: 'California Roll', price: 4.25, recipe: ['avocado', 'cucumber', 'crab', 'mayonnaise', 'sushi rice', 'seaweed'] }
// LOGS:
// recipe -> ['avocado', 'cucumber', 'crab', 'mayonnaise', 'sushi rice', 'seaweed']
// price -> 4.25
// name -> California Roll
forIn(californiaRoll, (key, value) => {
  console.log(`${key} -> ${value}`)
}, true) //returns: { name: 'California Roll', price: 4.25, recipe: ['avocado', 'cucumber', 'crab', 'mayonnaise', 'sushi rice', 'seaweed'] }
// LOGS:
// name -> California Roll
// price -> 4.25
// recipe -> ['avocado', 'cucumber', 'crab', 'mayonnaise', 'sushi rice', 'seaweed']
//es5
var californiaRoll = { name: 'California Roll', price: 4.25, recipe: ['avocado', 'cucumber', 'crab', 'mayonnaise', 'sushi rice', 'seaweed'] }
Chirashi.forIn(californiaRoll, (key, value) => {
  console.log(key + ' -> ' + value)
}) //returns: { name: 'California Roll', price: 4.25, recipe: ['avocado', 'cucumber', 'crab', 'mayonnaise', 'sushi rice', 'seaweed'] }
// LOGS:
// recipe -> ['avocado', 'cucumber', 'crab', 'mayonnaise', 'sushi rice', 'seaweed']
// price -> 4.25
// name -> California Roll
Chirashi.forIn(californiaRoll, (key, value) => {
  console.log(key + ' -> ' + value)
}, true) //returns: { name: 'California Roll', price: 4.25, recipe: ['avocado', 'cucumber', 'crab', 'mayonnaise', 'sushi rice', 'seaweed'] }
// LOGS:
// name -> California Roll
// price -> 4.25
// recipe -> ['avocado', 'cucumber', 'crab', 'mayonnaise', 'sushi rice', 'seaweed']

forInCallback

Callback to apply on each key-value pair.

forInCallback
Parameters
key (string)
value (any)

getElement

Get first dom element from iterable or selector.

getElement(input: (string | Array | NodeList | HTMLCollection | window | document | HTMLElement | SVGElement | Text)): (window | document | HTMLElement | SVGElement | Text | boolean)
Parameters
input ((string | Array | NodeList | HTMLCollection | window | document | HTMLElement | SVGElement | Text)) The iterable, selector or elements.
Returns
(window | document | HTMLElement | SVGElement | Text | boolean): element - The dom element from input.
Example
//esnext
import { createElement, append, getElement } from 'chirashi'
const sushi = createElement('.sushi')
const unagi = createElement('.unagi')
const yakitori = createElement('.yakitori')
const sashimi = createElement('.sashimi')
append(document.body, [sushi, unagi, yakitori, sashimi])
getElement('div') //returns: <div class="sushi"></div>
getElement('.yakitori, .sashimi') //returns: <div class="yakitori"></div>
getElement([sushi, unagi, '.sashimi', '.unknown']) //returns: <div class="sushi"></div>
getElement('.wasabi') //returns: undefined
//es5
var sushi = Chirashi.createElement('.sushi')
var unagi = Chirashi.createElement('.unagi')
var yakitori = Chirashi.createElement('.yakitori')
var sashimi = Chirashi.createElement('.sashimi')
Chirashi.append(document.body, [sushi, unagi, yakitori, sashimi])
Chirashi.getElement('div') //returns: <div class="sushi"></div>
Chirashi.getElement('.yakitori, .sashimi') //returns: <div class="yakitori"></div>
Chirashi.getElement([sushi, unagi, '.sashimi', '.unknown']) //returns: <div class="sushi"></div>
Chirashi.getElement('.wasabi') //returns: undefined

getElements

Get dom element recursively from iterable or selector. Note that to improve performances, the NodeList returned will be live if the selector allow it.

getElements(input: (string | Array | NodeList | HTMLCollection | window | document | HTMLElement | SVGElement | Text)): (Array | NodeList | HTMLCollection)
Parameters
input ((string | Array | NodeList | HTMLCollection | window | document | HTMLElement | SVGElement | Text)) The iterable, selector or elements.
Returns
(Array | NodeList | HTMLCollection): domElements - The array or nodelist of dom elements from input.
Example
//esnext
import { createElement, append, getElements } from 'chirashi'
const sushi = createElement('.sushi')
const unagi = createElement('.unagi')
const yakitori = createElement('.yakitori')
const sashimi = createElement('.sashimi')
append(document.body, [sushi, unagi, yakitori, sashimi])
getElements('div') //returns: [<div class="sushi"></div>, <div class="unagi"></div>, <div class="yakitori"></div>, <div class="sashimi"></div>]
getElements('.yakitori, .sashimi') //returns: [<div class="yakitori"></div>, <div class="sashimi"></div>]
getElements([sushi, unagi, '.sashimi', '.wasabi']) //returns: [<div class="sushi"></div>, <div class="unagi"></div>, <div class="sashimi"></div>]
getElements('.wasabi') //returns: []
//es5
var sushi = Chirashi.createElement('.sushi')
var unagi = Chirashi.createElement('.unagi')
var yakitori = Chirashi.createElement('.yakitori')
var sashimi = Chirashi.createElement('.sashimi')
Chirashi.append(document.body, [sushi, unagi, yakitori, sashimi])
Chirashi.getElements('div') //returns: [<div class="sushi"></div>, <div class="unagi"></div>, <div class="yakitori"></div>, <div class="sashimi"></div>]
Chirashi.getElements('.yakitori, .sashimi') //returns: [<div class="yakitori"></div>, <div class="sashimi"></div>]
Chirashi.getElements([sushi, unagi, '.sashimi', '.wasabi']) //returns: [<div class="sushi"></div>, <div class="unagi"></div>, <div class="sashimi"></div>]
Chirashi.getElements('.wasabi') //returns: []

isDomElement

Test if element is a dom element. Doesn't resolve selectors.

isDomElement(element: any): boolean
Parameters
element (any) The element to test.
Returns
boolean: isDomElement - true if element is HTMLElement, SVGElement, window, document or Text.
Example
//esnext
import { createElement, append, isDomElement } from 'chirashi'
const sushi = createElement('.sushi')
append(document.body, sushi)
isDomElement(window) //returns: true
isDomElement(sushi) //returns: true
isDomElement('.sushi') //returns: false
//es5
var sushi = Chirashi.createElement('.sushi')
Chirashi.append(document.body, sushi)
Chirashi.isDomElement(window) //returns: true
Chirashi.isDomElement(sushi) //returns: true
Chirashi.isDomElement('.sushi') //returns: false

addClass

Iterates over classes and add it on each element of elements.

addClass(elements: (string | Array | NodeList | HTMLCollection | HTMLElement | SVGElement), classes: (string | Array<string>)): (Array | NodeList | HTMLCollection)
Parameters
elements ((string | Array | NodeList | HTMLCollection | HTMLElement | SVGElement)) The iterable, selector or elements.
classes ((string | Array<string>)) Array of classes or string of classes seperated with comma and/or spaces.
Returns
(Array | NodeList | HTMLCollection): domElements - The array or nodelist of dom elements from elements.
Example
//esnext
import { createElement, addClass } from 'chirashi'
const maki = createElement('div')
addClass(maki, 'wasabi') //returns: <div class="wasabi"></div>
addClass(maki, 'seaweed, cheese') //returns: <div class="wasabi seaweed cheese"></div>
addClass(maki, 'avocado salmon') //returns: <div class="wasabi seaweed cheese avocado salmon"></div>
addClass(maki, ['egg', 'tuna']) //returns: <div class="wasabi seaweed cheese avocado salmon egg tuna"></div>
//es5
var maki = Chirashi.createElement('div')
Chirashi.addClass(maki, 'wasabi') //returns: <div class="wasabi"></div>
Chirashi.addClass(maki, 'seaweed, cheese') //returns: <div class="wasabi seaweed cheese"></div>
Chirashi.addClass(maki, 'avocado salmon') //returns: <div class="wasabi seaweed cheese avocado salmon"></div>
Chirashi.addClass(maki, ['egg', 'tuna']) //returns: <div class="wasabi seaweed cheese avocado salmon egg tuna"></div>

append

Appends each node to element.

append(element: (string | HTMLElement | SVGElement), nodes: (Array | string | HTMLElement | SVGElement | Text)): (HTMLElement | SVGElement | boolean)
Parameters
element ((string | HTMLElement | SVGElement)) Selector or element.
nodes ((Array | string | HTMLElement | SVGElement | Text)) Dom element, string or array of dom elements or strings. Strings will be passed to createElement then append.
Returns
(HTMLElement | SVGElement | boolean): element - The element for chaining or false if nodes can't be appended.
Example
//esnext
import { createElement, append } from 'chirashi'
const maki = createElement('.maki')
append(maki, '.salmon[data-fish="salmon"]') //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div></div>
const avocado = createElement('.avocado')
append(maki, [avocado, '.cheese[data-cheese="cream"]']) //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div><div class="avocado"></div><div class="cheese" data-cheese="cream"></div></div>
//es5
var maki = Chirashi.createElement('.maki')
Chirashi.append(maki, '.salmon[data-fish="salmon"]') //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div></div>
var avocado = Chirashi.createElement('.avocado')
Chirashi.append(maki, [avocado, '.cheese[data-cheese="cream"]']) //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div><div class="avocado"></div><div class="cheese" data-cheese="cream"></div></div>

children

Returns an element's children.

children(element: (string | HTMLElement | SVGElement)): HTMLCollection
Parameters
element ((string | HTMLElement | SVGElement)) Selector or element.
Returns
HTMLCollection: children - Element's children or null if elements has no children property or isn't a dom element.
Example
//esnext
import { createElement, append, children } from 'chirashi'
const maki = createElement('.maki')
append(maki, ['.salmon', '.avocado'])
children(maki) //returns: [<div class="salmon"></div>, <div class="avocado"></div>]
//es5
const maki = Chirashi.createElement('.maki')
Chirashi.append(maki, ['.salmon', '.avocado'])
Chirashi.children(maki) //returns: [<div class="salmon"></div>, <div class="avocado"></div>]

clone

Clones element.

clone(element: (string | HTMLElement | SVGElement)): (string | HTMLElement | SVGElement | boolean)
Parameters
element ((string | HTMLElement | SVGElement)) Selector or element.
Returns
(string | HTMLElement | SVGElement | boolean): clone - element's clone or false if element isn't a dom element or can't be cloned.
Example
//esnext
import { createElement, append, clone } from 'chirashi'
const maki = createElement('.maki')
clone(maki) //returns: <div class="maki"></div>
const sushi = createElement('.sushi')
append(document.body, sushi)
clone('.sushi') //returns: <div class="sushi"></div>
//es5
var maki = Chirashi.createElement('.maki')
Chirashi.clone(maki) //returns: <div class="maki"></div>
var sushi = Chirashi.createElement('.sushi')
Chirashi.append(document.body, sushi)
Chirashi.clone('.sushi') //returns: <div class="sushi"></div>

closest

Get closest element matching the tested selector or tested element traveling up the DOM tree from element to limit.

closest(element: (string | HTMLElement | SVGElement | Text), tested: (string | HTMLElement | SVGElement | Text), limit: [(string | document | HTMLElement | SVGElement)]): (boolean | HTMLElement | SVGElement | Text)
Parameters
element ((string | HTMLElement | SVGElement | Text)) Selector or element.
tested ((string | HTMLElement | SVGElement | Text)) The selector or dom element to match.
limit ([(string | document | HTMLElement | SVGElement)] (default document) ) Returns false when this selector or element is reached.
Returns
(boolean | HTMLElement | SVGElement | Text): matchedElement - The matched element or false.
Example
//esnext
import { createElement, append, closest } from 'chirashi'
const maki = createElement('.maki')
const cheese = createElement('.cheese')
append(maki, cheese)
append(cheese, '.avocado')
append(document.body, maki)
closest('.avocado', '.maki') //returns: <div class="maki"></div>
closest('.avocado', '.maki', '.cheese') //returns: false
//es5
var maki = Chirashi.createElement('.maki')
var cheese = Chirashi.createElement('.cheese')
Chirashi.append(maki, cheese)
Chirashi.append(cheese, '.avocado')
Chirashi.append(document.body, maki)
Chirashi.closest('.avocado', '.maki') //returns: <div class="maki"></div>
Chirashi.closest('.avocado', '.maki', '.cheese') //returns: false

regex

Creates a dom element from an HTML string, tag or css selector.

regex
Parameters
string (string) The html string, tag or css selector.
Returns
(HTMLElement | SVGElement): element - The dom element created from the string.
Example
//esnext
import { createElement } from 'chirashi'
const maki = createElement('a#sushi.link[data-href="chirashijs.org"][data-link]') //returns: <a class="link" id="sushi" data-href="chirashijs.org" data-link></a>
const greetings = createElement('<h1>Hello <strong>World</strong>!</h1>') //returns: <h1>Hello <strong>World</strong>!</h1>
//es5
var maki = Chirashi.createElement('a#sushi.link[data-href="chirashijs.org"][data-link]') //returns: <a class="link" id="sushi" data-href="chirashijs.org" data-link></a>
var greetings = Chirashi.createElement('<h1>Hello <strong>World</strong>!</h1>') //returns: <h1>Hello <strong>World</strong>!</h1>

filter

Iterates over elements, returning an array of all elements matching tested selector.

filter(elements: (string | Array | NodeList | HTMLCollection | window | document | HTMLElement | SVGElement | Text), tested: (string | HTMLElement | SVGElement | Text)): Array
Parameters
elements ((string | Array | NodeList | HTMLCollection | window | document | HTMLElement | SVGElement | Text)) The iterable, selector or elements.
tested ((string | HTMLElement | SVGElement | Text)) The selector or dom element to match.
Returns
Array: matching - The array of filtered elements.
Example
//esnext
import { createElement, append, filter } from 'chirashi'
const salmonMaki = createElement('.salmon.maki')
const tunaMaki = createElement('.tuna.maki')
const salmonSushi = createElement('.salmon.sushi')
const tunaSushi = createElement('.tuna.sushi')
append(document.body, [salmonMaki, tunaMaki, salmonSushi, tunaSushi])
filter('div', '.salmon') //returns: [<div class="salmon sushi"></div>, <div class="salmon maki"></div>]
filter([salmonMaki, tunaMaki, salmonSushi, tunaSushi], '.maki') //returns: [<div class="salmon maki"></div>, <div class="tuna maki"></div>]
filter('div', '.salmon') //returns: [<div class="salmon sushi"></div>, <div class="salmon maki"></div>]
//es5
var salmonMaki = Chirashi.createElement('.salmon.maki')
var tunaMaki = Chirashi.createElement('.tuna.maki')
var salmonSushi = Chirashi.createElement('.salmon.sushi')
var tunaSushi = Chirashi.createElement('.tuna.sushi')
Chirashi.append(document.body, [salmonMaki, tunaMaki, salmonSushi, tunaSushi])
Chirashi.filter('div', '.salmon') //returns: [<div class="salmon sushi"></div>, <div class="salmon maki"></div>]
Chirashi.filter([salmonMaki, tunaMaki, salmonSushi, tunaSushi], '.maki') //returns: [<div class="salmon maki"></div>, <div class="tuna maki"></div>]
Chirashi.filter('div', '.salmon') //returns: [<div class="salmon sushi"></div>, <div class="salmon maki"></div>]

find

Iterates over each element of elements and returns an array containing all elements' children matching a selector.

find(elements: (string | Array | NodeList | HTMLCollection | document | HTMLElement | SVGElement), selector: string): (Array | NodeList | HTMLCollection)
Parameters
elements ((string | Array | NodeList | HTMLCollection | document | HTMLElement | SVGElement)) The iterable, selector or elements.
selector (string) The selector.
Returns
(Array | NodeList | HTMLCollection): found - The elements' descendants matching the selector.
Example
//esnext
import { createElement, append, find } from 'chirashi'
const maki = createElement('.maki')
append(maki, ['.salmon[data-fish][data-inside]', '.avocado[data-inside]'])
const roll = createElement('.roll')
append(roll, '.tuna[data-fish][data-inside]')
append(document.body, [maki, roll])
find('div', '[data-fish]') //returns: [<div class="salmon" data-fish data-inside></div>, <div class="tuna" data-fish data-inside></div>]
find(maki, '[data-inside]') //returns: [<div class="salmon" data-fish data-inside></div>, <div class="avocado" data-inside></div>]
//es5
var maki = Chirashi.createElement('.maki')
Chirashi.append(maki, ['.salmon[data-fish][data-inside]', '.avocado[data-inside]'])
var roll = Chirashi.createElement('.roll')
Chirashi.append(roll, '.tuna[data-fish][data-inside]')
Chirashi.append(document.body, [maki, roll])
Chirashi.find('div', '[data-fish]') //returns: [<div class="salmon" data-fish data-inside></div>, <div class="tuna" data-fish data-inside></div>]
Chirashi.find(maki, '[data-inside]') //returns: [<div class="salmon" data-fish data-inside></div>, <div class="avocado" data-inside></div>]

findOne

Find the first element's child matching the selector.

findOne(elements: (string | Array | NodeList | HTMLCollection | document | HTMLElement | SVGElement), selector: string, element: any): (HTMLElement | SVGElement | null)
Parameters
elements ((string | Array | NodeList | HTMLCollection | document | HTMLElement | SVGElement)) The iterable, selector or elements.
selector (string) The selector to match.
element (any)
Returns
(HTMLElement | SVGElement | null): element - The first child of elements matching the selector or null.
Example
//esnext
import { createElement, append, find } from 'chirashi'
const maki = createElement('.maki')
append(maki, ['.salmon[data-fish][data-inside]', '.avocado[data-inside]'])
const roll = createElement('.roll')
append(roll, '.tuna[data-fish][data-inside]')
append(document.body, [maki, roll])
findOne('div', '[data-fish]') //returns: <div class="salmon" data-fish data-inside></div>
findOne(maki, '[data-inside]') //returns: <div class="salmon" data-fish data-inside></div>
//es5
var maki = Chirashi.createElement('.maki')
Chirashi.append(maki, ['.salmon[data-fish][data-inside]', '.avocado[data-inside]'])
var roll = Chirashi.createElement('.roll')
Chirashi.append(roll, '.tuna[data-fish][data-inside]')
Chirashi.append(document.body, [maki, roll])
Chirashi.findOne('div', '[data-fish]') //returns: <div class="salmon" data-fish data-inside></div>
Chirashi.findOne(maki, '[data-inside]') //returns: <div class="salmon" data-fish data-inside></div>

getAttr

Get value for named attribute of element.

getAttr(element: (string | Array | NodeList | HTMLCollection | document | HTMLElement | SVGElement), name: string): (string | boolean)
Parameters
element ((string | Array | NodeList | HTMLCollection | document | HTMLElement | SVGElement)) The selector or dom element.
name (string) The attribute's name.
Returns
(string | boolean): value - The value for the attribute or false if no element found.
Example
//esnext
import { createElement, getAttr } from 'chirashi'
const maki = createElement('.maki[data-fish="salmon"]')
getAttr(maki, 'data-fish') //returns: "salmon"
//es5
const maki = Chirashi.createElement('.maki[data-fish="salmon"]')
Chirashi.getAttr(maki, 'data-fish') //returns: "salmon"

getData

Alias on getAttr prefixing name with 'data-'.

getData(element: (string | Array | NodeList | HTMLCollection | document | HTMLElement | SVGElement), name: string): (string | boolean)
Parameters
element ((string | Array | NodeList | HTMLCollection | document | HTMLElement | SVGElement)) The selector or dom element.
name (string) The data-attribute's name.
Returns
(string | boolean): value - The value for the data-attribute or false if no element found.
Example
//esnext
import { createElement, getData } from 'chirashi'
const maki = createElement('.maki[data-fish="salmon"]')
getData(maki, 'fish') //returns: "salmon"
//es5
const maki = Chirashi.createElement('.maki[data-fish="salmon"]')
Chirashi.getData(maki, 'fish') //returns: "salmon"

getHtml

Get the inner html of an element.

getHtml(element: (string | Array | NodeList | HTMLCollection | document | HTMLElement | SVGElement)): (string | null)
Parameters
element ((string | Array | NodeList | HTMLCollection | document | HTMLElement | SVGElement)) The selector or dom element.
Returns
(string | null): innerHTML - The inner html of the element or null if no element found.
Example
//esnext
import { createElement, setHtml, getHtml } from 'chirashi'
const maki = createElement('p.maki')
setHtml(maki, 'salmon')
getHtml(maki) //returns: "salmon"
//es5
var maki = createElement('p.maki')
setHtml(maki, 'salmon')
getHtml(maki) //returns: "salmon"

getProp

Get the value for the property name on the element.

getProp(element: (string | Array | NodeList | HTMLCollection | document | HTMLElement | SVGElement), property: string): any
Parameters
element ((string | Array | NodeList | HTMLCollection | document | HTMLElement | SVGElement)) The selector or dom element.
property (string) The name of the property.
Returns
any: value - The value for the property or null if no element found.
Example
//esnext
import { createElement, append, getProp } from 'chirashi'
const maki = createElement('.maki')
append(maki, '.salmon')
getProp(maki, 'firstChild') //returns: <div class="salmon"></div>
//es5
var maki = Chirashi.createElement('.maki')
Chirashi.append(maki, '.salmon')
Chirashi.getProp(maki, 'firstChild') //returns: <div class="salmon"></div>

hasClass

Iterates over classes and test if element has each.

hasClass(element: (string | HTMLElement | SVGElement), classes: (string | Array<string>)): boolean
Parameters
element ((string | HTMLElement | SVGElement)) The selector or dom element.
classes ((string | Array<string>)) Array of classes, classes seperated by coma and/or spaces or single class.
Returns
boolean: hasClass - Is true if element has all classes.
Example
//esnext
import { createElement, hasClass } from 'chirashi'
const maki = createElement('.salmon.cheese.maki')
hasClass(maki, 'salmon cheese') //returns: true
hasClass(maki, ['salmon', 'avocado']) //returns: false
//es5
var maki = Chirashi.createElement('.salmon.cheese.maki')
Chirashi.hasClass(maki, 'salmon cheese') //returns: true
Chirashi.hasClass(maki, ['salmon', 'avocado']) //returns: false

indexInParent

Returns index of element in parent's children.

indexInParent(element: (string | HTMLElement | SVGElement | Text)): (number | null)
Parameters
element ((string | HTMLElement | SVGElement | Text)) The selector or dom element.
Returns
(number | null): index - The position of element in his parent's children or null if no element found.
Example
//esnext
import { createElement, append, indexInParent } from 'chirashi'
const maki = createElement('.maki')
append(document.body, maki)
append(maki, ['.salmon[data-fish="salmon"]', '.cheese[data-cheese="cream"]']) //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div><div class="cheese" data-cheese="cream"></div></div>
indexInParent('.cheese') //returns: 1
//es5
var maki = Chirashi.createElement('.maki')
Chirashi.append(document.body, maki)
Chirashi.append(maki, ['.salmon[data-fish="salmon"]', '.cheese[data-cheese="cream"]']) //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div><div class="cheese" data-cheese="cream"></div></div>
Chirashi.indexInParent('.cheese') //returns: 1

insertAfter

Insert nodes after element in his parent.

insertAfter(element: (string | HTMLElement | SVGElement | Text), nodes: (Array | string | HTMLElement | SVGElement | Text)): (HTMLElement | SVGElement | undefined)
Parameters
element ((string | HTMLElement | SVGElement | Text)) The selector or dom element.
nodes ((Array | string | HTMLElement | SVGElement | Text)) Array of dom elements or string to create it using createElement.
Returns
(HTMLElement | SVGElement | undefined): element - The element for chaining or undefined if no element found or element has no parent.
Example
//esnext
import { createElement, append, insertAfter } from 'chirashi'
const maki = createElement('.maki')
append(document.body, maki)
append(maki, ['.salmon[data-fish="salmon"]', '.cheese[data-cheese="cream"]'])
insertAfter('.salmon', ['.avocado', '.wasabi']) //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div><div class="avocado"></div><div class="wasabi"></div><div class="cheese" data-cheese="cream"></div></div>
//es5
var maki = Chirashi.createElement('.maki')
Chirashi.append(document.body, maki)
Chirashi.append(maki, ['.salmon[data-fish="salmon"]', '.cheese[data-cheese="cream"]'])
Chirashi.insertAfter('.salmon', ['.avocado', '.wasabi']) //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div><div class="avocado"></div><div class="wasabi"></div><div class="cheese" data-cheese="cream"></div></div>

insertBefore

Insert nodes before element in his parent.

insertBefore(element: (string | HTMLElement | SVGElement | Text), nodes: (Array | string | HTMLElement | SVGElement | Text)): (HTMLElement | SVGElement | undefined)
Parameters
element ((string | HTMLElement | SVGElement | Text)) The selector or dom element.
nodes ((Array | string | HTMLElement | SVGElement | Text)) Array of dom elements or string to create it using createElement.
Returns
(HTMLElement | SVGElement | undefined): element - The element for chaining or undefined if no element found or element has no parent.
Example
//esnext
import { createElement, append, insertBefore } from 'chirashi'
const maki = createElement('.maki')
append(document.body, maki)
append(maki, ['.salmon[data-fish="salmon"]', '.cheese[data-cheese="cream"]'])
insertBefore('.cheese', ['.avocado', '.wasabi']) //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div><div class="avocado"></div><div class="wasabi"></div><div class="cheese" data-cheese="cream"></div></div>
//es5
var maki = Chirashi.createElement('.maki')
Chirashi.append(document.body, maki)
Chirashi.append(maki, ['.salmon[data-fish="salmon"]', '.cheese[data-cheese="cream"]'])
Chirashi.insertBefore('.cheese', ['.avocado', '.wasabi']) //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div><div class="avocado"></div><div class="wasabi"></div><div class="cheese" data-cheese="cream"></div></div>

next

Get the next sibling of element.

next(element: (string | HTMLElement | SVGElement | Text)): (HTMLElement | SVGElement | Text | null)
Parameters
element ((string | HTMLElement | SVGElement | Text)) The selector or dom element.
Returns
(HTMLElement | SVGElement | Text | null): nextElement - The element's next sibling or null if no element found.
Example
//esnext
import { createElement, append, next } from 'chirashi'
const maki = createElement('.maki')
append(maki, '.salmon[data-fish="salmon"]') //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div></div>
const avocado = createElement('.avocado')
append(maki, [avocado, '.cheese[data-cheese="cream"]']) //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div><div class="avocado"></div><div class="cheese" data-cheese="cream"></div></div>
next(avocado) //returns: <div class="cheese" data-cheese="cream"></div>
//es5
var maki = Chirashi.createElement('.maki')
Chirashi.append(maki, '.salmon[data-fish="salmon"]') //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div></div>
var avocado = Chirashi.createElement('.avocado')
Chirashi.append(maki, [avocado, '.cheese[data-cheese="cream"]']) //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div><div class="avocado"></div><div class="cheese" data-cheese="cream"></div></div>
Chirashi.next(avocado) //returns: <div class="cheese" data-cheese="cream"></div>

parent

Returns the parent node of the element.

parent(element: (string | document | HTMLElement | SVGElement | Text)): (document | HTMLElement | SVGElement | null)
Parameters
element ((string | document | HTMLElement | SVGElement | Text)) The selector or dom element.
Returns
(document | HTMLElement | SVGElement | null): parentElement - The parent node or null if no element found.
Example
//esnext
import { createElement, append, parent } from 'chirashi'
const maki = createElement('.maki')
append(document.body, maki)
append(maki, '.salmon[data-fish="salmon"]') //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div></div>
parent('.salmon') //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div></div>
//es5
var maki = Chirashi.createElement('.maki')
append(maki
Chirashi.append(document.body, maki)
Chirashi.append(maki, '.salmon[data-fish="salmon"]') //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div></div>
Chirashi.parent('.salmon') //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div></div>

prev

Get the previous sibling of element.

prev(element: (string | HTMLElement | SVGElement | Text)): (HTMLElement | SVGElement | Text | null)
Parameters
element ((string | HTMLElement | SVGElement | Text)) The selector or dom element.
Returns
(HTMLElement | SVGElement | Text | null): previousElement - The element's previous sibling or null if no element found.
Example
//esnext
import { createElement, append, prev } from 'chirashi'
const maki = createElement('.maki')
append(maki, '.salmon[data-fish="salmon"]') //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div></div>
const avocado = createElement('.avocado')
append(maki, [avocado, '.cheese[data-cheese="cream"]']) //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div><div class="avocado"></div><div class="cheese" data-cheese="cream"></div></div>
prev(avocado) //returns: <div class="salmon" data-fish="salmon"></div>
//es5
var maki = Chirashi.createElement('.maki')
Chirashi.append(maki, '.salmon[data-fish="salmon"]') //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div></div>
var avocado = Chirashi.createElement('.avocado')
Chirashi.append(maki, [avocado, '.cheese[data-cheese="cream"]']) //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div><div class="avocado"></div><div class="cheese" data-cheese="cream"></div></div>
Chirashi.prev(avocado) //returns: <div class="salmon" data-fish="salmon"></div>

remove

Iterates over elements and removes it from DOM.

remove(element: (string | HTMLElement | SVGElement | Text), elements: any): (Array | NodeList | HTMLCollection)
Parameters
element ((string | HTMLElement | SVGElement | Text)) The selector or dom element.
elements (any)
Returns
(Array | NodeList | HTMLCollection): removedElements - The array or nodelist of removed dom elements.
Example
//esnext
import { createElement, append, remove } from 'chirashi'
const maki = createElement('.maki')
append(document.body, maki)
append(maki, '.salmon[data-fish="salmon"]') //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div></div>
const avocado = createElement('.avocado')
append(maki, [avocado, '.cheese[data-cheese="cream"]']) //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div><div class="avocado"></div><div class="cheese" data-cheese="cream"></div></div>
remove('.cheese') //returns: [<div class="cheese" data-cheese="cream"></div>]
//es5
var maki = Chirashi.createElement('.maki')
Chirashi.append(document.body, maki)
Chirashi.append(maki, '.salmon[data-fish="salmon"]') //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div></div>
var avocado = Chirashi.createElement('.avocado')
Chirashi.append(maki, [avocado, '.cheese[data-cheese="cream"]']) //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div><div class="avocado"></div><div class="cheese" data-cheese="cream"></div></div>
Chirashi.remove('.cheese') //returns: [<div class="cheese" data-cheese="cream"></div>]

removeAttr

Iterates over attributes and removes it from each element of elements.

removeAttr(elements: (string | Array | NodeList | HTMLCollection | HTMLElement | SVGElement), attributes: (Array | string)): (Array | NodeList | HTMLCollection)
Parameters
elements ((string | Array | NodeList | HTMLCollection | HTMLElement | SVGElement)) The iterable, selector or elements.
attributes ((Array | string)) Array of attributes' name, string of attributes' name seperated by space and/or comas or name of a single attribute.
Returns
(Array | NodeList | HTMLCollection): domElements - The array or nodelist of dom elements from elements.
Example
//esnext
import { createElement, append, removeAttr } from 'chirashi'
const maki = createElement('.maki')
append(document.body, maki)
append(maki, ['.salmon[data-fish="salmon"]', '.cheese[data-cheese="cream"]']) //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div><div class="cheese" data-cheese="cream"></div></div>
removeAttr('.salmon', 'data-fish') //returns: [<div class="salmon"></div>]
//es5
var maki = Chirashi.createElement('.maki')
Chirashi.append(document.body, maki)
Chirashi.append(maki, ['.salmon[data-fish="salmon"]', '.cheese[data-cheese="cream"]']) //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div><div class="cheese" data-cheese="cream"></div></div>
Chirashi.removeAttr('.salmon', 'data-fish') //returns: [<div class="salmon"></div>]

removeClass

Iterates over classes and remove it from each element of elements.

removeClass(elements: (string | Array | NodeList | HTMLCollection | window | document | HTMLElement | SVGElement | Text), classes: (string | Array<string>)): (Array | NodeList | HTMLCollection)
Parameters
elements ((string | Array | NodeList | HTMLCollection | window | document | HTMLElement | SVGElement | Text)) The iterable, selector or elements.
classes ((string | Array<string>)) Array of classes or string of classes seperated with comma and/or spaces.
Returns
(Array | NodeList | HTMLCollection): domElements - The array or nodelist of dom elements from elements.
Example
//esnext
import { createElement, removeClass } from 'chirashi'
const maki = createElement('.maki.salmon.cheese.wasabi') //returns: <div class="maki salmon cheese wasabi"></div>
removeClass(maki, 'cheese, wasabi') //returns: [<div class="maki salmon"></div>]
//es5
var maki = Chirashi.createElement('.maki.salmon.cheese.wasabi') //returns: <div class="maki salmon cheese wasabi"></div>
Chirashi.removeClass(maki, 'cheese, wasabi') //returns: [<div class="maki salmon"></div>]

removeData

Iterates over attributes and removes it from each element of elements.

removeData(elements: (string | Array | NodeList | HTMLCollection | HTMLElement | SVGElement), attributes: (string | Array<string>)): (Array | NodeList | HTMLCollection)
Parameters
elements ((string | Array | NodeList | HTMLCollection | HTMLElement | SVGElement)) The iterable, selector or elements.
attributes ((string | Array<string>)) Array of attributes' name, string of attributes' name seperated by space and/or comas or name of a single attribute.
Returns
(Array | NodeList | HTMLCollection): domElements - The array or nodelist of dom elements from elements.
Example
//esnext
import { createElement, append, removeData } from 'chirashi'
const maki = createElement('.maki')
append(document.body, maki)
append(maki, ['.salmon[data-fish="salmon"]', '.cheese[data-cheese="cream"]']) //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div><div class="cheese" data-cheese="cream"></div></div>
removeData('.salmon', 'fish') //returns: [<div class="salmon"></div>]
//es5
var maki = Chirashi.createElement('.maki')
Chirashi.append(document.body, maki)
Chirashi.append(maki, ['.salmon[data-fish="salmon"]', '.cheese[data-cheese="cream"]']) //returns: <div class="maki"><div class="salmon" data-fish="salmon"></div><div class="cheese" data-cheese="cream"></div></div>
Chirashi.removeData('.salmon', 'fish') //returns: [<div class="salmon"></div>]

setAttr

Iterates over attributes as key value pairs and apply on each element of elements.

setAttr(elements: (Array | string | HTMLElement | SVGElement), Object: any, attributes: any): (Array | NodeList | HTMLCollection)
Parameters
elements ((Array | string | HTMLElement | SVGElement)) The iterable, selector or elements.
Object (any) The attributes key value pairs.
attributes (any)
Returns
(Array | NodeList | HTMLCollection): domElements - The array or nodelist of dom elements from elements.
Example
//esnext
import { createElement, setAttr } from 'chirashi'
const maki = createElement('.maki')
setAttr(maki, {
  dataFish: 'salmon'
}) //returns: [<div class="maki" data-fish="salmon">]
//es5
var maki = Chirashi.createElement('.maki')
Chirashi.setAttr(maki, {
  dataFish: 'salmon'
}) //returns: [<div class="maki" data-fish="salmon">]

setData

Iterates over data-attributes as key value pairs and apply on each element of elements.

setData(elements: (Array | string | HTMLElement | SVGElement), Object: any, dataAttributes: any): (Array | NodeList | HTMLCollection)
Parameters
elements ((Array | string | HTMLElement | SVGElement)) The iterable, selector or elements.
Object (any) The data-attributes key value pairs.
dataAttributes (any)
Returns
(Array | NodeList | HTMLCollection): domElements - The array or nodelist of dom elements from elements.
Example
//esnext
import { createElement, setData } from 'chirashi'
const maki = createElement('.maki')
setData(maki, {
  fish: 'salmon'
}) //returns: [<div class="maki" data-fish="salmon">]
//es5
var maki = Chirashi.createElement('.maki')
Chirashi.setData(maki, {
  fish: 'salmon'
}) //returns: [<div class="maki" data-fish="salmon">]

setHtml

Set the inner html of elements.

setHtml(elements: (Array | string | HTMLElement | SVGElement), html: string): (Array | NodeList | HTMLCollection)
Parameters
elements ((Array | string | HTMLElement | SVGElement)) The iterable, selector or elements.
html (string) The html to insert.
Returns
(Array | NodeList | HTMLCollection): domElements - The array or nodelist of dom elements from elements.
Example
//esnext
import { createElement, setHtml, getHtml } from 'chirashi'
const maki = createElement('p.maki')
setHtml(maki, 'salmon') //returns: [<p class="maki">salmon</p>]
getHtml(maki) //returns: "salmon"
//es5
var maki = createElement('p.maki')
setHtml(maki, 'salmon') //returns: [<p class="maki">salmon</p>]
getHtml(maki) //returns: "salmon"

setProp

Apply props as key value pairs on each element of elements.

setProp(elements: (string | Array | NodeList | HTMLCollection | document | HTMLElement | SVGElement), Object: any, props: any): (Array | NodeList | HTMLCollection)
Parameters
elements ((string | Array | NodeList | HTMLCollection | document | HTMLElement | SVGElement)) The iterable, selector or elements.
Object (any) The props key value pairs.
props (any)
Returns
(Array | NodeList | HTMLCollection): domElements - The array or nodelist of dom elements from elements.
Example
//esnext
import { createElement, setProp, getProp } from 'chirashi'
const maki = createElement('input.maki')
setProp(maki, { value: 'こんにちは世界' })
getProp(maki, 'value') //returns: こんにちは世界
//es5
var maki = Chirashi.createElement('input.maki')
Chirashi.setProp(maki, { value: 'こんにちは世界' })
Chirashi.getProp(maki, 'value') //returns: こんにちは世界

toggleClass

Iterates over classes and toggle it on each element of elements.

toggleClass(elements: (string | Array | NodeList | HTMLCollection | window | document | HTMLElement | SVGElement | Text), classes: (string | Array | Object), input: any): (Array | NodeList | HTMLCollection)
Parameters
elements ((string | Array | NodeList | HTMLCollection | window | document | HTMLElement | SVGElement | Text)) The iterable, selector or elements.
classes ((string | Array | Object)) Array of classes or string of classes seperated with comma and/or spaces. Or object with keys being the string of classes seperated with comma and/or spaces and values function returning a booleanean.
input (any)
Returns
(Array | NodeList | HTMLCollection): domElements - The array or nodelist of dom elements from elements.
Example
//esnext
import { createElement, toggleClass, clone, setData, getData } from 'chirashi'
const maki = createElement('.wasabi.salmon.maki') //returns: <div class="maki salmon wasabi"></div>
const sushi = createElement('.salmon.sushi') //returns: <div class="sushi salmon"></div>
toggleClass([maki, sushi], 'wasabi') //returns: [<div class="maki salmon"></div>, <div class="sushi salmon wasabi"></div>]
const scdMaki = clone(maki)
setData(maki, { for: 'leonard' })
setData(scdMaki, { for: 'sheldon' })
toggleClass([maki, scdMaki], {
  cheese: element => {
    return getData(element, 'for') !== 'leonard'
  }
}) //returns: [<div class="maki salmon cheese" data-for="sheldon"></div>, <div class="maki salmon" data-for="leonard"></div>]
//es5
var maki = Chirashi.createElement('.wasabi.salmon.maki') //returns: <div class="wasabi salmon maki"></div>
var sushi = Chirashi.createElement('.salmon.sushi') //returns: <div class="salmon sushi"></div>
Chirashi.toggleClass([maki, sushi], 'wasabi') //returns: [<div class="maki salmon"></div>, <div class="sushi salmon wasabi"></div>]
var scdMaki = Chirashi.clone(maki)
Chirashi.setData(maki, { for: 'leonard' })
Chirashi.setData(scdMaki, { for: 'sheldon' })
Chirashi.toggleClass([maki, scdMaki], {
  cheese: function (element) {
    return Chirashi.getData(element, 'for') !== 'leonard'
  }
}) //returns: [<div class="maki salmon cheese" data-for="sheldon"></div>, <div class="maki salmon" data-for="leonard"></div>]

bind

Bind events listener on delegate and execute callback when target matches selector (targets doesn't have to be in the DOM at binding).

bind(selector: string, input: Object<string, bindCallback>, delegate: any): Object
Parameters
selector (string) The selector to match.
input (Object<string, bindCallback>) An object in which keys are events to bind seperated with coma and/or spaces and values are bindCallbacks.
delegate (any (default document.body) )
Returns
Object: object - An object with unbind method for unbinding.
Returns
unbindCallback: object.unbind - The unbind method.
Example
//esnext
import { createElement, append, bind, trigger } from 'chirashi'
const listener = bind('.cheese, .wasabi', {
  click(e, target) => {
    console.log('clicked', target)
  },
  'mouseenter mousemove': (e, target) => {
    console.log('mouse in', target)
  }
})
const maki = createElement('a.cheese.maki')
const sushi = createElement('a.wasabi.sushi')
append(document.body, [maki, sushi])
trigger(maki, 'click') //simulate user's click
// LOGS: "clicked" <a class="maki cheese"></a>
trigger(sushi, 'click') //simulate user's click
// LOGS: "clicked" <a class="sushi wasabi"></a>
listener.unbind('mouseenter mousemove') //remove mouseenter and mousemove listeners
listener.unbind() //remove all listeners
//es5
var listener = Chirashi.bind('.cheese, .wasabi', {
  'click': function (e, target) {
    console.log('clicked', target)
  },
  'mouseenter mousemove': function(e, target) {
    console.log('mouse in', target)
  }
})
var maki = Chirashi.createElement('a.cheese.maki')
var sushi = Chirashi.createElement('a.wasabi.sushi')
Chirashi.append(document.body, [maki, sushi])
Chirashi.trigger(maki, 'click') //simulate user's click
// LOGS: "clicked" <a class="maki cheese"></a>
Chirashi.trigger(sushi, 'click') //simulate user's click
// LOGS: "clicked" <a class="sushi wasabi"></a>
listener.unbind('mouseenter mousemove') //remove mouseenter and mousemove listeners
listener.unbind() //remove all listeners

bindCallback

Callback to execute on event using delegate.

bindCallback
Parameters
event (Event) Triggered event.
target ((HTMLElement | SVGElement)) Target of the event.

unbindCallback

Called to unbind one or all events.

unbindCallback
Parameters
events ([string]) The events to unbind. Must be provided in the same syntax as in input.

offCallback

Called to remove one or all events listeners of one or all elements.

offCallback
Parameters
offElements ([(string | Array | NodeList | HTMLCollection | window | document | HTMLElement | SVGElement)]) The iterable, selector or elements to unbind.
events ([string]) The events to unbind. Must be provided in the same syntax as in input.

eventCallback

Callback to execute on event.

eventCallback
Parameters
event (Event) Triggered event.

on

Bind events listener on each element of elements.

on(elements: (string | Array | NodeList | HTMLCollection | window | document | HTMLElement | SVGElement), input: Object<string, eventCallback>): Object
Parameters
elements ((string | Array | NodeList | HTMLCollection | window | document | HTMLElement | SVGElement)) The iterable, selector or elements.
input (Object<string, eventCallback>) An object in which keys are events to bind seperated with coma and/or spaces and values are eventCallbacks.
Returns
Object: object - An object with off method to remove events listeners.
Returns
offCallback: object.off - The off method.
Example
//esnext
import { createElement, append, on, trigger } from 'chirashi'
const maki = createElement('a.cheese.maki')
const sushi = createElement('a.wasabi.sushi')
append(document.body, [maki, sushi])
const listener = on('.cheese, .wasabi', {
  click(e, target) {
    console.log('clicked', target)
  },
  'mouseenter mousemove': (e, target) => {
    console.log('mouse in', target)
  }
})
trigger(maki, 'click') //simulate user's click
// LOGS: "clicked" <a class="maki cheese"></a>
trigger(sushi, 'click') //simulate user's click
// LOGS: "clicked" <a class="sushi wasabi"></a>
listener.off(maki, 'click') //remove click event listener on maki
listener.off() //remove all listeners from all elements
//es5
var listener = Chirashi.bind('.cheese, .wasabi', {
  'click': function (e, target) {
    console.log('clicked', target)
  },
  'mouseenter mousemove': function(e, target) {
    console.log('mouse in', target)
  }
})
var maki = Chirashi.createElement('a.cheese.maki')
var sushi = Chirashi.createElement('a.wasabi.sushi')
Chirashi.append(document.body, [maki, sushi])
Chirashi.trigger(maki, 'click') //simulate user's click
// LOGS: "clicked" <a class="maki cheese"></a>
Chirashi.trigger(sushi, 'click') //simulate user's click
// LOGS: "clicked" <a class="sushi wasabi"></a>
listener.off(maki, 'click') //remove click event listener on maki
listener.off() //remove all listeners from all elements

once

Bind events listener on each element of elements and unbind after first triggered.

once(elements: (string | Array | NodeList | HTMLCollection), input: Object<string, eventCallback>, eachElement: [boolean], eachEvent: [boolean]): Object
Parameters
elements ((string | Array | NodeList | HTMLCollection)) The iterable or selector
input (Object<string, eventCallback>) An object in which keys are events to bind seperated with coma and/or spaces and values are eventCallbacks.
eachElement ([boolean] (default false) ) If true only current target's events listeners will be removed after trigger.
eachEvent ([boolean] (default false) ) If true only triggered event group of events listeners will be removed.
Returns
Object: cancelObject - An object with cancel method for unbinding.
Returns
Object.cancel: cancel - cancel method.
Example
//esnext
import { createElement, append, once, trigger } from 'chirashi'
const maki = createElement('a.cheese.maki')
const sushi = createElement('a.wasabi.sushi')
append(document.body, [maki, sushi])
const listener = once('.cheese, .wasabi', {
  click(e, target) => {
    console.log('clicked', target)
  },
  'mouseenter mousemove': (e, target) => {
    console.log('mouse in', target)
  }
}, true, true)
trigger(maki, 'click') //simulate user's click
// LOGS: "clicked" <a class="maki cheese"></a>
// click event listener was auto-removed from maki
trigger(sushi, 'click') //simulate user's click
// LOGS: "clicked" <a class="sushi wasabi"></a>
// click event listener was auto-removed from sushi
listener.cancel() //remove all listeners from all elements
const listener2 = once('.cheese, .wasabi', {
  click(e, target) => {
    console.log('clicked', target)
  }
})
trigger(maki, 'click') //simulate user's click
// LOGS: "clicked" <a class="maki cheese"></a>
// all events listeners were auto-removed from all elements
trigger(sushi, 'click') //simulate user's click
// won't log anything
//es5
var maki = Chirashi.createElement('a.cheese.maki')
var sushi = Chirashi.createElement('a.wasabi.sushi')
Chirashi.append(document.body, [maki, sushi])
var listener = Chirashi.once('.cheese, .wasabi', {
  click: function (e, target) {
    console.log('clicked', target)
  },
  'mouseenter mousemove': function (e, target) {
    console.log('mouse in', target)
  }
}, true, true)
Chirashi.trigger(maki, 'click') //simulate user's click
// LOGS: "clicked" <a class="maki cheese"></a>
// click event listener was auto-removed from maki
Chirashi.trigger(sushi, 'click') //simulate user's click
// LOGS: "clicked" <a class="sushi wasabi"></a>
// click event listener was auto-removed from sushi
listener.cancel() //remove all listeners from all elements
var listener2 = Chirashi.once('.cheese, .wasabi', {
  click: function (e, target) {
    console.log('clicked', target)
  }
})
Chirashi.trigger(maki, 'click') //simulate user's click
// LOGS: "clicked" <a class="maki cheese"></a>
// all events listeners were auto-removed from all elements
Chirashi.trigger(sushi, 'click') //simulate user's click
// won't log anything

ready

Execute callback when dom is ready.

ready(callback: eventCallback)
Parameters
callback (eventCallback) The callback.
Example
//esnext
import { ready } from 'chirashi'
ready(() => {
  console.log('Hello World!')
})
// Dom already complete or event fired.
// LOGS: "Hello World!"
//es5
Chirashi.ready(function () {
  console.log('Hello World!')
})
// Dom already complete or event fired.
// LOGS: "Hello World!"

trigger

Trigger events on elements with data

trigger(elements: (string | Array | NodeList | HTMLCollection), events: string, data: Object, options: any): (string | Array | NodeList | HTMLCollection)
Parameters
elements ((string | Array | NodeList | HTMLCollection)) The iterable or selector
events (string) The events that should be tiggered seperated with spaces
data (Object) The events' data
options (any (default {}) )
Returns
(string | Array | NodeList | HTMLCollection): elements - The iterable for chaining
Example
//esnext
import { createElement, append, on, trigger } from 'chirashi'
const maki = createElement('a.cheese.maki')
const sushi = createElement('a.wasabi.sushi')
append(document.body, [maki, sushi])
const listener = on('.cheese, .wasabi', {
  click(e, target) => {
    console.log('clicked', target)
  }
})
trigger(maki, 'click') //simulate user's click
// LOGS: "clicked" <a class="maki cheese"></a>
trigger(sushi, 'click') //simulate user's click
// LOGS: "clicked" <a class="sushi wasabi"></a>
//es5
var listener = Chirashi.bind('.cheese, .wasabi', {
  'click': function (e, target) {
    console.log('clicked', target)
  }
})
var maki = Chirashi.createElement('a.cheese.maki')
var sushi = Chirashi.createElement('a.wasabi.sushi')
Chirashi.append(document.body, [maki, sushi])
Chirashi.trigger(maki, 'click') //simulate user's click
// LOGS: "clicked" <a class="maki cheese"></a>
Chirashi.trigger(sushi, 'click') //simulate user's click
// LOGS: "clicked" <a class="sushi wasabi"></a>

clearStyle

Clear inline style properties from elements.

clearStyle(elements: (string | Array | NodeList | HTMLCollection), style: Object<string, string>, props: any): (Array | NodeList | HTMLCollection)
Parameters
elements ((string | Array | NodeList | HTMLCollection)) The iterable, selector or elements.
style (Object<string, string>) The style options as object with key the property and value the string value.
props (any)
Returns
(Array | NodeList | HTMLCollection): domElements - The array or nodelist of dom elements from elements.
Example
//esnext
import { createElement, setStyle, clearStyle } from 'chirashi'
const maki = createElement('a.cheese.maki')
setStyle(maki, {
  position: 'absolute',
  top: 10,
  width: 200,
  height: 200,
  background: 'red'
})
clearStyle(maki, ['position', top])
clearStyle(maki, 'width, height, background')
//es5
var maki = Chirashi.createElement('a.cheese.maki')
Chirashi.setStyle(maki, {
  position: 'absolute',
  top: 10,
  width: 200,
  height: 200,
  background: 'red'
})
Chirashi.clearStyle(maki, ['position', top])
Chirashi.clearStyle(maki, 'width, height, background')

clientRect

Return the screen relative position of an element.

clientRect(element: (string | Array | NodeList | HTMLCollection | document | HTMLElement | SVGElement)): (Object | boolean)
Parameters
element ((string | Array | NodeList | HTMLCollection | document | HTMLElement | SVGElement)) The selector or dom element.
Returns
(Object | boolean): clientRect - Element's screen position or false if no element found.
Returns
Object.bottom: bottom - Y-coordinate, relative to the viewport origin, of the bottom of the rectangle box.
Returns
Object.height: height - Height of the rectangle box (This is identical to bottom minus top).
Returns
Object.left: left - X-coordinate, relative to the viewport origin, of the left of the rectangle box.
Returns
Object.right: right - X-coordinate, relative to the viewport origin, of the right of the rectangle box.
Returns
Object.top: top - Y-coordinate, relative to the viewport origin, of the top of the rectangle box.
Returns
Object.width: width - Width of the rectangle box (This is identical to right minus left).
Example
esnext
import { setStyle, append, clientRect } from 'chirashi'

setStyle([document.documentElement, document.body], {
  position: 'relative',
  margin: 0,
  padding: 0
})

append(document.body, '.poulp')

const poulp = setStyle('.poulp', {
  display: 'block',
  position: 'absolute',
  top: 200,
  left: 240,
  width: 100,
  height: 100,
  background: 'red'
})

clientRect(poulp) // returns: { bottom: 300, height: 100, left: 240, right: 0, top: 200, width: 100 }
es5
Chirashi.setStyle([document.documentElement, document.body], {
  position: 'relative',
  margin: 0,
  padding: 0
})

Chirashi.append(document.body, '.poulp')

var poulp = Chirashi.setStyle('.poulp', {
  display: 'block',
  position: 'absolute',
  top: 200,
  left: 240,
  width: 100,
  height: 100,
  background: 'red'
})

Chirashi.clientRect(poulp) // returns: { bottom: 300, height: 100, left: 240, right: 0, top: 200, width: 100 }

getHeight

Get element's height in pixels.

getHeight(element: (string | HTMLElement | SVGElement), offset: [boolean]): number
Parameters
element ((string | HTMLElement | SVGElement)) Selector or element.
offset ([boolean] (default false) ) If true height will include scrollbar and borders to size.
Returns
number: height - The height in pixels.
Example
//esnext
import { append, setStyle, getHeight } from 'chirashi'
append(document.body, '.maki')
const maki = setStyle('.maki', {
  display: 'block',
  border: '20px solid red',
  padding: 10,
  height: 200,
  width: 200
})
getHeight(maki, true) //returns: 260
getHeight(maki) //returns: 220
//es5
Chirashi.append(document.body, '.maki')
var maki = Chirashi.setStyle('.maki', {
  display: 'block',
  border: '20px solid red',
  padding: 10,
  height: 200,
  width: 200
})
Chirashi.getHeight(maki, true) //returns: 260
Chirashi.getHeight(maki) //returns: 220

getSize

Get element's size in pixels.

getSize(element: (string | Array | NodeList | HTMLCollection | document | HTMLElement | SVGElement), offset: [boolean]): number
Parameters
element ((string | Array | NodeList | HTMLCollection | document | HTMLElement | SVGElement)) The selector or dom element
offset ([boolean] (default false) ) If true size will include scrollbar and borders.
Returns
number: size - The size in pixels.
Example
//esnext
import { append, setStyle, getSize } from 'chirashi'
append(document.body, '.maki')
const maki = setStyle('.maki', {
  display: 'block',
  border: '20px solid red',
  padding: 10,
  height: 200,
  width: 200
})
getSize(maki, true) //returns: { width: 260, height: 260 }
getSize(maki) //returns: { width: 220, height: 220 }
//es5
Chirashi.append(document.body, '.maki')
var maki = Chirashi.setStyle('.maki', {
  display: 'block',
  border: '20px solid red',
  padding: 10,
  height: 200,
  width: 200
})
Chirashi.getSize(maki, true) //returns: { width: 260, height: 260 }
Chirashi.getSize(maki) //returns: { width: 220, height: 220 }

getStyle

Get style property of element.

getStyle(element: (string | Array | NodeList | HTMLCollection | document | HTMLElement | SVGElement), property: any): number
Parameters
element ((string | Array | NodeList | HTMLCollection | document | HTMLElement | SVGElement)) The selector or dom element
property (any)
Returns
number: value - The value for the property
Example
//esnext
import { append, setStyle, getStyle } from 'chirashi'
append(document.body, '.maki')
const maki = setStyle('.maki', {
  display: 'block',
  position: 'relative',
  top: 10
})
getStyle(maki, 'display') //returns: "block"
getStyle(maki, 'top') //returns: 10
//es5
Chirashi.append(document.body, '.maki')
var maki = Chirashi.setStyle('.maki', {
  display: 'block',
  position: 'relative',
  top: 10
})
Chirashi.getStyle(maki, 'display') //returns: "block"
Chirashi.getStyle(maki, 'top') //returns: 10

getWidth

Get element's width in pixels.

getWidth(element: (string | HTMLElement | SVGElement), offset: [boolean]): number
Parameters
element ((string | HTMLElement | SVGElement)) Selector or element.
offset ([boolean] (default false) ) If true width will include scrollbar and borders to size.
Returns
number: width - The width in pixels.
Example
//esnext
import { append, setStyle, getWidth } from 'chirashi'
append(document.body, '.maki')
const maki = setStyle('.maki', {
  display: 'block',
  border: '20px solid red',
  padding: 10,
  height: 200,
  width: 200
})
getWidth(maki, true) //returns: 260
getWidth(maki) //returns: 220
//es5
Chirashi.append(document.body, '.maki')
var maki = Chirashi.setStyle('.maki', {
  display: 'block',
  border: '20px solid red',
  padding: 10,
  height: 200,
  width: 200
})
Chirashi.getWidth(maki, true) //returns: 260
Chirashi.getWidth(maki) //returns: 220

hide

Hide each element of elements using visibility.

hide(elements: (string | Array | NodeList | HTMLCollection)): (Array | NodeList | HTMLCollection)
Parameters
elements ((string | Array | NodeList | HTMLCollection)) The iterable, selector or elements.
Returns
(Array | NodeList | HTMLCollection): domElements - The array or nodelist of dom elements from elements.
Example
//esnext
import { append, hide, getStyle }
append(document.body, '.maki')
const maki = hide('.maki')
getStyle(maki, 'visibility') // returns: "hidden"
//es5
Chirashi.append(document.body, '.maki')
var maki = Chirashi.hide('.maki')
Chirashi.getStyle(maki, 'visibility') // returns: "hidden"

offset

Returns the top and left offset of an element. Offset is relative to web page.

offset(element: (string | Array | NodeList | HTMLCollection | document | HTMLElement | SVGElement)): (Object | boolean)
Parameters
element ((string | Array | NodeList | HTMLCollection | document | HTMLElement | SVGElement)) The selector or dom element.
Returns
(Object | boolean): offset - Offset object or false if no element found.
Returns
Object.top: top - Top offset in pixels.
Returns
Object.left: left - Left offset in pixels.
Example
//esnext
import { setStyle, append, offset }
setStyle([document.documentElement, document.body], {
  position: 'relative',
  margin: 0,
  padding: 0
})
append(document.body, '.sushi')
const sushi = setStyle('.sushi', {
  display: 'block',
  width: 100,
  height: 100,
  position: 'absolute',
  top: 200,
  left: 240,
  background: 'red'
})
offset(sushi) // returns: { top: 200, left: 240 }
//es5
Chirashi.setStyle([document.documentElement, document.body], {
  position: 'relative',
  margin: 0,
  padding: 0
})
Chirashi.append(document.body, '.sushi')
var sushi = Chirashi.setStyle('.sushi', {
  display: 'block',
  width: 100,
  height: 100,
  position: 'absolute',
  top: 200,
  left: 240,
  background: 'red'
})
Chirashi.offset(sushi) // returns: { top: 200, left: 240 }

position

Return the top and left position of an element. Position is relative to parent.

position(element: (string | Array | NodeList | HTMLCollection | document | HTMLElement | SVGElement)): (Object | boolean)
Parameters
element ((string | Array | NodeList | HTMLCollection | document | HTMLElement | SVGElement)) The selector or dom element.
Returns
(Object | boolean): offset - Offset object or false if no element found.
Returns
Object.top: top - Top position in pixels.
Returns
Object.left: left - Left position in pixels.
Example
//esnext
import { append, setStyle, position } from 'chirashi'

setStyle([document.documentElement, document.body], {
  position: 'relative',
  margin: 0,
  padding: 0
})

append(document.body, '.maki')
append('.maki', '.salmon')

setStyle('.maki', {
  display: 'block',
  position: 'absolute',
  top: 200,
  left: 240,
  width: 100,
  height: 100,
  borderRadius: '50%',
  background: 'black'
})

const salmon = setStyle('.salmon', {
  display: 'block',
  position: 'absolute',
  top: 20,
  left: 10,
  width: 10,
  height: 10,
  borderRadius: '50%',
  background: 'pink'
})

position(salmon) // returns: { top: 20, left: 10 }
//es5
Chirashi.setStyle([document.documentElement, document.body], {
  position: 'relative',
  margin: 0,
  padding: 0
})

Chirashi.append(document.body, '.maki')
Chirashi.append('.maki', '.salmon')

Chirashi.setStyle('.maki', {
  display: 'block',
  position: 'absolute',
  top: 200,
  left: 240,
  width: 100,
  height: 100,
  borderRadius: '50%',
  background: 'black'
})

var salmon = Chirashi.setStyle('.salmon', {
  display: 'block',
  position: 'absolute',
  top: 20,
  left: 10,
  width: 10,
  height: 10,
  borderRadius: '50%',
  background: 'pink'
})

Chirashi.position(salmon) // returns: { top: 20, left: 10 }

screenPosition

Return the screen relative position of an element.

screenPosition(element: (string | Array | NodeList | HTMLCollection | document | HTMLElement | SVGElement)): (Object | boolean)
Parameters
element ((string | Array | NodeList | HTMLCollection | document | HTMLElement | SVGElement)) The selector or dom element.
Returns
(Object | boolean): screenPosition - Element's screen position or false if no element found.
Returns
Object.top: top - Y-coordinate, relative to the viewport origin, of the top of the rectangle box.
Returns
Object.left: left - X-coordinate, relative to the viewport origin, of the left of the rectangle box.
Example
esnext
import { setStyle, append, screenPosition } from 'chirashi'

setStyle([document.documentElement, document.body], {
  position: 'relative',
  margin: 0,
  padding: 0
})

append(document.body, '.poulp')

const poulp = setStyle('.poulp', {
  display: 'block',
  position: 'absolute',
  top: 200,
  left: 240,
  width: 100,
  height: 100,
  background: 'red'
})

screenPosition(poulp) // returns: { top: 200, left: 240 }
es5
Chirashi.setStyle([document.documentElement, document.body], {
  position: 'relative',
  margin: 0,
  padding: 0
})

Chirashi.append(document.body, '.poulp')

var poulp = Chirashi.setStyle('.poulp', {
  display: 'block',
  position: 'absolute',
  top: 200,
  left: 240,
  width: 100,
  height: 100,
  background: 'red'
})

Chirashi.screenPosition(poulp) // returns: { top: 200, left: 240 }

setHeight

Set the provided height to elements.

setHeight(elements: (string | Array | NodeList | HTMLCollection), height: (number | string)): (Array | NodeList | HTMLCollection)
Parameters
elements ((string | Array | NodeList | HTMLCollection)) The iterable, selector or elements.
height ((number | string)) The height as number or string. For number, unit used will be pixels.
Returns
(Array | NodeList | HTMLCollection): domElements - The array or nodelist of dom elements from elements.
Example
//esnext
import { append, setHeight } from 'chirashi'

append(document.body, '.maki')

setHeight('.maki', 20) // returns: [<div class="maki" style="height: 20px;"></div>]
setHeight('.maki', '100%') // returns: [<div class="maki" style="height: 100%;"></div>]
//es5
Chirashi.append(document.body, '.maki')

Chirashi.setHeight('.maki', 20) // returns: [<div class="maki" style="height: 20px;"></div>]
Chirashi.setHeight('.maki', '100%') // returns: [<div class="maki" style="height: 100%;"></div>]

setSize

Set the provided size to elements.

setSize(elements: (string | Array | NodeList | HTMLCollection), width: (number | string), height: (number | string)): (Array | NodeList | HTMLCollection)
Parameters
elements ((string | Array | NodeList | HTMLCollection)) The iterable, selector or elements.
width ((number | string)) The width as number or string. For number, unit used will be pixels.
height ((number | string)) The height as number or string. For number, unit used will be pixels.
Returns
(Array | NodeList | HTMLCollection): domElements - The array or nodelist of dom elements from elements.
Example
//esnext
import { append, setSize } from 'chirashi'

append(document.body, '.maki')

setSize('.maki', 20, '100%') // returns: [<div class="maki" style="width: 20px; height: 100%;"></div>]
//es5
Chirashi.append(document.body, '.maki')

Chirashi.setSize('.maki', 20, '100%') // returns: [<div class="maki" style="width: 20px; height: 100%;"></div>]

setStyle

Set the provided style to elements.

setStyle(elements: (string | Array | NodeList | HTMLCollection), style: Object<string, (number | string)>): (Array | NodeList | HTMLCollection)
Parameters
elements ((string | Array | NodeList | HTMLCollection)) The iterable, selector or elements.
style (Object<string, (number | string)>) The style options as object with keys the css property and values, string values or number. If the value is a number and property doesn't support unitless values, pixels will be used.
Returns
(Array | NodeList | HTMLCollection): domElements - The array or nodelist of dom elements from elements.
Example
//esnext
import { append, setStyle, position } from 'chirashi'

append(document.body, '.maki')
append('.maki', '.salmon')

setStyle('.maki', {
  display: 'block',
  position: 'absolute',
  top: 200,
  left: 240,
  width: 100,
  height: 100,
  borderRadius: '50%',
  background: 'black'
}) // returns: [<div class="maki" style="display: block; position: absolute; top: 200px; left: 240px; width: 100px; height: 100px; border-radius: 50%; background: black;"><div class="salmon"></div></div>]

const salmon = setStyle('.salmon', {
  display: 'block',
  position: 'absolute',
  top: 20,
  left: 10,
  width: 10,
  height: 10,
  borderRadius: '50%',
  background: 'pink'
}) // returns: [<div class="salmon" style="display: block; position: absolute; top: 20px; left: 10px; width: 10px; height: 10px; border-radius: 50%; background: pink;"></div>]
//es5
Chirashi.append(document.body, '.maki')
Chirashi.append('.maki', '.salmon')

Chirashi.setStyle('.maki', {
  display: 'block',
  position: 'absolute',
  top: 200,
  left: 240,
  width: 100,
  height: 100,
  borderRadius: '50%',
  background: 'black'
}) // returns: [<div class="maki" style="display: block; position: absolute; top: 200px; left: 240px; width: 100px; height: 100px; border-radius: 50%; background: black;"><div class="salmon"></div></div>]

const salmon = Chirashi.setStyle('.salmon', {
  display: 'block',
  position: 'absolute',
  top: 20,
  left: 10,
  width: 10,
  height: 10,
  borderRadius: '50%',
  background: 'pink'
}) // returns: [<div class="salmon" style="display: block; position: absolute; top: 20px; left: 10px; width: 10px; height: 10px; border-radius: 50%; background: pink;"></div>]

setWidth

Set the provided width to elements.

setWidth(elements: (string | Array | NodeList | HTMLCollection), width: (number | string)): (Array | NodeList | HTMLCollection)
Parameters
elements ((string | Array | NodeList | HTMLCollection)) The iterable, selector or elements.
width ((number | string)) The width as number or string. For number, unit used will be pixels.
Returns
(Array | NodeList | HTMLCollection): domElements - The array or nodelist of dom elements from elements.
Example
//esnext
import { append, setWidth } from 'chirashi'

append(document.body, '.maki')

setWidth('.maki', 20) // returns: [<div class="maki" style="width: 20px;"></div>]
setWidth('.maki', '100%') // returns: [<div class="maki" style="width: 100%;"></div>]
//es5
Chirashi.append(document.body, '.maki')

Chirashi.setWidth('.maki', 20) // returns: [<div class="maki" style="width: 20px;"></div>]
Chirashi.setWidth('.maki', '100%') // returns: [<div class="maki" style="width: 100%;"></div>]

show

Show each element of elements using visibility.

show(elements: (string | Array | NodeList | HTMLCollection)): (Array | NodeList | HTMLCollection)
Parameters
elements ((string | Array | NodeList | HTMLCollection)) The iterable, selector or elements.
Returns
(Array | NodeList | HTMLCollection): domElements - The array or nodelist of dom elements from elements.
Example
//esnext
import { append, show, getStyle }
append(document.body, '.maki')
const maki = show('.maki')
getStyle(maki, 'visibility') // returns: "hidden"
//es5
Chirashi.append(document.body, '.maki')
var maki = Chirashi.show('.maki')
Chirashi.getStyle(maki, 'visibility') // returns: "visible"

transform

Compute and apply 3d transform matrix from provided transformation to each element of elements.

transform(elements: (string | Array | NodeList | HTMLCollection), transformation: Transformation): (Array | NodeList | HTMLCollection)
Parameters
elements ((string | Array | NodeList | HTMLCollection)) The iterable or selector.
transformation (Transformation) The transformation as an object
Returns
(Array | NodeList | HTMLCollection): domElements - The array or nodelist of dom elements from elements.
Returns
function: domElements.chrshPush - Methods to push dom elements into the array. Accepts same input as getElements.
Example
//esnext
import { createElement, setHtml, transform } from 'chirashi'
const wasabiPea = createElement('p')
setHtml(wasabiPea, 'Wasabi')
transform(wasabiPea, {}) // returns: [<p style="transform: "matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)">Wasabi</p>]
transform(wasabiPea, {x: 5, y: 6, z: 7}) // returns: [<p style="transform: "matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,5,6,7,1)">Wasabi</p>]
transform(wasabiPea, {scale: 2}) // returns: [<p style="transform: "matrix3d(2,0,0,0,0,2,0,0,0,0,1,0,0,0,0,1)">Wasabi</p>]
transform(wasabiPea, {scale: {x: 2, y: 3, z: 4}}) // returns: [<p style="transform: "matrix3d(2,0,0,0,0,3,0,0,0,0,4,0,0,0,0,1)">Wasabi</p>]
transform(wasabiPea, {rotate: 45}) // returns: [<p style="transform: "matrix3d(0.53,0.85,0,0,-0.85,0.53,0,0,0,0,1,0,0,0,0,1)">Wasabi</p>]
transform(wasabiPea, {rotate: {x: 45, y: 20, z: 15}}) // returns: [<p style="transform: "matrix3d(-0.31,0.65,-0.91,0,-0.65,-0.4,0.85,0,0.91,-0.85,0.21,0,0,0,0,1)">Wasabi</p>]
transform(wasabiPea, {skew: 45}) // returns: [<p style="transform: "matrix3d(1,1.62,0,0,1.62,1,0,0,0,0,1,0,0,0,0,1)">Wasabi</p>]
transform(wasabiPea, {skew: {x: 25, y: 45}}) // returns: [<p style="transform: "matrix3d(1,1.62,0,0,-0.13,1,0,0,0,0,1,0,0,0,0,1)">Wasabi</p>]
transform(wasabiPea, {x: 5, y: 6, z: 7, scale: {x: 2, y: 3}, rotate: {x: 45, y: 20, z: 15}, skew: {x: 25, y: 45}}) // returns: [<p style="transform: "matrix3d(-0.62,2.27,-0.91,0,-0.78,-1.2,0.85,0,0.91,-0.85,0.21,0,5,6,7,1)">Wasabi</p>]
//es5
var wasabiPea = Chirashi.createElement('p')
Chirashi.setHtml(wasabiPea, 'Wasabi')
Chirashi.transform(wasabiPea, {}) // returns: [<p style="transform: "matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)">Wasabi</p>]
Chirashi.transform(wasabiPea, {x: 5, y: 6, z: 7}) // returns: [<p style="transform: "matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,5,6,7,1)">Wasabi</p>]
Chirashi.transform(wasabiPea, {scale: 2}) // returns: [<p style="transform: "matrix3d(2,0,0,0,0,2,0,0,0,0,1,0,0,0,0,1)">Wasabi</p>]
Chirashi.transform(wasabiPea, {scale: {x: 2, y: 3, z: 4}}) // returns: [<p style="transform: "matrix3d(2,0,0,0,0,3,0,0,0,0,4,0,0,0,0,1)">Wasabi</p>]
Chirashi.transform(wasabiPea, {rotate: 45}) // returns: [<p style="transform: "matrix3d(0.53,0.85,0,0,-0.85,0.53,0,0,0,0,1,0,0,0,0,1)">Wasabi</p>]
Chirashi.transform(wasabiPea, {rotate: {x: 45, y: 20, z: 15}}) // returns: [<p style="transform: "matrix3d(-0.31,0.65,-0.91,0,-0.65,-0.4,0.85,0,0.91,-0.85,0.21,0,0,0,0,1)">Wasabi</p>]
Chirashi.transform(wasabiPea, {skew: 45}) // returns: [<p style="transform: "matrix3d(1,1.62,0,0,1.62,1,0,0,0,0,1,0,0,0,0,1)">Wasabi</p>]
Chirashi.transform(wasabiPea, {skew: {x: 25, y: 45}}) // returns: [<p style="transform: "matrix3d(1,1.62,0,0,-0.13,1,0,0,0,0,1,0,0,0,0,1)">Wasabi</p>]
Chirashi.transform(wasabiPea, {x: 5, y: 6, z: 7, scale: {x: 2, y: 3}, rotate: {x: 45, y: 20, z: 15}, skew: {x: 25, y: 45}}) // returns: [<p style="transform: "matrix3d(-0.62,2.27,-0.91,0,-0.78,-1.2,0.85,0,0.91,-0.85,0.21,0,5,6,7,1)">Wasabi</p>]

Transformation

Transformation
Properties
x ([number]) : Translation value on x axis in pixels.
y ([number]) : Translation value on y axis in pixels.
z ([number]) : Translation value on z axis in pixels.
scale ([(number | object)]) : Scale value for x and y axes or object of values for axes.
  • scale.x [number]

    Scale value on x axis.

  • scale.y [number]

    Scale value on y axis.

  • scale.z [number]

    Scale value on z axis.

rotate ([(number | object)]) : Rotation value for z axis in radians or object of values for axes.
  • rotate.x [number]

    Rotation value on x axis in radians.

  • rotate.y [number]

    Rotation value on y axis in radians.

  • rotate.z [number]

    Rotation value on z axis in radians.

skew ([(number | object)]) : Skew value for x and y axes in radians or object of values for axes.
  • skew.x [number]

    Skew value on x axis in radians.

  • skew.y [number]

    Skew value on y axis in radians.