Element's query helper (sQuery)

This feature is similar to jQuery, built as part of this framework feature. Have better performance and more smaller size. You can read jQuery's cheatsheet for using this, sQuery may not support some jQuery's feature because this is not supposed to fully replace jQuery.

You can also find sQuery inside of any model/component after it's initialized.

sf.model('test', function(My){
    My.init = function(){
        My.$el('.class').addClass('hello-world');
        // or directly access the HTMLElement of the first index
        My.$el[0].textContent = 'Change text content of a element';
    }
});

When you're using component, My.$el will only have single element. But when you're using model, it may contain every element that using that model.

Polyfill

jQuery may have different API for different version, so you need to polyfill some of them with similar technique to let you feels like at home.

var jQuery = $ = sf.$;
$.extend = Object.assign;
$.isFunction = function(t){return t && t.constructor === Function};
$.isPlainObject = function(obj){return obj && obj.constructor === Object};
$.fn.bind = $.fn.on;
$.fn.unbind = $.fn.off;
$.fn.one = $.fn.once;
$.fn.outerHeight = function(){return this[0].offsetHeight};
$.fn.each = function(callback){
    Array.prototype.forEach.call(this, callback);
};

Callback when website's completed

To call a function when the websites's ready you can use similar technique too. Below will being called after sf.loader was finished loading and you can access all of your model/component.

$(function(){
    // Called when loading completed...
});

Callback when website's loaded

This will called once the document body was parsed, script on head was loaded by the browser, and before $(func) is called. It's located as a callback on sf.loader.

sf.loader.domReady(function(){
    // DOM Ready..
    $('head title').text('hello world');
});

Callback when DOM tree's accessible

Well, we don't need to reinvent the wheel because the browser already have this feature.
If you read from upside to down, actually the call priority is from here to the top xD

$(document).once('load', function(){
    // Do stuff here...
});

Call animation with keyframe name

sQuery also has animateKey for trigger your CSS animation keyframe.

$('.element').animateKey(name, duration, callback);

The duration is in seconds (numeric) and also can be the callback if you passed a function. duration can also being passed with object of:

key	description
duration	The overall animation duration (seconds)
delay	Delay before starting the animation (seconds)
ease	Animation playing speed variation
fill	Set initial style before animating
visible	Does the element should be visible before animation start?
iteration	Number of times for the animation cycles
direction	Set the animation to play backward or forward