• Stars
    star
    285
  • Rank 140,416 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 10 years ago
  • Updated over 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Tiny DOM library

Balalaika.js No Maintenance Intended

The tiny DOM library (986 bytes uncompressed and 603 bytes gzipped!)

Balalaika provides you tiny replacement for huge DOM libraries such as jQuery and Zepto. It contains few methods which should be sufficient for vanilla.js developers.

Too big? Check this out.

How can I use it?

First of all you can use it as common library on the web page. Just paste this code to the head tag:

<script>
$=function(t,e,n,i,o,r,s,u,c,f,l,h){return h=function(t,e){return new h.i(t,e)},h.i=function(i,o){n.push.apply(this,i?i.nodeType||i==t?[i]:""+i===i?/</.test(i)?((u=e.createElement(o||"q")).innerHTML=i,u.children):(o&&h(o)[0]||e).querySelectorAll(i):/f/.test(typeof i)?/c/.test(e.readyState)?i():h(e).on("DOMContentLoaded",i):i:n)},h.i[l="prototype"]=(h.extend=function(t){for(f=arguments,u=1;u<f.length;u++)if(l=f[u])for(c in l)t[c]=l[c];return t})(h.fn=h[l]=n,{on:function(t,e){return t=t.split(i),this.map(function(n){(i[u=t[0]+(n.b$=n.b$||++o)]=i[u]||[]).push([e,t[1]]),n["add"+r](t[0],e)}),this},off:function(t,e){return t=t.split(i),l="remove"+r,this.map(function(n){if(f=i[t[0]+n.b$],u=f&&f.length)for(;c=f[--u];)e&&e!=c[0]||t[1]&&t[1]!=c[1]||(n[l](t[0],c[0]),f.splice(u,1));else!t[1]&&n[l](t[0],e)}),this},is:function(t){return u=this[0],(u.matches||u["webkit"+s]||u["moz"+s]||u["ms"+s]).call(u,t)}}),h}(window,document,[],/\.(.+)/,0,"EventListener","MatchesSelector");
</script>

(Looks like Google Analytics embed)

Then use it anywhere on the web page:

<script>
	$(function() {
		$('.my-selector').on('click', function() {
			alert('I need my balalaika');
		});
	});
</script>

The second kind of use is using it inside single script as local variable:

(function(win, $) {
	// your code starts here
	$(function() {
		$('.my-selector').on('click', function() {
			alert('I need my balalaika');
		});
	});
  // your code ends here
})(window, function(t,e,n,i,o,r,s,u,c,f,l,h){return h=function(t,e){return new h.i(t,e)},h.i=function(i,o){n.push.apply(this,i?i.nodeType||i==t?[i]:""+i===i?/</.test(i)?((u=e.createElement(o||"q")).innerHTML=i,u.children):(o&&h(o)[0]||e).querySelectorAll(i):/f/.test(typeof i)?/c/.test(e.readyState)?i():h(e).on("DOMContentLoaded",i):i:n)},h.i[l="prototype"]=(h.extend=function(t){for(f=arguments,u=1;u<f.length;u++)if(l=f[u])for(c in l)t[c]=l[c];return t})(h.fn=h[l]=n,{on:function(t,e){return t=t.split(i),this.map(function(n){(i[u=t[0]+(n.b$=n.b$||++o)]=i[u]||[]).push([e,t[1]]),n["add"+r](t[0],e)}),this},off:function(t,e){return t=t.split(i),l="remove"+r,this.map(function(n){if(f=i[t[0]+n.b$],u=f&&f.length)for(;c=f[--u];)e&&e!=c[0]||t[1]&&t[1]!=c[1]||(n[l](t[0],c[0]),f.splice(u,1));else!t[1]&&n[l](t[0],e)}),this},is:function(t){return u=this[0],(u.matches||u["webkit"+s]||u["moz"+s]||u["ms"+s]).call(u,t)}}),h}(window,document,[],/\.(.+)/,0,"EventListener","MatchesSelector"));

Which methods are provided?

Balalaika extends Array.prototype. It means Balalaika can use any method of native array.

$('.my-selector').forEach(function(el) {
	console.log(el);
});

Besides, Balalaika has few additional methods such as:

on

$('.my-selector').on('click.namespace', function() {
	alert('I need my balalaika');
});

off

$('.my-selector').off('click.namespace');

is

$('.my-selector').on('click', function(evt) {
	if($(evt.target).is('.another-selector')) {
		alert('I need my balalaika');
	}
});

extend

var myObject = {a:1};
$.extend(myObject,{
	b: 2
});

DOM-ready feature

$(function() {
	// Do something with DOM
});

It provides very few functions, doesn't it?

Yep. The idea is if you need something, implement it! A lot of jQuery-like functions can be created easily. Use $.fn style to create additional methods:

$.fn.hasClass = function( className ) {
	return !!this[ 0 ] && this[ 0 ].classList.contains( className );
};
$.fn.addClass = function( className ) {
	this.forEach( function( item ) {
		var classList = item.classList;
		classList.add.apply( classList, className.split( /\s/ ) );
	});
	return this;
};
$.fn.removeClass = function( className ) {
	this.forEach( function( item ) {
		var classList = item.classList;
		classList.remove.apply( classList, className.split( /\s/ ) );
	});
	return this;
};
$.fn.toggleClass = function( className, b ) {
	this.forEach( function( item ) {
		var classList = item.classList;
		if( typeof b !== 'boolean' ) {
			b = !classList.contains( className );
		}
		classList[ b ? 'add' : 'remove' ].apply( classList, className.split( /\s/ ) );
	});
	return this;
};

And so on...

More examples

Find elements inside another element

var elements = $('.my-selector', el);

Parse HTML

