vanilla-match-height/dist/vanilla-match-height.min.js

a vanilla responsive equal heights

"use strict";(function(){HTMLElement.prototype.matchHeight=function(t){return new o(this,t)};function o(t,e){this.wrapEl=t,this._remains=[];let s={elements:null,byRow:!0,target:null,attributeName:null,attributeValue:null,property:"height",remove:null,events:!0,throttle:80,beforeUpdate:null,afterUpdate:null};if(this.settings=Object.assign(Object.assign({},s),e),this._validateProperty(this.settings.property)||(this.settings.property="height"),this.settings.events){const r=this._applyAll.bind(this);document.readyState!=="loading"?this._applyAll():document.addEventListener("DOMContentLoaded",r,{once:!0}),this.settings.throttle&&this.settings.throttle>0&&(this._bind=this._throttle(r,this.settings.throttle)),this._init()}}o.prototype._init=function(){window.addEventListener("resize",this._bind),window.addEventListener("orientationchange",this._bind)},o.prototype._unbind=function(){window.removeEventListener("resize",this._bind),window.removeEventListener("orientationchange",this._bind)},o.prototype._throttle=function(t,e){let s,r;return function(){const i=Date.now();s&&i<s+e?(clearTimeout(r),r=setTimeout(function(){s=i,t()},e)):(s=i,t())}},o.prototype._applyAll=function(){this.settings&&this.settings.beforeUpdate&&this.settings.beforeUpdate(),this._apply(),this.settings.attributeName&&this._validateProperty(this.settings.attributeName)&&this._applyDataApi(this.settings.attributeName),this._applyDataApi("data-match-height"),this._applyDataApi("data-mh"),this.settings&&this.settings.afterUpdate&&this.settings.afterUpdate()},o.prototype._validateProperty=function(t){return String(t).toLowerCase().match(/^([a-z-]{2,})$/)},o.prototype._applyDataApi=function(t){let e=Array.from(this.wrapEl.querySelectorAll("["+t+"]"));e.forEach(r=>{this._resetStyle(r,this.settings.property)});const s=new Map;e.forEach(r=>{const i=r.getAttribute(t);i&&(s.has(i)||s.set(i,[]),s.get(i).push(r))}),s.forEach(r=>{this._update(r)})},o.prototype._remove=function(){let t=[],e=this.settings;e.elements?t=Array.from(this.wrapEl.querySelectorAll(e.elements)):e.attributeName&&e.attributeValue&&(t=Array.from(this.wrapEl.querySelectorAll("["+e.attributeName+'="'+e.attributeValue+'"]'))),t.forEach(s=>{s.style.setProperty(e.property,""),s.getAttribute("style")===""&&s.removeAttribute("style")})},o.prototype._apply=function(){let t=this.settings,e=[];t.elements&&t.elements.trim()!=""?e=Array.from(this.wrapEl.querySelectorAll(t.elements)):t.attributeName&&this._validateProperty(t.attributeName)&&t.attributeValue&&t.attributeValue.trim()!=""&&(e=Array.from(this.wrapEl.querySelectorAll("["+t.attributeName+'="'+t.attributeValue+'"]'))),this._update(e)},o.prototype._update=function(t){t.length!==0&&(this._remains=Array.prototype.map.call(t,e=>({el:e,top:0,height:0})),this._remains.forEach(e=>{this._resetStyle(e.el,this.settings.property)}),this._process())},o.prototype._process=function(){this._remains.forEach(i=>{const n=i.el.getBoundingClientRect();i.top=this.settings.byRow?n.top:0,i.height=n.height}),this._remains.sort((i,n)=>i.top-n.top);const t=1,e=this._remains[0].top,s=this._remains.filter(i=>Math.abs(i.top-e)<=t);let r=0;this.settings.target?r=this.settings.target.getBoundingClientRect().height:r=Math.max(...s.map(i=>i.height)),s.forEach(i=>{const n=window.getComputedStyle(i.el);if(n.boxSizing==="border-box")this.settings.property&&i.el.style.setProperty(this.settings.property,`${r}px`);else{const a=(parseFloat(n.paddingTop)||0)+(parseFloat(n.paddingBottom)||0)+(parseFloat(n.borderTopWidth)||0)+(parseFloat(n.borderBottomWidth)||0);this.settings.property&&i.el.style.setProperty(this.settings.property,`${r-a}px`)}this.settings.remove&&(this.settings.remove instanceof NodeList?Array.from(this.settings.remove).forEach(a=>{i.el===a&&this.settings.property&&a instanceof HTMLElement&&this._resetStyle(a,this.settings.property)}):i.el===this.settings.remove&&this.settings.property&&this._resetStyle(i.el,this.settings.property))}),this._remains.splice(0,s.length),0<this._remains.length&&this._process()},o.prototype._resetStyle=function(t,e){this._validateProperty(e)&&(t.style.setProperty(e,""),t.getAttribute("style")===""&&t.removeAttribute("style"))}})();