Inner functions of m.js Short code - simple usage

Inner functions of m.js

Inner functions of m.js - m-framework.com

In our JS framework, m.js has a number of built-in functions that can be applied to elements that are wrapped in an object m, for example:

m('#some-id .some-class')

An instance of m contains an array-like set of matching elements. These elements can be bypassed as an array or checked by the length of the m instance.

Most of internal functions returns the same instance of m, so the object-oriented use of functions is justified, such as the following:

m('nav a')
.class({wait: null, active: true})
.append('<i class="fa fa-angle-down"></i>')
.on('click', function(){
console.log(this);
});

Let's try to describe each of the internal functions separately. Note that not all of them return an instance of m with a set of elements!

Function
Description
active_toggle(context) Initiates switching of the class "active" on the context element by clicking on each of the elements of the set.
Returns the same instance of m with a set of elements.
after(html) Inserts code from html after each of the elements of the set.
Returns the same instance of m with a set of elements.
animate(properties, duration, callback) Invoke an animation of each of the elements of the set with the properties from properties variable, with the duration from duration variable and with a callback() call upon completion of the animation.
Returns the same instance of m with a set of elements.
append(node) Inserts the node code inside (at the end of all internal elements) of each of the elements of the set.
Returns the same instance of m with a set of elements.
attr(name, val) Sets each element of the set an attribute name with property val.
Returns the same instance of m with the element set, or the text value of the name attribute if val is empty.

before(html) Inserts html code in front of each set element.
Returns the same instance of m with a set of elements.
change() Initiates an artificial change event call over each element of the set.
Returns the same instance of m with a set of elements.
children(selector) Selects a descendant in the DOM by the selector, if none, returns the first descendant in the m instance.
Returns a new instance of m with a set of elements.

class(class_name, val) Sets or returns the CSS element set or first element class, respectively, if no val is specified. The class_name argument can be an object with multiple classes for setting/disabling multiple classes at one time bypassing a set of elements, for example: {active: true, hidden: null, loading: true}. Also, val may be a text ":toggle", which will switch the availability of CSS class.
Returns the same instance of m with a set of elements.

click() Initiates an artificial click event call and call a connected function.
Returns the same instance of m with a set of elements.
clone() Clones the first element of a set with all its child elements. Returns a new instance of m with a set with 1 element. The colonization of events associated with the first element of the set is not configured and has not been fully explored.
closest(selector, context) Returns the closest hierarchy to the parent container in the element set m, which corresponds to the selector selector or false in case of non-matching.
css(prop, val) Sets the CSS value of style to each of the elements of the set, or returns a value of a specific property if there is no val. The prop attribute can be a simple object and set a set of CSS values for a single bypass of the set elements.
Returns the same instance of m with a set of elements, or the value of a specific property.

dom(selector, context) Internal function, rarely used from outside m.fn. Finds a set of elements by selector in context. If the context is empty, the search is performed in the global document object.
Returns an array-like set of elements, even if their number is 0.
each(callback) Applies the callback function to each of the set elements by the call() method, that is, inside of the callback() function, the context of this becomes each element of the set in turn.
Returns the same instance of m with a set of elements.
event(name, func) Allows you to associate a particular function func with a set of elements named event name. Or, it returns a previously associated function by the same name of the event name. Serves to trigger events over elements to prevent duplicates of identical functions in the same event.
Returns the same instance of m with a set of elements.
event_fire(event_type) Generates an artificial call to a function of a given type by event_type over each element of the set. For example: click, change, load, resize, etc.
Returns the same instance of m with a set of elements.

