{"id":20314778,"url":"https://github.com/xizon/boot-helpers","last_synced_at":"2025-04-11T17:20:53.663Z","repository":{"id":77297398,"uuid":"433494582","full_name":"xizon/boot-helpers","owner":"xizon","description":"A small Vanilla JS utils alternative to jQuery.","archived":false,"fork":false,"pushed_at":"2024-12-24T09:36:14.000Z","size":1197,"stargazers_count":8,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-06T13:49:10.356Z","etag":null,"topics":["dom-manipulation","javascript-library","jquery-alternative","library","vanilla-javascript","vanilla-js"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/boot-helpers","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xizon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2021-11-30T16:01:02.000Z","updated_at":"2024-12-24T09:36:18.000Z","dependencies_parsed_at":"2023-07-28T05:16:44.516Z","dependency_job_id":null,"html_url":"https://github.com/xizon/boot-helpers","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xizon%2Fboot-helpers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xizon%2Fboot-helpers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xizon%2Fboot-helpers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xizon%2Fboot-helpers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xizon","download_url":"https://codeload.github.com/xizon/boot-helpers/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248447609,"owners_count":21105140,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dom-manipulation","javascript-library","jquery-alternative","library","vanilla-javascript","vanilla-js"],"created_at":"2024-11-14T18:16:40.941Z","updated_at":"2025-04-11T17:20:53.628Z","avatar_url":"https://github.com/xizon.png","language":"TypeScript","readme":"# BootHelpers\n  \n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"logo.png\"  alt=\"BootHelpers\"  width=\"180\" \u003e\n\u003c/p\u003e\n\n\nA small Vanilla JS utils alternative to jQuery.\n\n\n## NPM\n\n```sh\nnpm i boot-helpers\n```\n\n[https://www.npmjs.com/package/boot-helpers](https://www.npmjs.com/package/boot-helpers)\n\n\n\n## API\n\nAll methods are below.\n\n - [ready()](#ready)\n - [loader()](#loader)\n - [len()](#len)\n - [get()](#get)\n - [append()](#append)\n - [prepend()](#prepend)\n - [before()](#before)\n - [after()](#after)\n - [prependTo()](#prependTo)\n - [appendTo()](#appendTo)\n - [wrapInner()](#wrapInner)\n - [html()](#html)\n - [text()](#text)\n - [clone()](#clone)\n - [addClass()](#addClass)\n - [removeClass()](#removeClass)\n - [toggleClass()](#toggleClass)\n - [css()](#css)\n - [find()](#find)\n - [eq()](#eq)\n - [prev()](#prev)\n - [next()](#next)\n - [parent()](#parent)\n - [parents()](#parents)\n - [children()](#children)\n - [filter()](#filter)\n - [not()](#not)\n - [siblings()](#siblings)\n - [first()](#first)\n - [last()](#last)\n - [closest()](#closest)\n - [attr()](#attr)\n - [data()](#data)\n - [prop()](#prop)\n - [removeAttr()](#removeAttr)\n - [removeData()](#removeData)\n - [one()](#one)\n - [on()](#on)\n - [off()](#off)\n - [offset()](#offset)\n - [position()](#position)\n - [scrollTop()](#scrollTop)\n - [scrollLeft()](#scrollLeft)\n - [width()](#width)\n - [height()](#height)\n - [outerWidth()](#outerWidth)\n - [outerHeight()](#outerHeight)\n - [remove()](#remove)\n - [empty()](#empty)\n - [each()](#each)\n - [allAttrs()](#allAttrs)\n - [hasClass()](#hasClass)\n - [val()](#val)\n - [show()](#show)\n - [hide()](#hide)\n - [fadeIn()](#fadeIn)\n - [fadeOut()](#fadeOut)\n - [serializeArray()](#serializeArray)\n - [index()](#index)\n - [trigger()](#trigger)\n - [maxDimension()](#maxDimension)\n - [animate()](#animate)\n\n\n\n## Usage:\n\n\n### a) In Browser:\n```html\n\u003cscript src=\"boot-helpers.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    const __ = window['__']['default'];\n    \n\t__(selector).someMethod();\n\u003c/script\u003e\n```\n\n### b) In Node.js:\n```js\nimport 'boot-helpers';\nconst __ = window['__'];\n\n__(selector).someMethod();\n```\n\nOR\n\n```js\nconst { __ } = require('boot-helpers');\n\n__(selector).someMethod();\n```\n\n\n### c) In Node.js (for TypeScript):\n\n```js\nimport 'boot-helpers';\ndeclare global {\n    interface Window { __: any; }\n}\nconst __ = typeof window !== 'undefined' ? window['__'] : ()=\u003e void 0;\n\n__(selector).someMethod();\n```\n\n\n\n\n## Example:\n\n```js\n\n//+++++++++++++++++++++++++++++++++++++++++++\n// Page load\n//+++++++++++++++++++++++++++++++++++++++++++\n__( document ).ready( function() {\n\t//do something\n});\n\n\n__( 'body' ).loader({\n\timagesSelector: 'body img',\n\tvideosSelector: 'body video',\n\tstartEvent: function() {\n\t\t//do something\n\t\tconsole.log( '=\u003e loading.' );\n\t},\n\tprogressEvent: function(percent) {\n\t\t//do something\n\t\tconsole.log( '=\u003e progress: ' + percent + '%' );\n\t},\n\tendEvent: function() {\n\t\t\n\t\tconsole.log( '=\u003e loaded!!!' );\n\t\t//do something\n\t}\n});\n\n\n\n//+++++++++++++++++++++++++++++++++++++++++++\n// Dom demos\n//+++++++++++++++++++++++++++++++++++++++++++\n__( '.demo' ).remove();\n__( '.demo' ).empty();\n__( '.demo' ).show();\n__( '.demo' ).hide();\n__( '.demo' ).get(-1); //returns all elements\n__( '.demo' ).get(0); //returns someone element\n__( '.demo' ).len(); //returns length of elements\n__( '.demo' ).addClass( 'class-3' );\n__( '.demo, .demo2' ).addClass( 'class-4' );\n__( '.demo' ).find( 'li' ).addClass( 'class-1 class-2' );\n__( '.demo' ).find( 'li' ).removeClass( 'class-2' );\n__( '.demo' ).find( '\u003e .demo2' ).addClass( 'class-3' );\n__( '.demo' ).find( '\u003e .demo2' ).find( 'li' ).addClass( 'class-3-2' );\n__( '.demo' ).closest( '.container' ).addClass( 'class-4' );\n__( '.demo' ).css({\n\t'background': '#f00',\n\t'font-size': '18px'\n});\n__( '#demo' ).css( 'background-color', '#f60' );\n__( '.demo' ).data( 'bg', 'red' );\n__( '.demo' ).attr( 'disabled', 'disabled' );\n__( '.demo' ).width( 300 );\n__( '.menu li:first-child' ).width( \"50%\" );\n\nif( __( '.demo' ).data( 'activated' ) === null ) {\n\t//do something...\n}\nif( __( '.demo' ).attr( 'data-activated' ) === null ) {\n\t//do something...\n}\t\n\n__( '.menu li' ).eq(1).append( '\u003cspan style=\"color:green\"\u003eafter\u003c/span\u003e');\n__( '.menu li' ).eq(1).prepend( '\u003cspan style=\"color:red\"\u003ebefore\u003c/span\u003e');\n__( '.menu li' ).first().before( '\u003cli style=\"color:green\"\u003e(first)before\u003c/li\u003e');\n__( '.menu li' ).last().after( '\u003cli style=\"color:red\"\u003e(last)after\u003c/li\u003e');\n__( 'h1' ).wrapInner( '\u003cspan class=\"new-div\" /\u003e' );\n√√\n__( 'h1' ).text( 'New H1' );\n\n__( '.demo1' ).prev().addClass( 'prev' );\n__( '.demo2' ).next().addClass( 'next' );\n__( '.demo3' ).parent().addClass( 'parent' );\n__( '.menu' ).parents().addClass( 'all-parents' );\n__( '.demo' ).children().addClass( 'children-all' );\n__( '.class-1' ).siblings().addClass( 'class-siblings' );\n\n__( '.demo1' ).prev( 'ul' ).addClass( 'prev' );\n__( '.demo2' ).next( 'ul' ).addClass( 'next' );\n__( '.demo3' ).parent( 'ul' ).addClass( 'parent' );\n__( '.menu' ).parents( 'ul' ).addClass( 'all-parents' );\n__( '.demo' ).children( '.demo-children2' ).addClass( 'children-single' );\n__( '.class-1' ).siblings( 'ul' ).addClass( 'class-siblings' );\n\n\n__( '.class-1' ).not( '.class-2' ).addClass( 'class-not' );\n__( '.class-1' ).filter( '.class-2' ).addClass( 'class-filter' );\n\n__( '.demo' ).trigger( 'click' );\n__( '.demo' ).toggleClass( 'class-toggle-1 class-toggle-2' );\n\n\n//append HTML Element\nconst htmlObject = document.createElement('div');\nhtmlObject.innerHTML = '\u003cspan style=\"color:green\"\u003eafter\u003c/span\u003e';\n__( '.menu li' ).eq(1).append( htmlObject.firstChild );\n\n//clone HTML Element\nconst cloneHTML = __( '.uix-menu__container' ).clone();\n__( cloneHTML ).addClass( 'is-mobile' );\n__( 'body' ).prependTo( cloneHTML );\n__( 'body' ).appendTo( cloneHTML );\n\n\n\n//+++++++++++++++++++++++++++++++++++++++++++\n// Click event demos\n//+++++++++++++++++++++++++++++++++++++++++++\n\n\n__( '.menu li a' ).off( 'click' ).one( 'click', function( e ) {\n\te.preventDefault();\n\tconsole.log( 'This will be clicked only once' );\n});\n\n\n__( '.menu li' ).off( 'click' ).on( 'click', function( e ) {\n\tconsole.log('e: ', e);\n\tconsole.log('this: ', this);\n\tconsole.log('index(): ', __( this ).index());\n\tconsole.log('attr(class): ', __( this ).attr( 'class' ));\n\t__( this ).addClass( 'new-class' )\n});\n\n\n__( document ).off( 'click', '.menu li' );\n__( document ).on( 'click', '.menu li', function( e ) {\n\tconsole.log('e: ', e);\n\tconsole.log('this: ', this);\n\tconsole.log('index(): ', __( this ).index());\n\tconsole.log('attr(class): ', __( this ).attr( 'class' ));\n\t__( this ).addClass( 'new-class' )\n});\n\n\n__( '#imghere' ).off( 'click', imgFn);\n__( '#imghere' ).on( 'click', imgFn);\nfunction imgFn() {\n\tconsole.log( 'imgFn' );\n}\n\n\n\n//+++++++++++++++++++++++++++++++++++++++++++\n// Retrieve data demos\n//+++++++++++++++++++++++++++++++++++++++++++\nconsole.log( '\u003ch1\u003e content: ' + __( 'h1' ).html());\nconsole.log( '\u003ch1\u003e content: ' + __( 'h1' ).text());\nconsole.log( 'length of .menu li: ' + __( '.menu li' ).len() );\nconsole.log( 'length of #none: ' + __( '#none' ).len() );\nconsole.log( 'width(): ' + __( '.demo' ).width() );\nconsole.log( 'outerWidth(): ' + __( '.demo' ).outerWidth() );\nconsole.log( 'outerWidth( true ): ' + __( '.demo' ).outerWidth(true) );\n\nconsole.log( 'height(): ' + __( '.demo' ).height() );\nconsole.log( 'outerHeight(): ' + __( '.demo' ).outerHeight() );\nconsole.log( 'outerHeight( true ): ' + __( '.demo' ).outerHeight(true) );\t\n\nconsole.log( 'document h: ', __( document ).height() );\nconsole.log( 'document w: ', __( document ).width() );\nconsole.log( 'window h: ', __( window ).height() );\t\t\t\nconsole.log( 'window h: ', __( window ).width() );\t\t\t\nconsole.log( 'window scrollTop: ', __( window ).scrollTop() );\t\t\t\nconsole.log( 'window scrollLeft: ', __( window ).scrollLeft() );\t\n\n\nconsole.log( 'data: [data-bg] value: ' + __( '.demo' ).data( 'bg' ) );\nconsole.log( 'attr: [disabled] value: ' + __( '.demo' ).attr( 'disabled' ) );\nconsole.log( 'allAttrs(): ', __( '.demo' ).allAttrs() );\n\n\nconsole.log( __( '.demo' ).hasClass( 'class-1' ) );\nconsole.log( __( 'h1' ).offset() );\nconsole.log( __( 'h1' ).position() );\t\t\nconsole.log( __( '.demo' ).maxDimension() );\t\t\nconsole.log( __( '.menu li:nth-child(2)' ).index() );\n\n\n// Traverse all attribute names and values\nconst allAttrs = __( '#demo' ).allAttrs();\nfor (let key in allAttrs) {\n\tconsole.log( key + ' = ' + allAttrs[key] );\n}\n\n\n\n//+++++++++++++++++++++++++++++++++++++++++++\n// Loop demos\n//+++++++++++++++++++++++++++++++++++++++++++\n__( '.menu li' ).each( function( index, curSelector )  {\n\tconsole.log( index + ' : ' );\n\tconsole.log( this );\n\tthis.style.background = '#333';\n\t__( this ).css({\n\t\t'background': '#f00',\n\t\t'font-size': '18px'\n\t});\n\t\n\t\n\t//Nested `each() `\n\t//__( curSelector) are generally used for exact each selector\n\t__( curSelector ).find( 'ul \u003e li' ).each( function( index ) {\n\t\t__( this ).attr( 'id', 'li-id-' + index );\n\t});\n\n\n\t//Nested `eq()`\n\tfor (let k = 0; k\u003cliNum; k++) {\n\t\t__( curSelector + ' ul \u003e li' ).eq(k).css({\n\t\t\t'font-size'        : '18px'\n\t\t});\n\t\t\n\t\t__( curSelector + ' ul \u003e li:nth-child('+k+') \u003e a' ).css({\n\t\t\t'font-size'        : '18px'\n\t\t});\n\t}\n\n});\n\n\n//+++++++++++++++++++++++++++++++++++++++++++\n// Animation demos\n//+++++++++++++++++++++++++++++++++++++++++++\n__( '.demo' ).fadeOut(1000, function(){\n\tsetTimeout( function() {\n\t\t__( '.demo' ).fadeIn(3000);\n\t},1000 );\n\n});\n\n__( '.menu' ).animate( 'marginLeft', 0, 100, 'px', 1500, 'ease-out', function(){ console.log(this.className); } );\n__( '.menu' ).animate( 'marginTop', 0, 200, 'px', 1500, 'ease-out', function(){ console.log(this.className); } );\n\n\n\n//+++++++++++++++++++++++++++++++++++++++++++\n// AJAX demos\n//+++++++++++++++++++++++++++++++++++++++++++\n__.ajax({\n\turl: 'https://restcountries.com/v2/name/Argentina',\n\tmethod: 'GET',\n\tcomplete: function( data ) {\n\t\tconsole.log( '=\u003e ajax ok!' );\n\t\tconsole.log( data );\n\t}\n});\n\n\n\n//+++++++++++++++++++++++++++++++++++++++++++\n// Form demos\n//+++++++++++++++++++++++++++++++++++++++++++\n__( '#input-name-1' ).val(  );  //form control: `\u003cInput /\u003e`\n__( '#select-name-1' ).val( 'value-3' ); //form control: `\u003cSelect /\u003e`\n__( '#switch-name-1' ).val( true );   //form control: `\u003cSwitch /\u003e`\n__( '#checkbox-name-1' ).val( true );  //form control: `\u003cCheckbox /\u003e`\n__('input[name=\"radio-name-1\"]').val( 'value-3' ); //form control: `\u003cRadio /\u003e`\n\n\nconsole.log( '__( val(): ' + __( '#input' ).val());\n\n__( '#checkbox1' ).prop('checked', true);\nconsole.log( '__( prop(): ' + __( '#checkbox2' ).prop( 'checked' ));\t\n\n__( '#input' ).prop('disabled', true);\n\n\n// To send data in the application/x-www-form-urlencoded format instead\nconst formData = new FormData();\nconst defaultPostData = {\n\taction  : 'load_singlepages_ajax_content'\n};\nfor(let k in defaultPostData) {\n\tformData.append(k, defaultPostData[k]);\n}\n\n// For multiple form fields data acquisition\nconst oldFormData = __( '#form' ).serializeArray();  \noldFormData.forEach(function(item){\n\tformData.append(item.name, item.value);\n});\n\n\n\n//+++++++++++++++++++++++++++++++++++++++++++\n// Utilities demos\n//+++++++++++++++++++++++++++++++++++++++++++\nconsole.log( __.isTouchCapable() );  //true or false\nconsole.log( __.browser.isIE );  //.isMobile, .isAndroid, .isPC, .isSafari, .isIE, .supportsPassive\nconsole.log( __.GUID.create() );\nconsole.log( __.math.evaluate( '100/3' ) );\nconsole.log( __.math.getRandomFloat(1, 10) );\nconsole.log( __.math.getDegree(135) );\nconsole.log( __.math.getRadian(1) );\nconsole.log( __.math.getPolarCoord(10,30,0) );\nconsole.log( __.cssProperty.getAbsoluteCoordinates( __( '.col-12' )[0] ).left );\nconsole.log( __.cssProperty.getTransitionDuration( __( '.col-12' )[0] ) );\nconsole.log( __.styleFormat( 'font-size: 10px;background: #51B801; color:#fff; border-radius: 5px;padding: 2px 3px;display: inline-block;margin-left: 3px;' ) )\nconsole.log( __.trim( 'string string spacing string' ) );\nconsole.log( __.lastUrlParamFormat( 'string-string-spacing_string' ) );\nconsole.log( __.removeFirstLastStr( ',string,string,string,' ) );\nconsole.log( __.toSlug( 'string String2-s' ) );\nconsole.log( __.htmlEncode( '\u003cspan style=\"color:red\"\u003etext\u003c/span\u003e' ) );\nconsole.log( __.htmlDecode( '\u0026lt;span style=\"color:red\"\u0026gt;text\u0026lt;/span\u0026gt;' ) );\n\n\n\nconsole.log( __.validate.isMobile( '13167678787' ) ); //true\nconsole.log( __.validate.isTel( '123-456-7890' ) ); //true\nconsole.log( __.validate.isEmail( 'name@gmail.com' ) );\t //true\nconsole.log( __.validate.isNumber( '1421.231' ) );\t//true\nconsole.log( __.validate.isInt( '1421.231' ) ); //false\t\t\nconsole.log( __.validate.isJSON( '{\"a\":true}' ) ); //true\t\n\n// Scroll spy\nconst myFunc = function(){ console.log('throttle'); }\nconst throttleFunc = __.throttle(myFunc, 300);\nwindow.removeEventListener('scroll', throttleFunc);\nwindow.removeEventListener('touchmove', throttleFunc);\nwindow.addEventListener('scroll', throttleFunc);\nwindow.addEventListener('touchmove', throttleFunc);\n\n\n// Click spy\nconst myFunc = function(){ console.log('debounce'); }\nconst debounceFunc = __.debounce(myFunc, 300);\nfunction handleClick() {\n\tdebounceFunc();\n}\t\n\n// Window spy\nconst debounceFuncWindow = __.debounce(windowUpdate, 50);\nwindow.removeEventListener('resize', debounceFuncWindow);\nwindow.addEventListener('resize', debounceFuncWindow);\n\n\n// Deep clone an element\nlet a = [1,2,3,4], b = __.deepClone(a);\nlet demo = document.querySelector( '#demo' ), demoCopy = __.deepClone(demo);\n\n\n// Set a default configuration\nfunction myFun(curElement, config) {\n\tif ( typeof curElement === typeof undefined ) return;\n\tconfig = __.setDefaultOptions({\n\t\t\"src\"          : false,\n\t\t\"htmlID\"       : false,\n\t\t\"fixed\"        : false,\n\t\t\"ajax\"         : false\n\t}, config);\n\n\tconsole.log( config ); //{src: 'https://google.com', htmlID: true, fixed: false, ajax: false}\n\n}\nmyFun( __( '.demo-trigger' ), {\n\tsrc: 'https://google.com',\n\thtmlID: true\n});\n\n\n//+++++++++++++++++++++++++++++++++++++++++++\n// Create a new method inherit from the constructor's prototype.\n//+++++++++++++++++++++++++++++++++++++++++++\n__.fn.myPlugin = function( color ) {\n\tthis.each( function(index) {\n\t\tthis.style.background = color;\n\t});\n\treturn this;\n};\n__('body').myPlugin( '#f00' );\n\n\n```\n\n\n\n## Installation And Test\n\nYou will need to have [node](https://nodejs.org/) setup on your machine. That will output the built distributables to `./dist/*`.\n\n\nBefore doing all dev stuff make sure you have `Node 14+` installed. After that, run the following code in the main directory to install the node module dependencies.\n\n```sh\n$ npm install\n```\n\nDebug application. It can be checked separately as TypeScript without compiling and packaging behavior.\n\n```sh\n$ npm run check\n```\n\nTo use webpack to bundle files.\n\n```sh\n$ npm run build\n$ npx -p typescript tsc dist/*.js --declaration --allowJs --emitDeclarationOnly --outDir dist\n```\n\nUnit Testing\n\n```sh\n$ npm run test\n```\n\n\n\n## Licensing\n\nLicensed under the [MIT](https://opensource.org/licenses/MIT).\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxizon%2Fboot-helpers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxizon%2Fboot-helpers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxizon%2Fboot-helpers/lists"}