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

• Basic Framework: Main Object, DOMready, Iterator
  • Easily extendable
  • Minimal size
  • Simple usage through chaining, jQuery-like syntax
  • Variable Compatibility (depending on size/features)
  • Speaking variable names allow for easy understanding and adaption
  • Tests for most of the functionality
  • Licensed under GPLv2
• DOM Selection: Simple (IE8+/querySelectorAll only) More performant (cross-browser-compatible) queries for id, name or tagname (does not require full query engine)
  Full (all browsers, CSS1) CSS2 CSS3 non-standard CSS selectors
• HTML queries (DOM generator) [doc]
• DOM Events None DOM Events (simple) multiple DOM Events singular Events (run only once)
• ElementReady [doc]
• DOM insertion None Simple with convenience methods
• HTML inspection/manipulation [doc]
• DOM Attribute inspection/manipulation [doc]
• CSS Attribute inspection/manipulation [doc]
• ClassName inspection/manipulation: None Single Method m.cls('has|set|get|toggle', name, value) With convenience methods
• Form Value inspection/manipulation [doc]
• Selection inspection/manipulation [doc]
• Position [doc]
• AJAX: None Simple With convenience loader MSIE6 Compatibility Init Callback Header Manipulation
• JSONp [doc]
• Cookies [doc]
• URL [doc]
• UserAgent [doc]

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.
    • name:
    • version:
    • :
  • os.
    • name:
    • version:
    • :
  • 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