find(selector) Attempts to find all descendants in the first element by the CSS selector set.
Returns a new instance of m with a set of elements, even if their number is 0.
We recommend you check the length before
further actions!
first Used as an argument-free property, such as m('.selector').first.
Returns the first set element if the set is not empty or null. Note that this element is not an instance of m, but an ordinary HTMLElement.
We recommend you check for null matching before further actions!
form_collect() Collects all names and values from the edited fields of the first element of the set (this doesn't have to be a form) into a simple object like {name: value, name2: value}. It is often used to transmit data through Ajax.
form_populate(obj) Fills in all the editable fields of the first element of the set (this doesn't have to be a form) with data from a simple object obj.
Returns the same instance of m with a set of elements.

hide() Hides each of the set elements by installing a 'hidden' CSS class.
Returns the same instance of m with a set of elements.
hover() Initiates an artificial hover event call and call a connected function.
Returns the same instance of m with a set of elements.
html(html) If a varible html is not empty, installs via innerHTML into the first element of the set, returns the same instance of m with the element set.
If
a varible html is null or null, it clears the contents of the first set element via innerHTML, returns the same instance of m with the set of elements.
If
a varible html is empty (undefined), returns the innerHTML of the first set element.
i18n(key) Used without a set of elements. The function tries to find and return a text in a previously received translation object by key. If no match is found, it returns the same key.
init() Rarely used from the outside, more "internal" function. Used to enable module scripts and run them if the set elements have data-m-action attributes.
Returns the same instance of m with a set of elements.
interval_animate(properties, duration, callback) Analogous to animate() for older browsers.
Returns the same instance of m with a set of elements.
is(selector) Performs a check to see if the first element of the parent search result set matches the specified selector.
Returns boolean true or false.
last Used as an argument-free property, such as m('.selector').last, similar to the first, returns the last element of the set. Note that this element is not an instance of m, but an ordinary HTMLElement.
We recommend check for null matching before further action!
length Used as an argument-free property, such as m('.selector').length. Counts the number of elements in a set on instancs. It is best served to check if there are any elements in the set after searching the selector.
Returns the int.
load_script(action, callback) The function is mainly applied to the body. Attempts to insert into the body of the page an asynchronous module script named action and CSS by the same name. It then calls the callback function. Used mainly in init().
next(selector) Attempts to find the next relative of the first element from the set of relatives at the same hierarchy level behind the CSS selector selector. Returns either an instance of m or false.
If selector is null or undefined, it takes the next element after the first element of the set via nextElementSibling.

nth(n) Lets you take HTMLElement from the set by its number n (starting at 0).
Note that this element is not an instance of m, but an ordinary HTMLElement.
obj_merge(dst, src) Allows you to combine a simple one-dimensional src object with a dst object. Has no internal elements in the set, called through m.fn.obj_merge(dst, src).
Returns the dst object.

off(events) Disables event functions that are linked to a set of elements by name in events (can be several spaces).
Returns the same instance of m with a set of elements.

offset() Attempts to determine the location of the first element from set on the page.
Returns a simple object {top: int, left: int}.
on(events, callback) Binds callback functions to each event set element in events (can be several  via a space).
Returns the same instance of m with a set of elements.

parent(selector) Looks for a direct parent element by selector or by closest().
Returns an instance of m with 1 element or false.
We recommend checking for length before further action!

prepend(node) Similarly to append(), inserts a node element at the beginning of each element in the set.
Returns the same instance of m with a set of elements.
prev(selector) Similar to next(), tries to take the previous "relative" to the first element by the selector selector.
Returns an instance of m with 1 element in set or false.
We recommend checking a length of returned instance before further action!

ready(callback) Attaches the callback to the onreadystatechange event and the onload of the first element from set. Usually such element is: body, image, script, etc.
Returns the same instance of m with a set of elements.

remove() Destroys all set elements via removeChild() and destroys the current instance of m.
Returns an atypical false.
remove_script(action) Reduces the integration of a module script into the DOM by its name in action. Returns the same false as a remove() function.
replace(node) Replaces each element from the set with an item from node. Used replaceChild() function.
Returns the same instance of m with a set of new elements.
replace_with(m_element) Performs replacement of current instamce elements set with elements from m_element instance.
Returns the same instance of m with a set of new elements.
show() Changes the visibility of all elements in a set by removing the CSS class 'hidden' and setting the CSS style "display: 'block'".
Returns the same instance of m with a set of elements.
slide(direction) Applies animate() to each element of the set, changing their height depending on the direction value:
'down' - Expands down from 0 to 100% of height,
':toggle' - Reverses opens or hides each of elements,
'up' or any other value - minimizes each element to 0px in height.
Returns the same instance of m with a set of elements.
submit() Initiates an artificial call to the submit event and a call a connected function.
Returns the same instance of m with a set of elements.
text() Similar to html(), though without argument and write-ability, it tries to get the inner text of the first element of the set.
Returns TextNode or null.
toggle() Changes the CSS property of the display between 'none' and 'block' in each element of the set.
Returns the same instance of m with a set of elements.
translate() Attempts to translate language variables from the m-framework template (Latin words framed by *) to a value using the m.i18n() function from a previously received JSON translation object.
Returns the same instance of m with a set of elements.
val(val) It tries to get a value through the standard value function of the first element in the set (usually text boxes or checkbox) and return it if the argument val is empty. If the val argument is not empty, it sets the value of val to each element in the set via the standard value function and returns the same instance of m with elements set.
visible() Checks that all elements from the set are visible in the current focus of the window.
Returns a boolean result (true|false).

wrap(node) Envelops each of the set elements with an element from node. The events of the original elements must be attached to them without changes, that is, they are not lost when wrapped.
Returns the same instance of m with a set of elements.


Ask your questions in form below. We'll try respond soon as possible.


Users comments


Sorry you cant to leave a comment. Try to authorize yourself via login and password or use a one of social networks below: