minjs v2.0.6

min.js

v2.0.6 / 2015-12-02

A super tiny JavaScript library to execute simple DOM querying, hooking name spaced event listeners, trigger events and some simple DOM node helpers.

This is not jQuery or a jQuery replacement - more a convenience library to help you type less when writing vanilla JS. It intentionally doesn't try to replicate jQuery's API in order to keep its size down and encourage you to write vanilla JS on your own.

Browser Compatibility

Uses querySelectorAll, addEventListener, getComputedStyle and Object.keys. If the browser doesn't support these it stops running.

Qunit tests: http://www.thirteentwelve.com/minjs/test/test.html

Tests pass in:

• Chrome 41+ (OSX)
• Chrome 41+ (Windows 7, Android 5, Android 4.4.4)
• Safari 5, 8, 9 (OSX)
• Safari 7.1, 8.3 (iOS)
• Firefox 4+ (OSX)
• Firefox 34+ (Windows 7)
• IE9, IE10, IE11 (Windows 7)
• Android 2.3.7, 4.1.1, 4.2.2, 4.3, 4.4.4, 5, 5.1 native browser

Filesize

• ~6kb uncompressed
• ~2kb minified
• ~1kb minified and gzipped

Query elements

var divs = min$('div'); // minjs object

Creates minjs object: an array of nodes with prototype methods.

Optionally you can supply a context in which to look:

var node = document.getElementById("#content"); // #content node
var divs = min$('p',node); // minjs object

You can also pass in a node, to turn it into a minjs object:

var node = document.getElementById("#content"); // #content node
var container = min$(node); // minjs object

To return nodes from the minjs object:

var divs = min$('div');
var first_div = divs[0]; // node

$ Selector

min.js isn't jQuery. You can, of course, bind $ to min$:

window.$ = min$;

(after min$ and before the rest of your JavaScript)

And then:

var divs = $('div'); // minjs object

Events

Bind events with on()

Basic:

min$('p:first-child a').on('click', function (event) {
  event.preventDefault();
  // do something else
});

Or with a namespace:

min$('p:first-child a').on('click.foo', function (event) {
  event.preventDefault();
  // do something else
});

Note:

• only accepts singular events and singular namespaces
• must contain an event type (namespace is optional)

Unbind events with off()

min$('p:first-child a').off(); // clears all handlers
min$('p:first-child a').off('click'); // clears just the click handlers
min$('p:first-child a').off('click.foo'); // clears just foo namespaced click handlers
min$('p:first-child a').off('.foo'); // clears foo namespaced handlers

Custom events

min$(document).on('foo', function () {
  // foo was fired
});

Trigger events

min$(document).trigger('foo');

## Looping


### Looping elements

```js
min$('p').each(function(el,index) {
  console.log(el.innerHTML); // node's inner HTML
});

To break a loop, return false:

// assume you have 5 p's
min$('p').each(function(el,index) {
  console.log(i);
  if (i === 1) {
    return false;
  }
});
// 0, 1

Looping any array

var my_arr = ["a","b","c"];
min$.each(my_arr,function(value,index) {
  console.log(index,value);
});
// 0 "a", 1 "b", 2 "c"

Index

Search for a given element in a collection.

var node = document.getElementById("foo"); // p#foo node
var i = min$("p").index(node); // number

var p_foo = min$("p#foo"); // p#foo minjs obj
var i = min$("p").index(p_foo); // number

If a match isn't found the number returned is -1.

If nothing is passed then the returned number will be that of the first child of the collection, likely 0.

Chaining events

min$('a').on('foo', bar).on('click', doclick).trigger('foobar');

Add, remove, has CSS class

min$('a').addClass("foo"); // adds class to all links
min$('a').removeClass("bar"); // removes class from all links
var is_foo = min$('a').hasClass("foo"); // assumes the first item, returns true/false

Read/write attributes

min$('div:last-child').attr('data-url'); // returns contents of attribute for first returned element
min$('div').attr('data-url','http://www.github.com/13twelve'); // sets attribute on all divs

Read/write CSS styles

min$('a:last-child').css('color'); // returns computed value of color
min$('a:first-child').css('color','#000000'); // sets style
min$('a:first-child').css({
  color: '#000000',
  paddingRight: '10px'
}); // sets multiple styles

Assumes the first item if passed a collection larger than 1.

Careful with reading shorthand properties in Firefox, it doesn't handle them like Webkit Bugzilla - Bug 137688

Extending

You can extend min$ by adding to its prototype:

min$.prototype.tagNames = function(){
  min$.each(this,function(el){
   console.log(el.tagName);
  });
  // allow for chaining
  return this;
};

Then you could use:

min$("*").tagNames(); // HTML, HEAD, META, TITLE, LINK..

Or aliased:

window.$ = min$;
$.tagNames(); // HTML, HEAD, META, TITLE, LINK..

'this' inside your function, is the minjs object, which is an array like object with the minjs methods on its prototype. To loop a collection, use the internal minjs each method.Returning 'this' at the end allows for chaining.

This example returns the offset of an element. If your collection has more than one element, it only returns the offset for the first.

min$.prototype.offset = function(){
  var node = (this.length > 0) ? this[0] : this;
  if (document.body.contains(node)) {
    var rect = node.getBoundingClientRect()
    return {
      top: rect.top + document.body.scrollTop,
      left: rect.left + document.body.scrollLeft
    };
  } else {
    return null;
  }
};

Then you could use:

min$("h1").offset(); // Object {top: 300, left: 20}

Alternatively you can extend minjs itself. Here is an example of a method to merge objects together:

min$.merge_objects = function(obj1,obj2){
  var merged = {};
  for (var def in obj1) {
    merged[def] = obj1[def];
  }
  for (var def in obj2) {
    merged[def] = obj2[def];
  }
  return merged;
};

Then you could use:

min$.merge_objects({foo:"bar"},{bar:"foo"}); // Object {foo: "bar", bar: "foo"}

Or aliased:

window.$ = min$;
$.merge_objects({foo:"bar"},{bar:"foo"}); // Object {foo: "bar", bar: "foo"}

Alternatives

These libraries aim to replicate the jQuery API in a more complete way:

• Cash
• Sprint
• Zepto

Inspiration

minjs is inspired by Remy Sharp's minjs. Remy chose to extend the global node prototype where as this minjs has its own prototype. Initially I forked his repo and added a few useful things and then nedbaldessin gently encouraged me to not use the global node prototype.

As used on the Internet

• Krrb blog by mrdoinel
• Dering Hall by myself
• Scientific American by myself and joecritch
• Library of America by helloimseth

If you used it in a project, please let me know!

Thanks

• JoyceBabu
• dandandan

More info

License: MIT