That’s a lot of CHI !

About CHI, GUI and stuff.

Very Simple fbQuery.js

leave a comment »

A very simple query function for Facebook I wrote to help us complete our assignment. First let me show you what it can do:

// SAMPLE CODE

$('.upgrade').children('#controller').each(
function(el) {
el.setValue('Myes?');
}
);

// Fetch the element with id = upgrade.
// Then select each of it's children with the class controller.
// Then iterate through al these children and set the value of them to 'Myes?'

And here’s the full code for this function:

/**

  • Very Simple fbQuery.js
  • A very simple $-function for facebook.
  • * @Author: Dries Janssens
  • @Copyright: MIT-license
  • * @Usage:
  • You can query the following:
  • $(element)
  • $('.element_with_id')
  • $('#elements_with_class')
  • $('elements_with_tag')
  • $('<new_element/>')
  • And it returns an array with all the matching results.
  • /

function $( o ) { return new fbQuery( o, document.getRootElement() ); }

function fbQuery( o, parent ) {

this.results = [];

if (typeof o === 'object') {

// It's an object -> It's a DOM Element
this.results = this._object( o );
}

if (typeof o === 'string') {
o = o.trim();

// Starts with -> It's a new element
if ( o.match( /^\$/ ) ) this.results = this._create( o.replace( /^\$/, "$1" ) );

// Starts with an . -> It's an id name
if ( o.match( /^\..*$/ ) ) this.results = this._id( o.replace( /^\.(.*)$/, "$1" ) );

// Starts with an # -> It's a class name
if ( o.match( /^\#.*$/ ) ) this.results = this._class( o.replace( /^\#(.*)$/, "$1" ), parent );

// Contains only letters -> It's a tag name
if ( o.match( /^[A-Za-z]*$/) ) this.results = this._tag( o.toUpperCase(), parent );
}
}

fbQuery.prototype._create = function ( string ) {
return [ document.createElement( string ) ];
}

fbQuery.prototype._object = function ( o ) {
return [ o ];
}

fbQuery.prototype._id = function( string ) {
return [ document.getElementById( string ) ];
}

fbQuery.prototype._class = function( string, parent ) {
var results = [];
return this._iterate( string, 'class', parent, results );
}

fbQuery.prototype._tag = function( string, parent ) {
var results = [];
return this._iterate( string, 'tag', parent, results );
}

fbQuery.prototype._iterate = function( string, type, parent, results ) {
var current = parent.getFirstChild();
while(current !== null) {
if ( current.hasClassName( string ) && type === 'class') results.push( current );
if ( current.getTagName() === string && type === 'tag') results.push( current );
this._iterate( string, type, current, results );
current = current.getNextSibling();
}
return results;
}

fbQuery.prototype.fetch = function () {
return this.results;
}

fbQuery.prototype.children = function( o ) {
if (this.results.length === 1) {
return new fbQuery( o, this.results[0] );
}
}

fbQuery.prototype.each = function( fn ) {
for ( var i = 0; i < this.results.length; i++ ) {
fn( this.results[i] ); // Because fn.call(args) doesn't work on Facebook
}
}

It’s not complete yet. And there probably are some bugs in there. But as far as I tested and need it it’s working pretty good.
Just comment me for extra information.

Advertisements

Written by Dries Janssens

April 1, 2009 at 12:50 pm

Posted in 1

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: