vanilla-match-height
Advanced tools
Comparing version 1.1.1 to 1.1.2
@@ -0,1 +1,9 @@ | ||
<a name="1.1.2"></a> | ||
# 1.1.2 (2023-12-17) | ||
### release summary | ||
- Refactor to TypeScript | ||
- Update document | ||
<a name="1.1.1"></a> | ||
@@ -2,0 +10,0 @@ # 1.1.1 (2023-12-13) |
@@ -0,36 +1,18 @@ | ||
"use strict"; | ||
/** | ||
* vanilla-match-height v1.1.1 by @mitera | ||
* vanilla-match-height v1.1.2 by @mitera | ||
* Simone Miterangelis <simone@mite.it> | ||
* License: MIT | ||
*/ | ||
(function(){ | ||
'use strict'; | ||
(function () { | ||
// Extend the element method | ||
Element.prototype.matchHeight = function(settings) { | ||
HTMLElement.prototype.matchHeight = function (settings) { | ||
// @ts-ignore | ||
return new MatchHeight(this, settings); | ||
} | ||
}; | ||
/** | ||
* Merge two objects | ||
* | ||
* @param {Object} o1 Object 1 | ||
* @param {Object} o2 Object 2 | ||
* @return {Object} | ||
*/ | ||
if (typeof Object.merge != 'function') { | ||
Object.merge = function(o1, o2) { | ||
for (var i in o1) { | ||
o2[i] = o1[i]; | ||
} | ||
return o2; | ||
} | ||
} | ||
/** | ||
* matchHeight | ||
* | ||
* @param {Element} wrapEl | ||
* @param {Array} settings | ||
* @param {HTMLElement} wrapEl | ||
* @param {Settings} settings | ||
* constructor | ||
@@ -40,56 +22,63 @@ */ | ||
this.wrapEl = wrapEl; | ||
// Default settings | ||
let default_settings = { | ||
elements: '', | ||
elements: undefined, | ||
byRow: true, | ||
target: null, | ||
attributeName: null, | ||
attributeValue: null, | ||
target: undefined, | ||
attributeName: undefined, | ||
attributeValue: undefined, | ||
property: 'height', | ||
remove: null, | ||
remove: undefined, | ||
events: true, | ||
throttle: 80 | ||
}; | ||
if (settings != null) { | ||
this.settings = this._merge(settings, default_settings); | ||
} | ||
if (settings != null) { | ||
this.settings = Object.merge(settings, default_settings); | ||
} else { | ||
else { | ||
this.settings = default_settings; | ||
} | ||
if (!this._validateProperty(this.settings.property)) { | ||
this.settings.property = 'height'; | ||
} | ||
if (this.settings.events) { | ||
var $this = this; | ||
this.bind = function(){ $this._applyAll($this); }; | ||
window.addEventListener("DOMContentLoaded", this.bind, { once: true }); | ||
if (this.settings.throttle > 0) this.bind = this._throttle(this.bind, this.settings.throttle); | ||
this._bind = function () { $this._applyAll($this); }; | ||
window.addEventListener("DOMContentLoaded", this._bind, { once: true }); | ||
if (this.settings.throttle > 0) | ||
this._bind = this._throttle(this._bind, this.settings.throttle); | ||
this._init(); | ||
} | ||
} | ||
/** | ||
* Initialize the application | ||
*/ | ||
MatchHeight.prototype._init = function() { | ||
window.addEventListener("resize", this.bind); | ||
window.addEventListener("orientationchange", this.bind); | ||
} | ||
MatchHeight.prototype._init = function () { | ||
window.addEventListener("resize", this._bind); | ||
window.addEventListener("orientationchange", this._bind); | ||
}; | ||
/** | ||
* Unbind events | ||
*/ | ||
MatchHeight.prototype._unbind = function() { | ||
window.removeEventListener("resize", this.bind); | ||
window.removeEventListener("orientationchange", this.bind); | ||
} | ||
MatchHeight.prototype._unbind = function () { | ||
window.removeEventListener("resize", this._bind); | ||
window.removeEventListener("orientationchange", this._bind); | ||
}; | ||
/** | ||
* Merge two objects | ||
* | ||
* @param {Object} o1 Object 1 | ||
* @param {Object} o2 Object 2 | ||
* @return {Object} | ||
*/ | ||
MatchHeight.prototype._merge = function (o1, o2) { | ||
if (o1 != null) { | ||
for (var i in o1) { | ||
// @ts-ignore | ||
o2[i] = o1[i]; | ||
} | ||
} | ||
return o2; | ||
}; | ||
/** | ||
* _throttle | ||
@@ -100,3 +89,3 @@ * Throttle updates | ||
*/ | ||
MatchHeight.prototype._throttle = function(fn, threshold) { | ||
MatchHeight.prototype._throttle = function (fn, threshold) { | ||
let last, deferTimer; | ||
@@ -117,4 +106,3 @@ return function () { | ||
}; | ||
} | ||
}; | ||
/** | ||
@@ -125,10 +113,8 @@ * _applyAll | ||
*/ | ||
MatchHeight.prototype._applyAll = function($this) { | ||
MatchHeight.prototype._applyAll = function ($this) { | ||
if ($this == null) { | ||
$this = this; | ||
} | ||
$this._apply(); | ||
if ($this._validateProperty($this.settings.attributeName)) { | ||
if ($this.settings.attributeName && $this._validateProperty($this.settings.attributeName)) { | ||
$this._applyDataApi($this.settings.attributeName); | ||
@@ -138,4 +124,3 @@ } | ||
$this._applyDataApi('data-mh'); | ||
} | ||
}; | ||
/** | ||
@@ -146,10 +131,7 @@ * _validateProperty | ||
*/ | ||
MatchHeight.prototype._validateProperty = function(value) { | ||
MatchHeight.prototype._validateProperty = function (value) { | ||
return String(value) | ||
.toLowerCase() | ||
.match( | ||
/^([a-z-]{2,})$/ | ||
); | ||
} | ||
.match(/^([a-z-]{2,})$/); | ||
}; | ||
/** | ||
@@ -160,7 +142,6 @@ * _parse | ||
*/ | ||
MatchHeight.prototype._parse = function(value) { | ||
MatchHeight.prototype._parse = function (value) { | ||
// parse value and convert NaN to 0 | ||
return parseFloat(value) || 0; | ||
} | ||
}; | ||
/** | ||
@@ -172,22 +153,15 @@ * _rows | ||
*/ | ||
MatchHeight.prototype._rows = function(elements) { | ||
MatchHeight.prototype._rows = function (elements) { | ||
var $this = this; | ||
var tolerance = 1, | ||
lastTop = null, | ||
listRows = [], | ||
rows = []; | ||
var tolerance = 1, lastTop = -1, listRows = [], rows = []; | ||
// group elements by their top position | ||
elements.forEach(($that) => { | ||
var top = $that.getBoundingClientRect().top - $this._parse(window.getComputedStyle($that).getPropertyValue('margin-top')); | ||
// if the row top is the same, add to the row group | ||
if (lastTop != null && Math.floor(Math.abs(lastTop - top)) >= tolerance) { | ||
if (lastTop != -1 && Math.floor(Math.abs(lastTop - top)) >= tolerance) { | ||
listRows.push(rows); | ||
rows = []; | ||
lastTop = null; | ||
lastTop = -1; | ||
} | ||
rows.push($that); | ||
// keep track of the last row top | ||
@@ -197,6 +171,4 @@ lastTop = top; | ||
listRows.push(rows); | ||
return listRows; | ||
} | ||
}; | ||
/** | ||
@@ -207,5 +179,4 @@ * _applyDataApi | ||
*/ | ||
MatchHeight.prototype._applyDataApi = function(property) { | ||
MatchHeight.prototype._applyDataApi = function (property) { | ||
var $this = this; | ||
var $row = this.wrapEl.querySelectorAll('[' + property + ']'); | ||
@@ -215,7 +186,6 @@ // generate groups by their groupId set by elements using data-match-height | ||
var groupId = $el.getAttribute(property); | ||
$this.settings = Object.merge({attributeName: property, attributeValue: groupId}, $this.settings); | ||
$this.settings = $this._merge({ attributeName: property, attributeValue: groupId }, $this.settings); | ||
$this._apply(); | ||
}); | ||
} | ||
}; | ||
/** | ||
@@ -225,8 +195,9 @@ * _remove | ||
*/ | ||
MatchHeight.prototype._remove = function() { | ||
var $elements = [] | ||
MatchHeight.prototype._remove = function () { | ||
var $elements = []; | ||
var opts = this.settings; | ||
if (opts.elements) { | ||
$elements = this.wrapEl.querySelectorAll(opts.elements); | ||
} else { | ||
} | ||
else { | ||
if (opts.attributeName && opts.attributeValue) { | ||
@@ -238,6 +209,6 @@ $elements = this.wrapEl.querySelectorAll('[' + opts.attributeName + '="' + opts.attributeValue + '"]'); | ||
item.style.setProperty(opts.property, ''); | ||
if (item.getAttribute('style') === '') item.removeAttribute('style'); | ||
if (item.getAttribute('style') === '') | ||
item.removeAttribute('style'); | ||
}); | ||
} | ||
}; | ||
/** | ||
@@ -247,11 +218,11 @@ * _apply | ||
*/ | ||
MatchHeight.prototype._apply = function() { | ||
MatchHeight.prototype._apply = function () { | ||
var $this = this; | ||
var opts = $this.settings; | ||
var $elements = [] | ||
if (opts.elements) { | ||
var $elements = []; | ||
if (opts.elements && opts.elements.trim() != '') { | ||
$elements = this.wrapEl.querySelectorAll(opts.elements); | ||
} else { | ||
if (opts.attributeName && opts.attributeValue) { | ||
} | ||
else { | ||
if (opts.attributeName && $this._validateProperty(opts.attributeName) && opts.attributeValue && opts.attributeValue.trim() != '') { | ||
$elements = this.wrapEl.querySelectorAll('[' + opts.attributeName + '="' + opts.attributeValue + '"]'); | ||
@@ -261,10 +232,7 @@ } | ||
var rows = [$elements]; | ||
// get rows if using byRow, otherwise assume one row | ||
if (opts.byRow && !opts.target) { | ||
// must first force an arbitrary equal height so floating elements break evenly | ||
$elements.forEach(($that) => { | ||
var display = window.getComputedStyle($that).getPropertyValue('display'); | ||
// temporarily force a usable display value | ||
@@ -274,3 +242,2 @@ if (display && (display !== 'inline-block' && display !== 'flex' && display !== 'inline-flex')) { | ||
} | ||
// cache the original inline style | ||
@@ -281,6 +248,4 @@ $that.setAttribute('style-cache', $that.getAttribute('style') || ''); | ||
}); | ||
// get the array of rows (based on element top position) | ||
rows = this._rows($elements); | ||
// revert original inline styles | ||
@@ -290,9 +255,8 @@ $elements.forEach(($that) => { | ||
$that.removeAttribute('style-cache'); | ||
if ($that.getAttribute('style') === '') $that.removeAttribute('style'); | ||
if ($that.getAttribute('style') === '') | ||
$that.removeAttribute('style'); | ||
}); | ||
} | ||
rows.forEach(($row) => { | ||
var targetHeight = 0; | ||
if (!opts.target) { | ||
@@ -303,11 +267,8 @@ // skip apply to rows with only one item | ||
$this._resetStyle($that, opts.property); | ||
}) | ||
}); | ||
return; | ||
} | ||
// iterate the row and find the max height | ||
$row.forEach(($that) => { | ||
var style = $that.getAttribute('style') || '', | ||
display = window.getComputedStyle($that).getPropertyValue('display'); | ||
var style = $that.getAttribute('style') || '', display = window.getComputedStyle($that).getPropertyValue('display'); | ||
// temporarily force a usable display value | ||
@@ -317,6 +278,4 @@ if (display && (display !== 'inline-block' && display !== 'flex' && display !== 'inline-flex')) { | ||
} | ||
// ensure we get the correct actual height (and not a previously set height value) | ||
$that.setAttribute('style', 'display: ' + display + ';'); | ||
// find the max height (including padding, but not margin) | ||
@@ -331,3 +290,4 @@ var isTarget = true; | ||
}); | ||
} else { | ||
} | ||
else { | ||
if ($that === opts.remove) { | ||
@@ -343,22 +303,20 @@ isTarget = false; | ||
} | ||
// revert styles | ||
if (style) { | ||
$that.setAttribute('style', style); | ||
} else { | ||
} | ||
else { | ||
$that.style.setProperty('display', ''); | ||
} | ||
if ($that.getAttribute('style') === '') $that.removeAttribute('style'); | ||
if ($that.getAttribute('style') === '') | ||
$that.removeAttribute('style'); | ||
}); | ||
} else { | ||
} | ||
else { | ||
// if target set, use the height of the target element | ||
targetHeight = opts.target.getBoundingClientRect().height; | ||
} | ||
// iterate the row and apply the height to all elements | ||
$row.forEach(($that) => { | ||
var verticalPadding = 0; | ||
// don't apply to a target | ||
@@ -368,3 +326,2 @@ if (opts.target && $that === opts.target) { | ||
} | ||
// handle padding and border correctly (required when not using border-box) | ||
@@ -375,10 +332,7 @@ verticalPadding = $this._parse(window.getComputedStyle($that).getPropertyValue('padding-top')) + | ||
$this._parse(window.getComputedStyle($that).getPropertyValue('border-bottom-width')); | ||
// set the height (accounting for padding and border) | ||
$that.style.setProperty(opts.property, (targetHeight - verticalPadding) + 'px'); | ||
$that.style.setProperty(opts.property, (targetHeight - verticalPadding) + 'px'); | ||
if ($that.getBoundingClientRect().height < targetHeight) { | ||
$that.style.setProperty(opts.property, targetHeight + 'px'); | ||
$that.style.setProperty(opts.property, targetHeight + 'px'); | ||
} | ||
if (opts.remove) { | ||
@@ -391,3 +345,4 @@ if (opts.remove instanceof NodeList) { | ||
}); | ||
} else { | ||
} | ||
else { | ||
if ($that === opts.remove) { | ||
@@ -399,19 +354,16 @@ $this._resetStyle($that, opts.property); | ||
}); | ||
}); | ||
} | ||
}; | ||
/** | ||
* _resetStyle | ||
* @param {Element} $that | ||
* @param {HTMLElement} $that | ||
* @param {String} property | ||
*/ | ||
MatchHeight.prototype._resetStyle = function($that, property) { | ||
MatchHeight.prototype._resetStyle = function ($that, property) { | ||
if (this._validateProperty(property)) { | ||
$that.style.setProperty(property, ''); | ||
if ($that.getAttribute('style') === '') $that.removeAttribute('style'); | ||
if ($that.getAttribute('style') === '') | ||
$that.removeAttribute('style'); | ||
} | ||
} | ||
})(); | ||
}; | ||
})(); |
@@ -1,1 +0,1 @@ | ||
(function(){"use strict";Element.prototype.matchHeight=function(settings){return new MatchHeight(this,settings)};if(typeof Object.merge!="function"){Object.merge=function(o1,o2){for(var i in o1){o2[i]=o1[i]}return o2}}function MatchHeight(wrapEl,settings){this.wrapEl=wrapEl;let default_settings={elements:"",byRow:true,target:null,attributeName:null,attributeValue:null,property:"height",remove:null,events:true,throttle:80};if(settings!=null){this.settings=Object.merge(settings,default_settings)}else{this.settings=default_settings}if(!this._validateProperty(this.settings.property)){this.settings.property="height"}if(this.settings.events){var $this=this;this.bind=function(){$this._applyAll($this)};window.addEventListener("DOMContentLoaded",this.bind,{once:true});if(this.settings.throttle>0)this.bind=this._throttle(this.bind,this.settings.throttle);this._init()}}MatchHeight.prototype._init=function(){window.addEventListener("resize",this.bind);window.addEventListener("orientationchange",this.bind)};MatchHeight.prototype._unbind=function(){window.removeEventListener("resize",this.bind);window.removeEventListener("orientationchange",this.bind)};MatchHeight.prototype._throttle=function(fn,threshold){let last,deferTimer;return function(){const now=Date.now();if(last&&now<last+threshold){clearTimeout(deferTimer);deferTimer=setTimeout(function(){last=now;fn()},threshold)}else{last=now;fn()}}};MatchHeight.prototype._applyAll=function($this){if($this==null){$this=this}$this._apply();if($this._validateProperty($this.settings.attributeName)){$this._applyDataApi($this.settings.attributeName)}$this._applyDataApi("data-match-height");$this._applyDataApi("data-mh")};MatchHeight.prototype._validateProperty=function(value){return String(value).toLowerCase().match(/^([a-z-]{2,})$/)};MatchHeight.prototype._parse=function(value){return parseFloat(value)||0};MatchHeight.prototype._rows=function(elements){var $this=this;var tolerance=1,lastTop=null,listRows=[],rows=[];elements.forEach($that=>{var top=$that.getBoundingClientRect().top-$this._parse(window.getComputedStyle($that).getPropertyValue("margin-top"));if(lastTop!=null&&Math.floor(Math.abs(lastTop-top))>=tolerance){listRows.push(rows);rows=[];lastTop=null}rows.push($that);lastTop=top});listRows.push(rows);return listRows};MatchHeight.prototype._applyDataApi=function(property){var $this=this;var $row=this.wrapEl.querySelectorAll("["+property+"]");$row.forEach($el=>{var groupId=$el.getAttribute(property);$this.settings=Object.merge({attributeName:property,attributeValue:groupId},$this.settings);$this._apply()})};MatchHeight.prototype._remove=function(){var $elements=[];var opts=this.settings;if(opts.elements){$elements=this.wrapEl.querySelectorAll(opts.elements)}else{if(opts.attributeName&&opts.attributeValue){$elements=this.wrapEl.querySelectorAll("["+opts.attributeName+'="'+opts.attributeValue+'"]')}}$elements.forEach(item=>{item.style.setProperty(opts.property,"");if(item.getAttribute("style")==="")item.removeAttribute("style")})};MatchHeight.prototype._apply=function(){var $this=this;var opts=$this.settings;var $elements=[];if(opts.elements){$elements=this.wrapEl.querySelectorAll(opts.elements)}else{if(opts.attributeName&&opts.attributeValue){$elements=this.wrapEl.querySelectorAll("["+opts.attributeName+'="'+opts.attributeValue+'"]')}}var rows=[$elements];if(opts.byRow&&!opts.target){$elements.forEach($that=>{var display=window.getComputedStyle($that).getPropertyValue("display");if(display&&(display!=="inline-block"&&display!=="flex"&&display!=="inline-flex")){display="display: block; "}$that.setAttribute("style-cache",$that.getAttribute("style")||"");$that.setAttribute("style",display+"padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; border-top-width: 0; border-bottom-width: 0; height: 100px; overflow: hidden;")});rows=this._rows($elements);$elements.forEach($that=>{$that.setAttribute("style",$that.getAttribute("style-cache")||"");$that.removeAttribute("style-cache");if($that.getAttribute("style")==="")$that.removeAttribute("style")})}rows.forEach($row=>{var targetHeight=0;if(!opts.target){if(opts.byRow&&$row.length<=1){$row.forEach($that=>{$this._resetStyle($that,opts.property)});return}$row.forEach($that=>{var style=$that.getAttribute("style")||"",display=window.getComputedStyle($that).getPropertyValue("display");if(display&&(display!=="inline-block"&&display!=="flex"&&display!=="inline-flex")){display="block"}$that.setAttribute("style","display: "+display+";");var isTarget=true;if(opts.remove){if(opts.remove instanceof NodeList){opts.remove.forEach($el=>{if($that===$el){isTarget=false}})}else{if($that===opts.remove){isTarget=false}}}if(isTarget){if($that.getBoundingClientRect().height>targetHeight){targetHeight=$that.getBoundingClientRect().height}}if(style){$that.setAttribute("style",style)}else{$that.style.setProperty("display","")}if($that.getAttribute("style")==="")$that.removeAttribute("style")})}else{targetHeight=opts.target.getBoundingClientRect().height}$row.forEach($that=>{var verticalPadding=0;if(opts.target&&$that===opts.target){return}verticalPadding=$this._parse(window.getComputedStyle($that).getPropertyValue("padding-top"))+$this._parse(window.getComputedStyle($that).getPropertyValue("padding-bottom"))+$this._parse(window.getComputedStyle($that).getPropertyValue("border-top-width"))+$this._parse(window.getComputedStyle($that).getPropertyValue("border-bottom-width"));$that.style.setProperty(opts.property,targetHeight-verticalPadding+"px");if($that.getBoundingClientRect().height<targetHeight){$that.style.setProperty(opts.property,targetHeight+"px")}if(opts.remove){if(opts.remove instanceof NodeList){opts.remove.forEach($el=>{if($that===$el){$this._resetStyle($el,opts.property)}})}else{if($that===opts.remove){$this._resetStyle($that,opts.property)}}}})})};MatchHeight.prototype._resetStyle=function($that,property){if(this._validateProperty(property)){$that.style.setProperty(property,"");if($that.getAttribute("style")==="")$that.removeAttribute("style")}}})(); | ||
"use strict";(function(){HTMLElement.prototype.matchHeight=function(settings){return new MatchHeight(this,settings)};function MatchHeight(wrapEl,settings){this.wrapEl=wrapEl;let default_settings={elements:undefined,byRow:true,target:undefined,attributeName:undefined,attributeValue:undefined,property:"height",remove:undefined,events:true,throttle:80};if(settings!=null){this.settings=this._merge(settings,default_settings)}else{this.settings=default_settings}if(!this._validateProperty(this.settings.property)){this.settings.property="height"}if(this.settings.events){var $this=this;this._bind=function(){$this._applyAll($this)};window.addEventListener("DOMContentLoaded",this._bind,{once:true});if(this.settings.throttle>0)this._bind=this._throttle(this._bind,this.settings.throttle);this._init()}}MatchHeight.prototype._init=function(){window.addEventListener("resize",this._bind);window.addEventListener("orientationchange",this._bind)};MatchHeight.prototype._unbind=function(){window.removeEventListener("resize",this._bind);window.removeEventListener("orientationchange",this._bind)};MatchHeight.prototype._merge=function(o1,o2){if(o1!=null){for(var i in o1){o2[i]=o1[i]}}return o2};MatchHeight.prototype._throttle=function(fn,threshold){let last,deferTimer;return function(){const now=Date.now();if(last&&now<last+threshold){clearTimeout(deferTimer);deferTimer=setTimeout(function(){last=now;fn()},threshold)}else{last=now;fn()}}};MatchHeight.prototype._applyAll=function($this){if($this==null){$this=this}$this._apply();if($this.settings.attributeName&&$this._validateProperty($this.settings.attributeName)){$this._applyDataApi($this.settings.attributeName)}$this._applyDataApi("data-match-height");$this._applyDataApi("data-mh")};MatchHeight.prototype._validateProperty=function(value){return String(value).toLowerCase().match(/^([a-z-]{2,})$/)};MatchHeight.prototype._parse=function(value){return parseFloat(value)||0};MatchHeight.prototype._rows=function(elements){var $this=this;var tolerance=1,lastTop=-1,listRows=[],rows=[];elements.forEach($that=>{var top=$that.getBoundingClientRect().top-$this._parse(window.getComputedStyle($that).getPropertyValue("margin-top"));if(lastTop!=-1&&Math.floor(Math.abs(lastTop-top))>=tolerance){listRows.push(rows);rows=[];lastTop=-1}rows.push($that);lastTop=top});listRows.push(rows);return listRows};MatchHeight.prototype._applyDataApi=function(property){var $this=this;var $row=this.wrapEl.querySelectorAll("["+property+"]");$row.forEach($el=>{var groupId=$el.getAttribute(property);$this.settings=$this._merge({attributeName:property,attributeValue:groupId},$this.settings);$this._apply()})};MatchHeight.prototype._remove=function(){var $elements=[];var opts=this.settings;if(opts.elements){$elements=this.wrapEl.querySelectorAll(opts.elements)}else{if(opts.attributeName&&opts.attributeValue){$elements=this.wrapEl.querySelectorAll("["+opts.attributeName+'="'+opts.attributeValue+'"]')}}$elements.forEach(item=>{item.style.setProperty(opts.property,"");if(item.getAttribute("style")==="")item.removeAttribute("style")})};MatchHeight.prototype._apply=function(){var $this=this;var opts=$this.settings;var $elements=[];if(opts.elements&&opts.elements.trim()!=""){$elements=this.wrapEl.querySelectorAll(opts.elements)}else{if(opts.attributeName&&$this._validateProperty(opts.attributeName)&&opts.attributeValue&&opts.attributeValue.trim()!=""){$elements=this.wrapEl.querySelectorAll("["+opts.attributeName+'="'+opts.attributeValue+'"]')}}var rows=[$elements];if(opts.byRow&&!opts.target){$elements.forEach($that=>{var display=window.getComputedStyle($that).getPropertyValue("display");if(display&&(display!=="inline-block"&&display!=="flex"&&display!=="inline-flex")){display="display: block; "}$that.setAttribute("style-cache",$that.getAttribute("style")||"");$that.setAttribute("style",display+"padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; border-top-width: 0; border-bottom-width: 0; height: 100px; overflow: hidden;")});rows=this._rows($elements);$elements.forEach($that=>{$that.setAttribute("style",$that.getAttribute("style-cache")||"");$that.removeAttribute("style-cache");if($that.getAttribute("style")==="")$that.removeAttribute("style")})}rows.forEach($row=>{var targetHeight=0;if(!opts.target){if(opts.byRow&&$row.length<=1){$row.forEach($that=>{$this._resetStyle($that,opts.property)});return}$row.forEach($that=>{var style=$that.getAttribute("style")||"",display=window.getComputedStyle($that).getPropertyValue("display");if(display&&(display!=="inline-block"&&display!=="flex"&&display!=="inline-flex")){display="block"}$that.setAttribute("style","display: "+display+";");var isTarget=true;if(opts.remove){if(opts.remove instanceof NodeList){opts.remove.forEach($el=>{if($that===$el){isTarget=false}})}else{if($that===opts.remove){isTarget=false}}}if(isTarget){if($that.getBoundingClientRect().height>targetHeight){targetHeight=$that.getBoundingClientRect().height}}if(style){$that.setAttribute("style",style)}else{$that.style.setProperty("display","")}if($that.getAttribute("style")==="")$that.removeAttribute("style")})}else{targetHeight=opts.target.getBoundingClientRect().height}$row.forEach($that=>{var verticalPadding=0;if(opts.target&&$that===opts.target){return}verticalPadding=$this._parse(window.getComputedStyle($that).getPropertyValue("padding-top"))+$this._parse(window.getComputedStyle($that).getPropertyValue("padding-bottom"))+$this._parse(window.getComputedStyle($that).getPropertyValue("border-top-width"))+$this._parse(window.getComputedStyle($that).getPropertyValue("border-bottom-width"));$that.style.setProperty(opts.property,targetHeight-verticalPadding+"px");if($that.getBoundingClientRect().height<targetHeight){$that.style.setProperty(opts.property,targetHeight+"px")}if(opts.remove){if(opts.remove instanceof NodeList){opts.remove.forEach($el=>{if($that===$el){$this._resetStyle($el,opts.property)}})}else{if($that===opts.remove){$this._resetStyle($that,opts.property)}}}})})};MatchHeight.prototype._resetStyle=function($that,property){if(this._validateProperty(property)){$that.style.setProperty(property,"");if($that.getAttribute("style")==="")$that.removeAttribute("style")}}})(); |
{ | ||
"name": "vanilla-match-height", | ||
"version": "1.1.1", | ||
"version": "1.1.2", | ||
"license": "MIT", | ||
@@ -8,2 +8,3 @@ "author": "Simone Miterangelis <simone@mite.it>", | ||
"main": "dist/vanilla-match-height.js", | ||
"types": "dist/vanilla-match-height.d.ts", | ||
"repository": { | ||
@@ -30,3 +31,6 @@ "type": "git", | ||
"test": "echo \"Error: no test specified\" && exit 1" | ||
}, | ||
"devDependencies": { | ||
"typescript": "^5.3.3" | ||
} | ||
} |
@@ -6,3 +6,6 @@ # vanilla-match-height.js # | ||
[![Socket Badge](https://socket.dev/api/badge/npm/package/vanilla-match-height)](https://socket.dev/npm/package/vanilla-match-height) | ||
[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/vanilla-match-height/badge)](https://www.jsdelivr.com/package/npm/vanilla-match-height) | ||
[![npm](https://img.shields.io/npm/v/vanilla-match-height.svg?logo=npm&logoColor=fff&label=npm)](https://www.npmjs.com/package/vanilla-match-height) | ||
[![npm downloads](https://img.shields.io/npm/dm/vanilla-match-height.svg?style=flat-square)](https://www.npmjs.com/package/vanilla-match-height) | ||
[![yarn](https://img.shields.io/npm/v/vanilla-match-height.svg?logo=yarn&logoColor=fff&label=yarn)](https://yarnpkg.com/package?name=vanilla-match-height) | ||
@@ -86,8 +89,8 @@ ## *Inspired by:* jquery-match-height | ||
{ | ||
elements: '', | ||
elements: undefined, | ||
byRow: true, | ||
property: 'height', | ||
target: null, | ||
remove: null, | ||
attributeName: null, | ||
target: undefined, | ||
remove: undefined, | ||
attributeName: undefined, | ||
events: true, | ||
@@ -105,3 +108,3 @@ throttle: 80 | ||
- `attributeName` is an optional for use custom attribute | ||
- `events` is an optional for enable default events, default is `true` | ||
- `events` is `true` or `false` to enable default events | ||
- `throttle` milliseconds to executed resize event, default is `80` | ||
@@ -108,0 +111,0 @@ |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
180501
17
1021
273
1
1