BootHelpers

A small Vanilla JS utils alternative to jQuery.

NPM

npm i boot-helpers

https://www.npmjs.com/package/boot-helpers

API

All methods are below.

ready()
loader()
len()
get()
append()
prepend()
before()
after()
prependTo()
appendTo()
wrapInner()
html()
text()
clone()
addClass()
removeClass()
toggleClass()
css()
find()
eq()
prev()
next()
parent()
parents()
children()
filter()
not()
siblings()
first()
last()
closest()
attr()
data()
prop()
removeAttr()
removeData()
one()
on()
off()
offset()
position()
scrollTop()
scrollLeft()
width()
height()
outerWidth()
outerHeight()
remove()
empty()
each()
allAttrs()
hasClass()
val()
show()
hide()
fadeIn()
fadeOut()
serializeArray()
index()
trigger()
maxDimension()
animate()

Usage:

a) In Browser:

<script src="boot-helpers.min.js"></script>
<script>
    const __ = window['__']['default'];
    
	__(selector).someMethod();
</script>

b) In Node.js:

import 'boot-helpers';
const __ = window['__'];

__(selector).someMethod();

const { __ } = require('boot-helpers');

__(selector).someMethod();

c) In Node.js (for TypeScript):

import 'boot-helpers';
declare global {
    interface Window { __: any; }
}
const __ = typeof window !== 'undefined' ? window['__'] : ()=> void 0;

__(selector).someMethod();

Example:

//+++++++++++++++++++++++++++++++++++++++++++
// Page load
//+++++++++++++++++++++++++++++++++++++++++++
__( document ).ready( function() {
	//do something
});


__( 'body' ).loader({
	imagesSelector: 'body img',
	videosSelector: 'body video',
	startEvent: function() {
		//do something
		console.log( '=> loading.' );
	},
	progressEvent: function(percent) {
		//do something
		console.log( '=> progress: ' + percent + '%' );
	},
	endEvent: function() {
		
		console.log( '=> loaded!!!' );
		//do something
	}
});



//+++++++++++++++++++++++++++++++++++++++++++
// Dom demos
//+++++++++++++++++++++++++++++++++++++++++++
__( '.demo' ).remove();
__( '.demo' ).empty();
__( '.demo' ).show();
__( '.demo' ).hide();
__( '.demo' ).get(-1); //returns all elements
__( '.demo' ).get(0); //returns someone element
__( '.demo' ).len(); //returns length of elements
__( '.demo' ).addClass( 'class-3' );
__( '.demo, .demo2' ).addClass( 'class-4' );
__( '.demo' ).find( 'li' ).addClass( 'class-1 class-2' );
__( '.demo' ).find( 'li' ).removeClass( 'class-2' );
__( '.demo' ).find( '> .demo2' ).addClass( 'class-3' );
__( '.demo' ).find( '> .demo2' ).find( 'li' ).addClass( 'class-3-2' );
__( '.demo' ).closest( '.container' ).addClass( 'class-4' );
__( '.demo' ).css({
	'background': '#f00',
	'font-size': '18px'
});
__( '#demo' ).css( 'background-color', '#f60' );
__( '.demo' ).data( 'bg', 'red' );
__( '.demo' ).attr( 'disabled', 'disabled' );
__( '.demo' ).width( 300 );
__( '.menu li:first-child' ).width( "50%" );

if( __( '.demo' ).data( 'activated' ) === null ) {
	//do something...
}
if( __( '.demo' ).attr( 'data-activated' ) === null ) {
	//do something...
}	

__( '.menu li' ).eq(1).append( '<span style="color:green">after</span>');
__( '.menu li' ).eq(1).prepend( '<span style="color:red">before</span>');
__( '.menu li' ).first().before( '<li style="color:green">(first)before</li>');
__( '.menu li' ).last().after( '<li style="color:red">(last)after</li>');
__( 'h1' ).wrapInner( '<span class="new-div" />' );
√√
__( 'h1' ).text( 'New H1' );

