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

a vanilla responsive equal heights

"use strict";(function(){HTMLElement.prototype.matchHeight=function(t){return new l(this,t)};function l(t,i){this.wrapEl=t;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),i),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()}}l.prototype._init=function(){window.addEventListener("resize",this._bind),window.addEventListener("orientationchange",this._bind)},l.prototype._unbind=function(){window.removeEventListener("resize",this._bind),window.removeEventListener("orientationchange",this._bind)},l.prototype._merge=function(t,i){if(t!=null)for(let s in t)i[s]=t[s];return i},l.prototype._throttle=function(t,i){let s,r;return function(){const o=Date.now();s&&o<s+i?(clearTimeout(r),r=setTimeout(function(){s=o,t()},i)):(s=o,t())}},l.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()},l.prototype._validateProperty=function(t){return String(t).toLowerCase().match(/^([a-z-]{2,})$/)},l.prototype._parse=function(t){return parseFloat(t)||0},l.prototype._rows=function(t){let i=1,s=-1,r=[],o=[];return t.forEach(e=>{let n=e.getBoundingClientRect().top-this._parse(window.getComputedStyle(e).getPropertyValue("margin-top"));s!=-1&&Math.floor(Math.abs(s-n))>=i&&(r.push(o),o=[],s=-1),o.push(e),s=n}),r.push(o),r},l.prototype._applyDataApi=function(t){Array.from(this.wrapEl.querySelectorAll("["+t+"]")).forEach(s=>{let r=s.getAttribute(t);this.settings=this._merge({attributeName:t,attributeValue:r},this.settings),this._apply()})},l.prototype._remove=function(){let t=[],i=this.settings;i.elements?t=Array.from(this.wrapEl.querySelectorAll(i.elements)):i.attributeName&&i.attributeValue&&(t=Array.from(this.wrapEl.querySelectorAll("["+i.attributeName+'="'+i.attributeValue+'"]'))),t.forEach(s=>{s.style.setProperty(i.property,""),s.getAttribute("style")===""&&s.removeAttribute("style")})},l.prototype._apply=function(){let t=this.settings,i=[];t.elements&&t.elements.trim()!=""?i=Array.from(this.wrapEl.querySelectorAll(t.elements)):t.attributeName&&this._validateProperty(t.attributeName)&&t.attributeValue&&t.attributeValue.trim()!=""&&(i=Array.from(this.wrapEl.querySelectorAll("["+t.attributeName+'="'+t.attributeValue+'"]')));let s=[i];t.byRow&&!t.target&&(i.forEach(r=>{let o=window.getComputedStyle(r).getPropertyValue("display");o&&o!=="inline-block"&&o!=="flex"&&o!=="inline-flex"&&(o="display: block; "),r.setAttribute("style-cache",r.getAttribute("style")||""),r.setAttribute("style",o+"padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; border-top-width: 0; border-bottom-width: 0; height: 100px; overflow: hidden;")}),s=this._rows(i),i.forEach(r=>{r.setAttribute("style",r.getAttribute("style-cache")||""),r.removeAttribute("style-cache"),r.getAttribute("style")===""&&r.removeAttribute("style")})),s.forEach(r=>{let o=0;if(t.target)o=t.target.getBoundingClientRect().height;else{if(t.byRow&&r.length<=1){r.forEach(e=>{this._resetStyle(e,t.property)});return}r.forEach(e=>{let n=e.getAttribute("style")||"",a=window.getComputedStyle(e).getPropertyValue("display");a&&a!=="inline-block"&&a!=="flex"&&a!=="inline-flex"&&(a="block"),e.setAttribute("style","display: "+a+";");let p=!0;t.remove&&(t.remove instanceof NodeList?t.remove.forEach(u=>{e===u&&(p=!1)}):e===t.remove&&(p=!1)),p&&e.getBoundingClientRect().height>o&&(o=e.getBoundingClientRect().height),n?e.setAttribute("style",n):e.style.setProperty("display",""),e.getAttribute("style")===""&&e.removeAttribute("style")})}r.forEach(e=>{let n=0;t.target&&e===t.target||(n=this._parse(window.getComputedStyle(e).getPropertyValue("padding-top"))+this._parse(window.getComputedStyle(e).getPropertyValue("padding-bottom"))+this._parse(window.getComputedStyle(e).getPropertyValue("border-top-width"))+this._parse(window.getComputedStyle(e).getPropertyValue("border-bottom-width")),e.style.setProperty(t.property,o-n+"px"),e.getBoundingClientRect().height<o&&e.style.setProperty(t.property,o+"px"),t.remove&&(t.remove instanceof NodeList?Array.from(t.remove).forEach(p=>{e===p&&this._resetStyle(p,t.property)}):e===t.remove&&this._resetStyle(e,t.property)))})})},l.prototype._resetStyle=function(t,i){this._validateProperty(i)&&(t.style.setProperty(i,""),t.getAttribute("style")===""&&t.removeAttribute("style"))}})();