LightH

equal height javascript widthout jquery

by tripcollor

HTML

<div class="container">
  <div data-mh="item1" class="coral item1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt sint optio nisi a alias magnam, neque porro dolor, aliquam aperiam ullam debitis labore deserunt vero nobis placeat voluptates ab illum.
  </div>
  <div data-mh="item1" class=" orange item1">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt sint optio nisi a alias magnam, neque porro dolor, aliquam aperiam ullam debitis labore deserunt vero nobis placeat voluptates ab illum.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt sint optio nisi a alias magnam, neque porro dolor, aliquam aperiam ullam debitis labore deserunt vero nobis placeat voluptates ab illum.
  </div>
  <div data-mh="item1" class="orange item1">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt sint optio nisi a alias magnam, neque porro dolor, aliquam aperiam ullam debitis labore deserunt vero nobis placeat voluptates ab illum.
  </div>
  <div data-mh="item1" class="coral item1">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt sint optio nisi a alias magnam, neque porro dolor, aliquam aperiam ullam debitis labore deserunt vero nobis placeat voluptates ab illum.
  </div>
</div>
<br>
<br>
<br>
<div class="container">
  <div data-mh="item2" class="coral item2">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt sint optio nisi a alias magnam, neque porro dolor, aliquam aperiam ullam debitis labore deserunt vero nobis placeat voluptates ab illum.
  </div>
  <div data-mh="item2" class="orange item2">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt sint optio nisi a alias magnam, neque porro dolor, aliquam aperiam ullam debitis labore deserunt vero nobis placeat voluptates ab illum.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt sint optio nisi a alias magnam
  </div>
  <div...

CSS

.container{
  font-size: 0;
}
.coral{
  background: coral;
}
.orange{
  background: orange;
}
.item1{
  font-size: 16px;
  display: inline-block;
  vertical-align: top;
  width: 50%;
  padding: 15px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.item2{
  font-size: 16px;
  display: inline-block;
  vertical-align: top;
  width: 50%;
  padding: 15px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

JavaScript

class LightH {

    constructor(settings) {
    	if(settings){
         this.targets = settings.targets ? settings.targets : null;
         this.target = settings.target ? settings.target : null;
         this.responsive = settings.responsive ? settings.responsive : null;
         this.start();
      }

      this.atr = 'data-mh';
    }
    
    //Функция при изменении размеров экрана
    resize(func){
      window.addEventListener('load', func);
      window.addEventListener('resize', func);
    }
    
    //Cтартовая функция
    start(){
    	this.main();
      this.resize(this.main.bind(this));
    }

		//Главная функция ее вызывает стартовая start()
    main() {
      if(this.targets){ //Если мы принимаем сассив свойства targets
      	this.equalListElements(this.targets, 'class');
      } else if(this.target){ //Если мы принимаем строку класса элементов и работаем с ними детально
      	this.detail();
      } else { //Иначе мы работаем по атрибутам data-mh
      	let listNames = [];
        let elements = document.querySelectorAll(`*[${this.atr}]`);
        
        for(let i=0; i<elements.length; i++){
        	let atrName = elements[i].getAttribute(this.atr);
        	listNames.push(atrName);
        }
        listNames = this.uniq(listNames);
        this.equalListElements(listNames, 'atr');
      }
    }
    
    //Функция для детальной настройки для каждой группы элементов
    detail(){
      this.equalElement(this.target);
      if(this.responsive){
         for(let i=0; i<this.responsive.length; i++){
        	let breakpoint = this.responsive[i].breakpoint;
        	let disabled = this.responsive[i].disabled;
          this.resize(function(){
          	console.log(document.documentElement.clientWidth);
          });
          if(disabled){
            let destroy = this.destroyOnResize(this.target, breakpoint);
            this.resize(destroy);
          } else {
          	let build = this.buildOnResize(this.target, breakpoint);
           ...