Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vanilla-match-height

Package Overview
Dependencies
Maintainers
1
Versions
21
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vanilla-match-height - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

13

CHANGELOG.md

@@ -1,6 +0,15 @@

<a name="0.0.4"></a>
# 0.0.4 (2023-11-19)
<a name="0.0.6"></a>
# 0.0.6 (2023-11-22)
### release summary
- Removed unused variables
- Removed empty style from one item element
- Fixed test html page
<a name="0.0.5"></a>
# 0.0.5 (2023-11-21)
### release summary
- Added _remove method

@@ -7,0 +16,0 @@ - Removed empty style from elements

7

dist/vanilla-match-height.js
/**
* vanilla-match-height v0.0.5 by @mitera
* vanilla-match-height v0.0.6 by @mitera
* Simone Miterangelis <simone@mite.it>

@@ -74,3 +74,3 @@ * License: MIT

document.addEventListener("DOMContentLoaded", function(event) {
document.addEventListener("DOMContentLoaded", function() {
$this._apply();

@@ -84,3 +84,3 @@ if ($this._validateProperty($this.settings.attributeName)) {

window.addEventListener("resize", function(event) {
window.addEventListener("resize", function() {
$this._apply();

@@ -253,2 +253,3 @@ if ($this._validateProperty($this.settings.attributeName)) {

eval('$that.style.' + opts.property + ' = \'\';');
if ($that.getAttribute('style') == '') $that.removeAttribute('style');
})

@@ -255,0 +256,0 @@ return;

@@ -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};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"}this.settings.property=this._dashToCamel(this.settings.property);this._init()}MatchHeight.prototype._init=function(){var $this=this;document.addEventListener("DOMContentLoaded",function(event){$this._apply();if($this._validateProperty($this.settings.attributeName)){$this._applyDataApi($this.settings.attributeName)}$this._applyDataApi("data-match-height");$this._applyDataApi("data-mh")});window.addEventListener("resize",function(event){$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($that.style.marginTop);if(lastTop!=null&&Math.floor(Math.abs(lastTop-top))>=tolerance){listRows.push(rows);rows=[];lastTop=null;rows.push($that)}else{rows.push($that)}lastTop=top});listRows.push(rows);return listRows};MatchHeight.prototype._dashToCamel=function(input){return input.toLowerCase().replace(/-(.)/g,function(match,group1){return group1.toUpperCase()})};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=>{eval("item.style."+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=$that.style.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=>{eval("$that.style."+opts.property+" = '';")});return}$row.forEach($that=>{var style=$that.getAttribute("style")||"",display=$that.style.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.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($that.style.borderTopWidth)+$this._parse($that.style.borderBottomWidth);verticalPadding+=$this._parse($that.style.paddingTop)+$this._parse($that.style.paddingBottom);eval("$that.style."+opts.property+" = '"+(targetHeight-verticalPadding)+"px'");if($that.getBoundingClientRect().height<targetHeight){eval("$that.style."+opts.property+" = '"+targetHeight+"px'")}if(opts.remove){if(opts.remove instanceof NodeList){opts.remove.forEach($el=>{if($that===$el){eval("$el.style."+opts.property+" = '';");if($el.getAttribute("style")=="")$el.removeAttribute("style")}})}else{if($that===opts.remove){eval("$that.style."+opts.property+" = '';");if($that.getAttribute("style")=="")$that.removeAttribute("style")}}}})})}})();
(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};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"}this.settings.property=this._dashToCamel(this.settings.property);this._init()}MatchHeight.prototype._init=function(){var $this=this;document.addEventListener("DOMContentLoaded",function(){$this._apply();if($this._validateProperty($this.settings.attributeName)){$this._applyDataApi($this.settings.attributeName)}$this._applyDataApi("data-match-height");$this._applyDataApi("data-mh")});window.addEventListener("resize",function(){$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($that.style.marginTop);if(lastTop!=null&&Math.floor(Math.abs(lastTop-top))>=tolerance){listRows.push(rows);rows=[];lastTop=null;rows.push($that)}else{rows.push($that)}lastTop=top});listRows.push(rows);return listRows};MatchHeight.prototype._dashToCamel=function(input){return input.toLowerCase().replace(/-(.)/g,function(match,group1){return group1.toUpperCase()})};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=>{eval("item.style."+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=$that.style.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=>{eval("$that.style."+opts.property+" = '';");if($that.getAttribute("style")=="")$that.removeAttribute("style")});return}$row.forEach($that=>{var style=$that.getAttribute("style")||"",display=$that.style.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.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($that.style.borderTopWidth)+$this._parse($that.style.borderBottomWidth);verticalPadding+=$this._parse($that.style.paddingTop)+$this._parse($that.style.paddingBottom);eval("$that.style."+opts.property+" = '"+(targetHeight-verticalPadding)+"px'");if($that.getBoundingClientRect().height<targetHeight){eval("$that.style."+opts.property+" = '"+targetHeight+"px'")}if(opts.remove){if(opts.remove instanceof NodeList){opts.remove.forEach($el=>{if($that===$el){eval("$el.style."+opts.property+" = '';");if($el.getAttribute("style")=="")$el.removeAttribute("style")}})}else{if($that===opts.remove){eval("$that.style."+opts.property+" = '';");if($that.getAttribute("style")=="")$that.removeAttribute("style")}}}})})}})();
{
"name": "vanilla-match-height",
"version": "0.0.5",
"version": "0.0.6",
"license": "MIT",

@@ -5,0 +5,0 @@ "author": "Simone Miterangelis <simone@mite.it>",

@@ -12,3 +12,3 @@ # vanilla-match-height.js #

[![jquery.match-height.js screenshot](https://github.com/mitera/vanilla-match-height/blob/master/vanilla-match-height.jpg)](https://github.com/mitera/vanilla-matchHeight/archive/refs/heads/master.zip)
[![vanilla-match-height.js screenshot](https://github.com/mitera/vanilla-match-height/blob/master/vanilla-match-height.jpg)](https://github.com/mitera/vanilla-match-height/archive/refs/heads/master.zip)

@@ -34,3 +34,3 @@ ### Modern browsers

Download [vanilla-match-height.js](https://github.com/mitera/vanilla-matchHeight/blob/master/vanilla-match-height.js) and include the script in your HTML file:
Download [vanilla-match-height.js](https://github.com/mitera/vanilla-match-height/blob/master/vanilla-match-height.js) and include the script in your HTML file:

@@ -63,3 +63,3 @@ <script src="vanilla-match-height.js" type="text/javascript"></script>

Call this on the event (the plugin will automatically update on window load).
See the included [test.html](https://github.com/mitera/vanilla-matchHeight/blob/master/test/test.html) for many working examples.
See the included [test.html](https://github.com/mitera/vanilla-match-height/blob/master/test/test.html) for many working examples.

@@ -172,3 +172,3 @@ Also see the [Data API](#data-api) below for a simple, alternative inline usage.

To see what's new or changed in the latest version, see the [changelog](https://github.com/mitera/vanilla-matchHeight/blob/master/CHANGELOG.md)
To see what's new or changed in the latest version, see the [changelog](https://github.com/mitera/vanilla-match-height/blob/master/CHANGELOG.md)

@@ -175,0 +175,0 @@ ### License

/**
* vanilla-match-height v0.0.5 by @mitera
* vanilla-match-height v0.0.6 by @mitera
* Simone Miterangelis <simone@mite.it>

@@ -74,3 +74,3 @@ * License: MIT

document.addEventListener("DOMContentLoaded", function(event) {
document.addEventListener("DOMContentLoaded", function() {
$this._apply();

@@ -84,3 +84,3 @@ if ($this._validateProperty($this.settings.attributeName)) {

window.addEventListener("resize", function(event) {
window.addEventListener("resize", function() {
$this._apply();

@@ -253,2 +253,3 @@ if ($this._validateProperty($this.settings.attributeName)) {

eval('$that.style.' + opts.property + ' = \'\';');
if ($that.getAttribute('style') == '') $that.removeAttribute('style');
})

@@ -255,0 +256,0 @@ return;

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc