Moff

Moff has a rich API to work with mobile first approach. It has a big number of modules to work with detection, event system and AMD.

addClass(element, classNames)

Adds class name to element.

Arguments:

element - HTML element.
classNames - Class name or several class names separated by space.

var element = document.querySelector('.content');

Moff.addClass(element, 'first-child __active');

afterLoad(callback)

Adds callback after content loading collection. This callback will be executed when content be loaded via Data Events.

Arguments:

callback - Callback function

Moff.afterLoad(function() {
	// do something after content loading
});

ajax(options)

Make asynchronous JavaScript XMLHttpRequest (AJAX).

Arguments:

options - Object with the following properties:
type - Type of HTTP request. GET or POST
url - String containing the request URL
data - String or object with data to be sent to the server
crossDomain - Boolean to determine whether request is cross domain
contentType - Content type of sending data. Default is "application/x-www-form-urlencoded; charset=UTF-8"
success(result) - Callback for success request. Gets result responded by the server.
error(xmlHttp) - Callback for error request. Gets XMLHttpRequest.

Moff.ajax({
	type: 'GET',
	url: 'post/24/comments',
	success: function(comments) {
		addComments(comments);
	}
});

beforeLoad(callback)

Adds callback before content loading collection for data events.

Arguments:

callback - Callback function

Moff.beforeLoad(function() {
	// do something before content loading
});

each(array, callback)

Iterates over objects, arrays and array-like objects, eg. HTMLCollection or NodeList. If callback return false , loop will be break.

Arguments:

array - Array or object to iterate over
callback(key, value) - Callback will be executed on each iteration. It gets two arguments:
key - integer index if the first argument is array or string if object.
value - value if the first argument is array of value of property if object.

Moff.each({one: 1, two: 2}, function(key, value) {
	// Use object key and value
});
Moff.each(['one', 'two'], function(index, value) {
	// Use array index and value
});

error(error)

Throws passed error. Shows error with stack.

Arguments:

error - Error object

try {
	// Run some logic here
} catch (error) {
	Moff.error(error);
}

getMode()

Get current view mode.

Returns one of these values: xs, sm, md or lg.

Moff.getMode(); // xs, sm, md or lg

handleDataEvents()

This method handle all new elements added to the page dynamically.

Moff.ajax({
	type: 'GET',
	url: '/new-content',
	success: function(html) {
		target.innerHTML = html;
		Moff.handleDataEvents();
	}
});

hidePreloader()

Hides preloader on the page.

Moff.hidePreloader();

inViewport(element)

Determines whether DOM element in view port.

Returns boolean.

Arguments:

element - DOM element

var module = document.querySelector('.module');

if (Moff.inViewport(module)) {
	// Element in view port
}

loadCSS(href, callback)

Load CSS file and run callback when it be loaded. It does not load file if it is already included and run callback immediately.

Arguments:

href - Source of loaded css file
[callback] - Callback function which will be executed when file be loaded.

Moff.loadCSS('assets/css/style.css', function() { /** File is loaded */});

loadAssets(depend, callback)

Load files and run callback after files loading. It will not load file if it is already loaded.
And it will execute callback immediately if no files were passed.

Arguments:

depend - Object with js and css files.
[callback] - Callback function.

Moff.loadAssets(
	{
		js: ['/assets/js/script.js'],
		css: ['/assets/css/style.css']
	},
	function() {
		// This callback will be executed when files be loaded
	}
);

loadJS(src, callback)

Load javascript file and run callback when it be loaded. It doesn't load file if it is already included and run callback immediately.

Arguments:

src - Source of javascript file.
[callback] - Callback function.

Moff.loadJS('assets/js/script.js', function() { /** Script file is loaded */});

onViewChange(callback)

Add callback to view change collection. These callbacks will be executed on view change event.

Arguments:

callback - Callback function. Each callback will get the current view mode - xs, sm, md or lg.

Moff.onViewChange(function(viewMode) {
	if (viewMode === 'lg') {
		// Do something if view mode is lg
	}
});

positionPreloader(left, top)

Show preloader and set its position to passed arguments. Position of the preloader is absolute.

Arguments:

left - Number. Position of the left point on the page.
top - Number. Position of the top point on the page.

Moff.positionPreloader(50, 150);

removeClass(element, classNames)

Removes element class name.

Arguments:

element - HTML element.
classNames - Class name or several class names separated by space.

var element = document.querySelector('.content');

Moff.removeClass(element, '__active');

reopen(methods)

Overwrites and adds object methods and properties.

Arguments:

methods - Object with new and existing method and properties.

Moff.module.reopen({
	newProp: 3,
	remove: function() {
		// Change the remove method logic.
	}
});

runCallbacks(collection, context, args)

Runs the array of callbacks in certain context and passes passed arguments.

Arguments:

collection - Array of callbacks.
context - Context object.
[args] - Array of arguments.


var callbacks = [callback1, callback2, callback3];
this.run = function() {
	Moff.runCallbacks(callbacks, this, arguments);
}

settings(key, value)

Set or get Moff settings value.

Returns passed key value if used as getter.

Arguments:

key - Settings name.
value - Settings value.

Moff.settings('cache'); // true
Moff.settings('cache', false); // false

showPreloader()

Show preloader with fixed position on the top of the page.

Moff.showPreloader();

version

Get Moff version.

Returns string.

Moff.version; // 1.x.x

$(callback)

Adds callback to be executed when DOM be ready or run immediately if it has already loaded.

Moff.$(function() {
	// Do something when DOM is loaded or just run this function
});