poma

Minimal utility library for working with Node, NodeList and Event objects in modern browsers. Utilizes a functional style without extending any of the built-in DOM objects.

Installation

$ component install mkitt/poma

API

poma.on(node, type, fn)

@returns node

Wrapper around addEventListener. Handles either Node or NodeList elements.

poma.on(elements, 'tap', tapped)

poma.off(node, type, fn)

@returns node

Wrapper around removeEventListener. Handles either Node or NodeList elements.

poma.off(elements, 'tap', tapped)

poma.once(node, type, fn)

@returns node

Adds the event listener(s) and removes them after the first call. Handles either Node or NodeList elements.

poma.once(elements, 'tap', tapped)

poma.event(type, data={})

@returns Event

Create a custom event with an optional data object.

poma.event('custom:event', {bling: 1})

poma.trigger(node, type|event, data={})

@returns node

Dispatches a custom event from the node, with an optional data object. The second option can either be an eventType string or an Event object. If it's an Event object, the data parameter is ignored. Handles either Node or NodeList elements.

// create and dispatch an event..
poma.trigger(document, 'custom:event', {bling: 1})

// dispatch an already created event..
var event = poma.event('custom:event', {bling: 1})
poma.trigger(element, event)

poma.matches

Normalizes the browser name for Element.matches as a cached variable.

if (poma.matches.bind(node)(selector)) {
  nodes.push(node)
}

poma.parentSelector(node, selector)

Returns the first parent element that matches the selector starting at node as a Node object. The selector can either be a class, id or a tag.

var parent = poma.parentSelector(child, '.box')

poma.parentSelectorAll(node, selector)

Returns all parent elements which match the selector starting at node as a native Array object. The selector can either be a class, id or a tag.

var parents = poma.parentSelectorAll(child, 'div')

poma.remove(node)

@returns node

Removes the node and all of it's children from the DOM.

var removed = poma.remove(parent)

poma.insertAfter(node, target)

@returns node

Inserts the node in the DOM after the target element.

var target = document.getElementById('target')
var element = poma.insertAfter(document.createElement('div'), target)

poma.plugin(object, fn)

@returns poma.fn or Error

Allows for creating a reference to another object's method within the poma object. If a function of the same name already exists, the reference is not created and an error is logged.

var obj = {noop: function(){}, remove: function(){}}

// obj.noop can be accessed via poma.noop
poma.plugin(obj, 'noop')
poma.noop()

// reference not created, the original poma.remove function is preserved
poma.plugin(obj, 'remove')

Dollar Sign

Scope the poma object to the $, for easier reference after the poma library has loaded.

if (!window.$)
  window.$ = window.poma

$.on(elements, 'tap', tapped)