JavaScript API - CodeQ

As far as widgets are completely implemented using JavaScript programming language, developers often need to do a lot of work manipulating DOM elements. Because it is critical to keep widgets as small as possible due to eliminating widgets load time it would be useful to have JavaScript framework that eliminates unnecessary DOM elements manipulation to minimum.

There were few really great JavaScript frameworks, but PHPCow developers choose to go their way and implemented small but effective framework named CodeQ.

Framework consists of three major parts - Selector Engine, DOM Manipulation and CSS Manipulation. CodeQ has lot in common with perfect jQuery framework, but it is simpler and smaller, if you are familiar with jQuery than you need to just learn few differences.

Selector engine supports most of the frequently used CSS selectors. For example:

$('#my-element-id > ul li > div.my-class').css('border', '3px solid green');

Shown simple example is quite descriptive for people familiar with CSS selectors. Shown example uses CSS selector that contains ID, Tag and Class selectors. Developers can build quite complicated queries for retrieving DOM elements.

It is possible to pass several selectors at one time, and engine will return results for all selectors. Developer needs to pass selectors separated by commas:

$('div.class-name, #el-id > p, ul li > a').css('border', '3px solid green');

Selector method supports context parameter as well, rather than forcing engine to traverse whole document it is possible to pass context object as second parameter eliminating time for searching desired elements:

var el = someDomElement;
$('a em', el).css('border', '3px solid green');

For manipulating with DOM element's styles, engine provides one method that has double behavior. For example following example will retrieve all <p> tags from the widget and changes borders of found elements:

$('#widget-id p').css('border', '3px solid blue');

Sometimes it is necessary to change several styles for found element, following example shows this technique:

$('#my-element-id > ul li > div.my-class').css(
    {
        border: '3px solid green',
        mariginTop: '6px',
        backgroundColor: '#dedede'
    }
);

As you can see it is possible to pass single JavaScript object to the same method. Besides “css()” method engine supports methods for element's class attribute manipulation:

$('#widget').setClass('my-class')

$('#widget').removeClass('my-class')

$('#widget').addClass('my-class')