Client-side API


Factory

Creating a component

absurd.component ( name of component, object )

var Class = absurd.component('MyComponent', {
    // ...
});
var instance = Class();

absurd.components.register ( name of component, object )

var Class = absurd.components.register('MyComponent', {
    // ...
});
var instance = Class();

Retrieving defined class

absurd.components.get ( name of component )

absurd.component("MyComp", {
    run: function() {
        console.log("run");
    }
});
var Class = absurd.components.get("MyComp");
var instance = Class();
instance.run();

Deleting defined classes

absurd.components.flush ( )

all classes

absurd.components.remove ( name of component )

Getting a list of all the defined components

absurd.components.list ( )

Broadcasting a message to all defined components

absurd.components.broadcast( name of the message, data )

absurd.component('MyCompA', {
    message: function(data) {
        console.log('data: ' + data);
    }
})();
absurd.component('MyCompB', {
    message: function(data) {
        console.log('data: ' + data);
    }
})();
absurd.components.broadcast('message', 42);




Component class API

Properties

__name (string)

Returns the name of the component.

absurd.component('MyComp', {
    constructor: function() {
        console.log(this.__name); // MyComp
    }
})();

listeners (object)

It keeps the current added listeners.

absurd.component('MyComp', {
    constructor: function() {
        this.on('my-custom-event', function() { });
        console.log(this.listeners); // { 'my-custom-event': [] }
    }
})(); 

css (object)

CSS waiting for compilation. Check populate method for details.

html (object)

HTML waiting for compilation. Check populate method for details.

el (DOM element)

The element is available after the calling of populate method.

Methods

constructor ( parameters ... )

The init method of the component. Called when a new instance is created.

absurd.component('MyComp', {
    constructor: function() {
        console.log('created');
    }
})();

ready ( JavaScript Event object )

The method is called when the page is fully loaded. AbsurdJS listens for load (onload under IE) event of the window object.

absurd.component('MyComp', {
    ready: function(e) {
        console.log('DOM is ready');
    }
})();

on ( name of event, handler )

Adding a listener for particular event.

var c = absurd.component('MyComp', {
    run: function() {
        this.dispatch('my-custom-event', { answer: 42 });   
    }
})();
c.on('my-custom-event', function(data) {
    console.log('The answer is ' + data.answer);
}).run();

off ( name of event, handler )

Removing a event listener

var c = absurd.component('MyComp', {
    run: function() {
        this.dispatch('my-custom-event', { answer: 42 });   
    }
})();
c.on('my-custom-event', function(data) {
    console.log('The answer is ' + data.answer); // this is never reached
}).off('my-custom-event').run();

dispatch ( name of event, data )

Triggering an event.

var c = absurd.component('MyComp', {
    run: function() {
        this.dispatch('my-custom-event', { answer: 42 });   
    }
})();
c.on('my-custom-event', function(data) {
    console.log('The answer is ' + data.answer);
}).run();

set( key, value )

Keeping something to the storage. If you use parent as a key it has a special meaning. parent should be a valid DOM element. After the population your component is added as a child of that element.

absurd.component('MyComp', {
    constructor: function() {
        this.set('answer', 42);
        console.log(this.get('answer'));
    }
})();    

get( key )

Retrieving something from the storage.

absurd.component('MyComp', {
    constructor: function() {
        this.set('answer', 42);
        console.log(this.get('answer'));
    }
})();

applyCSS ( data[object], preventComposition[boolean], skipAutoPopulation[boolean] )

The method sets a the data to the css property and calls populate method. Normally uses the html property to compose the CSS object. You may skip this by setting preventComposition = false. If you want to prevent the populate execution then set skipAutoPopulation = false.

JavaScript:
absurd.component('MyComp', {
    html: '.my-class',
    constructor: function() {
        this.applyCSS({
            fontSize: '20px',
            margin: 0
        });
    }
})();
The produced style tag:
<style id="MyComp-css" type="text/css">
.my-class {
  font-size: 20px;
  margin: 0;
}
</style>

applyHTML ( data[object], skipAutoPopulation[boolean] )

It sets a value of the html and calls populate. If skipAutoPopulation = false the population is not performed.

onAnimationEnd ( DOM element, handler )

It listens for animation ending on particular DOM element. If only one parameter is passed then the components el element is used.

onTransitionEnd ( DOM element, handler )

