The structure of Ojay

Ojay is packaged as a series of JavaScript files that provide different modules of the library. When you download Ojay, you’ll be presented with the following folder structure:

  • js-class.js
  • core.js
  • all.js
  • /pkg
    • forms.js
    • history.js
    • http.js
    • keyboard.js
    • mouse.js
    • overlay.js
    • paginator.js

Let’s go through each item:

js-class.js

This file is a distribution of a subset of James Coglan’s JS.Class library, which provides a Ruby-like object orientation framework for JavaScript. This distribution includes Class, Module, Singleton, Interface, MethodChain, Observable and State. More information on this library can be found via its website

The file js-class.js is required by the Ojay core, and must be included before it on your web pages.

pkg

The pkg directory contains ‘packages’ – add-ons to the Ojay core that provide specialised pieces of functionality. These currently include:

  • forms.js – Provides for easy styling and validation of form inputs
  • history.js – A wrapper for YAHOO.util.History for back button management
  • http.js – A wrapper for YAHOO.util.Connect for Ajax
  • keyboard.js – Allows easy management of responses to keyboard input
  • mouse.js – Tracks mouse movements and provides mouseenter/mouseleave events
  • overlay.js – A simple library for overlaying content on top of the document
  • paginator.js – Implements classes for scrolling and lazy-loading paged content

core

core.js contains the Ojay core libraries. These provide DOM manipulation, event management, animation, and some extensions to JavaScript’s Array, String and Function classes.

all.js includes everything in the download in a single file. It’s a little large, but you can use it if you don’t want to worry about dependencies.

A typical page setup

Here’s a list of files you’d typically include in your page to get Ojay running:

  • http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js
  • http://yui.yahooapis.com/2.6.0/build/selector/selector-beta.js
  • http://yui.yahooapis.com/2.6.0/build/animation/animation.js
  • http://yoursite.com/ojay/js-class.js
  • http://yoursite.com/ojay/core.js

If you’re using Ajax, include these:

  • http://yui.yahooapis.com/2.6.0/build/connection/connection.js
  • http://yoursite.com/ojay/pkg/http.js

If you need back-button management, include these:

  • http://yui.yahooapis.com/2.6.0/build/history/history.js
  • http://yoursite.com/ojay/pkg/history.js