vanilla-match-height
Advanced tools
Comparing version 0.0.5 to 0.0.6
@@ -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 |
/** | ||
* 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
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
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
169734
844