HelpersJS

In this example below you will see how to do a HelpersJS with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by felvieira, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright felvieira ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>HelpersJS</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
  
  
</head>

<body>

  <button class="botao teste">BOTAO</button>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/felvieira/helpersjs-qoxJxP */
function $id(el) {
	return document.getElementById(el);
}

function $name(el) {
	return document.getElementsByName(el);
}

function $tag(el) {
	document.getElementsByTagName(el);
}

function $all(el) {
	return document.querySelectorAll(el);
}

function $sel(el) {
	return document.querySelector(el);
}

function trim(s) {
	return s.replace(/^\s+|\s+$/, "");
}

function hasClass(target, className) {
	return new RegExp('(\\s|^)' + className + '(\\s|$)').test(target.className);
}

function addClass(ele, cls) {
	if (!hasClass(ele, cls)) ele.className += " " + cls;
}

function removeClass(ele, cls) {
	if (hasClass(ele, cls)) {
		var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
		ele.className = ele.className.replace(reg, '');
	}
}

function toggleShown(sel) {
	var e = document.querySelector(sel);
	if (e.style.display == 'none') {
		e.style.display = 'block';
	} else {
		e.style.display = 'none';
	}
}

function toggleClass(ele, cls) {
	if (ele.classList) {
		ele.classList.toggle(cls);
	} else {
		var classes = ele.className.split(' ');
		var existingIndex = -1;
    for (var i = classes.length; i--;) {
      if (classes[i] === cls)
        existingIndex = i;
    }

		if (existingIndex >= 0)
			classes.splice(existingIndex, 1);
		else
			classes.push(cls);

		ele.className = classes.join(' ');
	}
}


let botao = document.querySelector('.botao');

botao.onclick = function(){toggleClass(botao,'teste')}



// for crossbrowser
// document.documentElement.clientWidth
// document.body.clientWidth
function heightChange(elm, callback) {
	let lastHeight = elm.clientHeight,
		newHeight;
	(function run() {
		newHeight = elm.clientHeight;
		if (lastHeight != newHeight)
			callback();
		lastHeight = newHeight;

		if (elm.heightChangeTimer)
			clearTimeout(elm.heightChangeTimer);

		elm.heightChangeTimer = setTimeout(run, 200);
	})();
}

Comments