{"_id":"balalaika","_rev":"3281447","name":"balalaika","description":"A tiny DOM library","dist-tags":{"latest":"1.0.1"},"maintainers":[{"name":"finom","email":""}],"time":{"modified":"2024-05-16T05:28:23.000Z","created":"2015-12-02T16:41:27.952Z","1.0.1":"2016-09-14T14:05:27.919Z","1.0.0":"2015-12-02T16:41:27.952Z"},"users":{},"author":{"name":"Andrey Gubanov"},"repository":{"type":"git","url":"git+https://github.com/finom/balalaika.git"},"versions":{"1.0.1":{"name":"balalaika","version":"1.0.1","description":"A tiny DOM library","main":"balalaika.umd.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/finom/balalaika.git"},"keywords":["jquery","dom","vanillajs","balalaika"],"author":{"name":"Andrey Gubanov"},"license":"MIT","bugs":{"url":"https://github.com/finom/balalaika/issues"},"homepage":"https://github.com/finom/balalaika#readme","gitHead":"e590bea41a8f506d48c9380e29343a5fc13673f0","_id":"balalaika@1.0.1","_shasum":"0664147a257ea2ad4ae66451711e5266830d51d9","_from":".","_npmVersion":"3.10.3","_nodeVersion":"6.4.0","_npmUser":{"name":"finom","email":"andrey.a.gubanov@gmail.com"},"dist":{"shasum":"0664147a257ea2ad4ae66451711e5266830d51d9","size":5571,"noattachment":false,"key":"/balalaika/-/balalaika-1.0.1.tgz","tarball":"http://registry.cnpm.dingdandao.com/balalaika/download/balalaika-1.0.1.tgz"},"maintainers":[{"name":"finom","email":""}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/balalaika-1.0.1.tgz_1473861926234_0.21135612530633807"},"directories":{},"publish_time":1473861927919,"_hasShrinkwrap":false,"_cnpm_publish_time":1473861927919,"_cnpmcore_publish_time":"2021-12-18T15:12:56.414Z"},"1.0.0":{"name":"balalaika","version":"1.0.0","description":"A tiny DOM library","main":"balalaika.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/finom/balalaika.git"},"keywords":["jquery","dom","vanillajs","balalaika"],"author":{"name":"Andrey Gubanov"},"license":"MIT","bugs":{"url":"https://github.com/finom/balalaika/issues"},"homepage":"https://github.com/finom/balalaika#readme","gitHead":"4c1fb0a6814c2edb0e077a184d1e90423676dbc6","_id":"balalaika@1.0.0","_shasum":"d50a0129ef23a8e6c8412281adca5ff68948907d","_from":".","_npmVersion":"2.14.0","_nodeVersion":"4.2.2","_npmUser":{"name":"finom","email":"a@odessite.com.ua"},"dist":{"shasum":"d50a0129ef23a8e6c8412281adca5ff68948907d","size":5175,"noattachment":false,"key":"/balalaika/-/balalaika-1.0.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/balalaika/download/balalaika-1.0.0.tgz"},"maintainers":[{"name":"finom","email":""}],"directories":{},"publish_time":1449074487952,"_hasShrinkwrap":false,"_cnpm_publish_time":1449074487952,"_cnpmcore_publish_time":"2021-12-18T15:12:56.620Z"}},"readme":"Balalaika.js\n=========\n\n[![Join the chat at https://gitter.im/finom/balalaika](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/finom/balalaika?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)\n## The tiny DOM library (986 bytes uncompressed and 603 bytes gzipped!)\n\nBalalaika 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.\n\nToo big? [Check this out](https://github.com/finom/bala).\n\n### How can I use it?\nFirst of all you can use it as common library on the web page. Just paste this code to the ``head`` tag:\n```html\n<script>\n$=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\");\n</script>\n```\n(Looks like Google Analytics embed)\n\nThen use it anywhere on the web page:\n```html\n<script>\n\t$(function() {\n\t\t$('.my-selector').on('click', function() {\n\t\t\talert('I need my balalaika');\n\t\t});\n\t});\n</script>\n```\n\nThe second kind of use is using it inside single script as local variable:\n```js\n(function(win, $) {\n\t// your code starts here\n\t$(function() {\n\t\t$('.my-selector').on('click', function() {\n\t\t\talert('I need my balalaika');\n\t\t});\n\t});\n  // your code ends here\n})(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\"));\n```\n\n### Which methods are provided?\nBalalaika extends ``Array.prototype``. It means Balalaika can use any method of native array.\n```js\n$('.my-selector').forEach(function(el) {\n\tconsole.log(el);\n});\n```\n\n<ul>\n\t\t\t<li><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat\" target=\"_blank\">concat</a></li>\n\t\t\t<li><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join\" target=\"_blank\">join</a></li>\n\t\t\t<li><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop\" target=\"_blank\">pop</a></li>\n\t\t\t<li><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push\" target=\"_blank\">push</a></li>\n\t\t\t<li><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse\" target=\"_blank\">reverse</a></li>\n\t\t\t<li><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift\" target=\"_blank\">shift</a></li>\n\t\t\t<li><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice\" target=\"_blank\">slice</a></li>\n\t\t\t<li><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort\" target=\"_blank\">sort</a></li>\n\t\t\t<li><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice\" target=\"_blank\">splice</a></li>\n\t\t\t<li><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toString\"  target=\"_blank\">toString</a></li>\n\t\t\t<li><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift\" target=\"_blank\">unshift</a></li>\n\t\t\t<li><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every\" target=\"_blank\">every</a></li>\n\t\t\t<li><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter\" target=\"_blank\">filter</a></li>\n\t\t\t<li><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach\" target=\"_blank\">forEach</a></li>\n\t\t\t<li><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf\">indexOf</a></li>\n\t\t\t<li><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf\" target=\"_blank\">lastIndexOf</a></li>\n\t\t\t<li><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map\" target=\"_blank\">map</a></li>\n\t\t\t<li><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some\" target=\"_blank\">some</a></li>\n\t\t</ul>\n\nBesides, Balalaika has few additional methods such as:\n#### ``on``\n```js\n$('.my-selector').on('click.namespace', function() {\n\talert('I need my balalaika');\n});\n```\n#### ``off``\n```js\n$('.my-selector').off('click.namespace');\n```\n#### ``is``\n```js\n$('.my-selector').on('click', function(evt) {\n\tif($(evt.target).is('.another-selector')) {\n\t\talert('I need my balalaika');\n\t}\n});\n```\n#### ``extend``\n```js\nvar myObject = {a:1};\n$.extend(myObject,{\n\tb: 2\n});\n```\n#### DOM-ready feature\n```js\n$(function() {\n\t// Do something with DOM\n});\n```\n\n### It provides very few functions, doesn't it?\nYep. 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:\n```js\n$.fn.hasClass = function( className ) {\n\treturn !!this[ 0 ] && this[ 0 ].classList.contains( className );\n};\n```\n```js\n$.fn.addClass = function( className ) {\n\tthis.forEach( function( item ) {\n\t\tvar classList = item.classList;\n\t\tclassList.add.apply( classList, className.split( /\\s/ ) );\n\t});\n\treturn this;\n};\n```\n```js\n$.fn.removeClass = function( className ) {\n\tthis.forEach( function( item ) {\n\t\tvar classList = item.classList;\n\t\tclassList.remove.apply( classList, className.split( /\\s/ ) );\n\t});\n\treturn this;\n};\n```\n```js\n$.fn.toggleClass = function( className, b ) {\n\tthis.forEach( function( item ) {\n\t\tvar classList = item.classList;\n\t\tif( typeof b !== 'boolean' ) {\n\t\t\tb = !classList.contains( className );\n\t\t}\n\t\tclassList[ b ? 'add' : 'remove' ].apply( classList, className.split( /\\s/ ) );\n\t});\n\treturn this;\n};\n```\nAnd so on...\n\n### More examples\n#### Find elements inside another element\n```js\nvar elements = $('.my-selector', el);\n```\n\n#### Parse HTML\n```js\nvar elements = $('<div><span class=\"yeah\"></span></div>');\n```\n\n#### Extended parsing function\nPay attention that example above doesn't parse contextual elements such as ``td``, ``tr``, etc. But function below does:\n```js\n$.parseHTML = function( html ) {\n\tvar node = document.createElement( 'div' ),\n\t\t// wrapMap is taken from jQuery\n\t\twrapMap = {\n\t\t\t\toption: [ 1, \"<select multiple='multiple'>\", \"</select>\" ],\n\t\t\t\tlegend: [ 1, \"<fieldset>\", \"</fieldset>\" ],\n\t\t\t\tthead: [ 1, \"<table>\", \"</table>\" ],\n\t\t\t\ttr: [ 2, \"<table><tbody>\", \"</tbody></table>\" ],\n\t\t\t\ttd: [ 3, \"<table><tbody><tr>\", \"</tr></tbody></table>\" ],\n\t\t\t\tcol: [ 2, \"<table><tbody></tbody><colgroup>\", \"</colgroup></table>\" ],\n\t\t\t\tarea: [ 1, \"<map>\", \"</map>\" ],\n\t\t\t\t_: [ 0, \"\", \"\" ]\n\t\t},\n\t\twrapper,\n\t\ti;\n\t\t\n\thtml = html.replace( /^\\s+|\\s+$/g, '' );\n\t\n\twrapMap.optgroup = wrapMap.option;\n\twrapMap.tbody = wrapMap.tfoot = wrapMap.colgroup = wrapMap.caption = wrapMap.thead;\n\twrapMap.th = wrapMap.td;\n\t\n\twrapper = wrapMap[ /<([\\w:]+)/.exec( html )[ 1 ] ] || wrapMap._;\n\t\n\tnode.innerHTML = wrapper[ 1 ] + html + wrapper[ 2 ];\n\t\n\ti = wrapper[ 0 ];\n\t\n\twhile( i-- ) {\n\t\tnode = node.children[ 0 ];\n\t}\n\t\n\treturn $( node.children );\n};\n\nvar myElements = $.parseHTML('<tr><td></td></tr>');\n```\n\n#### Adding styles for elements\n```js\n$('.my-selector').forEach(function(el) {\n\t$.extend( el.style, {\n\t\twidth: '30px',\n\t\tbackgroundColor: 'red'\n\t});\n});\n```\n#### Delegated events\n```js\n$('.my-selector').on('click', function(evt) {\n\tvar node = evt.target;\n\twhile(node !== this) {\n\t\tif($(node).is('.delegated-selector')) {\n\t\t\t// Handle it!\n\t\t\tbreak;\n\t\t}\n\t\tnode = node.parentNode;\n\t}\n});\n```\n#### ``$.fn.parents`` plugin\n```js\n$.fn.parents = function(selector) {\n\tvar collection = $();\n\tthis.forEach(function(node) {\n\t\tvar parent;\n\t\twhile((node = node.parentNode) && (node !== document)) {\n\t\t\tif(selector) {\n\t\t\t\tif($(node).is(selector)) {\n\t\t\t\t\tparent = node;\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tparent = node;\n\t\t\t}\n\t\t\tif(parent && !~collection.indexOf(parent)) {\n\t\t\t\tcollection.push(parent);\n\t\t\t}\n\t\t}\n\t});\n\t\n\treturn collection;\n};\n```\n**Licensed under MIT License**\n","_attachments":{},"homepage":"https://github.com/finom/balalaika#readme","bugs":{"url":"https://github.com/finom/balalaika/issues"},"license":"MIT"}