var elements = $('<div><span class="yeah"></span></div>');

Extended parsing function

Pay attention that example above doesn't parse contextual elements such as td, tr, etc. But function below does:

$.parseHTML = function( html ) {
	var node = document.createElement( 'div' ),
		// wrapMap is taken from jQuery
		wrapMap = {
				option: [ 1, "<select multiple='multiple'>", "</select>" ],
				legend: [ 1, "<fieldset>", "</fieldset>" ],
				thead: [ 1, "<table>", "</table>" ],
				tr: [ 2, "<table><tbody>", "</tbody></table>" ],
				td: [ 3, "<table><tbody><tr>", "</tr></tbody></table>" ],
				col: [ 2, "<table><tbody></tbody><colgroup>", "</colgroup></table>" ],
				area: [ 1, "<map>", "</map>" ],
				_: [ 0, "", "" ]
		},
		wrapper,
		i;
		
	html = html.replace( /^\s+|\s+$/g, '' );
	
	wrapMap.optgroup = wrapMap.option;
	wrapMap.tbody = wrapMap.tfoot = wrapMap.colgroup = wrapMap.caption = wrapMap.thead;
	wrapMap.th = wrapMap.td;
	
	wrapper = wrapMap[ /<([\w:]+)/.exec( html )[ 1 ] ] || wrapMap._;
	
	node.innerHTML = wrapper[ 1 ] + html + wrapper[ 2 ];
	
	i = wrapper[ 0 ];
	
	while( i-- ) {
		node = node.children[ 0 ];
	}
	
	return $( node.children );
};

var myElements = $.parseHTML('<tr><td></td></tr>');

Adding styles for elements

$('.my-selector').forEach(function(el) {
	$.extend( el.style, {
		width: '30px',
		backgroundColor: 'red'
	});
});

Delegated events

$('.my-selector').on('click', function(evt) {
	var node = evt.target;
	while(node !== this) {
		if($(node).is('.delegated-selector')) {
			// Handle it!
			break;
		}
		node = node.parentNode;
	}
});

$.fn.parents plugin

$.fn.parents = function(selector) {
	var collection = $();
	this.forEach(function(node) {
		var parent;
		while((node = node.parentNode) && (node !== document)) {
			if(selector) {
				if($(node).is(selector)) {
					parent = node;
				}
			} else {
				parent = node;
			}
			if(parent && !~collection.indexOf(parent)) {
				collection.push(parent);
			}
		}
	});
	
	return collection;
};

Licensed under MIT License

More Repositories

1

seemple

Seemple.js framework
JavaScript
869
star
2

tsimmes

A function for elements selection
JavaScript
225
star
3

github-embed

Embed code from Github on HTML page
JavaScript
125
star
4

node-direct

Allows to run server-side JavaScript files via NodeJS as easy as PHP files via Apache
JavaScript
98
star
5

vanillatree

Vanilla.js replacement of jstree
JavaScript
92
star
6

use-change

The most minimalistic React state management library on the market with zero dependencies and React.useState-like syntax
TypeScript
91
star
7

elegant-threading

A straightforward definition of multi-threaded functions for NodeJS and browser
JavaScript
61
star
8

defi

A bunch of utilities that enable accessor-based reactivity for JavaScript objects
JavaScript
50
star
9

deploy-to-git

Deploy build artifacts to a Git repository
JavaScript
46
star
10

mongo-git-backup

A tool for making text Mongo backups on Git repos
JavaScript
39
star
11

Suitup

Simple WYSIWYG editor
JavaScript
30
star
12

check-imports

Check imports in JS files and update package.json dependencies
JavaScript
28
star
13

vovk

REST for Next
TypeScript
28
star
14

last-release-git

semantic-release plugin for projects that must not be published at NPM
JavaScript
26
star
15

babel-plugin-transform-es2015-modules-simple-amd

Limited transformer for ECMAScript 2015 modules (AMD)
JavaScript
26
star
16

donutjs

Simplest cross-browser (VML+SVG) donut chart generator
JavaScript
23
star
17

jQuery-Gaussian-Blur

Plugin which adds Gaussian Blur effect for images
JavaScript
23
star
18

babel-plugin-transform-es2015-modules-simple-commonjs

Limited transformer for ECMAScript 2015 modules (CommonJS)
JavaScript
19
star
19

typo.js

JavaScript
17
star
20

use-0

Type-safe React application state library with zero setup
TypeScript
13
star
21

seemple-examples-and-tutorials

Seemple.js examples and tutorials
HTML
10
star
22

function-decorators-proposal

9
star
23

eslint-plugin-output-todo-comments

Contains single rule that warns about used warning comments and shows them as they are
JavaScript
8
star
24

Functions

This repository contains few functions that help in deciding of certain problems.
JavaScript
5
star
25

css-dot-js-loader

A Webpack loader which allows to generate static CSS code via JavaScript
JavaScript
4
star
26

babel-plugin-nofn

Experimental Babel plugin which takes function call and transpiles it to inline code
JavaScript
4
star
27

seemple.js.org

Seemple.js website
SCSS
3
star
28

uniquestring

Simple function which generates pseudo-random string based on current timestamp and Math.random call
JavaScript
2
star
29

makeelement

A function to use it instead of document.createElement
JavaScript
2
star
30

matreshka_boilerplate

ES.next boilerplate app for Matreshka.js
JavaScript
2
star
31

finom

2
star
32

fabric-browser

Fabric.js bridge with no node-specific dependencies
JavaScript
1
star
33

trading-strategies-backtest

TypeScript
1
star
34

tailwind-to-object

Single-function library that converts Tailwind classes to CSS style objects
JavaScript
1
star
35

altamoon

HTML
1
star
36

defi.js.org

The website
CSS
1
star