__( '.demo1' ).prev().addClass( 'prev' );
__( '.demo2' ).next().addClass( 'next' );
__( '.demo3' ).parent().addClass( 'parent' );
__( '.menu' ).parents().addClass( 'all-parents' );
__( '.demo' ).children().addClass( 'children-all' );
__( '.class-1' ).siblings().addClass( 'class-siblings' );

__( '.demo1' ).prev( 'ul' ).addClass( 'prev' );
__( '.demo2' ).next( 'ul' ).addClass( 'next' );
__( '.demo3' ).parent( 'ul' ).addClass( 'parent' );
__( '.menu' ).parents( 'ul' ).addClass( 'all-parents' );
__( '.demo' ).children( '.demo-children2' ).addClass( 'children-single' );
__( '.class-1' ).siblings( 'ul' ).addClass( 'class-siblings' );


__( '.class-1' ).not( '.class-2' ).addClass( 'class-not' );
__( '.class-1' ).filter( '.class-2' ).addClass( 'class-filter' );

__( '.demo' ).trigger( 'click' );
__( '.demo' ).toggleClass( 'class-toggle-1 class-toggle-2' );


//append HTML Element
const htmlObject = document.createElement('div');
htmlObject.innerHTML = '<span style="color:green">after</span>';
__( '.menu li' ).eq(1).append( htmlObject.firstChild );

//clone HTML Element
const cloneHTML = __( '.uix-menu__container' ).clone();
__( cloneHTML ).addClass( 'is-mobile' );
__( 'body' ).prependTo( cloneHTML );
__( 'body' ).appendTo( cloneHTML );



//+++++++++++++++++++++++++++++++++++++++++++
// Click event demos
//+++++++++++++++++++++++++++++++++++++++++++


__( '.menu li a' ).off( 'click' ).one( 'click', function( e ) {
	e.preventDefault();
	console.log( 'This will be clicked only once' );
});


__( '.menu li' ).off( 'click' ).on( 'click', function( e ) {
	console.log('e: ', e);
	console.log('this: ', this);
	console.log('index(): ', __( this ).index());
	console.log('attr(class): ', __( this ).attr( 'class' ));
	__( this ).addClass( 'new-class' )
});


__( document ).off( 'click', '.menu li' );
__( document ).on( 'click', '.menu li', function( e ) {
	console.log('e: ', e);
	console.log('this: ', this);
	console.log('index(): ', __( this ).index());
	console.log('attr(class): ', __( this ).attr( 'class' ));
	__( this ).addClass( 'new-class' )
});


__( '#imghere' ).off( 'click', imgFn);
__( '#imghere' ).on( 'click', imgFn);
function imgFn() {
	console.log( 'imgFn' );
}



//+++++++++++++++++++++++++++++++++++++++++++
// Retrieve data demos
//+++++++++++++++++++++++++++++++++++++++++++
console.log( '<h1> content: ' + __( 'h1' ).html());
console.log( '<h1> content: ' + __( 'h1' ).text());
console.log( 'length of .menu li: ' + __( '.menu li' ).len() );
console.log( 'length of #none: ' + __( '#none' ).len() );
console.log( 'width(): ' + __( '.demo' ).width() );
console.log( 'outerWidth(): ' + __( '.demo' ).outerWidth() );
console.log( 'outerWidth( true ): ' + __( '.demo' ).outerWidth(true) );

console.log( 'height(): ' + __( '.demo' ).height() );
console.log( 'outerHeight(): ' + __( '.demo' ).outerHeight() );
console.log( 'outerHeight( true ): ' + __( '.demo' ).outerHeight(true) );	

console.log( 'document h: ', __( document ).height() );
console.log( 'document w: ', __( document ).width() );
console.log( 'window h: ', __( window ).height() );			
console.log( 'window h: ', __( window ).width() );			
console.log( 'window scrollTop: ', __( window ).scrollTop() );			
console.log( 'window scrollLeft: ', __( window ).scrollLeft() );	


console.log( 'data: [data-bg] value: ' + __( '.demo' ).data( 'bg' ) );
console.log( 'attr: [disabled] value: ' + __( '.demo' ).attr( 'disabled' ) );
console.log( 'allAttrs(): ', __( '.demo' ).allAttrs() );


