eBay Bonzo

Modified version of Bonzo which is a library agnostic extensible DOM utility, in order to be embedded in eBay listing page.

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('<p>the happs</p>')
  .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');

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

• each(callback)
  • callback (element, index)
• map(callback, reject)
  • callback (element, index)
  • reject (element)
• html
  • html() get
  • html(str) set
• text
  • text() get
  • text(str) set
• addClass(c)
• removeClass(c)
• hasClass(c)
• toggleClass(c)
• show()
• hide()
• first()
• last()
• focus()
• blur()
• next()
• previous()
• parent()
• append(html || node)
• appendTo(target || selector)
• prepend(html || node)
• prependTo(target || selector)
• before(html || node)
• insertBefore(target || selector)
• after(html || node)
• insertAfter(target || selector)
• replaceWith(html || node)
• clone()
• css()
  • css(prop) get
  • css(prop, val) set
  • css({properties}) set
• offset()
  • offset(x, y) set
  • offset() get
    • top
    • left
    • width
    • height
• dim()
  • width
  • height
• attr
  • attr(k) get
  • attr(k, v) set
  • attr(obj) set
• removeAttr(k)
• val
  • val() get
  • val(s) set
• data
  • data() get all
  • data(k) get
  • data(k, v) set
• remove()
• empty()
• detach()
• scrollLeft
  • scrollLeft() get
  • scrollLeft(x) set
• scrollTop
  • scrollTop() get
  • scrollTop(y) set
• bonzo.aug({ properties })
• bonzo.doc()
  • width
  • height
• bonzo.viewport()
  • width
  • height
• bonzo.isAncestor(container, child)
• bonzo.noConflict

Added in the Ender bridge

• parents(selector)
• closest(selector)
• siblings()
• children()
• width()
• height()

Setting a query engine host

For the insertion methods you can set a query selector host:

bonzo.setQueryEngine(qwery)
bonzo(bonzo.create('<div>')).insertAfter('.boosh a')

About the name "Bonzo"

Bonzo Madrid was a malicious battle school commander of whom eventually is killed by Ender Wiggin. Bonzo represents the DOM, of whom we'd all love to slay.

Contributing

You should only edit the files in the src/ directory. Bonzo is compiled into the bonzo.js and bonzo.min.js files contained in the root directory by the build command:

Building

$ npm install
$ make

Tests

Point your test browser(s) to tests/tests.html, or:

$ open tests/tests.html

Please try to include tests or adjustments to existing tests with all non-trivial contributions.

Browser support

• IE6+
• Chrome
• Safari 4+
• Firefox 3.5+
• Opera

Ender integration

Bonzo is a registered npm package and fits in nicely with the Ender framework. If you don't have Ender, you should install now, and never look back, ever. As a side note the query engine host is set for you when you include it with Ender.

$ npm install ender -g

To combine Bonzo to your Ender build, you can add it as such:

$ ender build bonzo[ package-b[ package-c ...]]

or, add it to your existing ender package

$ ender add bonzo

Bonzo is included in The Jeesh, Ender's "starter-pack", when you ender build jeesh you'll get Bonzo and some other amazing libraries that'll make working in the browser a breeze. See the Ender documentation for more details.

Contributors

• Dustin Diaz
• Rod Vagg
• Jacob Thornton

Licence & copyright

Bonzo is Copyright © 2012 Dustin Diaz @ded and licensed under the MIT licence. All rights not explicitly granted in the MIT license are reserved. See the included LICENSE file for more details.