It listens for transition ending on particular DOM element. If only one parameter is passed then the components el element is used.

wire ( name of an event )

It wires the current component to a event dispatched from another component.

absurd.component('MyCompA', {    
    omg: function() {
        console.log('omg');
    }
})().wire('omg');
absurd.component('MyCompB', {
    run: function() {
       this.dispatch('omg'); 
    }
})().run();

populate ( )

Reads css and html properties. It compiles the CSS and the HTML by creating a new <style> tag in the <head> of the document and filling the el property. It also handles the DOM events listening and the asynchronous templating.

JavaScript:
absurd.component('MyComp', {
    css: {
        '.my-component': { fz: '20px' }
    },
    html: {
        '.my-component': {
            p: 'Some text ...'
        }
    },
    constructor: function() {
        this.set('parent', document.body);
        this.populate();
    }
})();
Result:
// in the head tag
<style id="MyComp-css" type="text/css">
.my-component {
  font-size: 20px;
}
</style>

// in the body tag
<div class="my-component">
    <p>Some text ...</p>
</div>

str2DOMElement ( html string )

Converts HTML string to a valid DOM element

var c = absurd.component('MyComp', {})();
var el = c.str2DOMElement('<p><small>test</small></p>');
console.log(el.outerHTML); // <p><small>test</small></p>

addEventListener ( DOM element, name of the event, handler )

Attaches an event listener to DOM element.

var c = absurd.component('MyComp', {})();
c.addEventListener(document.body, 'click', function() {
    console.log('clicked');
});

queue ( array of functions, scope )

Running JavaScript functions in a chain.

JavaScript:
var c = absurd.component('MyComp', {})();
c.queue([
    function(next) {
        console.log(this.name);
        next();
    },
    function(next) {
        console.log(this.name);
        next();
    },
    function(next) {
        console.log('end');
    },
], { name: 'John' });
Result:
John
John
end

qs ( selector, parent )

Alias of document.querySelector. parent is the scope of the query. If it is skipped the local el is got. If el is still not defined then document is used.

qsa ( selector, parent )

Alias of document.querySelectorAll. parent is the scope of the query. If it is skipped the local el is got. If el is still not defined then document is used.

getStyle ( name of a property, DOM element )

If the DOM element is skipped then the local el is used.

addClass ( name of class, DOM element )

If the DOM element is skipped then the local el is used.

removeClass ( name of class, DOM element )

If the DOM element is skipped then the local el is used.

toggleClass ( name of class, DOM element )

If the DOM element is skipped then the local el is used.

replaceClass ( name of class A, name of class B, DOM element )

If the DOM element is skipped then the local el is used.

compileHTML ( HTML as JSON, callback, data )

Using AbsurdJS HTML preprocessing.

var c = absurd.component('MyComp', {})();
c.compileHTML({ 
    header: {
        p: '<% this.text %>'
    }
}, function(err, html) {
    console.log(html); // <header><p>My text here.</p></header>
}, { text: 'My text here.' });

compileCSS ( HTML as JSON, callback, options )

Using AbsurdJS CSS preprocessing.

var c = absurd.component('MyComp', {})();
c.compileCSS({ 
    header: {
        p: { fz: '30px'}
    }
}, function(err, css) {
    console.log(css); // header p{font-size: 30px;}
}, { minify: true });

delay ( interval, function )

Alias of setTimeout, but it keeps the scope.

var c = absurd.component('MyComp', {})();
c.delay(1000, function() {
    console.log(this.__name); // MyComp
});

bind ( function, scope, arguments )

It keeps the scope and passed arguments

var a = absurd.component('BindMethod2', {
    doSomething: function() {
        this.dispatch('bind-event', { data: 'Test' });
    }
})();
absurd.component('BindMethod1', {
    constructor: function() {
        a.on('bind-event', this.bind(this.updateHandler));
    },
    updateHandler: function(data) {
        console.log(this.__name); // BindMethod1
        console.log(data.data); // Test
    }
})();
a.doSomething();

Events

populated

Fired when the populate method finishes its job.

JavaScript:
var c = absurd.component('MyComp', {
    populated: function() {
        console.log('catched');
    },
    run: function() {
        this.populate();
    }
})();
c.on('populated', function() {
    console.log('catched');
}).run();
Result:
catched
catched




comments powered by Disqus