console.log( __( '.demo' ).hasClass( 'class-1' ) );
console.log( __( 'h1' ).offset() );
console.log( __( 'h1' ).position() );		
console.log( __( '.demo' ).maxDimension() );		
console.log( __( '.menu li:nth-child(2)' ).index() );


// Traverse all attribute names and values
const allAttrs = __( '#demo' ).allAttrs();
for (let key in allAttrs) {
	console.log( key + ' = ' + allAttrs[key] );
}



//+++++++++++++++++++++++++++++++++++++++++++
// Loop demos
//+++++++++++++++++++++++++++++++++++++++++++
__( '.menu li' ).each( function( index, curSelector )  {
	console.log( index + ' : ' );
	console.log( this );
	this.style.background = '#333';
	__( this ).css({
		'background': '#f00',
		'font-size': '18px'
	});
	
	
	//Nested `each() `
	//__( curSelector) are generally used for exact each selector
	__( curSelector ).find( 'ul > li' ).each( function( index ) {
		__( this ).attr( 'id', 'li-id-' + index );
	});


	//Nested `eq()`
	for (let k = 0; k<liNum; k++) {
		__( curSelector + ' ul > li' ).eq(k).css({
			'font-size'        : '18px'
		});
		
		__( curSelector + ' ul > li:nth-child('+k+') > a' ).css({
			'font-size'        : '18px'
		});
	}

});


//+++++++++++++++++++++++++++++++++++++++++++
// Animation demos
//+++++++++++++++++++++++++++++++++++++++++++
__( '.demo' ).fadeOut(1000, function(){
	setTimeout( function() {
		__( '.demo' ).fadeIn(3000);
	},1000 );

});

__( '.menu' ).animate( 'marginLeft', 0, 100, 'px', 1500, 'ease-out', function(){ console.log(this.className); } );
__( '.menu' ).animate( 'marginTop', 0, 200, 'px', 1500, 'ease-out', function(){ console.log(this.className); } );



//+++++++++++++++++++++++++++++++++++++++++++
// AJAX demos
//+++++++++++++++++++++++++++++++++++++++++++
__.ajax({
	url: 'https://restcountries.com/v2/name/Argentina',
	method: 'GET',
	complete: function( data ) {
		console.log( '=> ajax ok!' );
		console.log( data );
	}
});



//+++++++++++++++++++++++++++++++++++++++++++
// Form demos
//+++++++++++++++++++++++++++++++++++++++++++
__( '#input-name-1' ).val(  );  //form control: `<Input />`
__( '#select-name-1' ).val( 'value-3' ); //form control: `<Select />`
__( '#switch-name-1' ).val( true );   //form control: `<Switch />`
__( '#checkbox-name-1' ).val( true );  //form control: `<Checkbox />`
__('input[name="radio-name-1"]').val( 'value-3' ); //form control: `<Radio />`


console.log( '__( val(): ' + __( '#input' ).val());

__( '#checkbox1' ).prop('checked', true);
console.log( '__( prop(): ' + __( '#checkbox2' ).prop( 'checked' ));	

__( '#input' ).prop('disabled', true);


// To send data in the application/x-www-form-urlencoded format instead
const formData = new FormData();
const defaultPostData = {
	action  : 'load_singlepages_ajax_content'
};
for(let k in defaultPostData) {
	formData.append(k, defaultPostData[k]);
}

// For multiple form fields data acquisition
const oldFormData = __( '#form' ).serializeArray();  
oldFormData.forEach(function(item){
	formData.append(item.name, item.value);
});



