UNPKG

vue-equalizer

Version:

Vue Equalizer is a Vue.js component to help solve a common frontend development problem, where independent items and nested content need to be equal height.

2 lines (1 loc) 2.13 kB
var equalizer=function(e,t,n){"use strict";function i(e){i.installed||(i.installed=!0,e.component("equalizer",a))}t=t&&t.hasOwnProperty("default")?t.default:t,n=n&&n.hasOwnProperty("default")?n.default:n,function(){if("undefined"!=typeof document){var e=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css",t.styleSheet?t.styleSheet.cssText="":t.appendChild(document.createTextNode("")),e.appendChild(t)}}();var a={render:function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{staticClass:"eq-container"},[e._t("default")],2)},staticRenderFns:[],props:{classes:{type:Array,default:function(){return[]}},config:{type:Object,default:function(){return{0:void 0}}}},data:function(){return{equalize:t(function(){var e=this,t=this.getCurrentBreakpoint(),n=this.config[t];this.classes.forEach(function(t){var i=Array.prototype.slice.call(e.$el.querySelectorAll("."+t));e.chunk(i,n).forEach(function(t){e.setMaxHeight(t,1===n)})})},100)}},methods:{chunk:function(e){for(var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:e.length,n=e.slice(),i=[];n.length;)i.push(n.splice(0,t));return i},getCurrentBreakpoint:function(){var e=void 0;return this.breakpoints.some(function(t){return e=t,window.matchMedia("(min-width: "+t+"px)").matches}),e},getNaturalHeights:function(e){return Array.prototype.slice.call(e).map(function(e){return e.style.height="auto",e.clientHeight})},setMaxHeight:function(e,t){var i=this;n(e,function(){var n=i.getNaturalHeights(e),a=void 0;t||(a=Math.max.apply(null,n)+"px"),e.map(function(e){e.style.height=a})})}},computed:{breakpoints:function(){return Object.keys(this.config).sort(function(e,t){return t-e})}},mounted:function(){this.equalize(),this.equalize=this.equalize.bind(this),window.addEventListener("resize",this.equalize)},beforeDestroy:function(){this.equalize=this.equalize.bind(this),window.removeEventListener("resize",this.equalize)}},r={install:i},u=null;return"undefined"!=typeof window?u=window.Vue:"undefined"!=typeof global&&(u=global.Vue),u&&u.use(r),e.install=i,e.default=a,e}({},debounce,imagesLoaded);