Tools.JS is a minimalist JavaScript framework/library to create web applications. Tools.JS is for developers who prefer Vanilla JavaScript. While plain JS is often good enough, basic operations can be quite verbose. Tools.JS offers a collection of utility functions that allow for a shorter notation without curbing developer freedom and creativity
Download official version 1.0 from this website (permanent link, never changes):
Download latest ToolsJS package (3.5 KB)
Shasum256 verification of package:
398a77c4c7e93a98c3631963e9536544f6836a64c904a1578857c980b33a23a5
Package has been signed by Gabor Software, to verify your package
copy the public key from the footer at GaborSoftware and use
signify
to check the authenticity of this file.
Full source code can be downloaded from:
ToolsJS on local site.
or:
ToolsJS on github.
Licensed BSD (do everything you want with it).
Querying
Instead of having to type document.querySelector(All) all the time, you can use the functions: qs() (query selector) and qsa() (query selector all). Note that Tools.JS assigns the document object to letter D. So instead of document you can write just D.
Example:
//get a single node qs(D, '.myelement'); //get all external links qsa(D, 'a[target="_blank"]');
DOM
To create a new DOM element use ce()/wrp():
//create a link a = ce('a'); //create html... wrp('<a href="#"></a>');
The wrp() function will wrap the specified HTML in a div node. You can adjust the wrapping node like this:
wrp(html, classes, nodetype);
For example, to wrap your HTML in a PRE node with class 'code':
wrp(html,['code'],'pre');
Use the functions html()/txt()/attr() to get/set (depending on the number of arguments) innerHTML, innerText and attributes respectively:
//set innerHTML of h1 tag html( qs( D, 'h1' ) 'Title' ); //get href of a link var h = attr( mylink, 'href' );
dat() works just like attr() but prefixes the specified key with data- so you can set data attributes.
classmod() can be used to modify the class list of a node: it accepts a list of class names to be added and a list of class names to be removed, both are optional.
classmod( node, ['show'], ['hide'] );
Use mv() to move a node in the DOM tree, rm() to delete it and cp() to copy it (cpr() to copy recursively). ls() can be used to list the child nodes under a specific node. The function mv() accepts a position parameter (0 = append as last child, 1 = append as sibling, 2 insert before ).
//add task to list mv( task, qs('ul') );
Batch
To apply DOM manipulations to a set of nodes instead of just one use each() or bat(). The following example illustrates how to open all links in new windows:
//Using each(): each(qsa(D,'a'), function(a){ attr(a, 'target', '_blank'); }) //Using bat(): bat('attr', qsa(D,'a'), 'target', '_blank');
I/O
Given a dataURI show() opens a new browser window displaying the object in the dataURI by registering an object url. If 2nd argument 'noopen flag' is set, no window will be opened and the blob object will be returned instead.
//display pdf show( pdfdata );
fread() reads a file object. Mode 0 = read as text (default) Mode 1 = read as data url:
fread(upload, func, 1);
download() downloads a string as a file in the browser.
download( 'hello', 'test.txt', 'text/plain' );
rq() sends an async request to server.
//alert this page rq( '', alert ); //post data rq('/post', callback, [1,2,3]);