In the prototype I implemented the box filter documented out at Gamasutra. The blur function is applied to 6 canvas at every 100ms. Just chrome can run it smoothly….Maybe Firefox 4 can do that too, but I didn’t test it on FF4, also the mp3 may not be able to play on it…The link to the prototype (Google Chrome Only).

Screen shot with the audio mixer. Let’s play~

There is a XUL reference in MDC(https://developer.mozilla.org/en/XUL_Reference). It listing out objects and its associated attributes, properties, and methods, but seems not all the reference are update and complete. Sometimes I don’t even know what kind of xul object I am dealing with, I need to have something like var_dump or print_r in PHP. And I have written my own object dumping function.

My dump function:

myUtil = {
dump:function(o,depth,name,filter,filterMode) {
    var doc = gBrowser.contentDocument,
        el = doc.getElementById("fduDump"),
        str = "" || name + "\n",
        depthLimit = depth || 1,
        filterDefaultMode = filterMode || 1;
    // filterMode is either 1 or -1.
    // 1 => Like the iptable Allow all, it dig into all object exclude object name in the filter object
    // -1 => Like the iptable Deny all, it will not dig into any object unless object name is inside the filter

    if ( !el ) {
        el = doc.createElement("pre");
        el.id = "fduDump";
        doc.body.appendChild(el);
    }

    var transverse = function(o,thisLv,name,filter) {
        var indent = "", i, tmp, filterMode, dig, f;
        if ( filter && filter.__mode ) {
            filterMode = filter.__mode;
        } else {
            filterMode = filterDefaultMode;
        }
        for ( i = 0 ; i < thisLv ; i++ ) {
            indent += "    ";
        }

        if ( name ) {
            str += "\n" + indent + "=== lv "+thisLv+", Start "+name+" ===\n";
        }

        if ( o && thisLv < depthLimit ) {
            for ( k in o ) {
                try{
                    tmp = o[k] + "";
                    tmp = tmp.split("\n");
                    tmp = tmp.join("\n"+indent);
                    str += indent + k + " : " + tmp + "\n";
                    if (typeof(o[k]) === "object" && o[k] && thisLv + 1 < depthLimit ) {
                        if ( filter && typeof filter[k] !== "undefined") {
                            dig = (filterMode === -1);
                        } else {
                            dig = (filterMode === 1);
                        }
                        if ( dig ) {
                            if ( filter && filter[k] ) {
                                f = filter;
                            } else {
                                f = null;
                            }
                            transverse(o[k], thisLv + 1, k, f);
                        }
                    }
                } catch (e) {
                }
            }
        }

        if ( name ) {
            str += indent + "=== lv "+thisLv+", End "+name+" ===\n\n";
        }
    }
    transverse(o,0,"",filter);
    el.innerHTML = str;
}
}

Calling the dump function:

// e.g. here I amd dumping the event object form a "TabSelect" event
// 1st param is object to be dumped
// 2nd param is the depth (optional, default = 1)
// 3rd is just a string to be shown in the first line of the dump (optional default = "")
// 4th is filter (optional)
// 5th is default filter mode (optional default = 1, dump all properties exclude specified in filter object)
myUtil.dump(evt,2,"tabEvent",{"__mode":-1,"target":null});

// if you just want to dump an object itself, you can simply: myUtil.dump(evt);

Sample output of the dump

tabEvent
originalTarget : [object XULElement]
preventCapture : function preventCapture() {
    [native code]
}
target : [object XULElement]

    === lv 1, Start target ===
    _tPos : 0
    linkedBrowser : [object XULElement]
    ...
    selected : true
    _selected : undefined
    linkedPanel : panel1259045062233
    ...
    tagName : xul:tab
    ...
    nodeName : xul:tab
    ...
    className : tabbrowser-tab
    ...
    === lv 1, End target ===

cancelable : false
currentTarget : [object XULElement]
timeStamp : 1172581376
bubbles : true
type : TabSelect
eventPhase : 3
preventDefault : function preventDefault() {
    [native code]
}
initEvent : function initEvent() {
    [native code]
}
stopPropagation : function stopPropagation() {
    [native code]
}
CAPTURING_PHASE : 1
AT_TARGET : 2
BUBBLING_PHASE : 3
explicitOriginalTarget : [object XULElement]
preventBubble : function preventBubble() {
    [native code]
}
...

By dumping the event object and the target in the event object, there are something useful can be found. In the TabSelect Event, there is target, originalTarget, currentTarget, explicitOriginalTarget!?
And in the target object, it has a tagName and nodeName equals to “xul:tab”, so now I can be sure it is a “tab” object instead of tabPanel, tabbox, or tabbrowser….Also it has a linkedBrowser object which is the browser object contained in the tab. This is not documented in the xul reference…maybe they don’t want us to use it? Have fun dumping.

Other resources on message logging and debugging in writing Firefox addon:

https://developer.mozilla.org/en/JavaScript_Console

http://www.borngeek.com/firefox/toolbar-tutorial/chapter-8/

if (element.className === "classA") {...}

or

if (element.className.indexOf("classC") > -1) {...}

Sure we can do it with regular expression but there are faster way to do it.

I use YUI all the time and there is a YAHOO.util.Dom.hasClass, I read the source code and found they got a clever way to do it. It just add space in front and behide the className and do a indexOf. But one thing to note that you should not add the space to the className property directly instead you obtain a copy of the className string by getAttribute.

The code will look like:

function hasClass(el, class_to_match) {
    var c;
    if (el && el.className && typeof class_to_match === "string") {
        c = el.getAttribute("class");
        c = " "+ c + " ";
        return c.indexOf(" " + class_to_match + " ") > -1;
    } else {
        return false;
    }
}

Tidy and neat!

IE 6 had a handy document.body.scrollWidth and document.body.scrollHeight to check the size of body element. Just one thing to note with document.body.scrollHeight is that If the total height of the content is less than the view port / screen size, you will need to use document.body.clientHeight.

While for Firefox, I just need to go through different properties in the window object and body element to find the correct numbers for the calculation.

width = window.scrollMaxX + document.body.clientWidth;
height = window.scrollMaxY + document.body.clientHeight;

Do not mistaken window.innerWidth and window.innerHeight into above as innerWidth and innerHeight will include the scrollbar (if there aren’t any scrollbar, window.innerWidth will equals to document.body.clientWidth and window.innerHeight will equals to document.body.clientHeight)

There are different ways of making custom event to works, following will show:
1. Using jQuery.bind and jQuery.trigger
2. Using the jQuery plugin jQuery.mhub

Using jQuery.bind and jQuery.trigger

Have searched for how to have custom event on jQuery, found that yoan’s Introduction to jQuery’s custom event had some good insight. He had achieved it by using the bind and trigger function in jQuery. I have referenced his blog and the API from jQuery and created a rather primitive sample.

var count = 0;
var elLog = document.getElementById("log");

// trigger the ticker event into body element
setInterval(function() {
    $("body").trigger("ticker",{name:"my name is foo",count:count++});
},3000);

$("body").bind("ticker",gFunc);

function gFunc(evt,msg) {
    elLog.innerHTML += "gFunc triggered<br/><br/>";
}

var myApp = {
    name:"app1",

    init:function() {
        var that = this;
        // bind the _handlerTicker function to the ticker event of body element
        $("body").bind("ticker",function() {that._handlerTicker.apply(that,arguments)});
    },

    _handlerTicker:function(evt,msg) {
        elLog.innerHTML += this.name + "<br/>";
        elLog.innerHTML += "event name: " + evt.type + "<br/>";
        elLog.innerHTML += "msg content: name = " + msg.name + ", count = " + msg.count + "<br/><br/>";
    }
}
myApp.init();

The sample in action

My sample code above works but with some draw backs:
1. The custom event need to associated with a dom element which have nothing to do with it, here is the body element.
2. When dealing with a large application / working with different plugin / mashup, we could end up with a name collision on the custom event.

Using the jQuery plugin jQuery.mhub

To tackle the problems listed above, I created a message hub plugin, jQuery.mhub. This jQuery.mhub employ a factory design. It only contains one single method:

var demoHub = jQuery.mhub.create();

Which return a message hub object with the following methods:

demoHub.add(String NAME);
demoHub.remove(String NAME);
demoHub.send(String NAME, Object MESSAGE );
demoHub.listen(String NAME, Function HANDLE_FN, Object SCOPE );

Here is a sample to see how the jQuery.mhub works. By using the jQuery.mhub, the above 2 problems state can be solved.

1. The custom event no longer tide up with a dom element.
2. mhub object are created from jQuery.mhub.create();, you can get your own mhub without sharing it to other component and avoid name collision

A primitive sample of jQuery.mhub.

The source code:

var count = 0;
var elLog = document.getElementById("log");
var demoHub = jQuery.mhub.create();

demoHub.add("ticker");

setInterval(function() {
    demoHub.send("ticker",{name:"my name is foo",count:count++});
},3000);

demoHub.listen("ticker", globalFunc);

function globalFunc(evt,msg) {
    elLog.innerHTML += "globalFunc triggered<br/><br/>";
}

var myApp = {
    name:"app1",

    init:function() {
        demoHub.listen("ticker", this._handlerTicker, this);
    },

    _handlerTicker:function(name,msg) {
        elLog.innerHTML += this.name + "<br/>";
        elLog.innerHTML += "event name: " + name + "<br/>";
        elLog.innerHTML += "msg content: name = " + msg.name + ", count = " + msg.count + "<br/>";
    }
}

myApp.init();

Here i created a quote panel which use YUI, jquery, flot extension on jquery, my yqlClient…etc. Everything done with HTML, CSS, Javascript. 0 lines PHP. But there are problems that as cookie was used as a permanent storage, so user cannot bring along the data when they switched a browser / computer…

This application used a html page in Yahoo! Finance, a xml call from the flash chart, Yahoo news RSS feed. Then use YQL to pulling the data and re-construct the interface in the way I want. This is fun that with the help of YQL, data can be pulled together quickly and creating some demo app in a short time to get user feedback and change again.

The quote panel.

Screen cap of the quote panel

While a JSONP will look like:
js_function({key1:”value1″,key2:10.35});

Which the return string from server will be a valid javascript function call and passing a object literal (or the original JSON string) into the function. For more on JSONP, there is an article on Ajaxian.

As you can see above, the handling function will be a global functions in order to make the JSONP to work. Also, the scope of the calling function / object will be completely loss. So I created a simple YQL client which do the auto scope fixing. It works like YUI2′s connection manager and support a callback object which you can specify a method to handle the JSON return, the scope of “this” object, timeout of your YQL call, and pass on argument to the handling function.

Here is a simple demo using the javascript yql client to get the digg’s rss feed.

SELECT * FROM flickr.photos.search WHERE text="cat"

Means to do a flickr search on photo with the text equals to cat. But the thing that catch me is the capability to convert the content (HTML page) from an external site to a well formatted XML / JSON.

select * from html where url="http://news.yahoo.com/"
and xpath="/html/body/div[@id='doc4']/div[@id='bd']/div[@id='yui-main']/div/div[@id='top-story']/div/div[1]/div[2]/h2/a"

The YQL above will return the headline from Yahoo! news. The xpath part looks pretty scary, but with the xpather firefox addon, you can get the xpath on any DOM element with right click -> Show in XPather. (P.S. One thing to notice with xpather is the tbody tag, which firefox will add to its DOM tree for table which might not really exist in the source HTML. This extra tbody will make YQL returns nothing as it never exists in the HTML code.)

This is an excellent tool for the Javascript. Imagine that if you are going implement a RSS reader, without YQL, the RSS reader application must prepare all the data at the server side and send back to the client (like Fig.1). This is bad for performance as curl call are blocking calls while consuming YQL at client browser can be asynchronous and parallel. This sounds wise to offload those data crawling process to the client (like Fig.2).

Fig. 1 The web application prepare all the data at the server side

Fig. 2 Offloading the blocking curl calls to client side parallel YQL request.

Features:

1. Convert timestamp to date, click on the log to navigate the calendar
2. Convert seconds / minutes into number of days, hours
3. Arrow key to navigate the calendar (only when focus is not on the text field )

Screen cap of the timestamp converter