bonzo

Bonzo

A library agnostic extensible DOM utility. Nothing else.

Bonzo is designed to live in any host library, such as Ender, or simply as a stand-alone tool for the majority of your DOM-related tasks.

It looks like this:

bonzo(elements)
  .hide()
  .addClass('foo')
  .append('
the happs
')
  .css({
    color: 'red',
    'background-color': 'white'
  })
  .show()

---

• Use with a selector engine
• Bonzo extension API
• Complete Bonzo API
• About the name "Bonzo"
• Contributing:
  • Building
  • Tests
• Browser support
• Ender integration
• Contributors
• Licence & copyright

---

Use with a selector engine

A great way to use Bonzo is with a selector engine, like Qwery. You could wrap Bonzo up and augment your wrapper to inherit the same methods:

function $(selector) {
  return bonzo(qwery(selector))
}

This now allows you to write the following code:

$('#content a[rel~="bookmark"]').after('√').css('text-decoration', 'none')

See bonzo.setQueryEngine() for more details.

Bonzo extension API

One of the greatest parts about Bonzo is its simplicity to hook into the internal chain to create custom methods. For example you can create a method called color() like this:

bonzo.aug({
  color: function (c) {
    return this.css('color', c);
  }
})

// you can now do the following
$('p').color('aqua')

Complete Bonzo API

• bonzo()

Instance methods

• bonzo().get()
• bonzo().each()
• bonzo().deepEach()
• bonzo().map()
• bonzo().html()
• bonzo().text()
• bonzo().addClass()
• bonzo().removeClass()
• bonzo().hasClass()
• bonzo().toggleClass()
• bonzo().show()
• bonzo().hide()
• bonzo().toggle()
• bonzo().first()
• bonzo().last()
• bonzo().next()
• bonzo().previous()
• bonzo().parent()
• bonzo().focus()
• bonzo().blur()
• bonzo().append()
• bonzo().appendTo()
• bonzo().prepend()
• bonzo().prependTo()
• bonzo().before()
• bonzo().insertBefore()
• bonzo().after()
• bonzo().insertAfter()
• bonzo().replaceWith()
• bonzo().css()
• bonzo().offset()
• bonzo().dim()
• bonzo().attr()
• bonzo().removeAttr()
• bonzo().val()
• bonzo().data()
• bonzo().remove()
• bonzo().empty()
• bonzo().detach()
• bonzo().scrollLeft()
• bonzo().scrollTop()

Static methods

• bonzo.aug()
• bonzo.doc()
• bonzo.viewport()
• bonzo.firstChild()
• bonzo.isAncestor()
• bonzo.create()
• bonzo.setQueryEngine()

Added in the Ender bridge:

• $().parents()
• $().closest()
• $().siblings()
• $().children()
• $().width()
• $().height()

---

bonzo(DOMElement | ArrayLikeDOMElementCollection)

Factory function for bonzo objects. Takes in either a single DOMElement, or an array-like object or array of them. Returns an array-like Bonzo object possessing all of the instance methods documented below.

var elem = document.getElementById('foo');
var $elem = bonzo(elem);
// $elem now has all the special powers listed below...

---

bonzo().get(index)

Returns the raw DOMElement held at index. Because Bonzo objects are array-like, this is identical to saying bonzo()[index].

var elem = document.getElementById('bar');
var $elem = bonzo(elem);
var sameElem = $elem.get(0);
var sameElemAgain = $elem[0];
// elem === sameElem && sameElem === sameElemAgain

---

bonzo().each(fn[, scope])

Allows you to iterate over the raw elements contained in bonzo collections. fn gets called once for each element in the collection, with each element, in turn, as its first argument. If the optional scope argument is supplied, then it is used as the this value of the function. Otherwise, the same element that is passed as the first argument is used. The index of the element is passed as the second argument, and the collection itself is passed as the third.

---

bonzo().deepEach(fn[, scope])

deepEach() ...

---

bonzo().map(fn[, rejectFn])

map() ...

---

bonzo().html([content])

bonzo.html() either sets or gets the elements' innerHTML to content, depending if the optional content argument is pased in. If called without the argument, .html() returns the element's innerHTML.

• content is an optional argument. If it is passed in, it will set the innerHTML of a given element and return a Bonzo object.

Examples

bonzo(element).html('
foo
');
bonzo(element).html(); // 
foo

---

bonzo().text([content])

bonzo.text() is very similar to .html, but uses the elements' textContent instead of innerHTML when setting the content. Thus, the content will not get parsed as markup.

This method either gets or sets the text of a given element, depending if the optional content argument is passed in.

• content is an optional argument. If it is passed in, it will set the text value of a given element and return a Bonzo object.

If no content is specified, the .text() method will return the text that makes up that element.

If the element has children (i.e. a ul containing several li children), the children's text is included in the return value.

Examples

bonzo("
hello, world
").text()
  // →  returns "hello, world"

bonzo("
i'm going to change
").text("changed you!")
  // the 
 now says "changed you!"
  // →  returns a Bonzo object

bonzo("

one

two

").text()
  // →  returns "one
  // two"

bonzo("

one

two

").text('hello')
  // the html is now 
hello

  // →  returns a Bonzo object

---

bonzo().addClass(class | classList)

bonzo.addClass(class | classList) adds the specified class to the given element. It returns a Bonzo object.

• class is a required argument. It is the name of the class you wish to add to the given element.

  • If you'd like to add multiple classes at once, simply use a space-separated string, a classList (i.e. "classOne classTwo").

Examples

bonzo("
hello, world
").addClass('big')
  // the html is now 
hello, world

  // →  returns a Bonzo object

bonzo("
hello, world
").addClass()
  //  throws an error, since the argument is required

bonzo("
i want lots of classes
").addClass("one two three")
  // the html is now 
i want lots of classes

  // →  returns a Bonzo object

---

bonzo().removeClass(class | classList)

bonzo.removeClass(class) removes the specified class from the given element. It returns a Bonzo object.

• class is a required argument. It is the name of the class you wish to remove from the given element.

  • If you'd like to remove multiple classes at once, simply use a space-separated string, a classList (i.e. "classOne classTwo").

Examples

bonzo("
hello, world
").removeClass('small')
  // the html is now 
hello, world

  // →  returns a Bonzo object

bonzo("
hello, world
").removeClass()
  //  throws an error, since the argument is required

bonzo("
i have lots of classes
").removeClass("one two three")
  // the html is now 
i have lots of classes

  // →  returns a Bonzo object

bonzo("
hello, world
").removeClass('does_not_exist')
  // →  since the argument does not match a classlist the 
 has, nothing happens and a Bonzo object is returned

---

bonzo().hasClass(class | classList)

bonzo.hasClass(class) returns true or false, based on whether or not the specified element has a given class. It returns true if the specified element does have the class, and returns false if the specified element does not have the class.

• class is a required argument. It is the name of the class you wish to check for in a given element.

  • NOTE: if you pass in a space-separated classList like you can in addClass and removeClass, this method will return true if any of the space-separated classList classes are present in the element.

Examples

bonzo("
something went wrong
").hasClass('alert')
  // →  returns true

bonzo("
something went wrong
").hasClass('normal')
  // →  returns false

bonzo("
something went wrong
").hasClass('one two three')
  // →  returns true

bonzo("
something went wrong
").hasClass('three two one')
  // →  returns true

bonzo("
something went wrong
").hasClass('small tiny')
  // →  returns false

---

bonzo().toggleClass(class | classList)

bonzo.toggleClass(class) either adds or removes a specified class to the given element, depending on whether or not the given element already has a class with that class or not.

If the element does have a class named class, calling toggleClass() will remove the class class from it. If the element does not have a class with the specified class, calling toggleClass() will add a class with that class.

• class is a required argument. It is the name of the class you wish to toggle.

  • If you'd like to toggle multiple classes at once, simply use a space-separated string, a classList (i.e. "classOne classTwo").

Examples

bonzo("
something went wrong
").toggleClass('alert')
  // the html is now 
something went wrong

  // →  returns a Bonzo object

bonzo("
something went wrong
").toggleClass('different')
  // the html is now 
something went wrong

  // →  returns a Bonzo object

bonzo("
something went wrong
").toggleClass('three two one')
  // the html is now 
something went wrong

  // →  returns a Bonzo object

bonzo("
something went wrong
").toggleClass('small tiny')
  // the html is now 
something went wrong

  // →  returns a Bonzo object

---

bonzo().show([type])

bonzo.show() sets a given element or set of elements' display style property. By passing in an optional type argument, you can specify the attribute of the display property Bonzo gives the element(s).

• type is an optional argument. It is the display type you wish to utilize.

If you specify an unsupported type (i.e. something other than block, compact, inline-block, inline, inline-table, list-item, run-in, table, table-caption, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, or table-row-group), Bonzo will ignore the invalid type.

Examples

bonzo("
I was hidden
").show()
  // html is now 
I was hidden

  // →  returns a Bonzo object

bonzo("
I was hidden
").show('inline-block')
  // html is now 
I was hidden

  // →  returns a Bonzo object

---

bonzo().hide()

bonzo.hide() adds a display: none; to the specified element.

Examples

bonzo("
Hello, world
").hide()
  // html is now 
Hello, world

  // →  returns a Bonzo object

---

bonzo().toggle([callback[, type]])

toggle() ...

---

bonzo().first()

bonzo.first() returns a Bonzo object referencing the first element in a set of elements. If the set is empty, the a Bonzo object will still be returned, but it won't contain any children.

Examples

var firstItem = bonzo("
one

two

three
").first()
firstItem.text() // "one"
firstItem.length // 1
  // →  returns a Bonzo object

var el = bonzo("").first()
el.text() // ""
el.length // 0
  /