m².js - modular micro framework
Modular microframework © 2013-2015 Alex Lohr.
2kb - 19.04kb commented/uncompressed
801b - 10.43kb bytes compressed using Google Closure Compiler*
492b - 4.33kb bytes compressed/gzipped using Google Closure Compiler*
* WARNING: Google's Closure Compiler breaks stuff in advanced mode; also the resulting gzipped code is actually bigger in most cases.
Features
Build Full Minimal
Development Code
[Code appears here]
Compiled Code
[Code appears here]
TODO
More/Improved Documentation
Test Suite for pos, sel?
Additional functionality (as modules)
serialize (as optional part of (.val)?)
.live() Events
.post() requests
.route
.render (Templates)
?
Improved (more beautiful) code
m().sel - IE Fallback (modularity?)
Cheat Sheet
Functionality
m(s), m(s, b), m(n).find(s) - Selectors
Simple DOM Selection
Simple DOM Selection is solely based on querySelectorAll() , which is not supported on some obsolete browsers and may not provide all possible selectors.
Full DOM Selection
Basic/Traversing
body - tag name
#id - id
.class - class name
* - Everything
> - Direct Childs
~ - Siblings
+ - Next
, - Multiple Selections
Attributes
[attr] - attribute presence
[attr=value] - attribute value
[attr!=value] - attribute negation
[attr^=value] - attribute start
[attr$=value] - attribute end
[attr*=value] - attribute part
[attr~=value] - Separate attribute part
[attr|=value] - attribute subpart before -
Pseudo Attributes
:first-child, :first
:nth-child(2n+1)
:nth-of-type(odd)
:odd
:even
:eq(7)
:last-child, :last
:nth-last-child(even)
:nth-last-of-type(3)
:only-child
:only-of-type
:seq(2,5)
:gt(2)
:lt(5)
:empty
:target
:lang(en)
:enabled
:disabled
:checked
:not([simple selector])
:root
:has([simple selector])
:contains(text)
:hidden
:visible
:checkbox
:file
:image
:password
:radio
:reset
:submit
:text
m(f), m(s).on(t, f), m(s).off(t, f) - Events
m(f) - DOMready (basic)
m(f, s) - ElementReady
m(s).on(t, f) - Bind DOM Event*
m(s).off(t, f) - Unbind DOM Event*
m(s).trigger(t) - Trigger Event Chain
* requires DOM Events
m(s).ins, m(s).before, m(s).after - Insertion*
m(s).ins(referenceNode, after) - insert Node Collection before/after referenceNode
m(s).before(referenceNode) - convenience call
m(s).after(referenceNode) - convenience call
* requires DOM Insertion or Convenience Calls for DOM Insertion
m(s).attr|css|html|cls|val - Manipulation/Inspection
m(s).attr - DOM Attributes
m(s).attr('name')
m(s).attr('name', value)
m(s).attr({name: 'value'})
m(s).css - CSS Attributes
m(s).css('name')
m(s).css('name', value)
m(s).css({name: 'value'})
m(s).html - HTML Content
m(s).html()
m(s).html('<html code>')
m(s).cls - ClassName
m(s).cls('has|set|remove|toggle', 'name', 'opt:value')
m(s).hasClass('name')**
m(s).addClass('name')**
m(s).removeClass('name')**
m(s).toggleClass('name')**
** Convenience Methods provided by additional module
m(s).val(), m(s).val(v) - Value
m(s).val() - gets value of the first selected node
m(s).val(v) - sets value of every field
m(s).sel(), m(s).sel(o) - Selection
m(s).sel() - gets selection object
m(s).sel(o) - create/manipulate selection depending on object (length ignored)
Selection Object
start - start of selection (beginning at 0)
end - end of selection
length - length of selection
text - selected text (or replacement)
m(s).pos() - Position
m(s).pos() // returns position object
Position Object
.left - horizontal position in pixels
.top - vertical position in pixels
Position coordinates may be floating point numbers
m.each(o, f), m(s).each(f), m(s).filter(f) - Iterator
m.each({key, value}, function(value, key){ /* this == value */ })
m.each([1, 2, 3], function(value, key){ /* this == value */ })
m(s).each(function(node, idx){ /* this == node */ })
m(s).filter(function(node, idx){ return true || NodeCollection })
m.ajax(o), m.jsonp(o), m.cookie(o), m.url(o) - Networking/Server
m.ajax(o)
m.ajax({configuration object}) - yields AJAX Request object
Configuration Object
url (required): Request URL
method (optional): [get]|head|post
callback (optional): called on readyStateChange, makes request async
user (optional): username for HTTP/Auth
password (optional): password for HTTP/Auth
data (optional): data for POST request
init (optional, requires AJAX init ): init callback
header (optional, requires AJAX header ): header object
m(s).load(url), m(s).load(obj) - Convenience loader ; callback not supported.
m.jsonp(o)
m.jsonp({configuration object}) - yields script tag for JSONp-Request
Configuration Object
url (required): Request URL, "?" at the end will be replaced with callback name
callback (optional): will be called from JSONp-Request
_ (optional): callback name, if it needs to be pre-defined
m.cookie(o)
m.cookie(name) - returns cookie value
m.cookie({cookie object})
Cookie Object
name (required): Cookie name
value (required): Cookie value
date (optional): Date() object or time in milliseconds until expiry
domain (optional): domain string
path (optional): path string
extra (optional): extra string, e.g. "secure"
m.url(u)
m.url("URL string") - returns URL object
m.url.hostname - m.url serves as the page's URL object, too
URL Object
The URL Object is rather similar to window.location, the main differences is the url.search (which will perform as an key-value storage for everything in its search, but yield an URI-Encoded string if coerced)
m.ua - Browser/OS
m.ua.
browser.
os.
info: Hash aller weiteren UA-Eigenschaften (key=value oder key=true)
ua: navigator.userAgent.toLowerCase() //
Compatibility (if restricted)
Selectors:
Basic: IE8+, FF3.5+, Chrome, Safari, Opera10+, iOS, Android
Full: IE6+, FF2+, Chrome, Safari, Opera9+, iOS, Android
AJAX: IE6+ (with compatibility module), otherwise IE7+, FF, Chrome, Safari, Opera, iOS, Android
Everything else: IE6+, FF, Chrome, Safari, Opera, iOS, Android
Tests
Run