xJay: A new Javascript library

My new way of coding JavaScript allows to concatenate methods. A lot of Ajax libraries do this, but by extending the objects themselves. I think my way is nicer: instead of modifying the objects (HTML elements or core JavaScript objects) directly, I decided to use object wrappers. I named my new library 'xJay'.

The xJay base

// xJay version 1.0
var $={
init:function(){var o=this,p;for(p in o)if(o[p].init)o[p].init(o,p)},
set:function(a,b){var o=a||{},p;for(p in b)o[p]=b[p];return o},
id:function(a){return new this.c.Element(this,a)},
tags:function(a,b){return new this.c.Tags(this,a,b)},
className:function(a,b,c){return new this.c.Tags(this,b||'*',c,a)},
i:function(a,b,c,d){a.P=a.parent=b;a.N=a.name=b;return a},
c:{ // classes
init:function(a,b){
var m=a.i(this,a,b)
m.Element.prototype={
clear:function(a){var o=this;o.O.innerHTML='';return o},
html:function(a){var o=this;o.O.innerHTML+=a;return o},
set:function(a,b){var o=this,m=o.P,q=o.O;m.set(q,a);m.set(q.style,b);return o},
style:function(a){var o=this;o.P.set(o.O.style,a);return o},
hide:function(){var o=this;o.P.set(o.O.style,{display:'none'});return o},
show:function(){var o=this;o.P.set(o.O.style,{display:'block'});return o},
text:function(a){var o=this;return o.O.innerHTML.replace(/<[^>]*>/g,'')}
}
m.Tags.prototype={
set:function(a,b){var o=this,q=o.O,n=q.length,i,f=o.P.set;for(i=0;i<n;i++){f(q[i],a);f(q[i].style,b)};return o},
style:function(a){var o=this,q=o.O,n=q.length,i,f=o.P.set;for(i=0;i<n;i++){f(q[i].style,a)};return o},
cast:function(a){var o=this,i,n=o.O.length;for(i=0;i<n;i++)a(o[i]);return o},
first:function(){var o=this;return o.P.id(o.O[0])},
last:function(){var o=this;return o.P.id(o.O[o.O.length-1])}
}
},
Element:function(a,b){var o=a.i(this,a,b);o.O=o.self=b.tagName?b:document.getElementById(b)},
Tags:function(a,b,c,d){
var o=a.i(this,a,b),q=(c||document).getElementsByTagName(b),v=[],i,n
if(d){n=q.length;for(i=0;i<n;i++)if(q[i].className==d)v.push(q[i]);q=v}
o.O=o.self=q
}
}, // end classes
toString:function(){return 'xJay version 1.0'}
}
window.onload=function(){$.init()}

The complete script library uses only one single global namespace: '$' which name can be changed if you want to avoid conflicts with other JavaScript libraries.

To avoid having to rewrite all the properties and methods of the wrapped objects, the original object can be addressed by the wrapper.self property.

Sample use

This is the sample use of xJay in my new Domino Sitebuilder version. The code adds behaviour to a button and converts a field value on page load, does field validations with highlighting the missing parts in red based on the form type and hides the submit buttons and shows a processing message when submitting a form:

$.form={
init:function(){
    var m=this,o=m.f=$.id('notesForm'),oo;if(!o.self)return
    o.set({onsubmit:m.validate})
    $.id('btnNoClose').set({onclick:m.noClose})
    oo=$.id('fDefaultMaster').self
    if(oo)oo.value=oo.value.replace(/@#@/g, '[%')
},
validate:function(){
    var m=$.form,o=m.f.self,f=m.notEmpty,v=false
    try{
        switch(o.className){
        case 'dbsetup': v=true;break
        case 'stylesheet': v=f(o.Subject);break
        case 'blog': v=f(o.Subject) && f(o.MenuLabel);break
        default: alert('no validation for '+m.f.self.className)
        }
    }catch(e){}
    if(v){$.id('submitActions').hide();$.id('submitMessage').show()}
    return v
},
notEmpty:function(a){var o=a.parentNode,v=a.value=='';o.className=v?'not-valid':'';return !v},
noClose:function(){$.form.f.self.action+='&continue_editing'}
}

Next?

I continued my work on the Domino Sitebuilder on a brand new database. I re-used my Fantascene application. Because it's the Christmas period, it has a distinct theme I found via Smashing Magazine. Have a nice Domino Christmas.