//+++++++++++++++++++++++++++++++++++++++++++
// Utilities demos
//+++++++++++++++++++++++++++++++++++++++++++
console.log( __.isTouchCapable() );  //true or false
console.log( __.browser.isIE );  //.isMobile, .isAndroid, .isPC, .isSafari, .isIE, .supportsPassive
console.log( __.GUID.create() );
console.log( __.math.evaluate( '100/3' ) );
console.log( __.math.getRandomFloat(1, 10) );
console.log( __.math.getDegree(135) );
console.log( __.math.getRadian(1) );
console.log( __.math.getPolarCoord(10,30,0) );
console.log( __.cssProperty.getAbsoluteCoordinates( __( '.col-12' )[0] ).left );
console.log( __.cssProperty.getTransitionDuration( __( '.col-12' )[0] ) );
console.log( __.styleFormat( 'font-size: 10px;background: #51B801; color:#fff; border-radius: 5px;padding: 2px 3px;display: inline-block;margin-left: 3px;' ) )
console.log( __.trim( 'string string spacing string' ) );
console.log( __.lastUrlParamFormat( 'string-string-spacing_string' ) );
console.log( __.removeFirstLastStr( ',string,string,string,' ) );
console.log( __.toSlug( 'string String2-s' ) );
console.log( __.htmlEncode( '<span style="color:red">text</span>' ) );
console.log( __.htmlDecode( '&lt;span style="color:red"&gt;text&lt;/span&gt;' ) );



console.log( __.validate.isMobile( '13167678787' ) ); //true
console.log( __.validate.isTel( '123-456-7890' ) ); //true
console.log( __.validate.isEmail( 'name@gmail.com' ) );	 //true
console.log( __.validate.isNumber( '1421.231' ) );	//true
console.log( __.validate.isInt( '1421.231' ) ); //false		
console.log( __.validate.isJSON( '{"a":true}' ) ); //true	

// Scroll spy
const myFunc = function(){ console.log('throttle'); }
const throttleFunc = __.throttle(myFunc, 300);
window.removeEventListener('scroll', throttleFunc);
window.removeEventListener('touchmove', throttleFunc);
window.addEventListener('scroll', throttleFunc);
window.addEventListener('touchmove', throttleFunc);


// Click spy
const myFunc = function(){ console.log('debounce'); }
const debounceFunc = __.debounce(myFunc, 300);
function handleClick() {
	debounceFunc();
}	

// Window spy
const debounceFuncWindow = __.debounce(windowUpdate, 50);
window.removeEventListener('resize', debounceFuncWindow);
window.addEventListener('resize', debounceFuncWindow);


// Deep clone an element
let a = [1,2,3,4], b = __.deepClone(a);
let demo = document.querySelector( '#demo' ), demoCopy = __.deepClone(demo);


// Set a default configuration
function myFun(curElement, config) {
	if ( typeof curElement === typeof undefined ) return;
	config = __.setDefaultOptions({
		"src"          : false,
		"htmlID"       : false,
		"fixed"        : false,
		"ajax"         : false
	}, config);

	console.log( config ); //{src: 'https://google.com', htmlID: true, fixed: false, ajax: false}

}
myFun( __( '.demo-trigger' ), {
	src: 'https://google.com',
	htmlID: true
});


//+++++++++++++++++++++++++++++++++++++++++++
// Create a new method inherit from the constructor's prototype.
//+++++++++++++++++++++++++++++++++++++++++++
__.fn.myPlugin = function( color ) {
	this.each( function(index) {
		this.style.background = color;
	});
	return this;
};
__('body').myPlugin( '#f00' );

Installation And Test

You will need to have node setup on your machine. That will output the built distributables to ./dist/*.

Before 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.

$ npm install

Debug application. It can be checked separately as TypeScript without compiling and packaging behavior.

$ npm run check

To use webpack to bundle files.

$ npm run build
$ npx -p typescript tsc dist/*.js --declaration --allowJs --emitDeclarationOnly --outDir dist

Unit Testing

$ npm run test

Licensing

Licensed under the MIT.

boot-helpers

BootHelpers

NPM

API

Usage:

a) In Browser:

b) In Node.js:

c) In Node.js (for TypeScript):

Example:

Installation And Test

Licensing

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

boot-helpers

BootHelpers

NPM

API

Usage:

a) In Browser:

b) In Node.js:

c) In Node.js (for TypeScript):

Example:

Installation And Test

Licensing

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads