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();

OR

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( '[email protected]' ) );	 //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.

Name		Name	Last commit message	Last commit date
Latest commit History 23 Commits
build		build
dist		dist
src		src
test		test
.gitattributes		.gitattributes
.gitignore		.gitignore
.npmignore		.npmignore
LICENSE		LICENSE
README.md		README.md
babel.config.js		babel.config.js
logo.png		logo.png
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json
tsconfig.tsbuildinfo		tsconfig.tsbuildinfo

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

BootHelpers

NPM

API

Usage:

a) In Browser:

b) In Node.js:

c) In Node.js (for TypeScript):

Example:

Installation And Test

Licensing

About

Releases

Packages

Languages

License

xizon/boot-helpers

Folders and files

Latest commit

History

Repository files navigation

BootHelpers

NPM

API

Usage:

a) In Browser:

b) In Node.js:

c) In Node.js (for TypeScript):

Example:

Installation And Test

Licensing

About

Topics

Resources

License

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages