xone_core.md

Xone Core API

DOM Query Helpers

CORE.getById('element-id');
CORE.getByClass('active', 'context-element-id');
CORE.getByTag('td', 'context-element-id');

CORE.query('#element-id .active');
CORE.query('#element-id img');
CORE.query('img.active');

DOM Class Helpers

// register asynchron callbacks:
CORE.toggleClass('element-id', 'active', function(){
    
    // 'this' points to the target element:
    if(CORE.hasClass(this, 'active')) {
        
        // pass multiple targets:
        CORE.removeClass([
            
            '1st-id', 
            '2nd-id', 
            '3rd-id'
            
        ], 'active');
    }
    else {
        
        // pass multiple classes:
        CORE.addClass('element-id', [
            
            'active', 
            'hover'
        ]);
    }
});

DOM Paint Helpers

// manipulate dom on next refresh (async):
CORE.paint(function(){
 
    // basic usage:
    if(CORE.getStyle('element-id', 'visibility') === 'visible'){
        
        // setting a style performs async paint automatically:
        CORE.setStyle('element-id', 'display', 'block');
    }
    
    // pass in array of elements and/or style:
    CORE.setStyle([
        
        '1st-id', 
        '2nd-id', 
        '3rd-id'
    ],{
        'display': 'block',
        'visibility': 'visible'
    });
    
    // shortcut:
    CORE.toggleStyle('element-id', 'display', [
        
        'block', 'none'
    ]);
});

Async Helpers

Unordered:

CORE.async(function c(){
    alert("3rd");
}, 500);

CORE.async(function a(){
    alert("1st or 2nd");
});

CORE.async(function b(){
    alert("2nd or 1st");
});

Ordered:

CORE.queue(function a(){
    alert("1st");
}, 500);

CORE.queue(function b(){
    alert("2nd");
});

CORE.queue(function c(){
    alert("3rd");
});

Unregister:

var timer = CORE.async(function(){ /* ... */ }, 1000);

if(something_goes_wrong) CORE.clear(timer);

Debug Helpers

Global switch has to be set to true:

CONFIG.debug = true;

Logger:

Console.log("Message");
Console.log("Object loaded:", obj);
Console.warn("Warning Message");
Console.err("Error Message");

Manage Console:

Console.show();
Console.hide();
Console.clear();

Basic Helpers

var str = CORE.paramsToString(params);
var arr = CORE.unique(arr);
var arr = CORE.reverse(arr);
var arr = CORE.shuffle(arr);
var num = CORE.formatNumber(num, 2, '.', ',');
var str = CORE.crc32("something");
var has = CORE.contains(arr, item);

Loader:

CORE.preloadImages([
    
    'img/1.jpg',
    'img/2.jpg',
    'img/3.jpg'
    
], function(){
    
    alert("Ready!");
});

CORE.loadScript([
                    
    'js/script_a.js',
    'js/script_b.js',
    'js/script_c.js'
    
], function(){
     
     alert("Ready!");
 });

CORE.loadStyle([
                    
    'css/style_a.css',
    'css/style_b.css',
    'css/style_c.css'
    
], function(){
     
     alert("Ready!");
});

Native Helpers

Define Array Loop:

var fn_each = CORE.registerEach(function(data){
    // do something with data
    console.log(data.value);
});

fn_each([
    {value: 'foo'},
    {value: 'foo'},
    {value: 'foo'}
]);

Define Array Filter:

var fn_filter = CORE.registerFilter(function(data){
    // keep only data with foo
    return data.value === 'foo';
});

var arr_filtered = fn_filter([
    {value: 'foo'},
    {value: 'foo'},
    {value: 'foo'}
]);

Define Array Map:

var fn_map = CORE.registerMap(function(data){
    // set each value to bar
    return 'bar';
});

var arr_mapped = fn_map([
    {value: 'foo'},
    {value: 'foo'},
    {value: 'foo'}
]);