Oak Dom

Dom manipulation package for the Oak javascript suite.

Installation

$ bower install oak-dom

Examples

Hint: spec/dom.js contains some great examples

// Building, inserting, hiding and showing content
var
    content = oak.build('<artricle><h1>Hello World</h1></artricle>'),
    section oak.strap("#my-section");

section
    .addClass('loading')
    .hide()
    .html(content);

function onLoad() {
    section
        .removeClass('loading')
        .show();
};

// Setting CSS transform property
section.transform('rotateY', '180deg');

// And calling later, transform will maintain rotation value adding scale to definition
section.transform('scale', '0.5');

Documentation

Exposed Functions

addClass strap.addClass(val)

append strap.append(val)

Takes either a node, strap or string and appends it to the strapped elements

var text = oak.build("<strong>Fancy</strong>");
oak.strap(".fancy").append(text);

asString strap.attribute()

attribute strap.attribute(key, val)

bounds strap.bounds()

className strap.className(class)

contains strap.contains(child)

css strap.css(val)

find strap.find(val)

Uses querySelectorAll to find dom elements within a strapped collection. Returns the results as a new strapped collection.

forceEvent strap.forceEvent(eventName)

hasClass strap.hasClass(class)

hide strap.hide()

html strap.html(val)

next strap.next(selector)

offset strap.offset()

prepend strap.prepend(val)

prev strap.prev(selector)

remove strap.remove()

removeClass strap.removeClass(class)

scroll strap.scroll(scrollTop)

show strap.show()

transform strap.transform(prop, val)

visible strap.visible(val)

x strap.x()

Returns the translatX value

y strap.y()

Returns the translatY value

Extensions

build oak.build(val)

Builds a node using the passed string

contains oak.contains(parent, child)

Return true if the parent element contains the child

domReady oak.domReady(callback)

Add a callback for when the DOM is loaded.

find oak.find(val)

findAll oak.findAll(val)

hasClass oak.hasClass(targ, class)

toDash oak.toDash(val)

Converts a DOM style string into a dashed style property.

// Returns -webkit-animation
oak.toDash("webkitAnimation");

toStyle oak.toStyle(val)

Converts a dashed string into a DOM style property.

// Returns webkitAnimation
oak.toStyle("-webkit-animation");