tinyJS - a tiny JS toolkit

Download

tiny.js [20788b] - tiny-min.js.gz [3816b]

Cheat Sheet

For the busy developer, a Cheat Sheet is always useful.

Compatibility

The following Browsers should be supported out of the box:

• MSIE 6-8
• Firefox 2-3.6
• Safari 3-4
• Opera 9-10
• Chrome/Iron 3-4

It is possible to put the support of additional older Browsers into a Plugin. Newer Browsers should usually be supported out of the Box. Later Versions are planned to support Mobile Browsers explicitly, since the mobile deployment of tiny.js may be of increased interest.

IE's Quirks Mode is consciously not supported by tiny.js. For once, the abandonment of support saves space, secondly the usage of Quirks Mode is rather anachronistic - a failure of the toolkit is too mild a punishment for such a misbehavior.

DOM

t - DOM Selection

tinyJS supports out of the box CSS-Selectors compliant to CSS2.1-Standard.

Select DOM Nodes:

returns Object with Node selection and very interesting methods (unless "methodless" is true, in this case, just an Array of nodes is returned).

t.cf - CSS-Filters

This instance holds all the CSS Filters, which can easily be extended with further Pseudoattributes. The available CSS-Filters are mostly CSS2.1 compatible, as well with few reductions as with non-standard extensions. Every filter consists of a name and a function which takes at least the selection array as argument, but can take an optional value (in brackets within the selector) as a second argument.

Basic Types

body (Tagname)

Filters nodes after their tagname (e.g. 'body'):

.class

Filters nodes after one of their Classnames. If getElementsByClassName is available, it will be used to speed things up:

#id

Filters nodes after their unique ID:

Traversing

* (Everything)

Searches recursively all Child nodes with getElementByTagName('*'):

> (Direct Childs)

Searches all direct Child nodes:

~ (Siblings)

Returns all Siblings on the same level after the element:

+ (Next)

Returns the next Element on the same level, if available:

< (Parent)

This filter does not conform to the CSS Standards, yet it is extremely useful. It returns the parent node:

<< (Parents)

This filter is nonstandard, too, yet it returns all parents including document:

Attributes

[key], [key=value] (Present/Equals)

This selection filter filters the existence or value of an attribute. For * [name=...] there is a faster shortcut using getElementsByName.

[key!=value] (Not Equals)

Returns a collection of nodes that have the attribute, but with another value:

[key^=value] (Starts with)

Leaves only nodes which have their attribute beginning with the given value:

[key$=value] (Ends with)

Returns an array of nodes which attributes end with the given value:

[key*=value] (Partly Equal)

Only nodes that have the given value anywhere within their attribute are returned:

[key~=value] (Seperate Part Equals)

Returns only nodes that have the value as a seperate part within their attribute:

[key|=value] (Subpart before "-" Equals)

Leaves only those nodes, which attribute contains the value before its end or a minus sign:

Pseudo Attributes

:odd

Reduces the Selection to the nodes with odd index (1, 3, 5, ...):

:even

Leaves only nodes with even index (2, 4, 6, ...) in the Selection:

:empty

Returns only empty nodes:

:first-child

Checks whether each node is the first child of its parent node:

:last-child

Filters all nodes to be the last child of their parent nodes:

:only-child

Returns all nodes which are the only child of their parent nodes:

:nth-child(index)

Selects those nodes which are the nth child node of their parent nodes:

:not(selector)

Removes such nodes from the selection on which the selector matches:

:has(selector)

Returns all nodes to be parents of the nodes selected with selector:

:contains(text)

Selects all nodes whose text content contains the text:

:lang(language)

Checks whether the node matches the language definition:

Extension of Selector Engine

The Object t.cf can be easily extended by further selectors. Additional pseudo attributes can be identified by their name without the preceding ":". Selector-functions have an array of nodes as their first argument and optional another argument, which would be written in brackets in the Selection.

t._ - Selection-Methods

Selected DOM-Nodes will be extended by the following methods:

t._.i - Iterate

Executes a function for each node within the selection; its first parameter will be the selection index, the second one the node and this will be the selection.

t._.f - Filter

Filters the selected nodes with a function, that gets the same parameters as iteration, yet if it returns undefined, the node will be ommitted from the selection.

t._.g - Get

Versatile method to get more from a selection. If an index (integer) is given, it will return the node in the selection, if a node is given, it will return its index and if a string is given, it will be used as a new selector starting from the current selection.

t._.e - Events

Sets events on the selected nodes. See t.e, the first parameter must be ommitted, since the selection is used anyway.

t._.a - Attributes

Gets and sets attributes of the nodes. First parameter is attribute name or object, second parameter value. If no value is given, the attribute of the first object is returned, if a value is given, it is set for all selected nodes, same goes for an object containing multiple attributes. Normalisation is provided by the Normalisation-Filters.

t._.c - CSS Attributes

Gets and sets style-Attributes of the selected nodes. Everything else is just like attributes.

t._.h - HTML

Gets or writes HTML content.

t._.v - Values

Reads or writes the value of form fields. First parameter is a parameterization function (e.g. t.p), which then will parameterize all values of selected nodes, or a value to be set on all selected nodes. If .v() is called without parameters, it will return the value of the first selected node.

t._.r - Remove Element

Removes all selected nodes from their parents.

t._.nf - Normalisation filters

The normalisation filters are in the object t._.nf to be easily extendable. The necessity of normalisation will be solely determined by feature detection.

t.e - Events

Simple Event Engine:

If the callback is ommitted, the events array of the named event (e.g. "click") is returned. If no name is given, too, the complete events object is returned.

Events are normalized: every key code is in the property "key", the normalized mouse cursor position is in mouseX and mouseY and there is always a "target"-property.

Helpers

t.i - Iterate

Interates over Arrays and Objects:

t.i([object:Array|Object], [callback:Function, this=object, arguments=[key, value]]);
t.i([1, 2, 3], function(i, v) { console.log(v); });
t.i(window, function(k, v) { console.log(k); });

t.x - eXtend Object

Extends Objects and Arrays:

Extend Objects:

Extend Arrays:

Arrays will simply be merged:

t.f - Filters Arrays and Objects:

Returns a filtered Array or Object. If asArray is set to something that can be converted to true, an Object will be iterated as Array. The function will have this set to the Object and receives the key-value pairs as its two parameters. If it returns undefined, the instance will be ommitted. If only an Array without a function is given, it doubles as unique-function to filter multiple instances with the same value.

t.w - Where in the Array is...?

Returns the index of an object within the Array or else -1

t.w([object], [array:Array])

t.p - Parameterize Object

Converts an Object into an parameterized String (if no other options but the object are provided, it will be URL-encoded):

If t.p is used as sole argument to the Selection-Method v, all values of all selected Nodes will be returned as URL-parameterized String.

Network

t.a - Ajax

Versatile Ajax Request:

t.a({
    url:[url:String],
    method:[method:String,(GET|POST), optional],
    data:[postdata:String|Object, optional],
    async:[callback:Function, optional]
});

t.j - JavaScript, JSONp

Can load Scripts (e.g. Plugins) asynchronously or perform JSONp-Requests:

Plugins

• t.b - Browser-Detectiont.b contains an Object with Informations about Browser and System:
  { name: browsername, version: 1.0, versionDetail: [1,0,0,1], browsername: 1.0, os: { name: 'Windows NT', version: 5.1 }}
• t.b64 - Base64-Codect.b64.enc(data) - codes Data to Base64,
  t.b64.dec(data) - decodes Base64-Data.
• t._.C - ClassName-MethodMethod to check and manipulate ClassNames of selected Nodes.
• t.c - Cookie-Functiont.c([Name/Object]) - if a name is supplied, the value of the corresponding cookie is returned, if a cookie object in the following format is given, the cookie will be set:
  { name:"Cookie-Name", value:"Cookie-Wert",
  date:[Date-Objekt oder Number(ms)],
  domain:"*.test.de", path:"/", extra:"; secure"}
  (everything but name and value is optional)
• t.er - Element Readyt.er([Selector], [Callback]) - runs the callback after at least one node matching the Selector becomes available.
• t.e.[...] - Normalized Eventstiny-events.js provides normalisierte mouseenter/-leave as well as drag'n'drop-Events.
• t.fx - Effects-FrameworkFramework to precalculate and run CSS-Effects.
• JSON - JSON-ObjectIf not natively present, a JSON-Object with the Methods stringify and parse will be provided.
• outerHTML-NormalisingAdds outerHTML normalising to t().a, so this attribute can be used with Browsers that normally don't support it.
• t._.p - Put-MethodPut-Method as counterpart to the Get-Method of Selections. If only a node is provided, the Selection will be appended. If 0 and a node is applied, the node will be replaced by the selection. if the first argument is 1, the selection will be prepended inside the node, and 2 makes the method prepending the selection outside the node.
• t._.S - Selected-MethodMethod to read and manipulate the selection within text inputs and textareas.
• CSS3-SelectorsAdds CSS3-Compatibility and other useful selectors to t().
• t.swf - Flash-EmbeddingElegant Creation of Object-Tags
• t.u - URL-Objectt.u([URL:String]) returns an URL-Object similar to location.href, admittedly containing a params-Object with all GET-Parameters and a versatile toString-Method for absolute or relative URLs.

Code-Styleguide and Minification

The end of size reduction is of highest priority, yet a certain style should not be amiss and Optimisations that can be gained by a few chars should not be ommitted. In such situations in which the size reduction destorts readability too much, readability is more important; otherwise, some well-placed comments should ensure maintainability for me and others. Such places prone to debugging whould be isolated by line breaks. Every line that does not comment itself should be graced by a comment (since all comments are filtered by the minification, use many of those).

The Minification should only remove those line breaks that are not important to debugging - if more than one problematical assignment share one line, the debugging developer has to guess, thus rendering the usability of the minified code remote for debugging purposes.

© 2010 Alex Kloss